/* Liên Minh Bảo Hiểm PinaX · bản 30/09 (30/09/2026)
   30/09: mọi cỡ tính bằng rem trên gốc 10 px (html 62,5%) như trang mẫu; màn rộng hơn 1920 px thì gốc phóng theo bề rộng
   (31,25% + 0,4vw, cùng công thức trang mẫu) nên chữ góc, nút, khoảng cách to lên tương xứng trên màn lớn. Nét viền 1 px giữ px.
   Bảng màu đơn sắc tuyệt đối (đo từ trang mẫu tham chiếu): nền tối rgb(8,8,8), nền sáng rgb(225,229,229),
   xám 131/138/143, 102/111/118, 192/196/198. Ngoại lệ duy nhất theo đặc tả: nhãn kính mờ #12191c85. */
:root {
  --den: rgb(8, 8, 8);
  --bac: rgb(225, 229, 229);
  --xam1: rgb(131, 138, 143);
  --xam2: rgb(102, 111, 118);
  --xam2s: rgb(88, 96, 102);   /* 30/09: xám cho CHỮ trên nền sáng (tương phản 5,0:1 với nền bạc; xam2 cũ chỉ 4,0:1) */
  --xam3: rgb(192, 196, 198);
  --xam-cot: rgb(112, 121, 128);   /* 30/09 sáng: tiêu đề cột chân trang, gần xám «LEGAL» của trang mẫu rgb(102,111,118) nhưng đủ tương phản 4,5:1 trên nền tối */
  --kinh: rgba(18, 25, 28, 0.52);
  --font: "Geist", "Helvetica Neue", Arial, sans-serif;
  --le: clamp(1.6rem, 2.2vw, 3.2rem);
  /* cỡ chữ đo từ trang mẫu (29/09, Chrome CDP): 1440 -> 64/52/42 px; 375 -> 35,9/31,9/31,9 px (xem trang đọc, bảng đo chữ) */
  --h1: clamp(3.6rem, 4.45vw, 6.4rem);
  --h2: clamp(3.2rem, 3.62vw, 5.2rem);
  --h3: clamp(3.2rem, 2.92vw, 4.2rem);
  --chu-vua: clamp(1.4rem, 1.25vw, 1.8rem);   /* câu phụ, câu hỏi: 18 px ở 1440, 14 px ở 375 */
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--den); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 62.5%; }
@media (min-width: 1921px) { html { font-size: calc(31.25% + 0.4vw); } }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--den); color: var(--bac); font-family: var(--font); font-size: 1.6rem; line-height: 1.4; font-weight: 400; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
.an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-an] { display: none !important; }
/* 30/09 chống chữ mồ côi: mọi đoạn chữ gắn mã nội dung không để dòng cuối chỉ còn 1 chữ (tiêu đề giữ balance ở .tieu-de bên dưới) */
[data-nd], [data-nd-sinh] { text-wrap: pretty; }
:focus-visible { outline: 1px solid var(--xam3); outline-offset: 0.3rem; }

.tieu-de { font-size: var(--h1); font-weight: 500; line-height: 1.1;   /* trang mẫu 1,0; +0,1 cho dấu chồng IN HOA tiếng Việt */ text-transform: uppercase; letter-spacing: -0.008em; text-wrap: balance; padding-bottom: 0.1em; }   /* chừa chỗ dấu nặng dòng cuối trong khung chữ */
.tieu-de .dong { display: block; overflow: hidden; padding: 0.12em 0 0.14em; margin: -0.12em 0 -0.14em; }
.tieu-de .dong:last-child { margin-bottom: 0; } /* chừa chỗ dấu chồng IN HOA */
.tieu-de .dong > span { display: block; }
.tieu-de.nho { font-size: var(--h3); }
.phu { color: var(--xam3); font-size: var(--chu-vua); line-height: 1.3; font-weight: 500; letter-spacing: -0.003em; max-width: 30em; }
.nhan-nho { font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--xam3); }

/* nút viên thuốc bạc */
/* 1440: 253 x 52, chữ 16 px; 375: 200 x 42, chữ 14 px (như nút chính trang mẫu) */
.nut { display: inline-flex; align-items: center; justify-content: center; height: clamp(4.2rem, 3.61vw, 5.2rem); min-width: clamp(20rem, 17.57vw, 25.3rem); padding: 0 2.4rem; border-radius: 99.9rem; background: var(--bac); color: var(--den); font-size: clamp(1.4rem, 1.111vw, 1.6rem); line-height: 1; font-weight: 500; letter-spacing: -0.003em; transition: background .3s, color .3s; white-space: nowrap; }
.nut:hover { background: var(--xam3); }
[data-nen="sang"] .nut { background: var(--den); color: var(--bac); }

/* ---------- MÀN MỞ ĐẦU ---------- */
.nap { position: fixed; inset: 0; z-index: 100; background: var(--den); display: none; pointer-events: none; }
.nap-lan-dau .nap { display: block; }
.nap-lan-dau .nap .dh { opacity: 0; }
.nap-lan-dau .hero-video video { opacity: 0; } /* lần đầu: không lộ ảnh poster sau màn mở đầu; hiện khi video bắt đầu phát từ khung 0 (tối) */
.nap-lan-dau .hero-video video.dang-phat { opacity: 1; }
.nap-lan-dau .nap-logo { opacity: 0; filter: blur(1rem); transform: translateY(25%); }
.nap-logo { position: absolute; left: 50%; top: 50%; width: 17rem; height: auto; margin: -2.2rem 0 0 -8.5rem; }
.nap .dh { position: absolute; font-size: 1.2rem; color: var(--xam1); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; }
.nap .dh span { color: var(--xam1); }
.nap .tl { left: var(--le); top: var(--le); } .nap .tr { right: var(--le); top: var(--le); }
.nap .bl { left: var(--le); bottom: var(--le); } .nap .br { right: var(--le); bottom: var(--le); }

/* ---------- MENU ---------- */
/* số đo trang mẫu (29/09): thanh cao 80, logo 91 x 41 (nét vẽ 90 x 36), menu 14 px chữ đậm 500 cách 24 px,
   nút góc phải 166 x 48 chữ 14 px nền rgb(28,34,39); điện thoại: logo 91 x 40, nút menu tròn 40 x 40 góc phải */
.dau { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 8rem; padding: 0 var(--le); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.dau > * { pointer-events: auto; }
.dau-logo { position: relative; z-index: 2; display: block; }
.dau-logo img { width: 13.7rem; height: auto; transform: translateY(-0.75rem); }   /* dời lên để TÂM VÒNG trùng tâm thanh menu (nét X vươn lên trên) */
/* logo-dau.svg: vòng 36 px + chữ hoa PinaX 15 px (chữ MOTO mẫu ~15,6 px) */
.dau-menu { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2.4rem; font-size: 1.4rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.003em; }
.dau-menu a { color: var(--bac); padding: 0.8rem 0; transition: opacity .3s, color .3s; }
.dau-menu a + a { color: var(--xam1); }
.dau-menu a:hover { color: var(--bac); }
.dau-menu .menu-nut { display: none; }
.dau-menu a.gach { position: relative; }
.dau-menu a.gach::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.5rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) { .dau-menu a.gach:hover::after { transform: scaleX(1); transform-origin: left center; } }
.dau-phai { position: relative; z-index: 2; display: flex; align-items: center; gap: 1rem; }
.nut-dau { height: 4.8rem; min-width: 0; padding: 0 3.2rem; font-size: 1.4rem; background: rgb(28, 34, 39); color: var(--bac); }
.nut-dau:hover { background: var(--xam2); }
/* nút phụ Đăng nhập (Hội Viên đã có tài khoản): viên thuốc viền mảnh, cùng cao với nút chính */
.nut-phu { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 4.8rem; padding: 0 2.4rem; border-radius: 99.9rem; border: 1px solid rgba(225, 229, 229, .32); color: var(--bac); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.003em; white-space: nowrap; transition: background .3s, border-color .3s, color .3s; }
.nut-phu:hover { background: rgba(225, 229, 229, .1); border-color: rgba(225, 229, 229, .6); }
.nut-burger { display: none; position: relative; width: 4rem; height: 4rem; flex: none; }   /* như trang mẫu: 40 x 40, ba vạch mảnh */
.nut-burger span { position: absolute; left: 0.9rem; width: 2.2rem; height: 1.5px; background: var(--bac); transition: transform .35s, top .35s, opacity .35s; }
.nut-burger span:nth-child(1) { top: 1.3rem; } .nut-burger span:nth-child(2) { top: 1.95rem; } .nut-burger span:nth-child(3) { top: 2.6rem; }
.dau.mo .nut-burger span:nth-child(1) { top: 1.95rem; transform: rotate(45deg); }
.dau.mo .nut-burger span:nth-child(2) { opacity: 0; }
.dau.mo .nut-burger span:nth-child(3) { top: 1.95rem; transform: rotate(-45deg); }
.dau.tren-sang .dau-menu a { color: var(--den); }
.dau.tren-sang .dau-menu a + a { color: var(--xam2s); }
.dau.tren-sang .dau-logo img { filter: invert(1) brightness(.12); }
.dau.tren-sang .nut-dau { background: var(--den); color: var(--bac); }
.dau.tren-sang .nut-phu { border-color: rgba(8, 8, 8, .32); color: var(--den); }
.dau.tren-sang .nut-phu:hover { background: rgba(8, 8, 8, .06); }
.dau.tren-sang .nut-burger span { background: var(--den); }
@media (max-width: 767px) {
  .dau { height: 6.4rem; }
  .dau-logo img { transform: translateY(-0.6rem); }   /* thanh 64 px: giữ đỉnh nét X trong màn hình */
  .dau-phai { gap: 0.8rem; }
  .dau-phai .nut-phu, .dau-phai .nut-dau { display: none; }   /* như trang mẫu: điện thoại chỉ còn logo + nút menu; hai nút nằm trong bảng menu */
  .nut-burger { display: block; }
  /* điện thoại: menu mở từ nút tròn, bảng tối phủ trên cùng (chữ 16 px, nút Đăng nhập dài như trang mẫu) */
  .dau-menu { position: fixed; left: 0; right: 0; top: 0; transform: translateY(-100%); flex-direction: column; align-items: stretch; gap: 0; padding: 8rem var(--le) 2.4rem; background: rgba(8, 8, 8, .97); font-size: 1.6rem; visibility: hidden; transition: transform .5s cubic-bezier(.65, 0, .35, 1), visibility 0s .5s; }
  .dau.mo .dau-menu { transform: translateY(0); visibility: visible; transition: transform .5s cubic-bezier(.65, 0, .35, 1), visibility 0s; }
  .dau-menu a, .dau-menu a + a, .dau.tren-sang .dau-menu a, .dau.tren-sang .dau-menu a + a { color: var(--bac); padding: 0.8rem 0; border-bottom: 1px solid rgba(225, 229, 229, .12); }
  .dau-menu .menu-nut { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 3.2rem; }   /* trang mẫu: 2 nút rộng hết khung, cách 12 px */
  .dau-menu .menu-nut .nut-phu, .dau.tren-sang .dau-menu .menu-nut .nut-phu { display: flex; width: 100%; height: 4.2rem; padding: 0 1.6rem; border: 1px solid rgba(225, 229, 229, .32); color: var(--bac); border-bottom: 1px solid rgba(225, 229, 229, .32); }
  .dau-menu .menu-nut .nut-dau { display: flex; width: 100%; height: 4.2rem; min-width: 0; padding: 0 1.6rem; background: var(--bac); color: var(--den); font-size: 1.4rem; }
  .dau.mo .dau-logo img { filter: none; }
  .dau.mo .nut-burger span { background: var(--bac); }
}
.giam .dau-menu { transition: none; }

/* ---------- KHỐI chung ---------- */
.khoi { position: relative; }
[data-nen="toi"] { background: var(--den); color: var(--bac); }
[data-nen="sang"] { background: var(--bac); color: var(--den); }
[data-nen="sang"] .phu { color: var(--xam2s); }

/* ---------- 1 · HERO ---------- */
.hero { height: 100vh; height: 100svh; min-height: 56rem; overflow: hidden; }
.hero-video { position: absolute; inset: 0; will-change: transform; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; background: var(--den); }
.hero-chu { position: absolute; left: 0; right: 0; top: 13.6rem;   /* trang mẫu: đỉnh chữ cách đỉnh màn 136 px (1440 và 375) */ text-align: center; padding: 0 var(--le); }
.hero-nut { position: absolute; left: 0; right: 0; bottom: 8.5%; display: flex; justify-content: center; }
@media (max-width: 767px) { .hero-video video { object-position: 50% 50%; } }

/* ---------- 2 · ĐỊA CẦU -> BẢN ĐỒ ---------- */
.cau { position: relative; }
.cau-ghim { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.cau-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cau-tinh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: var(--den); }
/* ảnh tĩnh bản đồ (dự phòng): khung đúng tỉ lệ ảnh, nhãn Hoàng Sa, Trường Sa là CHỮ THẬT (lấy từ bảng chữ) đặt theo %
   toạ độ do chup-tinh.mjs đo khi chụp (assets/ban-do-tinh.css); màn hẹp dùng ảnh dọc riêng cắt sát Việt Nam + Biển Đông */
.cau-tinh-khung { display: none; }
.tinh-anh { position: relative; aspect-ratio: 1100 / 1000; width: min(100%, 110vh); width: min(100%, 110svh); }
.tinh-anh picture, .tinh-anh img { display: block; width: 100%; height: 100%; }
.tinh-nhan { position: absolute; font-size: 1.2rem; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--bac); font-weight: 500; white-space: nowrap; }
.tinh-nhan.tinh-bien { color: var(--xam2); font-weight: 400; letter-spacing: .18em; }
.tinh-hs, .tinh-ts { white-space: normal; width: 6.6em; }   /* 2 dòng như cảnh 3D khi khung không rộng (ảnh chụp ở chế độ đó) */
.tinh-ts { text-align: center; }
@media (max-width: 767px) { .tinh-anh { aspect-ratio: 750 / 1100; width: min(100%, 68.18vh); width: min(100%, 68.18svh); } }
.cau-chu { position: absolute; left: 0; right: 0; top: 15.5%; text-align: center; padding: 0 var(--le); display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.cau-chu .tieu-de { max-width: 11.5em; }
.cau-chu .phu { max-width: 30em; text-align: center; }
.cau-chu .nut { margin-top: 0.6rem; }
/* 30/09 chiều: 3 dòng chấm đầu dòng thay câu phụ khối địa cầu; khối chữ canh giữa, từng dòng canh trái sau chấm tròn */
.cau-chu .gach-ds { max-width: min(100%, 40em); text-align: left; list-style: none; }
.gach-ds li.gach { position: relative; padding-left: 1.1em; }
.gach-ds li.gach + li.gach { margin-top: 0.45em; }
.gach-ds li.gach::before { content: ""; position: absolute; left: 0.15em; top: 0.65em; width: 0.34em; height: 0.34em; border-radius: 50%; background: currentColor; transform: translateY(-50%); }
.nhan-kinh { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.8rem 1.1rem 1.3rem; border-radius: 99.9rem; background: #12191c85; -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); font-size: 1.4rem; color: var(--bac); white-space: nowrap; will-change: transform, opacity; opacity: 0; }
.nhan-kinh i { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--xam3); position: relative; flex: none; }
.nhan-kinh i::after { content: ""; position: absolute; left: 0.5rem; top: 0.3rem; width: 0.4rem; height: 0.7rem; border: solid var(--xam3); border-width: 0 1.2px 1.2px 0; transform: rotate(45deg); }
.bd-nhan { position: absolute; left: 0; top: 0; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--xam3); white-space: nowrap; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.bd-nhan.bd-hs, .bd-nhan.bd-ts { color: var(--bac); font-weight: 500; }
.bd-nhan.bd-bien { color: var(--xam2); letter-spacing: .3em; }
/* màn dọc: nhãn quần đảo 2 dòng ("QUẦN ĐẢO" / "HOÀNG SA") để nằm trọn trong khung, không đè bờ biển */
.cau-ghim.hep .bd-hs, .cau-ghim.hep .bd-ts { white-space: normal; width: 6.6em; line-height: 1.3; }
.cau-ghim.hep .bd-hs { text-align: left; }
.cau-ghim.hep .bd-ts { text-align: center; }
.cau-ghim.hep .bd-bien { letter-spacing: .18em; }
.bd-chu { position: absolute; left: var(--le); top: 16%; max-width: 30%; opacity: 0; }
.bd-chu .tieu-de { font-size: clamp(2.6rem, 2.92vw, 4.2rem); }
.bd-ghi { margin-top: 1.4rem; font-size: 1.3rem; color: var(--xam1); max-width: 24em; }
.bd-nguon { position: absolute; right: var(--le); bottom: 1.4rem; font-size: 1.1rem; color: var(--xam1); opacity: 0; }
@media (max-width: 767px) {
  .cau-chu { top: 12%; }
  .bd-chu { left: var(--le); right: var(--le); top: 11%; max-width: none; text-align: center; }
  .bd-ghi { margin: 1rem auto 0; }
  .bd-nguon { left: var(--le); right: var(--le); text-align: center; }
  .nhan-kinh { font-size: 1.2rem; padding: 0.9rem 1.4rem 0.9rem 1.1rem; }
}

/* ---------- 3 · THẺ ---------- */
.the { height: 250vh; }
.the-ghim { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.the-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }   /* 30/09: ống ảnh + thẻ cùng một khung vẽ (bỏ lọc mờ CSS) */
.the-chu { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; flex-direction: column; align-items: center; gap: 4rem; text-align: center; padding: 0 var(--le); }
.the-chu .tieu-de { max-width: 11em; font-size: var(--h2); }   /* trang mẫu: 52 px, cách nút 42 px, nút cách đáy 37 px */
.the-css { display: none; position: absolute; inset: 0; perspective: 140rem; }
.ong-css { position: absolute; inset: -10%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3vw; opacity: .35; filter: blur(0.2rem); }
.ong-css span { aspect-ratio: 2 / 3; background: center / cover no-repeat; }
.the-css-khung { position: absolute; left: 50%; top: 42%; width: min(26vw, 30rem); aspect-ratio: 540 / 856; transform: translate(-50%, -50%); }
.the-css-the { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.the-css-the .mat { position: absolute; inset: 0; border-radius: 6% / 3.8%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
/* mặt trước: ảnh thẻ v5 NGANG (856:540) xoay 90° ngược chiều kim đồng hồ cho khớp khung dọc 540:856, như thẻ WebGL (rotation.z = π/2);
   lớp ảnh rộng = cao khung (158,52%), cao = rộng khung (63,08%), đặt giữa rồi xoay: thẻ hiện trọn 4 mép, không cắt */
.the-css-the .truoc { background: var(--den); }
.the-css-the .truoc::before { content: ""; position: absolute; left: 50%; top: 50%; width: 158.5185%; height: 63.0841%; background: url(../img/the/the-hoi-vien.webp) center / 100% 100% no-repeat; transform: translate(-50%, -50%) rotate(-90deg); }
/* không WebGL: vệt đèn LED chéo tĩnh trên mặt thẻ (như lúc thẻ 3D dừng chính diện) */
.the-css-the .truoc::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, .3) 44%, rgba(255, 255, 255, .1) 60%, rgba(255, 255, 255, 0) 74%); }   /* 30/09: ảnh thẻ đã sáng hơn, vệt dịu lại cho độ sáng khớp thẻ 3D */
.the-css-the .sau { background: linear-gradient(135deg, rgb(102, 111, 118), var(--den) 45%, rgb(131, 138, 143) 60%, var(--den)); transform: rotateY(180deg); }
.khong-gl .the-css { display: block; }
.khong-gl .the-canvas { display: none; }
@media (max-width: 767px) { .the-css-khung { width: 52vw; } .the-chu { bottom: 7%; } }

/* ---------- 4 · NỀN SÁNG CHẠY CONG ---------- */
.cong { height: 170vh; }
.cong-ghim { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* hai cột chữ dày (cột trái, cột phải) cong theo mặt trống quanh tiêu đề như trang mẫu: giữa cột phình vào gần tiêu đề,
   hai đầu dạt ra ngoài, nhỏ và mờ dần; chữ đi vào vùng tiêu đề thì mờ hẳn (chinh.js mục 7) */
.cong-cot { position: absolute; inset: 0; pointer-events: none; }
/* trang mẫu: cột số tiền 34,6 px (375: 22,5 px) nhưng là số ngắn; tên nghiệp vụ dài gấp đôi nên 26 px (375: 15 px) để cột không lấn tiêu đề, không bị cắt mép */
.cong-cot span { position: absolute; left: 0; top: 0; font-size: clamp(1.5rem, 1.806vw, 2.6rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.002em; color: var(--xam1); white-space: nowrap; will-change: transform, opacity; }
.cong-cot span.dam { color: var(--xam2); }
.cong-chu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.6rem; text-align: center; padding: 0 var(--le); pointer-events: none; }
.cong-chu .tieu-de { max-width: 11em; font-size: var(--h2); text-wrap: balance; }
.cong-nho { font-size: clamp(1.6rem, 1.667vw, 2.4rem); line-height: 1.1; font-weight: 500; color: var(--den); }
.cong-nho li + li { margin-top: 0.5em; }
/* 30/09 sáng: 3 dòng có chấm tròn đầu dòng thay «MỘT CỔNG / MỌI YÊU CẦU»; chữ thường, canh trái trong khối giữa, mỗi dòng 1 dòng (dài thì chinh.js co cùng cỡ) */
.cong-nho li.gach { position: relative; margin-top: 0; padding-left: 1.1em; text-align: left; font-size: clamp(1.4rem, 1.389vw, 2rem); line-height: 1.3; letter-spacing: -0.003em; }
.cong-nho li.gach + li.gach { margin-top: 0.6em; }
.cong-nho li.gach::before { content: ""; position: absolute; left: 0.15em; top: 50%; width: 0.34em; height: 0.34em; border-radius: 50%; background: currentColor; transform: translateY(-50%); }

/* ---------- 5 · BỒI THƯỜNG (ảnh toàn màn, kiểu concierge) ---------- */
.bt { height: 240vh; }
.bt-ghim { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.bt-anh { position: absolute; inset: -12% 0; will-change: transform; }
.bt-anh img { width: 100%; height: 100%; object-fit: cover; }
/* lớp tối MỎNG sau vùng chữ (29/09: ảnh nền mới sáng như trang mẫu, chỉ phủ tối ở góc có chữ: trên trái danh sách IN HOA,
   dưới phải tiêu đề lớn, đáy có dải đồng hồ), giữa màn để trống cho huy hiệu nổi trên ảnh */
.bt-ghim::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 8, 8, .62) 0%, rgba(8, 8, 8, .22) 18%, rgba(8, 8, 8, 0) 34%),
              radial-gradient(ellipse 42% 40% at 100% 78%, rgba(8, 8, 8, .38), rgba(8, 8, 8, 0) 72%),
              radial-gradient(ellipse 40% 42% at 0% 18%, rgba(8, 8, 8, .36), rgba(8, 8, 8, 0) 72%),
              linear-gradient(to bottom, rgba(8, 8, 8, .35), rgba(8, 8, 8, 0) 16%); }
.bt-huy-hieu, .bt-a, .bt-b, .bt-dai, .bt-phap-ly { z-index: 1; }
.bt-huy-hieu { position: absolute; left: 50%; top: 50%; width: min(46vw, 56rem); margin: calc(min(46vw, 56rem) / -2) 0 0 calc(min(46vw, 56rem) / -2); opacity: .24; pointer-events: none; }
.giam .bt-huy-hieu { opacity: .74; }
.bt-a { position: absolute; inset: 0; }
.bt-trai { position: absolute; left: var(--le); top: 12.8rem; }   /* như trang mẫu: danh sách IN HOA ngay dưới logo */
/* danh sách IN HOA: trang mẫu 24 px / dòng 0,85 (375: 16,9 px). Tiếng Việt: dấu nặng dòng trên chạm dấu mũ + sắc dòng dưới
   ở dòng 0,95 và 1,08 (đã chụp thử 29/09), nên dòng 1,15: dấu không chạm nhau */
.bt-ds { margin-top: 1.4rem; font-size: clamp(1.7rem, 1.667vw, 2.4rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.002em; text-transform: uppercase; color: var(--bac); }
.bt-phai { position: absolute; right: var(--le); bottom: 13%; text-align: right; max-width: 60%; }
/* tiêu đề lớn phải: trang mẫu 52 px / dòng 0,85 (375: 24,75 px) */
.bt-phai .tieu-de.lon { font-size: clamp(2.5rem, 3.61vw, 5.2rem); line-height: 1.1; }   /* trang mẫu 0,85; dòng 1,0 thì dấu nặng chạm dấu huyền dòng dưới (chụp thử 29/09) */
.bt-duoi { margin-top: 2rem; font-size: var(--chu-vua); line-height: 1.3; font-weight: 500; color: var(--xam3); }
.bt-b { position: absolute; right: var(--le); bottom: 13%; text-align: right; }
.bt-nhan-lon span { display: block; font-size: clamp(2.5rem, 3.61vw, 5.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.001em; padding-top: 0.06em; text-transform: uppercase; opacity: 0; }
.bt-dai { position: absolute; left: var(--le); right: var(--le); bottom: 3rem; display: flex; justify-content: space-between; gap: 1.6rem; font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; color: var(--xam3); border-top: 1px solid rgba(225, 229, 229, .18); padding-top: 1.2rem; font-variant-numeric: tabular-nums; }
.bt-dai-nhan::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bac); margin: 0 0.8rem 1px 0; }
.bt-dh span { color: var(--xam1); }
.bt-phap-ly { position: absolute; right: var(--le); top: 9.2rem; font-size: 1.1rem; color: var(--xam1); max-width: 40em; text-align: right; text-wrap: balance; }
@media (max-width: 767px) {
  .bt-trai { top: 17%; bottom: auto; } .bt-phai, .bt-b { left: var(--le); max-width: none; }
  .bt-huy-hieu { width: 80vw; margin: -40vw 0 0 -40vw; }
  .bt-dai { flex-wrap: wrap; justify-content: flex-start; gap: 0.6rem 1.4rem; bottom: 1.8rem; }
  .bt-dai .bt-dh:nth-of-type(n+4) { display: none; }   /* điện thoại: giữ 2 đồng hồ (Hà Nội, Singapore) cho dải gọn một dòng */
  .bt-phap-ly { top: 6.4rem; bottom: auto; left: var(--le); text-align: left; }
  .bt-phai { bottom: 26%; }
}

/* ---------- 6 · QUYỀN LỢI 01 đến 05 ---------- */
.ql { padding: 14rem var(--le) 12rem; }
.ql-dau { display: flex; justify-content: space-between; align-items: flex-end; gap: 2.4rem; padding-bottom: 3.6rem; border-bottom: 1px solid var(--xam3); }
.ql-dau .tieu-de { font-size: clamp(2.4rem, 2.92vw, 4.2rem); max-width: 14em; }
.ql-than { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4vw; margin-top: 0.8rem; }
.ql-muc { width: 100%; display: grid; grid-template-columns: 5.6rem 1fr; gap: 0.4rem 1.2rem; text-align: left; padding: 2.2rem 0; border-bottom: 1px solid var(--xam3); color: var(--xam2s); transition: color .4s; }
.ql-muc .so { font-size: clamp(1.2rem, 0.972vw, 1.4rem); padding-top: 0.3rem; }
.ql-muc .ten { font-size: var(--chu-vua); line-height: 1.3; font-weight: 500; }
.ql-muc .mo-ta { grid-column: 2; font-size: var(--chu-vua); line-height: 1.3; font-weight: 500; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s, opacity .6s; color: var(--xam2s); }
.ql-muc[aria-expanded="true"], .ql-muc:hover { color: var(--den); }
.ql-muc[aria-expanded="true"] .mo-ta { max-height: 6em; opacity: 1; }
.ql-khung { position: relative; overflow: hidden; aspect-ratio: 16 / 10; align-self: start; margin-top: 2.2rem; background: var(--den); }
.ql-khung img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateX(101%); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.ql-khung img.hien { transform: translateX(0); z-index: 2; }
.ql-khung img.ra { transform: translateX(0); z-index: 1; }
@media (max-width: 767px) { .ql { padding: 9.6rem var(--le) 8rem; } .ql-dau { flex-direction: column; align-items: flex-start; } .ql-than { grid-template-columns: 1fr; } .ql-khung { order: -1; } }

/* ---------- 7 · ĐỐI TÁC BẢO HIỂM: 3 hàng logo chạy ---------- */
/* Nhịp đo từ trang mẫu tham chiếu (29/09, Chrome CDP): hàng 1 và 3 chạy phải sang trái ~34,5 px/giây, hàng 2 trái sang phải
   36,5 px/giây; ở đây hàng 2 đặt 42 px/giây cho thấy rõ nhanh hơn như anh yêu cầu. Tốc độ đặt theo px/giây trong data-v
   (doi-tac.js tính thời gian một vòng = nửa dải / tốc độ). Logo đơn sắc: tô màu bằng mask, thường --xam1, rê chuột --bac
   (trang mẫu không đổi gì khi rê; đổi màu khi rê là yêu cầu của anh). Hai mép mờ dần như trang mẫu. */
.dt { --dt-h: clamp(3rem, 2.5vw, 3.6rem); --mep: clamp(4.8rem, 16.75vw, 24.1rem); padding: 14rem 0 15rem; overflow: hidden; }
.dt > .tieu-de { font-size: var(--h2); text-align: center; max-width: 12em; margin: 0 auto 7.2rem; padding: 0 var(--le) 0.1em; }
.dt-dai { display: flex; flex-direction: column; gap: calc(var(--dt-h) * 0.667);   /* trang mẫu: hàng cao 70, cách 24 (1440) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--mep) * .31), #000 var(--mep), #000 calc(100% - var(--mep)), transparent calc(100% - var(--mep) * .31), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--mep) * .31), #000 var(--mep), #000 calc(100% - var(--mep)), transparent calc(100% - var(--mep) * .31), transparent 100%); }
.dt-hang { overflow: hidden; height: calc(var(--dt-h) * 1.944); }
.dt-ray { display: flex; width: max-content; height: 100%; will-change: transform; }
.dt-nhom { display: flex; align-items: center; height: 100%; flex: none; }
.dt-o { flex: none; margin: 0 calc(var(--dt-h) * 1.05); background-color: var(--xam1); transition: background-color .45s ease;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.dt-o img { height: calc(var(--dt-h) * var(--k, 1)); width: auto; max-width: none; opacity: 0; }
@media (hover: hover) { .dt-o:hover { background-color: var(--bac); } }
.dt-hang.dt-san .dt-ray { animation: dt-trai var(--dt-t, 60s) linear infinite; }
.dt-hang.dt-san[data-chieu="phai"] .dt-ray { animation-name: dt-phai; }
@keyframes dt-trai { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dt-phai { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* giảm chuyển động: đứng yên, một hàng gói đủ 9 logo ở giữa */
.giam .dt-hang + .dt-hang { display: none; }
.giam .dt-hang { height: auto; }
.giam .dt-ray { width: auto; justify-content: center; }
.giam .dt-nhom { flex-wrap: wrap; justify-content: center; row-gap: calc(var(--dt-h) * 0.9); padding: 0 var(--le); flex: 1 1 auto; }
.giam .dt-dai { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 767px) { .dt { padding: 9.6rem 0 10.4rem; } .dt > .tieu-de { margin-bottom: 4.8rem; } }

/* ---------- 8 · HỎI ĐÁP ---------- */
.hd { padding: 14rem var(--le) 14rem; }
.hd > .tieu-de { font-size: var(--h3); padding-bottom: 6.4rem; border-bottom: 1px solid var(--xam3); margin-bottom: 5.6rem;   /* trang mẫu: chữ tiêu đề cách câu hỏi đầu ~117 px */ max-width: 14em; }
.hd-nhom { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; padding: 2.6rem 0; }
.hd-ten { font-size: 1.2rem; line-height: 1; font-weight: 500; letter-spacing: -0.008em; text-transform: uppercase; color: var(--xam2s); padding-top: 1.6rem; }
.hd-cau { border-bottom: 1px solid var(--xam3); }
.hd-hoi { width: 100%; text-align: left; font-size: var(--chu-vua); line-height: 1.3; font-weight: 500; padding: 1.6rem 2.8rem 1.6rem 0; position: relative; color: var(--den); }
.hd-hoi::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.9rem; height: 0.9rem; border: solid var(--xam2); border-width: 0 1px 1px 0; transform: translateY(-70%) rotate(45deg); transition: transform .4s; }
.hd-hoi[aria-expanded="true"]::after { transform: translateY(-30%) rotate(225deg); }
.hd-dap { overflow: hidden; height: 0; }
.hd-dap p { font-size: clamp(1.2rem, 1.111vw, 1.6rem); line-height: 1.3; font-weight: 500; color: var(--xam2s); padding: 0 0 1.6rem; }
.hd-dap .dg { display: block; overflow: hidden; }
.hd-dap .dg > span { display: block; }
@media (max-width: 767px) { .hd { padding: 9.6rem var(--le); } .hd > .tieu-de { padding-bottom: 4.8rem; margin-bottom: 4rem; } .hd-nhom { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- 9 · CHÂN TRANG ---------- */
.chan { padding: 12rem var(--le) 2.8rem; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 6.4rem; }
.chan-tren { display: flex; justify-content: space-between; gap: 4.8rem; flex-wrap: wrap; }
.chan-trai { display: flex; flex-direction: column; align-items: flex-start; gap: 2.8rem; max-width: 64rem; }
.chan-trai .tieu-de { font-size: var(--h2); }
/* 30/09 sáng: chân trang đo lại trên trang mẫu (Chrome CDP, _dung/kiem/30-09c/moto-chan-*.json): lưới 2 x 2 cột (cột 235 px), chữ 14 px cố định
   từ 768 px trở lên (bản cũ co xuống 12 px dưới 1440 px nên nhìn nhỏ), 12 px trên điện thoại; tiêu đề cột xám, liên kết bạc; tiêu đề cách liên kết 1 34 px,
   liên kết cách nhau 42 px, hàng cột dưới cách hàng trên 288 px (điện thoại 31 / 40 / 226 px) */
.chan-cot { display: grid; grid-template-columns: 23.5rem 21.4rem; gap: 12.8rem 0; font-size: 1.6rem; line-height: 1.3; font-weight: 500; }
.chan-cot h4 { font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.003em; text-transform: uppercase; color: var(--xam-cot); margin-bottom: 1.6rem; font-weight: 500; }
.chan-cot a, .chan-cot span { display: block; color: var(--xam3); padding: 0.8rem 0; margin-bottom: 0.8rem; }   /* trang mẫu: dòng 34 px, bước 42 px */
.chan-cot a:hover { color: var(--bac); }
.chan-duoi { display: flex; justify-content: space-between; gap: 2.4rem; font-size: 1.6rem; line-height: 1.3; font-weight: 500; color: var(--xam1); border-top: 1px solid rgb(102, 111, 118); padding-top: 1.8rem; flex-wrap: wrap; }
.chan-duoi p:first-child { max-width: 60em; }
@media (max-width: 767px) { .chan-cot { grid-template-columns: 1fr 1fr; gap: 7.6rem 1.6rem; width: 100%; font-size: 1.6rem; } .chan-cot h4 { font-size: 1.6rem; } }

/* ---------- 10 · POPUP ---------- */
.popup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.6rem; }
.popup[hidden] { display: none; }
.popup-nen { position: absolute; inset: 0; background: rgba(8, 8, 8, .78); -webkit-backdrop-filter: blur(0.6rem); backdrop-filter: blur(0.6rem); }
.popup-hop { position: relative; width: min(98rem, 100%); max-height: calc(100vh - 3.2rem); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; background: var(--bac); color: var(--den); border-radius: 1.8rem; }
.popup-trai { background: var(--den); color: var(--bac); padding: 4rem 3.2rem; display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; border-radius: 1.8rem 0 0 1.8rem; }
.popup-the { width: 100%; height: auto; border-radius: 1.4rem; }
.popup-gia { font-size: 1.3rem; color: var(--xam3); border: 1px solid rgb(102, 111, 118); border-radius: 1.2rem; padding: 1.4rem 1.6rem; }
.popup-phai { padding: 4.4rem 3.6rem 3.2rem; }
.popup-form { display: flex; flex-direction: column; gap: 1.2rem; }
.popup-form .phu { margin-bottom: 0.8rem; }
.popup-form label { display: flex; flex-direction: column; gap: 0.6rem; font-size: 1.2rem; color: var(--xam2s); }
.popup-form input:not([type="checkbox"]) { height: 4.2rem; border: 1px solid var(--xam3); border-radius: 1rem; background: var(--bac); padding: 0 1.2rem; font: 1.5rem var(--font); color: var(--den); }
.popup-form input::placeholder { color: var(--xam1); }
.popup-form .dong-y { flex-direction: row; align-items: flex-start; gap: 1rem; }
.popup-form .dong-y input { margin: 0.2rem 0 0; accent-color: rgb(8, 8, 8); }
.popup-form .nut { margin-top: 0.8rem; align-self: flex-start; }
.popup-bao { font-size: 1.2rem; color: var(--den); }
.popup-mau { font-size: 1.1rem; color: var(--xam2s); }
/* 30/09 tối (GĐ189, form gửi đơn thật): ô bẫy chống máy gửi rác (người thật không thấy, không Tab tới, trình đọc màn hình bỏ qua);
   câu báo lỗi gửi; nút đang gửi; chữ Chính sách bảo mật / Điều khoản sử dụng trong ô đồng ý là liên kết (gạch chân mảnh) */
.o-bay { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.popup-loi { color: rgb(166, 38, 38); }
/* sửa 30/09 tối: .popup-form và .popup-xong đặt display riêng nên đè mất thuộc tính hidden của trình duyệt: form không ẩn được,
   màn cảm ơn luôn nằm dưới form (bấm gửi xong thấy cả hai, khung cuộn lệch). Ẩn lại đúng khi có hidden. */
.popup-form[hidden], .popup-xong[hidden] { display: none; }
/* nút gửi nằm trên nền bạc của popup: nền bạc như nút ở khối tối thì chìm mất, dùng nền đen như nút ở khối nền sáng */
.popup-form .nut { background: var(--den); color: var(--bac); }
.popup-form .nut:hover { background: var(--xam2); }
.popup-form .nut[disabled] { opacity: 0.6; cursor: progress; }
.popup-form .lk-dong-y { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.popup-form .lk-dong-y:hover { color: var(--den); }
.popup-xong { display: flex; flex-direction: column; gap: 1.4rem; justify-content: center; min-height: 100%; }
.popup-dong { position: absolute; right: 1.4rem; top: 1.4rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--den); z-index: 2; }
.popup-dong span { position: absolute; left: 1.1rem; top: 1.7rem; width: 1.4rem; height: 1.5px; background: var(--bac); transform: rotate(45deg); }
.popup-dong span + span { transform: rotate(-45deg); }
@media (max-width: 767px) { .popup-hop { grid-template-columns: 1fr; } .popup-trai { border-radius: 1.8rem 1.8rem 0 0; padding: 2.8rem 2rem; } .popup-phai { padding: 2.8rem 2rem; } }

/* ---------- trạng thái ban đầu cho chuyển động (chỉ khi có chuyển động) ---------- */
.co-cd .dau { transform: translateY(-100%); }
.co-cd .hero-chu .dong > span { transform: translateY(105%); }
.co-cd .hero-nut { opacity: 0; transform: translateY(3rem); }
.co-cd .the-chu .tieu-de { opacity: 0; filter: blur(1rem); transform: translateY(8%); }

/* ---------- GIẢM CHUYỂN ĐỘNG / KHÔNG WEBGL: ảnh tĩnh địa cầu + bản đồ ---------- */
.giam .cau, .khong-gl .cau { height: auto; }
.giam .cau-ghim, .khong-gl .cau-ghim { height: auto; overflow: visible; }
.giam .cau-canvas, .khong-gl .cau-canvas { display: none; }
.giam .cau-tinh, .khong-gl .cau-tinh { display: block; position: relative; height: 100vh; height: 100svh; }
.giam .cau-tinh-khung, .khong-gl .cau-tinh-khung { display: flex; align-items: center; justify-content: center; position: relative; height: 100vh; height: 100svh; background: var(--den); overflow: hidden; }
.giam .nhan-kinh, .khong-gl .nhan-kinh, .giam .bd-nhan, .khong-gl .bd-nhan { display: none; }
.giam .bd-chu, .khong-gl .bd-chu { position: absolute; top: calc(100vh + 10%); opacity: 1; }
.giam .bd-nguon, .khong-gl .bd-nguon { opacity: 1; }
/* 30/09: ảnh tĩnh địa cầu có viền mây/khí quyển sáng đúng sau dòng 2 câu phụ (1440): lót một lớp tối mềm dưới câu phụ cho chữ đọc rõ */
.giam .cau-chu .phu, .khong-gl .cau-chu .phu { position: relative; isolation: isolate; }
.giam .cau-chu .phu::before, .khong-gl .cau-chu .phu::before { content: ""; position: absolute; inset: -1.6rem -4rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 8, 8, .86), rgba(8, 8, 8, .7) 55%, rgba(8, 8, 8, 0)); }
@media (max-width: 767px) { .giam .cau-chu .phu::before, .khong-gl .cau-chu .phu::before { inset: -1.2rem 0; } }   /* màn hẹp: không tràn ngang */
.giam .the { height: auto; }
.giam .the-ghim { position: relative; }
.giam .cong, .giam .bt { height: auto; }
.giam .cong-ghim, .giam .bt-ghim { position: relative; }
.giam .bt-b { display: none; }
.giam .ql-khung img { transition: none; }

/* ---------- LUẬT SỐ DÒNG (30/09): không gập dòng; điện thoại dùng bản chữ điện thoại (noi_dung_dt) cho vừa số dòng ---------- */
@media (max-width: 400px) { .popup { padding: 0.8rem; } .popup-phai { padding: 2.4rem 1.6rem; } .popup-trai { padding: 2.4rem 1.6rem; } }
.tinh-nhan.tinh-bien { display: none; }   /* ảnh tĩnh dự phòng: không đặt nhãn Biển Đông (không phải nhãn chủ quyền, như cảnh 3D trên màn hẹp) */
/* điện thoại (≤ 500 px): gốc chữ theo bề rộng như trang mẫu (2,66vw: 10,4 px ở 390), không nhỏ hơn 10 px ở màn 320 */
@media (max-width: 500px) { html { font-size: max(10px, 2.66vw); } }
/* 30/09 · máy tính bảng (768 đến 1100 px): quyền lợi và hỏi đáp chuyển một cột để mô tả, câu trả lời dài vẫn vừa 2 dòng (luật số dòng) */
@media (min-width: 768px) and (max-width: 1100px) {
  .ql-than { grid-template-columns: 1fr; } .ql-khung { order: -1; }
  .hd-nhom { grid-template-columns: 1fr; gap: 1rem; }
}