/* ============================================================
   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);
  padding:12px 25px; /* thu gọn nút (114×50 desktop) — nhường chỗ cho cờ/animation mùa lễ sau này */
}
.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-group bọc logo + trang trí mùa lễ làm 1 khối — để header-inner (space-between)
   chỉ thấy 3 nhóm chính (brand-group/nav/actions), tránh bị dàn cách xa logo */
.brand-group{ display:flex; align-items:center; gap:2px; position:relative; }
.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:.01em;
  line-height:30px; /* thu gọn logo (180×30 desktop) — nhường chỗ cho cờ/animation mùa lễ sau này */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
/* cụm chữ vàng: đậm + gold sâu hơn để rõ nét, tương phản tốt trên nền kem */
.brand-name em{ font-style:italic; font-weight:700; color:#8A6A1F; }

/* ============================================================
   SEASONAL DECOR (trang trí theo dịp lễ, ngay sau logo)
   Quy tắc dùng chung cho MỌI dịp (Quốc khánh / Noel / Tết…):
   - Luôn đặt trong #seasonalDecor, ngay sau .brand, KHÔNG viền/khung quanh item
     (để hoà vào nền header, không có đường phân cách với logo).
   - Chiều cao item luôn NHỎ HƠN .header-inner ở từng breakpoint (76/60/44px).
   - QUAN TRỌNG — KHÔNG neo item bằng toạ độ pixel tuyệt đối (trái/top cố định),
     dù đo chính xác đến đâu: độ dài chữ ".brand-name" đổi theo cỡ chữ mobile
     (.92rem), theo NGÔN NGỮ (VIE/ENG bấm đổi là chữ dài ngắn khác ngay), theo
     font đã load hay chưa — số pixel cố định ở 1 trường hợp sẽ đè chữ ở trường
     hợp khác (đã xảy ra thật, xem lịch sử sửa). Luôn để #seasonalDecor nằm
     TRONG DÒNG CHẢY (flow) ngay sau .brand bằng flex + margin dương nhỏ — vị trí
     "ngay sau chữ" khi đó do trình duyệt tự tính lại mỗi lần, không bao giờ đè
     chữ dù chữ dài ngắn thế nào.
   - Đổi mùa: đổi nội dung bên trong #seasonalDecor (HTML) + data-season, thêm
     class item mới nếu cần (VD .snow-flake, .santa-icon…) — KHÔNG đổi cấu trúc
     .brand/.header-inner để không phải sửa lại responsive 2 lần (PC & mobile).
   ============================================================ */
.seasonal-decor{
  display:flex; align-items:flex-end; margin-left:5px;
  --decor-h:28.6px; /* < 76px header desktop — tăng 30% so với 22px trước đó */
}
.seasonal-decor svg{
  display:block; flex:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
/* 3 lá to·nhỏ khác nhau, so le CHIỀU CAO bằng transform (không ảnh hưởng bề rộng
   dòng chảy) + chồng nhẹ lên NHAU (margin âm giữa các lá cờ, không đụng .brand-name)
   → có chiều sâu mà vẫn tuyệt đối an toàn với chữ logo ở mọi kích thước màn hình.
   flag-1 nghiêng gốc -10°, flag-2 nghiêng gốc -15° (ngả trái lên trên). */
.flag-1{ height:var(--decor-h); margin:0; z-index:3; --base-rot:-10deg; }
.flag-2{ height:calc(var(--decor-h) * .77); margin:0 0 8px -6px; z-index:2; opacity:.95; --base-rot:-15deg; }
.flag-3{ height:calc(var(--decor-h) * .55); margin:0 0 2px -5px; z-index:1; opacity:.88; --base-rot:-6deg; }

.flag-wave{
  --base-rot:0deg;
  transform-origin:0% 50%;
  /* tốc độ bay giảm 30% so với bản trước (2.6s) → duration = 2.6/0.7 ≈ 3.71s */
  animation:flagWave 3.71s cubic-bezier(.42,0,.32,1) infinite;
}
.flag-wave.flag-2{ animation-delay:.2s; animation-duration:3.29s; }
.flag-wave.flag-3{ animation-delay:.4s; animation-duration:2.86s; }
/* 5 mốc + skewY/scaleX ngược pha với rotate = mô phỏng vải cờ phần phật theo gió,
   không đối xứng đều như con lắc → trông tự nhiên hơn kiểu "bay-lắc" đơn thuần */
@keyframes flagWave{
  0%{   transform:rotate(var(--base-rot)) skewY(-5deg) scaleX(.97); }
  25%{  transform:rotate(calc(var(--base-rot) + 4deg)) skewY(2deg) scaleX(1.02); }
  50%{  transform:rotate(calc(var(--base-rot) - 3deg)) skewY(-4deg) scaleX(.98); }
  75%{  transform:rotate(calc(var(--base-rot) + 5deg)) skewY(3deg) scaleX(1.03); }
  100%{ transform:rotate(var(--base-rot)) skewY(-5deg) scaleX(.97); }
}
@media (prefers-reduced-motion:reduce){
  .flag-wave{ animation:none; transform:rotate(var(--base-rot)); }
}

.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:5px; }

.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:.55rem; letter-spacing:.04em; color:var(--ink-soft);
  padding:3px 6px; transition:background .25s var(--ease), color .25s var(--ease);
  /* thu gọn nút (65×21, đồng nhất mọi thiết bị) — nhường chỗ cho cờ/animation mùa lễ sau này */
}
.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{ margin-bottom:8px; } /* đồng bộ font-size với các .eyebrow khác (bỏ .68rem riêng) */
.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:clamp(.8rem, 2.5vw, .95rem);   /* co giãn theo màn hình để không rớt 1–2 chữ */
  text-wrap:balance;                        /* chia chữ đều các dòng, tránh dòng cuối lẻ 1–2 chữ */
  max-width:34ch; margin-inline:auto;       /* gói câu gọn, ngắt dòng cân đối */
}

/* --- 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{
  position:relative;
  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; }

/* Facade bấm-để-phát (thay video YouTube) */
.yt-facade{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; margin:0; padding:0; cursor:pointer; display:block;
  background:transparent center/cover no-repeat; background-image:inherit;
}
.reel-video .yt-facade{ background-size:cover; background-position:var(--focus,center); }

/* Lightbox video */
body.yt-lb-open{ overflow:hidden; }
.yt-lightbox{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.yt-lightbox[hidden]{ display:none; }
.yt-lb-backdrop{ position:absolute; inset:0; background:rgba(24,17,10,.9); backdrop-filter:blur(10px); }
.yt-lb-stage{ position:relative; z-index:1; width:min(94vw,1600px); }
.yt-lb-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#000; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.yt-lb-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.yt-lb-close{ position:absolute; top:-46px; right:0; width:40px; height:40px; border:0; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.6rem; line-height:1;
  display:grid; place-items:center; transition:background .25s var(--ease); }
.yt-lb-close:hover{ background:rgba(255,255,255,.28); }
@media (max-height:520px){ .yt-lb-stage{ width:min(92vw,860px); } .yt-lb-close{ top:0; right:-46px; } }

.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:14px; margin:38px auto 10px; max-width:900px;
}
.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); }
/* logo có link bộ ảnh → con trỏ tay; logo không link → mặc định */
.tier-item, .brand-cell, .sc-card{ text-decoration:none; color:inherit; }
.tier-item.has-show, .brand-cell.has-show{ cursor:pointer; }

/* 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(6, 1fr);   /* 6 logo / hàng theo nhóm */
  gap:10px; max-width:1000px; margin-inline:auto;
}
.brand-cell{
  display:flex; align-items:center; justify-content:center;
  height:92px; padding:10px 8px;   /* ô hẹp bớt nền trắng để 6 logo vừa 1 hàng */
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  text-align:center; transition:all .28s var(--ease);
}
/* Kích thước cân theo diện tích: chiều cao = --oh (px), rộng tự do,
   giữ nguyên MÀU GỐC của logo (không grayscale). */
.brand-cell img{
  height:calc(var(--oh, 40) * var(--bscale, 1) * 1px); width:auto; max-width:100%; object-fit:contain;
}
.brand-cell:hover{ border-color:var(--gold-soft); transform:translateY(-3px); box-shadow:var(--shadow); }
.brand-empty{ text-align:center; color:var(--ink-soft); padding:40px; }
.library-more{ display:none; }   /* hiện HẾT logo — bỏ nút "Xem thêm" */

/* Phương án B: tách 2 khối — Nhãn hàng · Agency */
.group-label{
  text-align:center; font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin:6px 0 16px;
}
/* .group-label + .group-label.muted (agencyLabel) + .deposit-label: đồng bộ
   font/color/size (.74rem, nhỏ hơn .eyebrow 1 nấc — .78rem → .74rem) vì đây là
   subtext nằm trong khối .eyebrow tương ứng. Bỏ màu ink-soft riêng của .muted
   để đồng nhất màu (không còn phân biệt "mờ" nữa, theo yêu cầu đồng bộ). */
.group-divider{ height:1px; background:var(--line); max-width:520px; margin:34px auto 0; }
/* khu Agency: logo nhỏ hơn nhãn hàng 18% ở MỌI breakpoint (phân cấp) */
.brand-grid.agency{ max-width:820px; }
.brand-grid.agency .brand-cell img{ height:calc(var(--oh, 40) * var(--bscale, 1) * 0.82px); }

/* ============================================================
   BOOKING
   ============================================================ */
.booking{ padding:110px 0; background:var(--cream-2); }
.booking-inner{
  display:grid; grid-template-columns:1fr 1fr; column-gap:64px; row-gap:20px;
  align-items:start; position:relative;
  /* align-items:start (không phải center) — .booking-form cao hơn .booking-text
     nhiều, center sẽ để khoảng trống rất lớn phía trên cụm chữ + khối đặt cọc
     (đã gặp lỗi này, xem ảnh chụp thực tế trong hội thoại). start = ghim cả 2
     cột vào mép trên, không còn khoảng trống. */
}
/* .booking-deposit KHÔNG tham gia grid nữa (position:absolute) — lý do: CSS Grid
   luôn ép "hàng" chứa .booking-text cao bằng .booking-form (vốn cao hơn nhiều),
   nên nếu để deposit ở "hàng dưới" theo grid, nó bị đẩy xa khỏi .booking-text
   dù row-gap chỉ 20px (đã thử 2 cách — auto: lệch 226px, min-content: vẫn lệch
   95px — thuật toán grid không cho kiểm soát triệt để). Giải pháp đáng tin cậy:
   tách khỏi grid, neo cứng vào đúng mép dưới .booking-text bằng JS đo thực tế
   (main.js → positionDepositCard()), độc lập hoàn toàn với chiều cao .booking-form.
   .booking-inner{position:relative} làm điểm neo toạ độ cho .booking-deposit. */
.booking-text{ grid-column:1; }
.booking-form{ grid-column:2; }
.booking-deposit{ position:absolute; left:0; }

/* 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; }

/* ============================================================
   BOOKING — thẻ thông tin chuyển khoản đặt cọc
   Là item thứ 3 (sau .booking-text/.booking-form) trong .booking-inner (grid):
   desktop 2 cột → tự rơi xuống dưới .booking-text (cột trái) theo auto-placement
   mặc định của grid; mobile 1 cột → tự xuống dưới cùng, tức dưới nút Booking đen.
   KHÔNG cần media query riêng để "di chuyển" khối này — xem CLAUDE.md.
   ============================================================ */
.booking-deposit{
  grid-column:1; max-width:460px;
  display:flex; gap:5px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:18px;
}
.deposit-qr{ width:150px; height:150px; border-radius:8px; flex:none; object-fit:contain; }
.deposit-info{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.deposit-label{
  /* đồng bộ với .group-label (xem CSS đó) — .74rem, letter-spacing .14em, weight 600 */
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--gold-deep); margin:0 0 4px;
}
.deposit-name{ font-weight:700; font-size:1.05rem; letter-spacing:.02em; margin:0; }
.deposit-bank{ font-size:.92rem; color:var(--ink); margin:0; }
.deposit-account{ display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--ink); margin:0; }
.deposit-copy{
  border:1px solid var(--line); background:var(--cream); border-radius:7px; padding:4px 10px;
  font:inherit; font-size:.72rem; color:var(--ink-soft); cursor:pointer; flex:none;
}
.deposit-copy:hover{ border-color:var(--gold); color:var(--gold-deep); }
.deposit-copy.is-copied{ color:var(--gold-deep); border-color:var(--gold); }

/* Ô chọn tệp tuỳ biến (để đổi được chữ "Chọn tập tin" / "Chưa có tập tin đính kèm") */
.file-input{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.file-input input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; padding:0; border:0; }
.file-btn{
  font:inherit; font-size:.82rem; padding:8px 14px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.file-btn:hover{ border-color:var(--gold-soft); background:var(--cream); }
.file-name{ font-size:.85rem; color:var(--ink-soft); word-break:break-all; }
.file-name.has-file{ color:var(--ink); font-weight:500; }

/* ============================================================
   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; }
/* Giới hạn 3 dòng: card có aspect-ratio 4/5 + khối chữ neo đáy (margin-top:auto),
   nên title dài (vd "Đại tiệc Sinh nhật Audition 20 tuổi — Dancing in Glory") sẽ
   nở LÊN và đè vào nhãn .sc-flag/.sc-card-count ở top:14px. Clamp 3 dòng chặn hẳn
   việc đó ở mọi khổ máy — KHÔNG bỏ clamp này khi thêm show có tên dài. */
.sc-card-title{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
  font-family:"Playfair Display",serif; font-weight:600; font-size:1.25rem; line-height:1.18;
}
/* 1 dòng: brand dài ("Mỹ phẩm Hàn Quốc") xuống 2 dòng sẽ cộng thêm chiều cao cho
   khối chữ neo đáy và lại đè vào nhãn ở top:14px (đã gặp) — giữ nowrap. */
.sc-card-brand{ display:block; margin-top:7px; font-size:.92rem; font-weight:600; color:var(--gold-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.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; }
  /* 1 cột → .booking-deposit về lại flow bình thường (position:static), thứ tự
     DOM tự nhiên: text → form → deposit (deposit xuống dưới nút Booking đen).
     JS (positionDepositCard) tự bỏ qua việc set top/left khi ở chế độ này. */
  .booking-text, .booking-form{ grid-column:auto; }
  .booking-deposit{ position:static; margin-top:24px; }
}

@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ữ; line-height riêng để logo còn 132×21
     (nhường chỗ cho cờ/animation mùa lễ sau này) */
  .brand-name{ font-size:.92rem; line-height:21px; white-space:nowrap; }
  /* trang trí mùa lễ: thu nhỏ theo header 60px, ưu tiên không gian cho logo + nav-toggle */
  .seasonal-decor{ --decor-h:20.8px; margin-left:3px; }
  /* (3) nút Booking thu ~50%, còn 75×31 */
  .btn-booking{ padding:5px 12px; font-size:.76rem; }
}

@media (max-width: 480px){
  /* điện thoại 401–480px: chỉ còn ~44–58px trống trước nút Booking (400px→43.7 ·
     414px→57.7) — KHÔNG đủ chỗ để tăng cờ +30% như bản desktop/tablet (đã thử
     16.9px → chạm sát 0px đệm ở 414px, đo thực tế). Giữ mức tăng nhẹ hơn (13→14px,
     +7.7%) để luôn còn đệm an toàn ở khổ hẹp này — ưu tiên KHÔNG chèn ép nút Booking
     hơn là tăng đủ 30%; bản PC/tablet/landscape vẫn tăng đủ 30% như yêu cầu. */
  .seasonal-decor{ --decor-h:14px; margin-left:3px; }

  /* (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): thứ tự dọc = Odyssey (video chính) → VNGGames → Moana */
  .reel-video{ display:block; aspect-ratio:2/1; margin-bottom:10px; }
  .reel-grid{ grid-template-columns:1fr; gap:10px; margin-top:0; }
  .reel-card{ aspect-ratio:2/1; }
  .reel-grid .reel-card:nth-child(3){ display:none; }   /* ẩn Sheep in the box trên mobile dọc */
}

@media (max-width: 400px){
  /* điện thoại hẹp hơn 400px (vd 375px): đo thực tế chỉ còn ~18.7px trống trước nút
     Booking — dù thu cờ nhỏ tới mức không còn thấy rõ ngôi sao thì vẫn không đủ chỗ.
     Đây là ngoại lệ DUY NHẤT ẩn cờ — ngoài khổ này, cờ hiện ở TẤT CẢ phiên bản khác
     (desktop/tablet/414px/landscape đều đã đo có đệm an toàn ≥20px, xem hội thoại). */
  .seasonal-decor{ display:none; }
}

@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(3, 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){
  /* 5 logo chính xếp ngang 1 hàng, kích thước bằng nhau */
  .brand-tier{ flex-wrap:nowrap; gap:6px; align-items:stretch; max-width:none; }
  .tier-item{ min-width:0; }
  .tier-item.tier-lg, .tier-item.tier-sm{ flex:1; padding:12px 5px; height:64px; }
  .tier-item.tier-lg img, .tier-item.tier-sm img{ max-height:32px; max-width:94%; }

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

  /* mobile dọc: 3 cột — mỗi nhóm 6 logo = 2 hàng liền nhau; hiện HẾT, không nút */
  .brand-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .library-more{ display:none; }

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

  /* 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): hiện HẾT logo → cao tự nhiên (không ép 1 khung hình) */
  .brands{ box-sizing:border-box; padding:64px 0; }
  .brands .container{ width:100%; }

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

  /* 5 logo CHÍNH (tier): LUÔN 1 hàng, MỌI ô RỘNG BẰNG NHAU (chuẩn theo Unilever) */
  .brand-tier{ gap:16px; margin:34px auto 12px; max-width:1010px; flex-wrap:nowrap; }
  .tier-item.tier-lg, .tier-item.tier-sm{ flex:1 1 0; min-width:0; height:96px; padding:16px 18px; }
  .tier-item.tier-lg img, .tier-item.tier-sm img{ max-height:44px; max-width:100%; }

  /* 6 logo phụ / hàng theo nhóm sản phẩm — hiện HẾT */
  .brand-grid{ grid-template-columns:repeat(6,1fr); gap:12px; max-width:1000px; }
  .brand-cell{ height:82px; padding:10px 8px; --bscale:0.9; }
  .brand-cell img{ max-width:120px; }
  .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; }
  .seasonal-decor{ --decor-h:18.2px; margin-left:3px; }
  /* nút Booking vừa trong header (cao 42px, còn 86×42), bỏ bóng nâu để không bị vệt khi ẩn header */
  .btn-booking,
  .btn-booking:hover{ height:42px; padding:0 15px; 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): hiện HẾT logo → cao tự nhiên, cuộn bình thường */
  .brands{ box-sizing:border-box; }
  .brands .container{ display:flex; flex-direction:column; }
  .brands .eyebrow{ margin-bottom:2px; }
  .brands .section-title{ font-size:1.4rem; }

  /* 5 brand CHÍNH trên 1 hàng ngang, bằng nhau */
  .brand-tier{ flex-wrap:nowrap; gap:8px; margin:10px auto 6px; max-width:720px; align-items:stretch; }
  .tier-item{ min-width:0; }
  .tier-item.tier-lg, .tier-item.tier-sm{ flex:1; padding:12px 6px; height:82px; }
  .tier-item.tier-lg img, .tier-item.tier-sm img{ max-height:40px; max-width:90%; }
  .tier-note{ font-size:.72rem; margin:6px 0 0; }

  /* bỏ thanh search + filter */
  .library-controls{ display:none; }
  .brand-library{ margin-top:12px; }

  /* 6 logo phụ / hàng theo nhóm — hiện hết */
  .brand-grid{
    grid-template-columns:repeat(6,1fr); gap:8px; max-width:820px;
  }
  .brand-cell{ height:60px; padding:6px 5px; --bscale:0.66; }
  .brand-cell img{ max-width:96%; }
  .brand-empty{ display:none; }

  /* Section 6 (Booking): GIỮ 2 CỘT như bản PC (chữ trái · form phải),
     nén gọn để vừa màn hình ngang thay vì đổ dồn 1 cột dài phải cuộn.
     .booking-deposit vẫn position:absolute (như bản desktop) — JS tự tính lại top. */
  .booking-inner{ grid-template-columns:0.8fr 1.2fr; gap:24px; align-items:start; }
  /* align-items:start — cùng lý do như bản desktop (center để trống khoảng lớn
     phía trên vì .booking-form cao hơn .booking-text nhiều). */
  /* cột trái chỉ ≈40% bề rộng (0.8fr / (0.8fr+1.2fr)) — max-width:460 của bản desktop
     quá to, tràn đè sang cột form (đã đo thực tế: overlap). Co lại đúng theo cột +
     thu nhỏ QR/khoảng đệm để vẫn gọn trong khổ màn hình ngang thấp. */
  .booking-deposit{
    position:absolute; max-width:calc(40% - 12px); gap:5px; padding:12px;
  }
  .deposit-qr{ width:64px; height:64px; }
  .deposit-name{ font-size:.86rem; }
  .deposit-bank{ font-size:.8rem; }
  .deposit-account{ font-size:.8rem; gap:6px; }
  .booking .eyebrow{ margin-bottom:2px; }
  .booking .section-title{ font-size:1.35rem; margin-bottom:2px; }
  .booking .section-title br{ display:none; }
  .booking .lead{ font-size:.8rem; margin:6px 0 0; line-height:1.4; }
  .booking-form{ padding:16px 18px; gap:8px; }
  .booking-form .field{ gap:3px; }
  .booking-form .field label{ font-size:.78rem; }
  .booking-form .field input,
  .booking-form .field textarea{ padding:8px 11px; }
  .booking-form textarea{ min-height:38px; }
  .booking-form .field-hint{ font-size:.72rem; margin:-3px 0 0; }
  .booking-form .btn-dark.full{ padding:10px; font-size:.85rem; }
}

/* ============================================================
   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;
  }
}

/* ============================================================
   TRANG CHI TIẾT 1 SHOW (show/<slug>.html) — sinh bởi
   resource/generate-pages.js. Mục đích: mỗi show có 1 URL riêng
   để Google index (trước đây 54 show chỉ mở bằng lightbox JS,
   không có trang nào để xếp hạng).
   ============================================================ */
.show-page{ padding:120px 0 100px; }

.sh-crumbs{ font-size:.86rem; color:var(--ink-soft); margin-bottom:18px; }
.sh-crumbs a{ color:var(--gold-deep); text-decoration:none; }
.sh-crumbs a:hover{ text-decoration:underline; }
.sh-crumbs span{ margin:0 6px; }

.sh-title{
  font-family:"Playfair Display",serif; font-weight:600; line-height:1.12;
  font-size:clamp(1.7rem, 4.2vw, 2.9rem); margin:0 0 10px; text-wrap:balance;
}
.sh-meta{
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 18px;
}
.sh-lead{
  max-width:70ch; color:var(--ink-soft); line-height:1.7; margin:0 0 38px; text-wrap:pretty;
}

/* Lưới ảnh: thumb 480px, bấm vào mở lightbox (xem js/show.js) */
.sh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; }
.sh-item{
  display:block; position:relative; overflow:hidden; border-radius:12px;
  aspect-ratio:3/4; background:var(--cream-2); box-shadow:var(--shadow);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.sh-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-item:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -18px rgba(60,40,10,.5); }
.sh-item:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Điều hướng show trước / sau — đồng thời là internal link cho Google */
.sh-nav{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-top:46px; padding-top:26px; border-top:1px solid var(--line);
  font-size:.92rem;
}
.sh-nav a{ color:var(--ink); text-decoration:none; max-width:34ch; }
.sh-nav a:hover{ color:var(--gold-deep); }
.sh-nav-all{ font-weight:600; color:var(--gold-deep) !important; }
.sh-cta{ margin-top:38px; }

@media (max-width: 720px){
  .show-page{ padding:104px 0 72px; }
  .sh-grid{ grid-template-columns:repeat(auto-fill,minmax(46%,1fr)); gap:10px; }
  .sh-nav{ flex-direction:column; align-items:flex-start; gap:10px; }
  .sh-nav a{ max-width:100%; }
}