:root{
  --cream:#f8efd9;
  --cream2:#fffaf0;
  --brown:#72502f;
  --brown-dark:#49331f;
  --gold:#c99c3a;
  --text:#4e4439;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Montserrat,Arial,sans-serif;
  background:var(--cream2);
}
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.97);
  box-shadow:0 2px 18px rgba(65,43,20,.10);
}
.header-inner{
  width:min(1500px,94%);
  min-height:92px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:24px;
}
.brand{display:flex;align-items:center;min-width:230px}
.brand img{
  display:block;
  width:auto;
  height:68px;
  max-width:230px;
  object-fit:contain;
}
.main-nav{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(18px,2.2vw,42px);
}
.main-nav a,.mobile-nav a{
  color:#777;
  text-decoration:none;
  font-size:clamp(12px,1vw,16px);
  font-weight:700;
  letter-spacing:.2px;
  padding:10px 0;
  white-space:nowrap;
}
.main-nav a:hover,.main-nav a.active{color:var(--brown-dark)}
.main-nav a.active{border-top:3px solid #e8cc78}
.booking-btn,.hero-btn{
  text-decoration:none;
  background:var(--brown);
  color:#fff;
  font-weight:800;
  border-radius:999px;
  white-space:nowrap;
  transition:.2s ease;
}
.booking-btn{
  padding:14px 25px;
  font-size:clamp(12px,1vw,15px);
}
.booking-btn:hover,.hero-btn:hover{transform:translateY(-2px);background:var(--brown-dark)}
.scissors{font-size:20px;margin-right:8px}
.menu-toggle{display:none;border:0;background:transparent;font-size:30px;color:var(--brown);cursor:pointer}
.mobile-nav{display:none}

.hero{
  position:relative;
  min-height:690px;
  overflow:hidden;
  background:var(--cream);
  background-image:linear-gradient(rgba(248,239,217,.86),rgba(248,239,217,.94)),url("/HINH TRANG CHU/HINH-TRANG-CHU.jpg");
  background-size:cover;
  background-position:center;
}
.hero-inner{
  position:relative;z-index:1;
  width:min(1500px,94%);
  min-height:690px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1.08fr;
  align-items:center;
  gap:clamp(35px,5vw,90px);
  padding:55px 0 65px;
}
.hero-copy{max-width:690px}
.eyebrow{
  font-size:clamp(18px,1.7vw,27px);
  font-weight:500;
  margin-bottom:15px;
  color:#594b3b;
}
h1{
  margin:0;
  color:#493723;
  font-size:clamp(34px,4vw,62px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-1.5px;
}
h1 span{
  font-family:"Playfair Display",serif;
  font-size:.63em;
  letter-spacing:0;
  font-weight:600;
  color:var(--brown);
}
.gold-line{width:75px;height:3px;background:var(--gold);margin:24px 0}
.hero-copy p{
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.85;
  margin:0 0 13px;
}
.lead{font-size:clamp(17px,1.35vw,21px)!important}
.beauty-note{color:#5e492e}
.hero-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:16px;
  padding:17px 30px;
  font-size:clamp(14px,1.1vw,17px);
  border-radius:12px;
}
.hero-photo{display:flex;justify-content:center}
.photo-frame{
  position:relative;
  width:min(100%,720px);
  padding:18px;
  border:3px solid #b99325;
  border-radius:28px;
  background:rgba(255,255,255,.12);
}
.photo-frame:before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(201,156,58,.65);
  border-radius:20px;
  pointer-events:none;
}
.photo-frame img{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1.35/1;
  object-fit:cover;
  border-radius:18px;
}
.contact-strip{
  background:#dce8f2;
  padding:30px 4%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:35px;
  flex-wrap:wrap;
}
.contact-info{
  display:flex;
  flex-direction:column;
  gap:16px;
  font-size:clamp(14px,1.15vw,18px);
}
.contact-row{display:flex;align-items:center;gap:14px}
.contact-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  color:#e94c55;
  font-size:23px;
}
.social-row{
  display:flex;
  flex:1;
  max-width:1050px;
  gap:14px;
}
.social{
  flex:1;
  min-width:0;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:13px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:clamp(12px,1.15vw,18px);
  white-space:nowrap;
  transition:.2s;
}
.social:hover{transform:translateY(-2px);filter:brightness(.95)}
.social span{font-size:22px}
.whatsapp{background:#20c967}
.facebook{background:#1877e8}
.instagram{background:linear-gradient(90deg,#c52b79,#ff6326)}
.tiktok{background:#171a20}
.youtube{background:#e62117}
.placeholder{
  min-height:300px;
  padding:90px 5%;
  text-align:center;
  background:#fff;
}
.placeholder h2{
  font-family:"Playfair Display",serif;
  color:var(--brown);
  font-size:38px;
}

@media (max-width:1050px){
  .header-inner{min-height:78px}
  .brand{min-width:190px}
  .brand img{height:58px;max-width:190px}
  .main-nav{gap:15px}
  .booking-btn{padding:12px 16px}
  .hero-inner{grid-template-columns:1fr 1fr}
  .contact-strip{flex-direction:column;align-items:stretch}
  .contact-info{align-items:center}
  .social-row{max-width:none;width:100%}
}
@media (max-width:780px){
  .header-inner{min-height:70px;width:92%}
  .brand img{height:52px;max-width:180px}
  .main-nav,.booking-btn{display:none}
  .menu-toggle{display:block;margin-left:auto}
  .mobile-nav{
    display:flex;
    max-height:0;
    overflow:hidden;
    flex-direction:column;
    background:#fff;
    transition:max-height .25s ease;
    border-top:1px solid #eee;
  }
  .mobile-nav.show{max-height:420px}
  .mobile-nav a{padding:13px 6%;border-bottom:1px solid #f0eee9}
  .hero{min-height:auto}
  .hero-inner{
    min-height:auto;
    grid-template-columns:1fr;
    padding:42px 0 45px;
    gap:30px;
  }
  .hero-copy{max-width:none}
  .hero-photo{order:2}
  h1{font-size:clamp(31px,9vw,48px)}
  .hero-copy p{font-size:15px;line-height:1.7}
  .photo-frame{padding:10px;border-radius:18px}
  .photo-frame img{border-radius:12px;aspect-ratio:1.25/1}
  .contact-strip{padding:25px 4%}
  .contact-info{align-items:flex-start}
  .social-row{
    gap:8px;
    flex-wrap:nowrap;
  }
  .social{
    height:54px;
    padding:0 6px;
    border-radius:10px;
    gap:5px;
    font-size:clamp(9px,2.8vw,14px);
  }
  .social span{font-size:18px}
}
@media (max-width:430px){
  .brand img{height:46px;max-width:160px}
  .hero-inner{width:90%;padding-top:32px}
  .eyebrow{font-size:17px}
  .gold-line{margin:18px 0}
  .hero-btn{width:100%;justify-content:center}
  .contact-info{font-size:13px}
  .social{height:48px;font-size:9px}
  .social span{font-size:15px}
}


/* =========================================================
   H.A.U RESPONSIVE V1 — PC / TABLET / MOBILE
   Final safety layer: prevents horizontal overflow and lets
   content shrink/wrap instead of being clipped.
   ========================================================= */
html,body{max-width:100%;}
body{overflow-x:hidden;}
img,svg,video,iframe{max-width:100%;}
input,select,textarea,button{max-width:100%;box-sizing:border-box;}

/* Tablet: keep the desktop look but give every column room to shrink. */
@media (min-width:769px) and (max-width:1100px){
  .header-inner{width:96%;gap:10px;min-height:74px;}
  .brand{min-width:145px;}
  .brand img{height:54px;max-width:155px;}
  .main-nav{gap:5px;min-width:0;}
  .main-nav a{font-size:11px;min-width:0;padding:8px 6px;}
  .booking-btn{padding:11px 12px;font-size:11px;}
  .hero-inner{width:94%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;}
  .hero-copy,.hero-photo,.photo-frame{min-width:0;}
  .contact-strip{padding-left:3%;padding-right:3%;gap:20px;}
  .contact-info{min-width:0;}
  .contact-row{min-width:0;align-items:flex-start;}
  .contact-row>span:last-child{min-width:0;overflow-wrap:anywhere;}
  .social-row{min-width:0;gap:7px;}
  .social{min-width:0;font-size:clamp(9px,1.45vw,13px);gap:5px;padding:0 3px;}
  .social span{font-size:18px;}
}

/* Small tablets / large phones: stack the hero instead of squeezing it. */
@media (min-width:769px) and (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:24px;padding-top:38px;padding-bottom:45px;}
  .hero-copy{max-width:780px;margin:0 auto;width:100%;}
  .hero-photo{width:100%;}
  .photo-frame{width:min(100%,680px);margin:0 auto;}
}

@media (max-width:768px){
  .hero-copy,.hero-photo,.contact-strip,.contact-info,.social-row{min-width:0;}
  .hero-copy p,.contact-row,.social{overflow-wrap:anywhere;}
  .contact-strip{gap:16px;}
  .contact-row{align-items:flex-start;}
  .social-row{width:100%;max-width:none;}
  .social{min-width:0;max-width:none;}
}

@media (max-width:430px){
  .hero-copy{padding-left:18px;padding-right:18px;}
  .contact-strip{padding-left:12px;padding-right:12px;}
}