/* =============================================================
   2007 Studio — landing v2
   Không sửa nội dung ở đây. Nội dung nằm trong data.js.
   ============================================================= */
:root{
  --void:#080706; --ink-950:#0E0D0B; --ink-900:#14120F; --ink-850:#1B1815;
  --hairline:#2A2521;
  --ivory:#F6F2EB; --ivory-dim:#CFC7BA; --muted:#8A8177;
  --ember:#E0A458; --ember-deep:#B8752F;
  --gap:3px;
  --font-ui:'Be Vietnam Pro',system-ui,sans-serif;
  --font-display:'Newsreader',Georgia,serif;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  /* ===== HỆ VIỀN CHUYỂN CẢNH =====
     Gradient 2 điểm dừng luôn lộ một vệt cứng ở giữa vì alpha tăng tuyến tính
     không khớp cảm nhận của mắt. 16 điểm dừng theo đường ease xoá vệt đó.
     Dùng hsl() chứ không rgba() để nội suy không ngả xám. */
  --seam:clamp(76px,16svh,150px);
  --scrim-down:linear-gradient(to bottom,
    hsl(30 14% 3% / 0) 0%, hsl(30 14% 3% / .013) 8.1%, hsl(30 14% 3% / .049) 15.5%,
    hsl(30 14% 3% / .104) 22.5%, hsl(30 14% 3% / .175) 29%, hsl(30 14% 3% / .259) 35.3%,
    hsl(30 14% 3% / .352) 41.2%, hsl(30 14% 3% / .45) 47.1%, hsl(30 14% 3% / .55) 52.9%,
    hsl(30 14% 3% / .648) 58.8%, hsl(30 14% 3% / .741) 64.7%, hsl(30 14% 3% / .825) 71%,
    hsl(30 14% 3% / .896) 77.5%, hsl(30 14% 3% / .951) 84.5%, hsl(30 14% 3% / .987) 91.9%,
    hsl(30 14% 3% / 1) 100%);
  --scrim-up:linear-gradient(to top,
    hsl(30 14% 3% / 0) 0%, hsl(30 14% 3% / .013) 8.1%, hsl(30 14% 3% / .049) 15.5%,
    hsl(30 14% 3% / .104) 22.5%, hsl(30 14% 3% / .175) 29%, hsl(30 14% 3% / .259) 35.3%,
    hsl(30 14% 3% / .352) 41.2%, hsl(30 14% 3% / .45) 47.1%, hsl(30 14% 3% / .55) 52.9%,
    hsl(30 14% 3% / .648) 58.8%, hsl(30 14% 3% / .741) 64.7%, hsl(30 14% 3% / .825) 71%,
    hsl(30 14% 3% / .896) 77.5%, hsl(30 14% 3% / .951) 84.5%, hsl(30 14% 3% / .987) 91.9%,
    hsl(30 14% 3% / 1) 100%);
  --ink-shadow:0 1px 14px hsl(30 14% 3% / .7), 0 0 3px hsl(30 14% 3% / .5);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ivory);
  font-family:var(--font-ui);font-weight:300;overscroll-behavior-y:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* grain — PHẢI nằm trên mọi gradient, đây là thứ phá banding trên OLED */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;
  align-items:center;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));
  transition:background .35s ease}
.nav.is-stuck{padding-bottom:30px;
  background:linear-gradient(to bottom,
    hsl(30 14% 3% / .94) 0%, hsl(30 14% 3% / .88) 34%,
    hsl(30 14% 3% / .62) 62%, hsl(30 14% 3% / .26) 82%, hsl(30 14% 3% / 0) 100%)}
.pill{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;padding:8px 13px;
  border-radius:999px;text-decoration:none;background:rgba(8,7,6,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(246,242,235,.09)}
.nav.is-stuck .pill{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.burger{display:grid;gap:5px;padding:12px 13px}
.burger i{display:block;width:18px;height:1px;background:var(--ivory)}

.menu{position:fixed;inset:0;z-index:50;background:var(--void);
  display:flex;align-items:center;padding:0 24px}
.menu[hidden]{display:none}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.menu a{text-decoration:none;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem,5vw,1.75rem)}
.menu__x{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
  width:44px;height:44px;display:grid;place-items:center;font-size:1.1rem}

/* ---------- TẦNG 01 — tường chân dung ---------- */
.wall{position:relative;height:320svh}
.wall__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink-950)}
.wall__cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.col{position:relative;overflow:hidden}
.col__track{display:grid;gap:var(--gap);will-change:transform;transform:translate3d(0,0,0)}
.cell{position:relative;aspect-ratio:4/5;overflow:hidden;background:#211a15;border-radius:2px}
.cell::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(8,7,6,.35))}

.wall__scrim{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(120% 65% at 50% 50%, rgba(8,7,6,.55) 0%, rgba(8,7,6,.18) 42%, transparent 70%)}
.wall__pin::before{content:'';position:absolute;left:0;right:0;top:0;z-index:5;pointer-events:none;
  height:clamp(96px,16svh,170px);background:var(--scrim-up)}
.wall__pin::after{content:'';position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none;
  height:calc(var(--seam) * 1.35);background:var(--scrim-down)}

/* khối thương hiệu — pointer-events:none là BẮT BUỘC, nếu không sẽ chắn vùng chạm ảnh */
.plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;
  text-align:center;width:min(88vw,760px);padding:26px 20px;
  will-change:transform,opacity;pointer-events:none}
.plate::before{content:'';position:absolute;inset:-22% -10%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(8,7,6,.60) 0%, rgba(8,7,6,.40) 46%, rgba(8,7,6,0) 74%);
  backdrop-filter:blur(24px) saturate(.55);-webkit-backdrop-filter:blur(24px) saturate(.55);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,#000 46%,transparent 74%);
  mask-image:radial-gradient(ellipse at center,#000 0%,#000 46%,transparent 74%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .plate::before{background:radial-gradient(ellipse at center, rgba(8,7,6,.9) 0%, rgba(8,7,6,.72) 46%, rgba(8,7,6,0) 74%)}
}
body.no-blur .plate::before{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:radial-gradient(ellipse at center, rgba(8,7,6,.9) 0%, rgba(8,7,6,.72) 46%, rgba(8,7,6,0) 74%)}
.plate__eyebrow{margin:0 0 14px;font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory-dim)}
.plate__mark{margin:0;font-family:var(--font-ui);font-weight:800;
  font-size:clamp(3.4rem,20vw,11rem);line-height:.84;letter-spacing:-.055em;color:var(--ivory)}
.plate__line{margin:16px 0 0;font-family:var(--font-display);font-style:italic;
  font-size:clamp(1rem,4.4vw,1.5rem);color:var(--ivory)}
.plate__meta{margin:12px 0 0;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.hint{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:10;font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}
.hint i{display:block;width:1px;height:26px;background:linear-gradient(var(--ember),transparent);
  animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.4;transform-origin:top}
               50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ---------- TẦNG 02 ---------- */
.moment{position:relative;height:100svh;overflow:hidden;background:var(--ink-950)}
.moment__media{position:absolute;inset:0;background-size:cover;background-position:center;
  animation:kb 16s ease-in-out infinite alternate}
.moment__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.moment::before{content:'';position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;
  height:calc(var(--seam) * 1.15);background:var(--scrim-up)}
.moment::after{content:'';position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  height:62%;background:var(--scrim-down)}
.moment__text{position:absolute;z-index:3;left:20px;right:20px;bottom:clamp(118px,23svh,220px)}
.moment__text h2{margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,7vw,4rem);line-height:1.06;letter-spacing:-.025em;text-shadow:var(--ink-shadow)}
.moment__text p{margin:14px 0 0;color:var(--ivory-dim);font-size:clamp(.95rem,3.6vw,1.0625rem);
  line-height:1.65;max-width:46ch;text-shadow:var(--ink-shadow)}

/* ---------- TẦNG 03 — album ----------
   Tiêu đề được kéo lên nằm trong vệt mờ của ảnh phía trên. */
.albums{position:relative;z-index:3;margin-top:calc(var(--seam) * -1);
  padding:calc(var(--seam) + clamp(24px,5vh,56px)) 16px clamp(72px,12vh,140px);
  background:linear-gradient(to bottom, transparent 0, var(--void) calc(var(--seam) * 1.1))}
.sec-head{margin-bottom:34px}
.sec-head .eyebrow,.sec-head h2,.sec-head .stats{text-shadow:var(--ink-shadow)}
.eyebrow{font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.sec-head h2{margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,7vw,3.4rem);line-height:1.06;letter-spacing:-.025em}
.stats{margin:18px 0 0;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.todo{display:block;margin-top:8px;letter-spacing:.16em;color:var(--muted);
  border:1px dashed var(--hairline);border-radius:2px;padding:3px 7px;width:max-content}
.albums::after{content:'';display:block;height:1px;margin-top:clamp(56px,10vh,110px);
  background:linear-gradient(90deg,transparent,var(--hairline) 16%,var(--hairline) 84%,transparent)}
.ns{color:var(--ivory-dim);font-size:.875rem;line-height:1.6}

.masonry{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.mcol{display:grid;gap:18px;align-content:start}
.acard{display:block;text-decoration:none;opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.acard.in{opacity:1;transform:none}
.acard__img{position:relative;width:100%;overflow:hidden;border-radius:4px;background:var(--ink-850)}
.acard__img>span{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .45s var(--ease-out-expo)}
.acard:active .acard__img>span{transform:scale(1.04)}
.acard__t{margin:9px 0 0;font-family:var(--font-ui);font-weight:400;font-size:.8125rem;
  line-height:1.38;color:var(--ivory);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard__m{margin-top:7px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.acard__m b{font-weight:400;display:flex;align-items:center;gap:6px;min-width:0}
.acard__m b i{width:4px;height:4px;border-radius:50%;background:var(--ember);flex:none}
.acard__m b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard__m em{font-style:normal;flex:none}
.more{display:inline-block;margin-top:36px;font-size:.6875rem;letter-spacing:.22em;
  text-transform:uppercase;border-bottom:1px solid var(--hairline);padding-bottom:7px;text-decoration:none}

/* ---------- CAM KẾT ---------- */
.promise{padding:clamp(52px,9vh,100px) 16px 0;background:var(--void)}
.plist{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--hairline)}
.plist li{padding:17px 2px;border-bottom:1px solid var(--hairline)}
.plist b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.05rem,4.3vw,1.35rem);line-height:1.25;color:var(--ivory)}
.plist span{display:block;margin-top:6px;font-size:.8125rem;line-height:1.55;color:var(--muted)}

/* ---------- ĐẠI DIỆN LỚP ---------- */
.rep{margin:clamp(52px,9vh,100px) 16px;padding:22px 20px 24px;
  border:1px solid var(--hairline);border-radius:3px;
  background:linear-gradient(158deg, rgba(224,164,88,.075), transparent 62%)}
.rep h2{margin:11px 0 0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.35rem,5.4vw,1.9rem);line-height:1.18;letter-spacing:-.02em;color:var(--ivory)}
.rep p{margin:11px 0 0;font-size:.8125rem;line-height:1.6;color:var(--ivory-dim);max-width:52ch}
.rep .more{margin-top:16px}

/* ---------- TẦNG 04 — liên hệ ---------- */
.contact{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(72px,12vh,140px) 16px calc(96px + env(safe-area-inset-bottom));
  background:var(--void);overflow:hidden}
.contact::before{content:'';position:absolute;top:-10%;right:-25%;width:80vw;height:80vw;border-radius:50%;
  background:radial-gradient(circle,rgba(224,164,88,.14),transparent 68%)}
.contact>*{position:relative}
.contact h2{margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,7vw,4rem);line-height:1.06;letter-spacing:-.025em}
.lead{margin:16px 0 0;font-size:.875rem;line-height:1.6;color:var(--ivory-dim);max-width:44ch}
.channels{margin:30px 0 0;border-top:1px solid var(--hairline)}
.ch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;
  padding:12px 4px;border-bottom:1px solid var(--hairline);text-decoration:none;
  position:relative;overflow:hidden;transition:background .3s ease}
.ch:hover,.ch:active{background:var(--ink-900)}
.ch::before{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ember);
  transition:width .32s var(--ease-out-expo)}
.ch:hover::before,.ch:active::before{width:100%}
.ch strong{font-family:var(--font-display);font-weight:400;font-size:clamp(1.25rem,4.5vw,1.75rem)}
.ch span{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.btn{display:block;margin-top:34px;text-align:center;background:var(--ember);color:var(--void);
  font-weight:500;padding:18px;border-radius:2px;text-decoration:none;letter-spacing:.02em}
.foot{margin-top:40px;display:flex;flex-wrap:wrap;gap:18px;font-size:.625rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.foot a{text-decoration:none}

/* ---------- thanh CTA dính ---------- */
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,7,6,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--hairline);
  transform:translateY(120%);transition:transform .32s var(--ease-out-expo)}
.ctabar.in{transform:none}
.ctabar::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:64px;
  pointer-events:none;background:var(--scrim-down)}
.ctabar a{flex:1;text-align:center;padding:13px;border-radius:2px;text-decoration:none;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.ctabar a.primary{background:var(--ember);color:var(--void);font-weight:500}
.ctabar a.ghost{border:1px solid var(--hairline)}
@media (min-width:768px){.ctabar{display:none}}

/* ---------- lightbox ---------- */
dialog.lb{border:0;padding:0;max-width:100vw;max-height:100svh;width:100vw;height:100svh;
  background:var(--void);color:var(--ivory)}
dialog.lb::backdrop{background:rgba(8,7,6,.96)}
.lb::before,.lb::after{content:'';position:absolute;left:0;right:0;z-index:2;pointer-events:none;height:120px}
.lb::before{top:0;background:var(--scrim-up)}
.lb::after{bottom:0;background:var(--scrim-down)}
.lb__x,.lb__cap{z-index:3}
.lb__img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:56px 12px 92px}
.lb__img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.lb__x{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;width:44px;height:44px;
  display:grid;place-items:center;font-size:1.1rem}
.lb__cap{position:absolute;left:20px;right:20px;bottom:calc(26px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;gap:16px;font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- desktop ---------- */
@media (min-width:1024px){
  .wall__cols{grid-template-columns:repeat(4,1fr)}
  .albums,.contact,.promise{padding-left:max(20px,calc((100vw - 1320px)/2));
                            padding-right:max(20px,calc((100vw - 1320px)/2))}
  .rep{margin-left:max(20px,calc((100vw - 1320px)/2));
       margin-right:max(20px,calc((100vw - 1320px)/2));padding:30px 32px 32px}
  .plist{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;border-top:0}
  .plist li{border-top:1px solid var(--hairline);border-bottom:0;padding:20px 0 0}
  .mcol{gap:22px}
  .moment__text{left:max(20px,calc((100vw - 1320px)/2));right:auto;max-width:52ch}
}
@media (min-width:1440px){ .wall__cols{grid-template-columns:repeat(5,1fr)} }

/* ---------- giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
  .col__track{transform:none!important}
  .moment__media{animation:none}
  .hint i{animation:none}
  .acard{opacity:1;transform:none!important}
}

/* ---------- nút nhạc nền ----------
   Để mờ theo yêu cầu: opacity .34, rê chuột / chạm / focus bàn phím mới rõ.
   Ba vạch chạy bằng transform:scaleY -> compositor lo, không ăn FPS của tường ảnh. */
.nav__end{display:flex;align-items:center;gap:8px}
.sound{display:flex;align-items:center;padding:10px 12px;line-height:1;
  opacity:.34;transition:opacity .45s ease}
.sound.is-waiting{opacity:.34}
.sound:hover,.sound:focus-visible,.sound:active,
.sound.is-waiting:hover,.sound.is-waiting:focus-visible,
.sound.is-on:hover,.sound.is-on:focus-visible{opacity:1;animation:none}

/* MUỐN GỢI Ý CHO KHÁCH DESKTOP (người chỉ cuộn, không bấm gì, nên không bao giờ
   nghe được nhạc): bỏ dấu chú thích 2 dòng dưới -> nút thở rất nhẹ trong lúc
   nhạc đang chạy ngầm tắt tiếng. Bật lại là mất cái "mờ tịt" hiện tại.
.sound.is-waiting{animation:soundwait 3.6s ease-in-out infinite}
@keyframes soundwait{0%,100%{opacity:.24}50%{opacity:.56}}
*/

.sound__eq{display:flex;align-items:flex-end;gap:2px;height:11px}
.sound__eq i{display:block;width:2px;height:11px;border-radius:1px;background:var(--ivory-dim);
  transform-origin:bottom;transform:scaleY(.34);transition:background .3s ease}
.sound__eq i:nth-child(2){transform:scaleY(.58)}
.sound__eq i:nth-child(3){transform:scaleY(.42)}
.sound.is-on .sound__eq i{background:var(--ember);animation:eq .86s ease-in-out infinite}
.sound.is-on .sound__eq i:nth-child(2){animation-duration:.6s;animation-delay:-.2s}
.sound.is-on .sound__eq i:nth-child(3){animation-duration:1.12s;animation-delay:-.45s}
@keyframes eq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}

/* thẻ mang nhạc — phải nằm trong layout thật (display:none thì Safari không phát),
   nên giấu bằng 1px trong suốt ở góc. */
.sndmedia{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:0;
  pointer-events:none;z-index:-1}

@media (prefers-reduced-motion:reduce){
  .sound.is-on .sound__eq i{animation:none;transform:scaleY(.7)}
}