/* ============================================================
   MC PROFILE — Warm Cinematic
   Palette: white / cream / gold champagne + warm accents
   Fonts:  Be Vietnam Pro (body), Playfair Display (display)
   ============================================================ */

:root{
  --cream:      #FBF7F0;
  --cream-2:    #F4ECE0;
  --white:      #FFFFFF;
  --ink:        #2A2521;
  --ink-soft:   #6B615A;
  --gold:       #C9A15B;
  --gold-deep:  #A8823D;
  --gold-soft:  #E8D6B0;
  --terracotta: #C0663F;
  --slate:      #4A5A63;
  --plum:       #6E4A5C;
  --line:       rgba(42,37,33,.12);
  --shadow:     0 20px 60px -20px rgba(60,45,20,.35);
  --radius:     18px;
  --maxw:       1240px;
  --ease:       cubic-bezier(.22,.61,.36,1);

  /* Focal point mặc định cho ảnh cover-crop (Section 2 trở xuống).
     30% = giữ khuôn mặt ở khoảng 1/3 trên. Override từng ảnh bằng
     style="... ; --focus: 50% 20%" nếu ảnh đó lệch. */
  --focus:      50% 30%;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  font-family:"Be Vietnam Pro", system-ui, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:14px;
}
.eyebrow.center{ text-align:center; }

.section-title{
  font-family:"Playfair Display", serif;
  font-weight:600; line-height:1.22;      /* thoáng hơn để không cắt dấu tiếng Việt */
  padding-top:.06em;                        /* chừa chỗ cho dấu ở dòng đầu */
  font-size:clamp(2rem, 4vw, 3.2rem);
  letter-spacing:-.01em;
  text-wrap:balance;                        /* cân dòng, tránh dòng cuối bị cụt */
}
.section-title.center{ text-align:center; }
.section-title em{ font-style:italic; color:var(--gold-deep); }

.lead{ font-size:1.08rem; color:var(--ink-soft); max-width:46ch; margin:18px 0; text-wrap:pretty; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; font-weight:600; font-size:.95rem;
  padding:13px 26px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:all .3s var(--ease);
}
.btn.full{ width:100%; }
.btn-booking{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#fff; box-shadow:0 8px 24px -8px rgba(168,130,61,.7);
}
.btn-booking:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(168,130,61,.85); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:#000; transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:var(--gold-deep); color:var(--gold-deep); }
.btn-ghost:hover{ background:var(--gold-deep); color:#fff; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
/* mobile: ẩn header khi cuộn xuống, hiện khi cuộn lên */
.site-header.header-hidden{ transform:translateY(-100%); }
.site-header.scrolled{
  background:rgba(251,247,240,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff;
  font-family:"Playfair Display",serif; font-weight:700; font-size:1.2rem;
}
.brand-name{ font-family:"Playfair Display",serif; font-weight:600; font-size:1.25rem; letter-spacing:.02em; }
.brand-name em{ font-style:italic; color:var(--gold-deep); }

.main-nav{ display:flex; gap:34px; }
.main-nav a{
  font-weight:500; font-size:.98rem; position:relative; padding:4px 0; color:var(--ink);
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--gold-deep); transition:width .3s var(--ease);
}
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); transition:.3s; }

/* Language switch */
.lang-switch{
  display:inline-flex; align-items:center; border:1px solid var(--line);
  border-radius:999px; overflow:hidden; background:var(--white);
}
.lang-btn{
  border:none; background:transparent; cursor:pointer; font:inherit;
  font-weight:600; font-size:.58rem; letter-spacing:.04em; color:var(--ink-soft);
  padding:4px 7px; transition:background .25s var(--ease), color .25s var(--ease);
}
.lang-btn + .lang-btn{ border-left:1px solid var(--line); }
.lang-btn:hover{ color:var(--ink); }
.lang-btn.active{ background:var(--ink); color:var(--cream); }

/* ============================================================
   SECTION 1 — HERO (hover-expand panels)
   ============================================================ */
.hero{ padding-top:76px; background:var(--cream); }
.hero-intro{ text-align:center; padding:22px 28px 18px; }
.hero-intro .eyebrow{ font-size:.68rem; margin-bottom:8px; }
.hero-title{
  font-family:"Playfair Display",serif; font-weight:600;
  font-size:clamp(1.5rem, 3vw, 2.4rem); line-height:1.06; letter-spacing:-.01em;
  text-wrap:balance;
}
.hero-title em{ font-style:italic; color:var(--gold-deep); }
.hero-sub{ color:var(--ink-soft); margin-top:8px; font-size:.9rem; }

/* --- the panels row (full-bleed: dàn sát 2 biên) --- */
.hero-panels{
  display:flex; gap:12px;
  width:100%; max-width:none; margin:0 auto;
  padding:0 12px 24px;
  height:min(80vh, calc(100vh - 200px));
  min-height:440px;
}
.panel{
  position:relative; flex:1 1 0; min-width:0;
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  background-image:var(--img); background-size:cover; background-position:var(--focus);
  box-shadow:var(--shadow);
  transition:flex-grow .55s var(--ease), box-shadow .55s var(--ease), filter .55s var(--ease);
  filter:saturate(1);
}
/* darkening + gradient for text legibility */
.panel-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(30,22,14,.72) 0%, rgba(30,22,14,.15) 45%, rgba(30,22,14,.05) 100%);
  transition:opacity .55s var(--ease);
}

/* ► default state: 3 equal panels filling full width (no hover) */

/* ► when the row is hovered: co MẠNH các panel còn lại (bề ngang nhỏ hẳn)… */
.hero-panels:hover .panel{ flex-grow:.32; filter:saturate(.82) brightness(.9); }
/* …để panel được hover phóng to chiếm nhiều không gian hơn */
.hero-panels:hover .panel:hover{ flex-grow:4.2; filter:saturate(1.05) brightness(1); }
/* NEO GIỮ MẶT: khung phóng to (rộng-thấp) chỉ cắt dọc → ghim tiêu điểm dọc lên vùng mặt */
.hero-panels:hover .panel:hover{ background-position-y: var(--focus-y, 18%); }
.hero-panels .panel:hover{ box-shadow:0 30px 70px -20px rgba(60,40,10,.55); }
.hero-panels:hover .panel:hover .panel-overlay{ opacity:.9; }

.panel-content{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px 30px 34px; color:#fff;
  display:flex; flex-direction:column; gap:6px;
}
.panel-tag{
  font-family:"Playfair Display",serif; font-style:italic;
  font-size:1.1rem; color:var(--gold-soft); opacity:.9;
}
.panel-name{
  font-family:"Playfair Display",serif; font-weight:600;
  font-size:clamp(1.6rem, 2.4vw, 2.4rem); line-height:1.05;
}
.panel-desc{
  font-size:1rem; color:rgba(255,255,255,.9); max-width:34ch;
  opacity:0; max-height:0; transform:translateY(8px);
  transition:opacity .45s var(--ease) .05s, transform .45s var(--ease) .05s, max-height .45s var(--ease);
  overflow:hidden;
}
.panel-cta{
  font-weight:600; color:var(--gold-soft); font-size:.95rem; margin-top:6px;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease) .12s, transform .45s var(--ease) .12s;
}
/* reveal description + CTA only on the expanded panel */
.hero-panels:hover .panel:hover .panel-desc{ opacity:1; max-height:120px; transform:none; }
.hero-panels:hover .panel:hover .panel-cta{ opacity:1; transform:none; }

/* ============================================================
   SECTION 2 — INFO
   ============================================================ */
.info{ padding:110px 0; }
.info-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; }
.info-photo{ order:-1; }   /* hoán đổi: ảnh sang TRÁI, nội dung sang PHẢI */
.info-list{ list-style:none; margin:26px 0; border-top:1px solid var(--line); }
.info-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.info-list span{ color:var(--ink-soft); font-size:.92rem; letter-spacing:.02em; }
.info-list strong{ font-weight:600; text-align:right; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 30px; }
.chip{
  font-size:.85rem; padding:7px 15px; border-radius:999px;
  background:var(--white); border:1px solid var(--line); color:var(--ink-soft);
}
.info-photo{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius);
  background-image:var(--img); background-size:cover; background-position:var(--focus);
  box-shadow:var(--shadow);
}
.photo-badge{
  position:absolute; top:18px; left:18px; background:rgba(255,255,255,.92);
  color:var(--ink); font-size:.8rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:7px 14px; border-radius:999px;
}

/* ============================================================
   SHOWREEL — VIDEO & VOICE
   ============================================================ */
.showreel{ padding:110px 0; background:var(--cream-2); }
.showreel .lead{ max-width:none; margin-bottom:34px; }
.showreel .lead .rl1, .showreel .lead .rl2{ display:block; }
/* Desktop: mỗi dòng nằm trọn 1 hàng ("gần gũi" không rớt xuống dòng 3).
   Dưới 900px (browser thu nhỏ / mobile) → tự xuống dòng bình thường. */
@media (min-width:900px){
  .showreel .lead .rl1, .showreel .lead .rl2{ white-space:nowrap; }
}
.reel-main{ display:contents; }   /* mặc định trong suốt; chỉ thành flex ở mobile ngang */
.reel-video{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  background:#000; aspect-ratio:16/9;
}
.reel-video video{ width:100%; height:100%; object-fit:cover; display:block; }

.reel-more{ margin-top:28px; text-align:center; }
.reel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
.reel-card{
  position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  background-size:cover; background-position:var(--focus); box-shadow:var(--shadow);
  display:flex; align-items:flex-end; isolation:isolate;
}
.reel-card::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(30,22,14,.75), rgba(30,22,14,.05) 65%); }
.reel-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:1.1rem; padding-left:4px;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.reel-card:hover .reel-play{ transform:translate(-50%,-50%) scale(1.12); background:#fff; }
.reel-cap{ position:relative; z-index:1; color:#fff; font-weight:600; padding:16px 18px; font-size:.98rem; }

@media (max-width:720px){
  .reel-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   SECTION 3 — PHILOSOPHY
   ============================================================ */
.philosophy{
  padding:120px 0; background:var(--ink); color:var(--cream);
  position:relative; overflow:hidden;
}
.philosophy-inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:70px; align-items:center; }
.philo-text{ order:-1; }   /* hoán đổi: nội dung sang TRÁI, cụm ảnh sang PHẢI */
.philosophy .eyebrow{ color:var(--gold-soft); }
.philo-images{ position:relative; height:460px; }
.pi{
  position:absolute; border-radius:14px; background-size:cover; background-position:var(--focus);
  background-image:var(--img); box-shadow:0 24px 50px -22px rgba(0,0,0,.6);
  transition:transform .6s var(--ease);
}
/* cascade so le — cả 3 ảnh đều hiện, chỉ chồng nhẹ ở mép */
.pi-1{ width:54%; height:54%; top:0;    left:0;   transform:rotate(-4deg); z-index:2; }
.pi-2{ width:50%; height:50%; top:6%;   right:0;  transform:rotate(4deg);  z-index:1; }
.pi-3{ width:56%; height:50%; bottom:0; left:18%; transform:rotate(-2deg); z-index:3; }
.philosophy-inner:hover .pi-1{ transform:rotate(-6deg) translateY(-6px); }
.philosophy-inner:hover .pi-2{ transform:rotate(6deg)  translateY(-6px); }
.philosophy-inner:hover .pi-3{ transform:rotate(-3deg) translateY(6px); }
.quote{
  font-family:"Playfair Display",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.6rem, 2.8vw, 2.5rem); line-height:1.25; margin:6px 0 24px;
  text-wrap:balance;
}
.quote em{ color:var(--gold-soft); font-style:italic; }
.philo-body{ color:rgba(251,247,240,.78); max-width:46ch; text-wrap:pretty; }

/* ============================================================
   SECTION 4 — BRANDS
   ============================================================ */
.brands{ padding:110px 0; }
.brand-tier{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:16px; margin:38px auto 10px; max-width:720px;
}
.tier-item{
  display:grid; place-items:center; text-align:center;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tier-item img{ width:auto; object-fit:contain; }
.tier-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

/* Phân cấp: dự án lớn → logo to hơn */
.tier-item.tier-lg{ padding:20px 32px; height:88px; }
.tier-item.tier-lg img{ max-height:46px; max-width:150px; }
.tier-item.tier-md{ padding:16px 26px; height:72px; }
.tier-item.tier-md img{ max-height:36px; max-width:120px; }
.tier-item.tier-sm{ padding:14px 22px; height:64px; }
.tier-item.tier-sm img{ max-height:30px; max-width:104px; }

.tier-note{ text-align:center; color:var(--ink-soft); font-size:.86rem; margin-top:14px; }

/* fallback chữ khi logo ảnh lỗi */
.logo-fallback{ font-weight:700; color:var(--ink); font-size:.95rem; letter-spacing:.02em; }
.tier-item .logo-fallback{ font-size:1.1rem; }
.tier-item.tier-lg .logo-fallback{ font-size:1.35rem; }

.brand-library{ margin-top:64px; }
.library-controls{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:34px;
}
.search-wrap{ position:relative; }
.search-wrap .search-icon{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--ink-soft);
}
#brandSearch{
  width:min(360px, 78vw); padding:13px 16px 13px 44px; font:inherit;
  border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink);
}
#brandFilter{
  padding:13px 40px 13px 18px; font:inherit; border:1px solid var(--line);
  border-radius:999px; background:var(--white); color:var(--ink); cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B615A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
#brandSearch:focus, #brandFilter:focus{ outline:none; border-color:var(--gold); }

.brand-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:16px;
}
.brand-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  height:110px; padding:16px;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  text-align:center; transition:all .28s var(--ease);
}
.brand-cell img{
  max-height:42px; max-width:130px; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:filter .28s var(--ease), opacity .28s var(--ease);
}
.brand-cell:hover{ border-color:var(--gold-soft); transform:translateY(-3px); box-shadow:var(--shadow); }
.brand-cell:hover img{ filter:grayscale(0); opacity:1; }
.brand-cell small{ font-weight:400; font-size:.72rem; color:var(--gold-deep); letter-spacing:.06em; }
.brand-empty{ text-align:center; color:var(--ink-soft); padding:40px; }
.library-more{ text-align:center; margin-top:34px; }

/* ============================================================
   BOOKING
   ============================================================ */
.booking{ padding:110px 0; background:var(--cream-2); }
.booking-inner{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }

/* Popup xác nhận (dùng cho booking) */
.app-popup{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  background:rgba(20,14,8,.55); padding:20px; }
.app-popup[hidden]{ display:none; }
.app-popup-box{ background:var(--white); border-radius:var(--radius); padding:34px 28px 28px; max-width:400px;
  width:100%; text-align:center; box-shadow:0 30px 70px -25px rgba(0,0,0,.6); }
.app-popup-icon{ width:58px; height:58px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  font-size:1.7rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.app-popup-icon.warn{ background:linear-gradient(135deg,#e07a5f,#c1553a); }
.app-popup-title{ font-family:"Playfair Display",serif; font-weight:600; font-size:1.5rem; color:var(--ink); margin-bottom:12px; }
.app-popup-box p{ font-size:1rem; line-height:1.6; color:var(--ink-soft); margin-bottom:22px; }
.app-popup-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.app-popup-actions .btn{ min-width:140px; }
.booking-form{
  background:var(--white); padding:34px; border-radius:var(--radius);
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.85rem; color:var(--ink-soft); font-weight:500; }
.field input, .field select, .field textarea{
  font:inherit; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:var(--cream); color:var(--ink); resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.form-note{ text-align:center; color:var(--gold-deep); font-weight:500; font-size:.92rem; }
.field input[type="file"]{ padding:9px 12px; font-size:.88rem; cursor:pointer; }
.field input[type="file"]::file-selector-button{
  font:inherit; font-size:.82rem; margin-right:10px; padding:6px 12px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--cream); padding:44px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-brand{ color:var(--cream); }
.footer-brand em{ color:var(--gold-soft); }
.footer-nav{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-nav a{ color:rgba(251,247,240,.8); font-size:.94rem; }
.footer-nav a:hover{ color:var(--gold-soft); }
.copyright{ color:rgba(251,247,240,.5); font-size:.85rem; }

/* ============================================================
   SUBPAGE — SHOWCASE
   ============================================================ */
.showcase{ padding-bottom:100px; }
.showcase .section-title{ margin-bottom:34px; }

.sc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; }

.sc-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/5; display:flex; box-shadow:var(--shadow); isolation:isolate;
  border:none; padding:0; margin:0; width:100%; cursor:pointer; text-align:left;
  background:var(--cream-2); font:inherit; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sc-card:hover{ transform:translateY(-4px); box-shadow:0 22px 46px -20px rgba(60,40,10,.55); }
.sc-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.sc-card-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 22%; z-index:-2;
  transition:transform .6s var(--ease);
}
.sc-card:hover .sc-card-media{ transform:scale(1.06); }
.sc-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(30,22,14,.86), rgba(30,22,14,.12) 55%, rgba(30,22,14,0) 78%);
}
.sc-flag{
  position:absolute; top:14px; left:14px; z-index:1;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; padding:6px 12px; border-radius:999px;
}
.sc-card-count{
  position:absolute; top:14px; right:14px; z-index:1;
  background:rgba(20,14,8,.55); color:#fff; font-size:.72rem; font-weight:500;
  padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px);
}
.sc-card-body{ margin-top:auto; padding:20px 20px 22px; color:#fff; z-index:1; }
.sc-card-title{ display:block; font-family:"Playfair Display",serif; font-weight:600; font-size:1.25rem; line-height:1.18; }
.sc-card-brand{ display:block; margin-top:7px; font-size:.92rem; font-weight:600; color:var(--gold-soft); }
.sc-card-date{ display:block; margin-top:2px; font-size:.85rem; color:rgba(255,255,255,.78); }

/* ============================================================
   LIGHTBOX (dùng chung — mở trực tiếp bộ ảnh show)
   ============================================================ */
.lb{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:#100b07; overflow:hidden; }
.lb.open{ display:flex; }
.lb-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(40px) brightness(.42) saturate(1.15); transform:scale(1.12); z-index:0; }
.lb img{ position:relative; z-index:1; max-width:96vw; max-height:92vh; object-fit:contain;
  border-radius:8px; box-shadow:0 30px 80px -20px rgba(0,0,0,.85); user-select:none; }
.lb-btn, .lb-close, .lb-count, .lb-title{ z-index:2; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; font-size:1.5rem;
  display:grid; place-items:center; transition:background .2s; }
.lb-btn:hover{ background:rgba(255,255,255,.28); }
.lb-prev{ left:18px; } .lb-next{ right:18px; }
.lb-close{ position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; font-size:1.3rem; }
.lb-close:hover{ background:rgba(255,255,255,.28); }
.lb-count{ position:absolute; top:24px; left:50%; transform:translateX(-50%); color:#fff; font-size:.9rem;
  letter-spacing:.1em; background:rgba(0,0,0,.35); padding:6px 14px; border-radius:999px; }
.lb-title{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); max-width:80vw;
  text-align:center; color:#fff; font-family:"Playfair Display",serif; font-size:1.05rem;
  background:rgba(0,0,0,.35); padding:8px 18px; border-radius:999px; }
@media (max-width:600px){
  .lb-btn{ width:44px; height:44px; font-size:1.2rem; } .lb-prev{ left:8px; } .lb-next{ right:8px; }
  .lb-title{ font-size:.9rem; bottom:14px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .info-grid, .philosophy-inner, .booking-inner{ grid-template-columns:1fr; gap:40px; }
  .philo-images{ height:380px; }
  .info-photo{ max-width:440px; }
}

@media (max-width: 780px){
  /* --- header gọn hơn trên mobile --- */
  .header-inner{ height:60px; }
  .site-header.scrolled{ backdrop-filter:blur(14px); }

  .main-nav{
    position:fixed; inset:60px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(251,247,240,.98); backdrop-filter:blur(14px);
    padding:10px 28px 20px; box-shadow:0 12px 24px -12px rgba(0,0,0,.25);
    transform:translateY(-120%); transition:transform .35s var(--ease); z-index:90;
  }
  .main-nav.open{ transform:translateY(0); }
  .main-nav a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:flex; }

  /* (4) tên MC gọn 1 dòng, không rớt chữ */
  .brand-name{ font-size:.92rem; white-space:nowrap; }
  /* (3) nút Booking thu ~50% */
  .btn-booking{ padding:6px 13px; font-size:.76rem; }

  /* (2) bỏ khoảng trống thừa trên cùng */
  .hero{ padding-top:60px; }
  .hero-intro{ padding:10px 20px 8px; }
  /* mobile không có hover → bỏ gợi ý "Rê chuột…" */
  .hover-hint{ display:none; }

  /* (5) Section 1: stack dọc; mỗi ảnh tỉ lệ dọc 4:5 → cao cân đối với bề ngang */
  .hero-panels{
    flex-direction:column; height:auto;
    padding:0 12px 12px; gap:10px;
  }
  .panel{ flex:none; aspect-ratio:2/1; height:auto; }
  .hero-panels:hover .panel,
  .hero-panels:hover .panel:hover{ flex-grow:0; filter:none; }   /* không co/giãn trên mobile */

  /* text chính: hạ hẳn góc TRÁI DƯỚI, luôn hiện, nền tối để không bị che */
  .panel-overlay{
    background:linear-gradient(to top,
      rgba(24,18,12,.88) 0%, rgba(24,18,12,.40) 40%, rgba(24,18,12,0) 70%);
  }
  .panel-content{ padding:16px 18px 18px; align-items:flex-start; text-align:left; gap:3px; }
  .panel-desc{ display:none; }               /* ẩn mô tả dài để tránh che ảnh */
  .panel-cta{ opacity:1; transform:none; }   /* CTA luôn hiện */

  /* (6) chip nhỏ lại → khu vực chỉ còn ~2 dòng */
  .chips{ gap:6px; margin:4px 0 22px; }
  .chip{ font-size:.72rem; padding:4px 10px; }

  /* (7) thu ngắn khoảng cách giữa các section */
  .info, .showreel, .philosophy, .brands, .booking{ padding:52px 0; }
  .showcase{ padding-bottom:56px; }

  /* Section 2 (Thông tin): siết khoảng trống các dòng → gọn 1 màn hình */
  .info{ padding:36px 0; }
  .info-grid{ gap:20px; }
  .info .section-title{ font-size:1.7rem; margin-bottom:2px; }
  .info .lead{ margin:8px 0; font-size:.96rem; }
  .info-list{ margin:12px 0; }
  .info-list li{ padding:8px 0; }
  .info-list span{ font-size:.86rem; }
  .info-list strong{ font-size:.9rem; }
  .info .chips{ margin:2px 0 14px; }
  .info .btn-dark{ padding:10px 22px; font-size:.9rem; }
  .info-photo{ aspect-ratio:3/2; max-width:none; }   /* ảnh thấp lại để đủ 1 màn hình */

  /* Section 3 (Showreel): giữ đúng 3 video, cao bằng ảnh Section 1 (2:1) */
  .reel-video{ display:none; }                       /* bỏ video lớn → tổng còn 3 video */
  .reel-grid{ grid-template-columns:1fr; gap:10px; margin-top:0; }
  .reel-card{ aspect-ratio:2/1; }
}

@media (max-width: 720px){
  .sc-grid{ grid-template-columns:repeat(auto-fill,minmax(46%,1fr)); gap:14px; }
  .sc-card-title{ font-size:1.05rem; }
}

@media (max-width: 480px){
  .container{ padding:0 20px; }
  .brand-grid{ grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
  /* brand tier vẫn giữ phân cấp, chỉ thu nhẹ */
  .tier-item.tier-lg{ padding:16px 24px; height:76px; }
  .tier-item.tier-lg img{ max-height:38px; max-width:126px; }
  .tier-item.tier-sm{ padding:12px 18px; height:58px; }
  .tier-item.tier-sm img{ max-height:26px; max-width:92px; }
}

/* Section 5 (Brand) — chỉ mobile màn hình DỌC */
@media (max-width: 780px) and (orientation: portrait){
  /* 3 logo lớn xếp ngang 1 hàng, kích thước BẰNG NHAU (= PNJ) */
  .brand-tier{ flex-wrap:nowrap; gap:8px; align-items:stretch; max-width:none; }
  .tier-item{ min-width:0; }
  .tier-item.tier-lg, .tier-item.tier-sm{ flex:1; padding:16px 10px; height:74px; }
  .tier-item.tier-lg img, .tier-item.tier-sm img{ max-height:40px; max-width:92%; }

  /* bỏ TOÀN BỘ thanh điều khiển: ô search + dropdown "Tất cả ngành" */
  .library-controls{ display:none; }

  /* lưới 3 cột × 4 hàng = 12 logo; phần còn lại qua nút "Xem thêm" */
  .brand-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .library-more{ display:block; margin-top:20px; }

  /* ô giữ nguyên kích thước; logo rõ */
  .brand-cell{ height:64px; padding:8px 6px; gap:2px; }
  .brand-cell img{ max-height:29px; max-width:92%; }
  .brand-cell small{ display:none; }

  /* spacing cân đối: bỏ gap thừa trên lưới + gọn đáy section */
  .brands{ padding:40px 0; }
  .brand-library{ margin-top:20px; }
  .library-more{ margin-top:16px; }

  /* nút "Xem thêm": pill viền mảnh, nhạt màu, chữ nhỏ — tinh tế */
  #brandMore{
    padding:7px 20px; font-size:.8rem; font-weight:500; letter-spacing:.02em;
    border:1px solid var(--line); color:var(--ink-soft); background:transparent;
  }
  #brandMore:hover{ background:transparent; border-color:var(--gold-soft); color:var(--gold-deep); }

  /* Section 6 (Booking): gói gọn trong 1 màn hình dọc */
  .booking{ padding:30px 0; }
  .booking-inner{ gap:14px; }
  .booking .section-title{ font-size:1.6rem; margin-bottom:2px; }
  .booking .lead{ margin:6px 0; font-size:.92rem; }
  .contact-list{ margin-top:8px; }
  .contact-list li{ padding:3px 0; }
  .contact-list .contact-email{ display:none; }      /* remove dòng Email */
  .booking-form{ padding:16px; gap:9px; }
  .booking-form .field{ gap:3px; }
  .booking-form .field label{ font-size:.8rem; }
  .booking-form .field input,
  .booking-form .field select,
  .booking-form .field textarea{ padding:9px 11px; }
  .booking-form textarea{ min-height:46px; }
  .booking-form .btn-dark.full{ padding:11px; }
}

/* ============================================================
   CHỈ PC (desktop: rộng + cao)
   ============================================================ */
@media (min-width: 781px) and (min-height: 501px){
  /* anchor dừng đúng dưới header (76px) → không lộ dải section trước */
  html{ scroll-padding-top:76px; }
  /* kéo nội dung Thông tin & Showreel sát menu hơn khi điều hướng tới */
  .info{ padding-top:48px; }
  .showreel{ padding-top:48px; }

  /* Section 5 (Brand): section vừa trọn 1 khung hình, nội dung canh giữa */
  .brands{
    min-height:100vh; box-sizing:border-box;
    display:flex; align-items:center; padding:48px 0;
  }
  .brands .container{ width:100%; }

  /* bỏ ô Search + dropdown "Tất cả ngành" */
  .library-controls{ display:none; }
  .brand-library{ margin-top:44px; }

  /* HOÁN ĐỔI: logo CHÍNH (tier) to hơn · logo PHỤ (grid) nhỏ hơn */
  .brand-tier{ gap:20px; margin:38px auto 12px; }
  /* 3 brand lớn: KHUNG + LOGO bằng nhau */
  .tier-item.tier-lg, .tier-item.tier-sm{ height:112px; padding:24px 40px; }
  .tier-item.tier-lg img, .tier-item.tier-sm img{ max-height:52px; max-width:182px; }

  .brand-grid{ grid-template-columns:repeat(6,1fr); gap:16px; }
  .brand-cell{ height:82px; }
  .brand-cell img{ max-height:30px; max-width:76%; }
  .brand-cell:nth-child(n+13){ display:none; }   /* 6 cột × 2 hàng = 12 logo phụ */
  .library-more, .brand-empty{ display:none; }
}

/* ============================================================
   MOBILE MÀN HÌNH NGANG (landscape, chiều cao thấp)
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px){
  /* header gọn */
  .header-inner{ height:44px; }
  .main-nav{ inset:44px 0 auto 0; }
  /* nút Booking vừa trong header (cao 42px), bỏ bóng nâu để không bị vệt khi ẩn header */
  .btn-booking,
  .btn-booking:hover{ height:42px; padding:0 16px; font-size:.82rem; box-shadow:none; }

  /* Section 1: gói trọn trong 1 màn hình ngang */
  .hero{ padding-top:44px; }
  .hero-intro{ padding:5px 20px 4px; }
  .hero-intro .eyebrow{ display:none; }        /* (1) bỏ "Master of Ceremonies" */
  .hover-hint{ display:none; }                 /* (2) bỏ "Rê chuột để khám phá" */
  .hero-title{ font-size:1.25rem; line-height:1.1; }
  .hero-sub{ font-size:.78rem; margin-top:2px; }

  .hero-panels{
    height:calc(100vh - 108px);
    height:calc(100dvh - 108px);
    min-height:0; padding:0 12px 8px; gap:8px;
  }
  .panel-content{ padding:10px 12px 12px; }
  .panel-name{ font-size:1.15rem; }
  .panel-tag{ font-size:.9rem; }
  /* hiện luôn dòng mô tả (kể cả khi chưa chạm), bỏ "Xem showcase" */
  .panel-desc{ opacity:1; max-height:none; transform:none; font-size:.78rem; }
  .panel-cta{ display:none; }

  /* Section 2: ảnh TRÁI · chữ PHẢI · 2 cột cao bằng nhau, nén gọn 1 khung */
  .info{ padding:16px 0; }
  .info-grid{
    grid-template-columns:1fr 1.15fr; gap:20px;
    align-items:stretch;                       /* 2 cột kéo bằng chiều cao hàng */
  }
  .info-photo{
    order:1;                                    /* ảnh sang trái */
    aspect-ratio:auto; height:100%; max-width:none;  /* cao bằng khối chữ (đã nén) */
  }
  .info-text{ order:2; display:flex; flex-direction:column; }
  .info .eyebrow{ margin-bottom:3px; }
  .info .section-title{ font-size:1.35rem; margin-bottom:2px; white-space:nowrap; }
  .info .section-title br{ display:none; }     /* gộp tiêu đề về 1 dòng */
  .info .lead{ margin:4px 0 8px; font-size:.8rem; line-height:1.4; }
  .info-list{ margin:4px 0; }
  .info-list li{ padding:5px 0; }
  .info-list span{ font-size:.78rem; }         /* text nhỏ 1 size */
  .info-list strong{ font-size:.82rem; }
  .info .chips{ margin:2px 0 0; gap:6px; }
  .info .chip{ font-size:.72rem; padding:4px 10px; }  /* khung chip nhỏ lại */
  .info .btn-dark{ align-self:flex-start; margin-top:10px; padding:8px 18px; font-size:.82rem; }

  /* khoảng cách giữa các section đồng đều nhau (landscape) */
  .philosophy, .brands, .booking{ padding:16px 0; }

  /* Section 3 (Showreel): trái = title + lead + 2 video phụ · phải = video chính */
  .showreel{ padding:16px 0; box-sizing:border-box; }
  .showreel .eyebrow{ display:none; }
  .reel-main{ display:contents; }                /* video + grid thành item trực tiếp của grid */

  .showreel .container{
    display:grid;
    grid-template-columns:0.9fr 1.6fr;
    grid-template-rows:auto auto 1fr;
    grid-template-areas:
      "title video"
      "lead  video"
      "grid  video";
    column-gap:16px; row-gap:6px;
    /* = khoảng giữa header (44px) và đáy màn hình, trừ padding trên+dưới (32px) */
    height:calc(100vh - 76px);
    height:calc(100dvh - 76px);
  }
  .showreel .section-title{ grid-area:title; font-size:1.3rem; margin:0; white-space:normal; }
  .showreel .lead{ grid-area:lead; font-size:.8rem; margin:2px 0 6px; max-width:none; line-height:1.4; }

  .reel-grid{
    grid-area:grid; display:grid; grid-template-columns:1fr; grid-auto-rows:1fr;
    gap:8px; margin-top:0; height:100%; min-height:0;
  }
  .reel-card{ aspect-ratio:auto; min-height:0; }
  .reel-card:nth-child(n+3){ display:none; }     /* còn 2 video phụ */
  .reel-more{ display:none; }                    /* giữ layout showreel gọn 1 màn hình */

  .reel-video{ grid-area:video; display:block; height:100%; aspect-ratio:auto; align-self:stretch; }
  .reel-video video{ width:100%; height:100%; object-fit:cover; }

  /* Section 5 (Brand): phủ trọn 1 màn hình ngang */
  .brands{ box-sizing:border-box; }
  .brands .container{
    height:calc(100vh - 76px);
    height:calc(100dvh - 76px);
    display:flex; flex-direction:column;
  }
  .brands .eyebrow{ margin-bottom:2px; }
  .brands .section-title{ font-size:1.4rem; }

  /* 3 brand dự án lớn (logo CHÍNH): ô CAO hơn */
  .brand-tier{ flex-wrap:nowrap; gap:12px; margin:12px auto 6px; max-width:640px; align-items:stretch; }
  .tier-item{ min-width:0; }
  .tier-item.tier-lg, .tier-item.tier-sm{ flex:1; padding:14px 12px; height:96px; }
  .tier-item.tier-lg img, .tier-item.tier-sm img{ max-height:48px; max-width:90%; }
  .tier-note{ font-size:.72rem; margin:6px 0 0; }

  /* bỏ thanh search + filter */
  .library-controls{ display:none; }
  .brand-library{ flex:1 1 auto; min-height:0; margin-top:12px; display:flex; flex-direction:column; justify-content:center; }

  /* lưới 5 cột × 2 hàng = 10 logo PHỤ: ô THẤP hơn */
  .brand-grid{
    grid-template-columns:repeat(5,1fr); grid-auto-rows:62px; gap:10px;
  }
  .brand-cell:nth-child(n+11){ display:none; }
  .brand-cell{ height:62px; padding:8px 6px; gap:0; }
  .brand-cell img{ max-height:34px; max-width:84%; }
  .brand-cell small{ display:none; }
  .brand-empty, .library-more{ display:none; }
}

/* ============================================================
   MOBILE MÀN HÌNH DỌC — bỏ dải section kề khi nhảy tới (Thông tin)
   ============================================================ */
@media (max-width: 780px) and (orientation: portrait){
  /* ===== NHỊP DỌC ĐỀU giữa các section (~32px mỗi khe) ===== */
  /* nội dung luôn dừng ngay dưới header khi nhảy tới:
     scroll-padding = header(60) − padding-top(16) = 44px */
  html{ scroll-padding-top:44px; }
  .info, .showreel, .philosophy, .brands, .booking{ padding:16px 0; }
  .hero-panels{ padding-bottom:16px; }

  /* Section 2: siết nội dung để nút "Liên hệ booking" hiện đủ khi nhảy tới */
  .info-grid{ gap:14px; }
  .info-list li{ padding:6px 0; }
  .info .chips{ margin:2px 0 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition:none !important; animation:none !important;
    scroll-behavior:auto !important;
  }
}