/* public/landing.css — TRANG GIỚI THIỆU (landing bán hàng) ở "/". Viết lại 21/09/2026 theo ba web
   mẫu chủ xưởng chỉ đích danh (OpenArt · Higgsfield · Magnific): hero TỐI phủ video thật, tiêu đề
   cực to chữ sát (letter-spacing âm, IN HOA), lưới media dày đặc, chip viền tròn, CTA cao 48 bo 12,
   điện thoại có hamburger + 2 cột + thanh CTA dính đáy.

   LUẬT MÀU: mọi màu đi qua biến trong /tokens.css (nạp TRƯỚC tệp này) — admin đổi bộ ở /admin ›
   Giao diện là cả trang đổi theo, KỂ CẢ đầu trang, dải tên model và thước phim (chủ xưởng 23/09: "thử
   màu này" — bộ Trắng). Năm biến --hero-* khai ngay dưới đây giờ chỉ còn giữ TỐI cho bề mặt xem media
   (lightbox); trong ba mục kia chúng bị đè về token của bộ — xem khối "BA MỤC THEO BỘ MÀU".

   Mobile-first: khối mặc định là điện thoại, @media (min-width:761px) là máy tính bảng/desktop,
   @media (min-width:1100px) là desktop rộng. */

:root{
  --hero-nen:#0f1113;
  --hero-chu:#f7f7f8;
  --hero-mo:rgba(247,247,248,.72);
  --hero-vien:rgba(255,255,255,.12);
  --hero-kinh:rgba(255,255,255,.06);
}
/* BA MỤC THEO BỘ MÀU: đầu trang, dải tên model, thước phim trước đây TỐI cố định bằng --hero-*. Đè các
   biến đó NGAY TRONG ba mục để mọi chỗ bên trong đổi theo bộ đang dùng; lightbox (ngoài ba mục) vẫn tối. */
.hero,.dai-model,.vc-phan{--hero-nen:var(--ground);--hero-chu:var(--txt);--hero-mo:var(--dim);
  --hero-vien:var(--line);--hero-kinh:var(--kinh)}

/* ══ GỐC ══ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
html,body{margin:0;color:var(--txt);font-family:var(--ui);font-size:var(--fs-md);
  line-height:var(--lh-thoang);-webkit-font-smoothing:antialiased}
/* Chặn cuộn ngang ở gốc cho MỌI bề rộng (tokens.css chỉ chặn ≤430px). "clip" giữ được sticky. */
html,body{overflow-x:hidden;overflow-x:clip}
body{min-height:100vh}
body.khoa{overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
img,video,svg{display:block}
button{font-family:var(--ui);cursor:pointer}
[hidden]{display:none!important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:var(--r-sm)}

/* Khung nội dung: lề 16px điện thoại, 24px máy bàn, tối đa --do-rong. */
.kh{width:100%;max-width:var(--do-rong);margin:0 auto;padding:0 var(--sp-4)}
.phan{padding:var(--sp-7) 0}

/* Đầu mỗi mục: eyebrow mono + tiêu đề IN HOA chữ sát + một dòng dẫn. */
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--mono);font-weight:500;
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhan);margin-bottom:var(--sp-3)}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--chu-nhan)}
.tieu-de{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(var(--fs-2xl),4.6vw,var(--fs-4xl));line-height:1;letter-spacing:-.03em;max-width:18ch}
.dan{color:var(--dim);font-size:var(--fs-md);max-width:56ch;margin-top:var(--sp-3)}
.dau-muc{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-5)}

/* ══ 1. THANH ĐẦU 64px, KÍNH MỜ TRÊN NỀN SÁNG ══
   .dau-trang (tokens.css) lo sticky + viền dưới; ở đây ép cao 64, không xuống dòng (tokens.css
   ≤430px cho nó wrap — landing có hamburger nên không cần). */
.dau-trang{height:64px;flex-wrap:nowrap;padding:0 var(--sp-4);gap:var(--sp-3);row-gap:0;
  background:color-mix(in srgb,var(--ground) 80%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.dau-trang .nhan-hieu{font-size:var(--fs-lg)}
.dau-trang .nav-lon{display:none}
.dau-trang .nut-dn{display:none}
.dau-trang .nut-vang{height:40px;padding:0 var(--sp-4);font-size:var(--fs-sm);border-radius:var(--r);white-space:nowrap}
.nut-menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border-radius:var(--r);border:1px solid var(--line);background:var(--kinh);color:var(--txt)}
.nut-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nut-menu:hover{border-color:var(--line-manh)}

/* Ngăn kéo TOÀN MÀN trên điện thoại. Đóng bằng transform + visibility (giữ trong DOM để
   aria-controls trỏ tới và để có chuyển động), KHÔNG opacity:0. */
.ngan-keo{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) var(--sp-5);background:var(--ground);overflow-y:auto;
  transform:translateX(100%);visibility:hidden;transition:transform .24s cubic-bezier(.2,.7,.2,1),visibility .24s}
.ngan-keo.mo{transform:none;visibility:visible}
.ngan-keo .keo-dau{display:flex;align-items:center;justify-content:space-between;height:64px;margin-bottom:var(--sp-4)}
.ngan-keo .keo-dau .nhan-hieu{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--disp);font-weight:800;font-size:var(--fs-lg);color:var(--txt)}
.ngan-keo .keo-dau .nhan-hieu b{color:var(--chu-nhan)}
.ngan-keo .muc{display:flex;flex-direction:column}
.ngan-keo .muc a{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);font-family:var(--disp);font-weight:700;font-size:var(--fs-2xl);
  letter-spacing:-.02em;text-transform:uppercase;color:var(--txt)}
.ngan-keo .muc a svg{width:22px;height:22px;fill:none;stroke:var(--chu-nhan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ngan-keo .keo-cuoi{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-5)}
.ngan-keo .keo-cuoi .nut-vang,.ngan-keo .keo-cuoi .nut-dn{width:100%;height:48px;border-radius:var(--r);font-size:var(--fs-md)}
.ngan-keo .keo-cuoi .nut-dn{justify-content:center;font-weight:600;color:var(--txt)}

/* ══ 2. HERO TỐI — ẢNH GHÉP QUANH TIÊU ĐỀ (kiểu OpenArt: chữ khổng lồ giữa, ảnh mẫu rải lệch quanh
   viền, giữa trống cho chữ). Điện thoại chỉ hiện 2 ô góc trên cho gọn; máy bàn hiện đủ 7 ô. ══ */
.hero{position:relative;overflow:hidden;background:var(--hero-nen);color:var(--hero-chu);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-9) 0 var(--sp-8)}
.hero-dinh{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.hero-collage{position:absolute;inset:0;pointer-events:none}
/* Video nở: điện thoại KHÔNG dùng (không tải tệp), máy bàn mới bật ở tầng ≥761px. */
.hero-phim{display:none}
.hc{position:absolute;border-radius:var(--r);overflow:hidden;border:1px solid var(--hero-vien);
  background:var(--hero-kinh);box-shadow:0 20px 50px var(--bong)}
.hc img{width:100%;height:100%;object-fit:cover}
.hc.hc-skel{background:linear-gradient(90deg,var(--hero-kinh) 25%,rgba(255,255,255,.12) 50%,var(--hero-kinh) 75%);
  background-size:200% 100%;animation:xuong 1.6s ease-in-out infinite}
/* Nhịp trôi lơ lửng của ảnh đầu trang: lên xuống vài pixel + nghiêng nhẹ, mỗi ô một chu kỳ khác nhau
   nên cả dải không nhấp nhô cùng lúc. Biên độ --bien do JS hạ về 0 khi bắt đầu cuộn. */
@keyframes troi{
  from{transform:translateY(calc(var(--bien,7px) * -1)) rotate(-.5deg)}
  to{transform:translateY(var(--bien,7px)) rotate(.5deg)}
}
/* Điện thoại: hero tĩnh (không có trò cuộn-biến-hình), ảnh rải quanh mép chỉ đè lên chữ trên màn hẹp
   → tắt cả dải ảnh, giữ hero sạch: chữ trên nền tối. */
.hero-collage{display:none}
.hero .kh{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:var(--sp-6) var(--sp-4)}
/* Quầng tối SAU khối chữ (không phải phủ cả hero) — co giãn theo đúng khối chữ nên ảnh ở mép vẫn sáng rõ. */
.hero .kh::before{content:"";position:absolute;inset:calc(var(--sp-5) * -1) calc(var(--sp-4) * -1);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse closest-side,color-mix(in srgb,var(--hero-nen) 58%,transparent) 42%,
    color-mix(in srgb,var(--hero-nen) 32%,transparent) 74%,transparent 100%)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-3);font-family:var(--mono);font-weight:500;
  font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--hero-mo);margin-bottom:var(--sp-4)}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";width:20px;height:1px;background:var(--amber)}
.hero h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(36px,8vw,84px);
  letter-spacing:-.03em;line-height:.98;max-width:16ch;color:var(--hero-chu)}
.hero h1 .nhan{display:block;color:var(--chu-nhan)}
.hero .sub{color:var(--hero-mo);font-size:var(--fs-md);line-height:1.5;max-width:42ch;margin:var(--sp-4) auto var(--sp-5);text-wrap:balance}
.hero-nut{display:flex;justify-content:center}
.hero-nut .nut-vang{height:52px;padding:0 var(--sp-6);border-radius:var(--r);font-size:var(--fs-md)}
.hero-nut svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-ghi{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-5);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--hero-mo)}
.hero-ghi span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:var(--sp-2);vertical-align:middle}

/* ══ 3. DẢI TÊN MODEL CHẠY NGANG ══ Nền TỐI nối liền hero. Hai bản nối đuôi, dịch -50% là vòng lặp
   kín. Chạy bằng translate3d + will-change để trình duyệt đẩy lên thẻ đồ hoạ, không giật. */
.dai-model{background:var(--hero-nen);color:var(--hero-chu);padding:var(--sp-7) 0 var(--sp-6);overflow:hidden}
.dai-model-tieu{font-family:var(--disp);font-weight:800;text-transform:uppercase;text-align:center;
  font-size:clamp(24px,4.4vw,44px);letter-spacing:-.02em;line-height:1.05;margin-bottom:var(--sp-6);
  color:var(--hero-chu);
  /* chữ "thêm sáng": quầng vàng toả quanh nét chữ */
  text-shadow:0 0 18px color-mix(in srgb,var(--amber) 38%,transparent),
    0 0 46px color-mix(in srgb,var(--amber) 20%,transparent)}
.dai-model-tieu span{color:var(--chu-nhan)}
.chay-khung{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.chay-model{display:flex;align-items:center;gap:var(--sp-6);width:max-content;
  will-change:transform;animation:chay-model 38s linear infinite}
/* KHÔNG dừng khi trỏ chuột: dải này chạy suốt, trỏ vào mà nó đứng lại là khó chịu. */
.o-model{display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  font-family:var(--disp);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em;color:var(--hero-mo)}
.o-model i{width:9px;height:9px;border-radius:50%;background:var(--hero-vien)}
.o-model.ho-seedance i{background:var(--amber)}
.o-model.ho-kling i{background:var(--purple)}
.o-model.ho-seedream i{background:var(--blue)}
.o-model.ho-google i{background:var(--green)}
/* Chạy SANG PHẢI — ngược chiều thước phim bên dưới (dải cong trôi sang trái), chủ xưởng chốt 22/09.
   Vẫn là hai bản nối đuôi nên đi từ -50% về 0 cũng kín mối nối y như chiều cũ. */
@keyframes chay-model{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* ══ 3b. DẢI VIDEO CONG — thẻ giữa quay thẳng mặt và tự chạy, hai bên nghiêng dần lùi ra sau.
   Nền TỐI như hero: dải phim khít nhau chỉ nổi trên nền tối, để nền sáng thì mọi mép nối đều lộ. ══ */
.vc-phan{padding-bottom:var(--sp-7);background:var(--hero-nen);color:var(--hero-chu)}
.vc-phan .tieu-de{color:var(--hero-chu)}
.vc-phan .dan{color:var(--hero-mo)}
/* .dau-muc.dau-giua (hai lớp) để thắng luật máy bàn của .dau-muc (hàng ngang, dạt hai bên) — không thì
   nhãn nhỏ dạt sang trái còn tiêu đề dạt sang phải, như ảnh chủ xưởng gửi 23/09. */
.dau-giua,.dau-muc.dau-giua{flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dau-giua .tieu-de{max-width:22ch}
.dau-giua .dan{max-width:52ch}
.vong-cung{position:relative;margin-top:var(--sp-5)}
/* DẢI CONG = mặt trong một HÌNH TRỤ: mỗi thẻ xoay quanh trục trụ một góc --buoc rồi đẩy ra bán kính
   --r, nên mép thẻ này CHẠM đúng mép thẻ kia, không còn khe. JS tính --r từ bề rộng thẻ thật
   (r = w / (2·tan(bước/2))) và xoay cả trụ đi --goc để thẻ đang chọn quay ra trước. */
.vc-o-khung{overflow:hidden;perspective:1100px;   /* mắt đứng gần → vòm sâu, thấy rõ độ cong */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
/* LÕM (như OpenArt): người xem đứng ở TÂM trụ, thẻ dán mặt trong thành trụ nên hai thẻ bên rìa
   NGẢ VỀ PHÍA người xem — thẻ đẩy lùi -r, cả trụ kéo lên +r. Đảo dấu hai chỗ này là thành lồi. */
.vc-san{position:relative;margin:var(--sp-4) 0;transform-style:preserve-3d;
  /* KHÔNG transition: góc do requestAnimationFrame đẩy từng khung hình, trôi đều như cuốn phim.
     Để transition ở đây là nó đuổi theo từng khung → giật nấc. */
  transform:translateZ(var(--r,0px)) rotateY(var(--goc,0deg))}
.vc-o{position:absolute;left:50%;top:0;width:var(--w,230px);margin-left:calc(var(--w,230px) / -2);cursor:default;
  transform:rotateY(calc(var(--i,0) * var(--buoc,9deg) * -1)) translateZ(calc(var(--r,0px) * -1));
  /* Thẻ trong tầm nhìn ĐỤC HẲN; chỉ thẻ đã ra ngoài rìa (--ad ≥ 3,4) mới tắt dần, tới 4,2 là tắt hẳn — dải lõm
     phóng thẻ xa to gấp nhiều lần, để lộ là vỡ bố cục. Bản cũ mờ dần từ thẻ thứ hai (1 − ad·0,24): trên nền
     TỐI trông như chìm vào bóng, trên nền SÁNG (bộ Trắng) thì thành mảng xám sữa — chủ xưởng chê 23/09.
     Hai mép dải tan vào nền bằng mask-image của .vc-o-khung, nền nào cũng đúng.
     KHÔNG transition: --ad đổi từng khung hình theo góc quay, transition sẽ làm mờ trễ nhịp. */
  opacity:clamp(0,calc((4.2 - var(--ad,0)) * 1.25),1)}
/* Viền RÕ cho từng khung: các khung khít nhau, viền mờ thì nhìn như một mảng liền, mất cảm giác
   "từng thước phim". Hai lớp: rãnh tối ăn vào trong + viền sáng ngoài cùng, nên mối nối nào cũng
   thành một đường kẻ dứt khoát. Thẻ đang xem viền vàng. */
/* Viền ĐEN, không vàng không xám: mối nối là một rãnh tối như khe giữa hai thước phim. Thẻ đang xem
   KHÔNG đổi màu viền — chỉ nhãn dưới đổi màu là đủ biết. */
.vc-anh{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--hero-kinh);
  border:3px solid rgba(0,0,0,.92);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
/* Ảnh tĩnh nằm dưới; thẻ <video> nằm trên nhưng lúc chưa rê chuột thì nó KHÔNG CÓ src và KHÔNG CÓ
   poster nên trong suốt, nhìn xuyên xuống ảnh. Không cần trò opacity nào — từng dính vòng chết:
   video mờ thì Chrome không phát, không phát thì mãi mờ. */
.vc-anh .vc-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* translateZ(0) + will-change: ép thẻ video thành MỘT LỚP VẼ RIÊNG. Video nằm trong khung xoay 3D
   (preserve-3d) có máy chỉ vẽ đúng khung hình đầu rồi đứng im — nhìn như không phát, động chuột mới
   nhảy vài khung. Tách lớp riêng thì nó tự vẽ lại liên tục. */
.vc-anh video{position:relative;width:100%;height:100%;object-fit:cover;pointer-events:none;
  transform:translateZ(0)}
/* will-change CHỈ gắn cho thẻ đang chạy. Ghim cả 27 thẻ là 27 lớp vẽ thường trú trong một khung
   preserve-3d có mặt nạ — cây lớp to, bộ nhớ GPU lớn, mỗi khung hình phải duyệt hết. translateZ(0)
   thì PHẢI giữ (xem ghi chú trên), chỉ chuyển riêng will-change. */
.vc-o.dang-chay .vc-anh video{will-change:transform}
.vc-nhan{margin-top:var(--sp-3);text-align:center;font-weight:600;font-size:var(--fs-sm);color:var(--hero-mo)}
.vc-o.giua .vc-nhan{color:var(--chu-nhan)}
/* Thẻ ở hai rìa gần như tàng hình (--ad ≥ 3,7, opacity ≤ 0,11) nhưng opacity:0 VẪN ăn chuột. Cắt chuột
   cho chúng — nhưng CHỈ chúng: thẻ còn nhìn rõ thì phải rê vào được. */
.vc-o.vc-xa{pointer-events:none}
.vc-nut{position:absolute;top:38%;z-index:2;width:44px;height:44px;border-radius:var(--r-full);
  display:grid;place-items:center;border:1px solid var(--hero-vien);background:var(--hero-kinh);color:var(--hero-chu);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vc-nut:hover{border-color:var(--hero-mo);background:var(--hero-vien)}
.vc-nut svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vc-trai{left:var(--sp-2)}
.vc-trai svg{transform:rotate(180deg)}
.vc-phai{right:var(--sp-2)}
.vc-cta{display:flex;justify-content:center;margin-top:var(--sp-5)}
.vc-cta .nut-vang{height:52px;padding:0 var(--sp-6);border-radius:var(--r);font-size:var(--fs-md)}

/* ══ 4. MẪU — lưới masonry ══ */

.luoi-mau{columns:2;column-gap:var(--sp-3);margin-top:var(--sp-4)}
.the-mau{position:relative;display:block;break-inside:avoid;margin:0 0 var(--sp-3);border-radius:var(--r);
  overflow:hidden;background:var(--raise);border:1px solid var(--line);cursor:pointer;transform:translateZ(0);
  transition:transform .16s,border-color .16s,box-shadow .16s}
.the-mau:hover{transform:translateY(-2px);border-color:var(--am-line);box-shadow:var(--card-shadow)}
.the-mau .khung{position:relative;width:100%;overflow:hidden;background:var(--sunk)}
.a-16-9{aspect-ratio:16/9}.a-9-16{aspect-ratio:9/16}.a-1-1{aspect-ratio:1/1}.a-3-4{aspect-ratio:3/4}
.the-mau img,.the-mau video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.the-mau .choi{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:var(--r-full);
  display:grid;place-items:center;background:var(--phu-anh);border:1px solid var(--hero-vien);color:var(--hero-chu);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;transition:visibility .16s,transform .16s}
.the-mau .choi svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.the-mau.dang-chay .choi{visibility:hidden}
/* Thẻ lưới giờ THUẦN HÌNH: không nhãn giây, không tên mẫu, không tên model đè lên. Mọi thứ đó hiện
   trong lightbox khi bấm vào. */
/* Khung xương: khi mau.json rỗng hoặc lỗi. Nhấp nháy nhẹ để biết là đang chờ, không phải hỏng. */
.xuong{background:linear-gradient(90deg,var(--raise) 25%,var(--sunk) 50%,var(--raise) 75%);
  background-size:200% 100%;animation:xuong 1.4s ease-in-out infinite}
@keyframes xuong{to{background-position:-200% 0}}
.the-mau.xuong{border-color:transparent;cursor:default}
.the-mau.xuong:hover{transform:none;box-shadow:none}
.mau-trong{padding:var(--sp-6) var(--sp-4);border-radius:var(--r-lg);border:1px dashed var(--line-manh);
  background:var(--sunk);text-align:center;color:var(--dim);font-size:var(--fs-sm)}
.mau-ghi{margin-top:var(--sp-3);color:var(--faint);font-size:var(--fs-sm)}

/* ══ LIGHTBOX ══ */
.lb{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
  background:color-mix(in srgb,var(--hero-nen) 94%,transparent);color:var(--hero-chu)}
.lb .than{position:relative;width:100%;max-width:1100px;display:flex;flex-direction:column;gap:var(--sp-3);align-items:center}
.lb video,.lb img{max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);
  border-radius:var(--r);background:var(--hero-nen);object-fit:contain;box-shadow:0 24px 80px var(--bong)}
.lb .chu{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-2) var(--sp-3);
  color:var(--hero-mo);font-size:var(--fs-sm);text-align:center}
.lb .chu b{color:var(--hero-chu);font-weight:600}
.lb .chu i{font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);padding:3px var(--sp-2);border-radius:var(--r-sm);
  border:1px solid var(--hero-vien);background:var(--hero-kinh)}
.lb .dong{position:fixed;top:var(--sp-3);right:var(--sp-3);width:44px;height:44px;border-radius:var(--r-full);
  display:grid;place-items:center;border:1px solid var(--hero-vien);background:var(--hero-kinh);color:var(--hero-chu)}
.lb .dong svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lb .dong:hover{background:var(--hero-vien)}

/* ══ 5. MODEL — bảng GỌN: một hàng viên nhỏ canh giữa dưới tiêu đề (chấm màu theo nhà + tên model).
   Viên không bấm được nên không có hiệu ứng rê; có title thì con trỏ dấu hỏi — đúng luật "ô chú thích
   mới là dấu hỏi" của cả trang. ══ */
.phan-model{position:relative}
.model-giua{display:flex;flex-direction:column;align-items:center;text-align:center}
.model-giua .tieu-de{max-width:18ch}
.model-giua .dan{max-width:50ch;margin-top:var(--sp-3)}
.model-giua .nut-vang{margin-top:var(--sp-5);height:52px;padding:0 var(--sp-6);border-radius:var(--r);font-size:var(--fs-md)}
.model-giua .nut-vang svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Ô HÃNG: logo trong ô vuông bo góc nền --raise + tên hãng + số model. Số ô = số hãng /api/landing trả về (không cố
   định — theo bảng model), mọi ô cùng một khuôn (cùng lề, cùng đường chân chữ); 2 cột trên điện thoại, 4 cột máy bàn,
   hàng cuối có thể thiếu ô. Hãng chưa có logo thì ô logo để trống. Ô không bấm được — có title nên con trỏ dấu hỏi. */
.bang-ho{list-style:none;margin:var(--sp-6) 0 0;padding:0;width:100%;max-width:880px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.the-ho{display:flex;align-items:center;gap:var(--sp-3);min-width:0;padding:var(--sp-3) var(--sp-4);text-align:left;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.the-ho[title]{cursor:help}
.logo-ho{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--raise);color:var(--txt)}
.logo-ho svg{width:24px;height:24px}
.chu-ho{min-width:0}
.chu-ho b{display:block;font-family:var(--disp);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em;
  line-height:var(--lh-chat);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chu-ho small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--dim)}
.the-ho.xuong{height:74px;border-color:transparent;
  background:linear-gradient(90deg,var(--kinh) 25%,var(--line) 50%,var(--kinh) 75%);
  background-size:200% 100%;animation:xuong 1.6s ease-in-out infinite}
/* SẮP CÓ: một hàng chip viền đứt, chữ nhạt — nhìn là biết chưa dùng được. */
.sap-co{margin-top:var(--sp-5);max-width:880px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-2) var(--sp-3)}
.nhan-sap{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sap-co ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
.chip-sap{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;white-space:nowrap;
  border-radius:var(--r-full);border:1px dashed var(--line-manh);font-size:var(--fs-sm);color:var(--dim)}
.chip-sap svg{width:14px;height:14px;flex:0 0 auto}

/* ══ 6. TÍNH NĂNG — thẻ .the-sang có ảnh nền mờ ══ */
.luoi-tn{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.tn{min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-5)}
.tn .nen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;pointer-events:none}
.tn .phu{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--panel) 35%,transparent)}
.tn .ico{position:relative;width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:auto;
  background:var(--amber-soft);border:1px solid var(--am-line);color:var(--chu-nhan)}
.tn .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tn.tim .ico{background:var(--purple-soft);border-color:var(--tim-line);color:var(--purple)}
.tn h3{position:relative;font-family:var(--disp);font-weight:700;font-size:var(--fs-xl);letter-spacing:-.01em;line-height:var(--lh-chat);margin-top:var(--sp-5)}
.tn p{position:relative;color:var(--dim);font-size:var(--fs-md)}

/* ══ 7. CÁCH DÙNG — dòng thời gian dọc (điện thoại) / ngang (máy bàn) ══ */
.luoi-buoc{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
.buoc{position:relative;padding-left:calc(var(--sp-7) + var(--sp-3))}
.buoc .so{position:absolute;left:0;top:0;width:var(--sp-7);height:var(--sp-7);border-radius:var(--r-full);display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:var(--fs-xl);color:var(--on-amber);background:var(--vang-grad);box-shadow:var(--amber-glow)}
.buoc::before{content:"";position:absolute;left:calc(var(--sp-7) / 2);top:var(--sp-7);bottom:calc(var(--sp-5) * -1);width:1px;background:var(--line-manh)}
.buoc:last-child::before{display:none}
.buoc h3{font-family:var(--disp);font-weight:700;font-size:var(--fs-xl);letter-spacing:-.01em;line-height:var(--sp-7)}
.buoc p{color:var(--dim);margin-top:var(--sp-2)}

/* ══ 8. BẢNG GIÁ — ba gói, chưa có số ══ */
.luoi-gia{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.goi{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel)}
.goi.noi{border-color:var(--am-line);background:var(--nen-am);box-shadow:var(--card-shadow)}
.goi .ten{font-family:var(--mono);font-weight:500;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhan)}
.goi h3{font-family:var(--disp);font-weight:800;font-size:var(--fs-2xl);letter-spacing:-.02em;line-height:var(--lh-chat)}
.goi .gia{font-family:var(--disp);font-weight:700;font-size:var(--fs-lg);color:var(--txt)}
.goi .mo{color:var(--dim);font-size:var(--fs-sm)}
.goi ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2);color:var(--dim);font-size:var(--fs-sm)}
.goi li{display:flex;gap:var(--sp-2);align-items:flex-start}
.goi li svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.goi .nut-vang,.goi .nut-lien{margin-top:auto;height:48px;border-radius:var(--r);font-size:var(--fs-md)}
.nut-lien{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:48px;padding:0 var(--sp-5);
  border-radius:var(--r);border:1px solid var(--line-manh);background:var(--raise);color:var(--txt);font-weight:600;transition:border-color .14s}
.nut-lien:hover{border-color:var(--txt)}

/* ══ 9. CTA CUỐI — mảng vàng nguyên chiều ngang (kiểu footer Higgsfield) ══ */
.cta-cuoi{background:var(--vang-grad);color:var(--on-amber);padding:var(--sp-8) 0}
.cta-cuoi .kh{display:flex;flex-direction:column;gap:var(--sp-4)}
.cta-cuoi .eyebrow{color:var(--on-amber)}
.cta-cuoi .eyebrow::before{background:var(--on-amber)}
.cta-cuoi h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(var(--fs-3xl),7vw,var(--fs-5xl));
  letter-spacing:-.03em;line-height:.95;max-width:14ch}
.cta-cuoi p{font-size:var(--fs-lg);max-width:46ch}
.nut-toi{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);align-self:flex-start;height:52px;padding:0 var(--sp-6);
  border-radius:var(--r);background:var(--txt);color:var(--ground);font-weight:700;font-size:var(--fs-md);transition:transform .14s}
.nut-toi:hover{transform:translateY(-1px)}
.nut-toi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ══ 10. CHÂN TRANG TỐI — nền = màu chữ của bộ, chữ = màu nền (đảo bộ), KHÔNG dùng --hero-* vì đây không
   phải bề mặt media; đổi bộ màu ở /admin là chân trang đổi theo. ══ */
.chan{background:var(--txt);color:color-mix(in srgb,var(--ground) 72%,transparent);padding:var(--sp-7) 0 calc(var(--sp-5) + 84px)}
.chan .hang{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.chan .cot-hieu{grid-column:1 / -1}
.chan .nhan-hieu{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--disp);font-weight:800;font-size:var(--fs-xl);
  letter-spacing:-.01em;color:var(--ground)}
.chan .nhan-hieu b{color:var(--amber)}
.chan .nhan-hieu .dau{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--vang-grad)}
.chan .nhan-hieu .dau svg{width:17px;height:17px;fill:var(--on-amber)}
.chan .noi{max-width:38ch;font-size:var(--fs-sm);margin-top:var(--sp-3)}
.chan h4{font-family:var(--mono);font-weight:500;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ground);margin-bottom:var(--sp-3)}
.chan .cot a{display:block;padding:var(--sp-1) 0;font-size:var(--fs-sm);color:color-mix(in srgb,var(--ground) 72%,transparent)}
.chan .cot a:hover{color:var(--ground)}
.chan .ban-quyen{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-6);
  padding-top:var(--sp-4);border-top:1px solid color-mix(in srgb,var(--ground) 14%,transparent);font-size:var(--fs-sm);color:color-mix(in srgb,var(--ground) 72%,transparent)}

/* ══ 11. THANH CTA DÍNH ĐÁY (điện thoại) ══ */
.cta-day{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:var(--sp-3) var(--sp-4);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--ground) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .22s,visibility .22s}
.cta-day.hien{transform:none;visibility:visible}
.cta-day .nut-vang{width:100%;height:48px;border-radius:var(--r);font-size:var(--fs-md)}

/* ══ THÔNG BÁO NỔI ══ */
.toasts{position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);z-index:70}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);box-shadow:0 12px 32px var(--bong)}
.toast.err{border-left-color:var(--red)}

/* ══ MÁY TÍNH BẢNG + MÁY BÀN (≥761px) ══ */
@media (min-width:761px){
  .bang-ho{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kh{padding:0 var(--sp-5)}
  .phan{padding:var(--sp-8) 0}
  .dau-muc{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);margin-bottom:var(--sp-6)}
  .dan{font-size:var(--fs-lg);margin-top:0}
  .dau-muc .dan{max-width:40ch;text-align:right}

  .dau-trang{padding:0 var(--sp-5)}
  .dau-trang .nav-lon{display:flex}
  .dau-trang .nut-dn{display:inline-flex;height:44px;padding:0 var(--sp-4);border-radius:var(--r);font-size:var(--fs-md);font-weight:600}
  .dau-trang .nut-vang{height:44px;padding:0 var(--sp-5);font-size:var(--fs-md)}
  .nut-menu,.ngan-keo{display:none}

  /* HERO BIẾN HÌNH KHI CUỘN: khung cao 220vh làm quãng cuộn, .hero-dinh dính lại đứng yên một màn.
     JS đặt --p = 0→1 theo quãng đó; ảnh ghép bay ra mép (--dx/--dy/--dr của từng ô) rồi tắt, chữ mờ
     dần, video nở từ giữa ra gần kín khung. Điện thoại KHÔNG dùng (hero tĩnh, không tải video). */
  /* overflow PHẢI mở ở .hero: sticky nằm trong khung overflow:hidden thì không dính được.
     Việc cắt ảnh bay ra mép giao cho .hero-dinh. */
  .hero{height:220vh;min-height:0;display:block;padding:0;overflow:visible}
  .hero-dinh{position:sticky;top:0;height:100vh;overflow:hidden}
  .hero .sub{font-size:var(--fs-lg);max-width:52ch;margin-bottom:var(--sp-6)}
  .hero-nut .nut-vang{padding-left:var(--sp-7);padding-right:var(--sp-7)}
  .hero .kh{transform:scale(calc(1 - var(--p2,0) * .12));opacity:clamp(0,calc(1 - var(--p2,0) * 2),1);
    will-change:transform,opacity}
  .hero.xa .kh{visibility:hidden}   /* tắt hẳn khi đã mờ, khỏi chắn chuột lên video */

  .hero-collage{display:block}
  /* MÀN 1 (--p1): mỗi ô trượt ngược đúng khoảng lệch ĐIỂM CHỤM (--ox/--oy do JS đo, điểm chụm nằm
     dưới khối chữ) và co về cùng một cỡ (--sc) — cả đám thành một ảnh nhỏ dưới chữ, vừa đi vừa xoay.
     MÀN 2 (--p2): ảnh nhỏ ấy mờ đi, video mọc lên từ đúng chỗ đó. */
  /* Cuộn dùng translate/rotate/scale RIÊNG LẺ, còn transform để dành cho nhịp trôi lơ lửng — hai thứ
     chồng lên nhau được, không tranh nhau một thuộc tính. --bien là biên độ trôi, JS hạ dần về 0 khi
     cuộn nên lúc chụm lại chồng ảnh đứng yên. */
  .hc{translate:calc(var(--ox,0px) * -1 * var(--p1,0)) calc(var(--oy,0px) * -1 * var(--p1,0));
    rotate:calc(var(--r0,0deg) + var(--dr,0deg) * var(--p1,0));
    scale:calc(1 - var(--p1,0) * (1 - var(--sc,.5)));
    animation:troi var(--tg,7s) var(--tre,0s) ease-in-out infinite alternate;
    opacity:clamp(0,calc(1 - var(--p2,0) * 2.4),1);will-change:transform,translate,opacity}
  .hc-1{--tg:6.5s;--tre:-.4s}  .hc-2{--tg:8s;--tre:-2.1s}  .hc-3{--tg:7.2s;--tre:-3.3s}
  .hc-4{--tg:7.8s;--tre:-1.2s} .hc-5{--tg:6.8s;--tre:-2.7s} .hc-6{--tg:8.4s;--tre:-.8s}
  .hc-7{--tg:7.5s;--tre:-3.9s} .hc-8{--tg:6.9s;--tre:-1.7s}
  .hc-1,.hc-2,.hc-3,.hc-4,.hc-5,.hc-6,.hc-7,.hc-8,.hc-9,.hc-10{display:block}
  /* Tám ô cho tám ảnh chủ xưởng chọn (thứ tự ảnh ở ANH_HERO trong landing.js). aspect-ratio mỗi ô
     đặt ĐÚNG tỉ lệ ảnh của nó nên object-fit:cover không cắt mất phần chính. */
  .hc-1{left:2%;top:7%;width:16%;aspect-ratio:4/3;--dr:-16deg}                  /* phòng gương */
  .hc-2{left:1%;top:36%;width:12%;aspect-ratio:9/16;--r0:-3deg;--dr:-11deg}     /* sân thượng mưa */
  .hc-3{left:5%;bottom:5%;width:13%;aspect-ratio:3/4;--dr:13deg}                /* lụa trắng */
  .hc-4{right:2%;top:7%;width:13%;aspect-ratio:4/5;--dr:15deg}                  /* nữ Nga */
  .hc-5{right:1%;top:40%;width:13%;aspect-ratio:3/4;--r0:2deg;--dr:10deg}       /* suit đen */
  .hc-6{right:5%;bottom:5%;width:13%;aspect-ratio:4/5;--dr:-14deg}              /* chân dung viền vàng */
  .hc-7{left:26%;top:2%;width:17%;aspect-ratio:16/9;--dr:8deg}                  /* Sài Gòn mưa */
  .hc-8{right:26%;bottom:2%;width:16%;aspect-ratio:3/2;--r0:3deg;--dr:-8deg}    /* kiến trúc */
  .hc-9{left:17%;top:14%;width:11%;aspect-ratio:9/16;--r0:-4deg;--dr:-9deg}     /* suit trắng */
  .hc-10{right:17%;bottom:13%;width:12%;aspect-ratio:1/1;--r0:4deg;--dr:11deg}  /* gương bay */

  /* MÀN 2: video mọc lên từ đúng chỗ ảnh nhỏ vừa đứng (lệch tâm --ty, JS đo) — bắt đầu nhỏ và nghiêng,
     vừa nở ra vừa trôi về tâm khung và thẳng lại. */
  .hero-phim{display:block;position:absolute;left:50%;top:50%;width:min(1040px,74vw);aspect-ratio:16/9;
    transform:translate(-50%,-50%) translate3d(0,calc(var(--ty,0px) * (1 - var(--p2,0))),0)
      rotate(calc(-7deg * (1 - var(--p2,0)))) scale(calc(.1 + var(--p2,0) * .9));
    pointer-events:none;opacity:clamp(0,calc(var(--p2,0) * 2.6 - .1),1);border-radius:var(--r-lg);overflow:hidden;
    border:1px solid var(--hero-vien);box-shadow:0 40px 120px var(--bong);will-change:transform,opacity}
  .hero-phim video{width:100%;height:100%;object-fit:cover}
  /* Video hero chỉ chạy khi rê chuột vào. Lúc còn nhỏ/mờ thì pointer-events:none cho chuột đi xuyên
     qua; cuộn tới nơi (.xa — chữ đã tắt) mới nhận chuột, nên không chắn và không chạy lén. */
  .hero.xa .hero-phim{pointer-events:auto;cursor:pointer}

  .vc-san{margin:var(--sp-5) 0}
  .vc-nut{width:48px;height:48px}
  .vc-trai{left:var(--sp-5)}
  .vc-phai{right:var(--sp-5)}

  .dai-model{padding:var(--sp-6) 0}
  .chay-model{gap:var(--sp-8)}
  .o-model{font-size:var(--fs-xl)}

  .luoi-mau{columns:3;margin-top:var(--sp-5)}

  .luoi-model{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  .luoi-tn{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  /* Số thẻ tính năng lẻ (5, sau khi gỡ "Giọng đọc") → thẻ cuối lẻ hàng chiếm trọn hàng, không để ô trống. */
  .luoi-tn > .tn:last-child:nth-child(odd){grid-column:1/-1}
  .tn{min-height:240px}

  .luoi-buoc{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
  .buoc{padding-left:0;padding-top:calc(var(--sp-7) + var(--sp-4))}
  .buoc::before{left:calc(var(--sp-7) + var(--sp-3));right:calc(var(--sp-5) * -1);top:calc(var(--sp-7) / 2);bottom:auto;width:auto;height:1px}
  .buoc h3{line-height:var(--lh-chat)}

  .luoi-gia{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
  .goi{padding:var(--sp-6)}

  .cta-cuoi{padding:var(--sp-9) 0}
  .cta-cuoi .kh{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--sp-6)}
  .cta-cuoi .noi-dung{display:flex;flex-direction:column;gap:var(--sp-4)}
  .nut-toi{flex:0 0 auto}

  .chan{padding-bottom:var(--sp-6)}
  .chan .hang{grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-6)}
  .chan .cot-hieu{grid-column:auto}
  .cta-day{display:none}
  .toasts{left:auto;right:18px;bottom:18px;max-width:360px}
}

/* ══ MÁY BÀN RỘNG (≥1100px) ══ */
@media (min-width:1100px){
  .phan{padding:var(--sp-9) 0}
  .tieu-de{max-width:16ch}
  .luoi-mau{columns:4}
  .luoi-model{grid-template-columns:repeat(4,1fr)}
  /* 6 cột ảo, mỗi thẻ chiếm 2 (= 3 thẻ một hàng, như trước). Hàng cuối còn đúng 2 thẻ lẻ (5 thẻ = 3+2) thì
     hai thẻ đó chiếm 3 mỗi thẻ để lấp hết hàng — không còn ô trống thứ ba. */
  .luoi-tn{grid-template-columns:repeat(6,1fr)}
  .luoi-tn > .tn{grid-column:span 2}
  .luoi-tn > .tn:nth-last-child(2):nth-child(3n+1),
  .luoi-tn > .tn:nth-last-child(2):nth-child(3n+1) + *{grid-column:span 3}
  .hero{min-height:820px}
}

/* ══ GIẢM CHUYỂN ĐỘNG ══ Dải chạy đứng yên và cho vuốt tay; khung xương không nhấp nháy. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .the-mau:hover,.the-sang:hover,.nut-vang:hover,.nut-toi:hover{transform:none}
  /* Không biến hình theo cuộn: hero về đúng một màn tĩnh, ảnh ghép đứng yên, bỏ video nở. */
  .hero{height:auto;display:flex;padding:var(--sp-9) 0 var(--sp-8)}
  .hero-dinh{position:static;height:auto}
  .hc,.hero .kh{transform:none!important;opacity:1!important}
  .hero-phim{display:none!important}
}