/* ==========================================================================
SECTIONS v2 "PHẦN CHÌM" — mỗi trạm một thiết bị. Giá trị đến từ tokens.css.
========================================================================== */
/* --- Lớp nền toàn trang: bọt khí + thanh tiến độ + thước độ sâu ----------- */
.bubbles{ position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.9; }
.progress{ position:fixed; left:0; top:0; z-index:60; width:100%; height:3px; background:var(--grad-cta); transform-origin:left center; transform:scaleX(0); pointer-events:none; }
.rail{ position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; align-items:center; gap:var(--s-3); width:var(--rail); pointer-events:none; }
.rail__track{ position:relative; width:2px; height:min(46vh, 420px); background:linear-gradient(to bottom, var(--ngoc), var(--sinh-hoc)); opacity:.6; border-radius:2px; }
.rail__track::before{ content:""; position:absolute; left:-4px; right:-4px; top:0; bottom:0; background-image:repeating-linear-gradient(to bottom, transparent 0 calc(100%/8 - 1px), rgba(255,255,255,.5) calc(100%/8 - 1px) calc(100%/8)); }
.rail__marker{ position:absolute; left:50%; top:0; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25), var(--glow-coral); transform:translate(-50%,-50%); transition:top .25s var(--ease-out); }
.rail__read{ display:flex; flex-direction:column; align-items:center; font-family:var(--font-mono); text-align:center; }
.rail__read b{ font-size:.95rem; color:#fff; }
.rail__read span{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
@media (max-width:1100px){ .rail{ display:none; } }
main{ position:relative; z-index:1; }
/* --- Topbar ---------------------------------------------------------------- */
.topbar{ position:sticky; top:0; z-index:50; background:rgba(20,10,60,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.topbar__in{ display:flex; align-items:center; gap:var(--s-4); min-height:68px; }
.topbar__brand img{ height:30px; width:auto; }
.topbar__date{ margin-left:auto; padding:.35rem .8rem; font-size:var(--fs-xs); }
.topbar__cta{ min-height:44px; padding-inline:var(--s-5); font-size:var(--fs-sm); }
@media (max-width:640px){ .topbar__date{ display:none; } .topbar__cta{ margin-left:auto; white-space:nowrap; padding-inline:var(--s-4); } }
/* --- 0 m · MẶT NƯỚC ----------------------------------------------------- */
.surface{ min-height:calc(100svh - 68px); padding-top:var(--s-7); padding-bottom:var(--s-6); overflow:hidden; background:linear-gradient(to bottom, var(--nuoc-0) 0, var(--nuoc-1) 55%, var(--nuoc-2) 100%); display:flex; flex-direction:column; justify-content:center; }
.surface__sky{ position:absolute; left:0; right:0; top:0; height:34%; background:linear-gradient(to bottom, #f1f4ff 0%, var(--troi) 40%, var(--troi-2) 100%); z-index:0; }
.surface__sky::after{ content:""; position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(to bottom, transparent, rgba(58,42,143,.35)); }
.surface__water{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.surface__deep{ position:absolute; left:50%; bottom:-6%; width:min(900px, 90vw); transform:translateX(-50%); z-index:0; opacity:.22; filter:blur(3px) saturate(.8); mask-image:radial-gradient(60% 60% at 50% 60%, #000 30%, transparent 100%); -webkit-mask-image:radial-gradient(60% 60% at 50% 60%, #000 30%, transparent 100%); }
.surface__deep img{ width:100%; }
.buoys{ position:absolute; left:0; right:0; top:calc(34% - 28px); height:0; z-index:2; pointer-events:none; }
.buoy{ position:absolute; left:var(--x); top:0; transform:translate(-50%,-100%); padding:.45rem .8rem; border-radius:10px 10px 4px 4px; background:#fff; color:#4a3d8a; font-size:.74rem; font-weight:var(--fw-semi); white-space:nowrap; box-shadow:0 10px 24px -12px rgba(20,10,60,.5); animation:bob 5s ease-in-out infinite; animation-delay:var(--d); }
.buoy::after{ content:""; position:absolute; left:50%; bottom:-10px; width:2px; height:10px; background:#fff; opacity:.7; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,-100%) rotate(-2deg); } 50%{ transform:translate(-50%,calc(-100% + 8px)) rotate(2deg); } }
@media (max-width:760px){ .buoy:nth-child(even){ display:none; } }
.hero{ position:relative; z-index:3; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:var(--s-7); align-items:center; padding-top:calc(34% * .6); }
.hero__text .kicker{ margin-bottom:var(--s-4); }
.hero__text h1{ margin-bottom:var(--s-4); text-shadow:0 10px 40px rgba(0,0,0,.35); }
.hero__lead{ color:#d9d2ff; max-width:48ch; font-size:clamp(1.08rem,1.5vw,1.3rem); }
.hero__title{ margin:var(--s-5) 0 var(--s-2); font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; font-size:var(--fs-sm); color:var(--text-muted); }
.hero__title-g{ font-weight:var(--fw-black); font-size:1.4em; letter-spacing:.06em; }
.hero__row{ margin-top:var(--s-4); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
.countdown{ display:flex; align-items:flex-end; gap:var(--s-4); margin:var(--s-6) 0 0; font-family:var(--font-mono); }
.countdown__label{ font-size:var(--fs-xs); letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--text-muted); padding-bottom:.55rem; }
.countdown__cell{ display:flex; flex-direction:column; line-height:1; }
.countdown__cell b{ font-size:clamp(1.8rem,3.4vw,2.6rem); color:#fff; font-variant-numeric:tabular-nums; font-weight:var(--fw-black); }
.countdown__cell i{ font-style:normal; font-size:var(--fs-xs); color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase; margin-top:.3rem; }
.hero__guide{ position:relative; display:flex; justify-content:center; }
.guide{ position:relative; width:min(100%, 420px); }
.guide__img{ position:relative; z-index:2; width:100%; filter:drop-shadow(0 30px 50px rgba(0,0,0,.45)); animation:floaty 6s ease-in-out infinite; }
.guide__glass{ position:absolute; inset:-6% -10% auto -10%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(100,230,255,.08) 45%, rgba(163,45,255,.12) 70%, transparent 72%); border:2px solid rgba(255,255,255,.25); box-shadow:inset 0 0 80px rgba(100,230,255,.15), 0 0 80px rgba(163,45,255,.25); z-index:1; animation:floaty 6s ease-in-out infinite; }
.guide__tag{ position:absolute; z-index:3; left:50%; bottom:-6px; transform:translateX(-50%); white-space:nowrap; padding:.5rem .9rem; border-radius:var(--r-pill); background:rgba(20,10,60,.7); border:1px solid var(--line-strong); font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:#fff; backdrop-filter:blur(8px); display:inline-flex; align-items:center; gap:.5rem; }
.guide__tag i{ width:8px; height:8px; border-radius:50%; background:#42e39a; box-shadow:0 0 10px #42e39a; }
.guide__bubble{ position:absolute; z-index:3; left:var(--x); bottom:20%; width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 60%); animation:rise 5s linear infinite; animation-delay:var(--d); opacity:0; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-16px) rotate(1deg); } }
@keyframes rise{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 15%{ opacity:.9; } 100%{ transform:translateY(-260px) translateX(12px) scale(1.1); opacity:0; } }
.surface__host{ position:relative; z-index:3; margin-top:var(--s-6); color:var(--text-muted); font-size:var(--fs-sm); }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; padding-top:calc(34% * .5); } .hero__guide{ order:-1; } .guide{ width:min(70%, 320px); } .surface__sky{ height:28%; } .buoys{ top:calc(28% - 28px); } }
/* --- −5 m · PHẦN NỔI ------------------------------------------------------ */
.phan-noi{ background:linear-gradient(to bottom, var(--nuoc-2), var(--nuoc-2) 70%, var(--nuoc-3)); }
.float-field{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:var(--s-3); margin-bottom:var(--s-8); }
.float-field li{ padding:var(--s-4) var(--s-5); border-radius:12px; background:rgba(255,255,255,.9); color:#6b5ea6; font-weight:var(--fw-semi); font-size:var(--fs-sm); line-height:1.35; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); position:relative; }
.float-field li::before{ content:"AI ·"; display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; color:#b8aee0; margin-bottom:.3rem; }
.cut-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s-8); align-items:start; }
.cut{ font-size:clamp(1.7rem, 3.6vw, 3rem); font-weight:var(--fw-black); line-height:1.08; letter-spacing:-.02em; color:#fff; max-width:18ch; padding-left:var(--s-5); border-left:6px solid var(--sinh-hoc); text-shadow:0 10px 30px rgba(0,0,0,.4); }
.cut-side{ display:grid; grid-template-columns:150px 1fr; gap:var(--s-5); align-items:start; }
.cut-side p{ font-size:var(--fs-lead); color:var(--text); }
.porthole--sm{ width:150px; }
@media (max-width:820px){ .cut-grid{ grid-template-columns:1fr; } .cut-side{ grid-template-columns:110px 1fr; } .porthole--sm{ width:110px; } }
/* --- −20 m · RANH GIỚI ---------------------------------------------------- */
.ranh-gioi{ padding-bottom:0; background:var(--nuoc-3); }
.thermo{ position:relative; margin-top:var(--s-4); background:linear-gradient(to bottom, #2d2180 0, #2d2180 var(--y), var(--nuoc-4) var(--y), var(--nuoc-4) 100%); transition:background .1s linear; }
.thermo__noise{ position:relative; padding:var(--s-6) 0 var(--s-8); overflow:hidden; opacity:calc(1 - var(--p, 0) * .85); filter:blur(calc(var(--p, 0) * 2px)); }
.thermo__label{ font-family:var(--font-mono); font-size:var(--fs-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--ngoc); margin:0 0 var(--s-5); }
.thermo__label small{ text-transform:none; letter-spacing:0; opacity:.6; font-size:.9em; margin-left:.5rem; }
.thermo__label--top{ position:absolute; left:var(--gutter); top:var(--s-4); color:#b9c7ff; }
.marquee{ display:flex; white-space:nowrap; overflow:hidden; font-size:clamp(1.2rem, 2.6vw, 2rem); font-weight:var(--fw-black); color:rgba(255,255,255,.55); letter-spacing:-.01em; margin-top:var(--s-4); }
.marquee span{ padding-right:1em; animation:marq 32s linear infinite; }
.marquee--rev span{ animation-direction:reverse; animation-duration:40s; color:rgba(255,255,255,.35); }
@keyframes marq{ to{ transform:translateX(-100%); } }
.thermo__line{ position:absolute; left:0; right:0; top:var(--y); height:3px; background:linear-gradient(90deg, transparent, var(--ngoc) 20%, var(--sinh-hoc) 80%, transparent); box-shadow:0 0 30px var(--ngoc); z-index:2; }
.thermo__line span{ position:absolute; right:var(--gutter); top:-1.6em; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ngoc); }
.thermo__deep{ position:relative; z-index:1; padding:var(--s-8) 0 var(--sec-pad); }
.thermo__grid{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:var(--s-7); align-items:center; }
.thermo__fig{ margin:0; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow), var(--glow-violet); border:1px solid var(--line-strong); }
.flow{ display:flex; flex-direction:column; gap:var(--s-3); }
.flow__step{ display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text-muted); font-weight:var(--fw-medium); transition:all var(--d-base) var(--ease-out); }
.flow__step b{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ngoc); }
.flow__step.is-on{ color:#fff; border-color:rgba(100,230,255,.5); background:rgba(100,230,255,.08); transform:translateX(6px); box-shadow:0 0 30px rgba(100,230,255,.12); }
.flow__step--end.is-on{ border-color:var(--sinh-hoc); background:rgba(255,122,89,.12); box-shadow:var(--glow-coral); }
.flow__step--end.is-on b{ color:var(--sinh-hoc-2); }
.thermo__close{ margin-top:var(--s-7); max-width:62ch; color:var(--text); }
@media (max-width:820px){ .thermo__grid{ grid-template-columns:1fr; } }
/* --- −35 m · CỖ MÁY ------------------------------------------------------- */
.co-may{ background:var(--nuoc-4); }
.dive{ padding:var(--s-7); border-radius:var(--r-lg); background:linear-gradient(135deg, rgba(45,33,128,.6), rgba(13,6,40,.6)); border:1px solid var(--line-strong); box-shadow:var(--shadow); }
.dive__chart{ width:100%; height:260px; }
.dive__gridlines line{ stroke:rgba(255,255,255,.08); stroke-width:1; }
.dive__path{ stroke-dasharray:1000; stroke-dashoffset:1000; }
html:not(.has-gsap) .dive__path{ stroke-dashoffset:0; }
.dive__dot{ fill:var(--sinh-hoc); filter:drop-shadow(0 0 10px var(--sinh-hoc)); opacity:0; }
html:not(.has-gsap) .dive__dot{ opacity:1; }
.dive__axis{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--s-2); }
.num{ font-size:clamp(2rem, 4vw, 3.2rem); font-weight:var(--fw-black); color:#fff; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.num small{ font-size:.45em; text-transform:uppercase; letter-spacing:.06em; }
.num--up{ color:var(--ngoc); }
.dive__log{ display:grid; gap:var(--s-2); margin:var(--s-6) 0; }
.dive__log > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s-4); padding:var(--s-3) 0; border-bottom:1px dashed var(--line-strong); }
.dive__log dt{ color:var(--text); } .dive__log dd{ margin:0; }
.dive__note{ color:var(--text); }
@media (max-width:820px){ .dive{ padding:var(--s-5); } .dive__log > div{ grid-template-columns:1fr; } }
/* --- −50 m · SÁU CỬA KÍN -------------------------------------------------- */
.sau-cua{ background:linear-gradient(to bottom, var(--nuoc-4), #0a0520); }
.hull{ position:relative; display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--s-4); padding:var(--s-7) var(--s-5); border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(120,90,200,.18), rgba(30,18,87,.4)); border:1px solid var(--line-strong); box-shadow:inset 0 2px 0 rgba(255,255,255,.12), var(--shadow); }
.hull::before{ content:""; position:absolute; inset:16px; border-radius:calc(var(--r-lg) - 8px); border:1px dashed rgba(255,255,255,.12); pointer-events:none; }
.hatch{ position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--s-3); cursor:default; }
.hatch__ring{ position:relative; width:min(100%, 120px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 35%, #4a3aa8, #1a1050 70%); box-shadow:inset 0 0 0 8px rgba(255,255,255,.08), inset 0 0 0 10px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.9); display:grid; place-items:center; transition:transform var(--d-base) var(--ease-out); }
.hatch__ring::before{ content:""; position:absolute; inset:18%; border-radius:50%; border:2px solid rgba(255,255,255,.15); background:repeating-conic-gradient(rgba(255,255,255,.08) 0 10deg, transparent 10deg 45deg); transition:transform .6s var(--ease-out); }
.hatch__led{ position:absolute; top:12%; width:10px; height:10px; border-radius:50%; background:#ff3b5c; box-shadow:0 0 12px #ff3b5c; animation:blink 2.2s infinite; }
.hatch__glow{ position:absolute; inset:30%; border-radius:50%; background:radial-gradient(circle, var(--sinh-hoc) 0, rgba(255,122,89,.4) 40%, transparent 70%); opacity:0; transform:scale(.4); transition:opacity var(--d-base), transform var(--d-base) var(--ease-out); }
.hatch b{ font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-muted); letter-spacing:.1em; }
.hatch__peek{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sinh-hoc-2); opacity:0; transform:translateY(6px); transition:opacity var(--d-base), transform var(--d-base) var(--ease-out); text-align:center; }
.hatch:hover .hatch__ring{ transform:scale(1.06); }
.hatch:hover .hatch__ring::before{ transform:rotate(60deg) scale(.9); }
.hatch:hover .hatch__glow{ opacity:1; transform:scale(1.1); }
.hatch:hover .hatch__led{ background:#42e39a; box-shadow:0 0 12px #42e39a; animation:none; }
.hatch:hover .hatch__peek{ opacity:1; transform:none; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@media (max-width:820px){ .hull{ grid-template-columns:repeat(3, 1fr); } .hatch__peek{ opacity:1; transform:none; } }
/* --- −65 m · ĐƯỜNG ỐNG ---------------------------------------------------- */
.duong-ong{ background:#0a0520; }
.pipe{ position:relative; padding-top:var(--s-6); }
.pipe__svg{ position:absolute; left:0; right:0; top:calc(var(--s-6) + 28px); width:100%; height:60px; z-index:0; }
.pipe__bg{ stroke:rgba(255,255,255,.12); stroke-width:14; fill:none; stroke-linecap:round; }
.pipe__on{ stroke:url(#pg); stroke:var(--ngoc); stroke-width:6; fill:none; stroke-linecap:round; stroke-dasharray:1000; stroke-dashoffset:1000; filter:drop-shadow(0 0 10px var(--ngoc)); }
html:not(.has-gsap) .pipe__on{ stroke-dashoffset:0; }
.stations{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--s-4); }
.station{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s-3); }
.station i{ width:56px; height:56px; border-radius:50%; background:var(--nuoc-3); border:3px solid rgba(255,255,255,.2); box-shadow:0 0 0 6px #0a0520; transition:all var(--d-base); }
.station.is-on i{ border-color:var(--ngoc); box-shadow:0 0 0 6px #0a0520, 0 0 30px var(--ngoc); background:radial-gradient(circle, var(--ngoc) 0, var(--nuoc-3) 60%); }
.station b{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ngoc); }
.station span{ font-weight:var(--fw-semi); color:var(--text); max-width:16ch; }
.pipe__note{ margin-top:var(--s-6); text-align:center; }
@media (max-width:820px){ .pipe__svg{ display:none; } .stations{ grid-template-columns:1fr 1fr; } .station{ flex-direction:row; text-align:left; } }
/* --- −80 m · ĐÁY ---------------------------------------------------------- */
.day{ background:radial-gradient(900px 500px at 50% 100%, rgba(255,122,89,.16), transparent 60%), #06031a; }
.seabed{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:radial-gradient(60% 80% at 50% 100%, rgba(100,230,255,.08), transparent 70%), #08041f; box-shadow:var(--shadow); }
.seabed__svg{ width:100%; height:auto; display:block; }
.seabed__legend{ display:flex; gap:var(--s-6); padding:var(--s-4) var(--s-5); font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); border-top:1px solid var(--line); }
.seabed__legend span{ display:inline-flex; align-items:center; gap:.5rem; }
.seabed__legend i{ width:10px; height:10px; border-radius:50%; }
.seabed__legend .lit{ background:var(--ngoc); box-shadow:0 0 10px var(--ngoc); }
.seabed__legend .you{ background:var(--sinh-hoc); box-shadow:0 0 10px var(--sinh-hoc); }
.day__quote{ margin-top:var(--s-8); text-align:center; font-size:clamp(1.4rem, 3vw, 2.4rem); font-weight:var(--fw-black); letter-spacing:-.02em; color:#fff; max-width:26ch; margin-inline:auto; }
/* --- NỔI LÊN (sáng) --------------------------------------------------------- */
.on-light{ background:var(--bg); }
.noi-len{ background:linear-gradient(to bottom, var(--sang-3), var(--sang)); }
.noi-len__grid{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:var(--s-8); align-items:start; }
.noi-len__photos{ position:relative; padding-bottom:30%; }
.porthole--lg{ width:min(100%, 360px); }
.porthole--md{ width:min(60%, 240px); position:absolute; right:0; bottom:0; }
.noi-len__triet{ display:grid; place-items:center; background:linear-gradient(135deg, #2d2180, #150b3f); }
.noi-len__ph{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:#b9c7ff; text-align:center; line-height:1.7; position:relative; z-index:2; }
.noi-len__text .kicker{ margin-bottom:var(--s-3); }
.noi-len__text h2{ margin-bottom:var(--s-2); }
.noi-len__text > p{ font-size:var(--fs-lead); color:var(--text); }
.quote{ margin:var(--s-5) 0 var(--s-6); padding:var(--s-5); border-radius:var(--r-md); background:var(--card-strong); border:1px solid var(--line); }
.quote p{ font-size:clamp(1.1rem, 1.7vw, 1.35rem); color:var(--text-strong); font-weight:var(--fw-semi); }
.quote cite{ display:block; margin-top:var(--s-2); font-style:normal; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.qa{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.qa h3{ margin-bottom:var(--s-2); background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.qa p{ color:var(--text); }
@media (max-width:900px){ .noi-len__grid{ grid-template-columns:1fr; } .qa{ grid-template-columns:1fr; } .noi-len__photos{ padding-bottom:22%; } }
/* --- BOONG · CHO AI --------------------------------------------------------- */
.boong{ background:linear-gradient(to bottom, var(--nuoc-1), var(--nuoc-2)); }
.who{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:var(--s-6); }
.who__col{ padding:var(--s-6); border-radius:var(--r-md); background:var(--card); border:1px solid var(--line-strong); backdrop-filter:blur(8px); }
.who__col h3{ margin-bottom:var(--s-5); display:flex; align-items:center; gap:var(--s-3); }
.who__col h3::before{ content:""; width:12px; height:12px; border-radius:50%; }
.who__col--yes h3::before{ background:#42e39a; box-shadow:0 0 12px #42e39a; }
.who__col--no h3::before{ background:#ff3b5c; box-shadow:0 0 12px #ff3b5c; }
.who__col li{ position:relative; padding-left:var(--s-6); margin-bottom:var(--s-4); }
.who__col li::before{ position:absolute; left:0; top:.1em; font-family:var(--font-mono); font-weight:var(--fw-bold); }
.who__col--yes li::before{ content:"✓"; color:#42e39a; }
.who__col--no li::before{ content:"✕"; color:#ff3b5c; }
/* --- VÉ LẶN ----------------------------------------------------------------- */
.ve-lan{ background:radial-gradient(900px 600px at 80% 10%, rgba(255,79,163,.22), transparent 60%), radial-gradient(700px 500px at 10% 90%, rgba(100,230,255,.12), transparent 60%), var(--nuoc-2); }
.ve-lan__grid{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:var(--s-8); align-items:start; }
.ve-lan__side .kicker{ margin-bottom:var(--s-3); }
.ve-lan__side h2{ margin-bottom:var(--s-4); }
.facts{ margin-top:var(--s-6); display:grid; gap:var(--s-2); }
.facts li{ display:grid; grid-template-columns:5rem 1fr; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line); color:var(--text); }
.facts li span{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); padding-top:.2em; }
.ve-lan__echo{ margin-top:var(--s-6); font-weight:var(--fw-semi); color:#fff; font-size:1.1rem; padding-left:var(--s-4); border-left:3px solid var(--sinh-hoc); }
.ticket-wrap{ perspective:1400px; }
.ticket{ position:relative; padding:clamp(1.25rem, 4vw, 2.25rem); border-radius:var(--r-lg); background:linear-gradient(160deg, rgba(58,42,143,.85), rgba(21,11,63,.95)); border:1px solid rgba(255,255,255,.25); box-shadow:var(--shadow), var(--glow-violet); transform-style:preserve-3d; will-change:transform; }
.ticket::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg, rgba(255,255,255,.12), transparent 40%, transparent 60%, rgba(255,255,255,.06)); pointer-events:none; }
.ticket__head{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); margin-bottom:var(--s-6); padding-bottom:var(--s-4); border-bottom:1px dashed var(--line-strong); }
.ticket__brand img{ height:26px; width:auto; }
.ticket__no{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; color:var(--ngoc); }
.ticket__perf{ position:absolute; left:-10px; right:-10px; top:88px; height:20px; background-image:radial-gradient(circle, var(--nuoc-2) 0 8px, transparent 9px); background-size:20px 20px; background-position:0 0; pointer-events:none; opacity:0; }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--s-4); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.field label{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:#fff; }
.req{ color:var(--sinh-hoc); }
.field input, .field select{ min-height:50px; padding:0 var(--s-4); background:rgba(255,255,255,.08); border:1px solid var(--line-strong); border-radius:12px; color:#fff; transition:border-color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast); }
.field select option{ color:#1b0f45; }
.field input::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--mona-pink); box-shadow:0 0 0 3px rgba(255,79,163,.25); background:rgba(255,255,255,.12); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color:#ff3b5c; }
.field__err{ margin:0; font-size:var(--fs-xs); color:#ff8fa3; font-weight:var(--fw-semi); }
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.lead-form__submit{ margin-top:var(--s-3); }
.ticket__note{ margin-top:var(--s-4); text-align:center; }
.lead-form__fail{ margin-top:var(--s-4); padding:var(--s-3) var(--s-4); border:1px solid #ff3b5c; border-radius:12px; color:#ffb3c0; background:rgba(255,59,92,.12); }
.lead-form__fail a{ color:#fff; text-decoration:underline; }
.ticket__stamp{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:5; }
.ticket__stamp .stamp{ font-size:clamp(2.4rem, 7vw, 4.6rem); border-width:5px; background:rgba(21,11,63,.6); backdrop-filter:blur(3px); }
.ticket.is-done input, .ticket.is-done select, .ticket.is-done button{ opacity:.35; }
@media (max-width:900px){ .ve-lan__grid{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }
/* --- HỎI NHANH + FOOTER ------------------------------------------------------ */
.faq{ display:flex; flex-direction:column; }
.faq__item{ border-top:1px solid var(--line-strong); }
.faq__item:last-child{ border-bottom:1px solid var(--line-strong); }
.faq__item summary{ cursor:pointer; list-style:none; padding:var(--s-5) 2.5rem var(--s-5) 0; position:relative; font-weight:var(--fw-bold); color:var(--text-strong); font-size:1.05rem; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:1.4rem; color:var(--mona-violet); transition:transform var(--d-base) var(--ease-out); }
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq__a{ padding:0 0 var(--s-5); color:var(--text); max-width:60ch; }
.hoi-nhanh__cta{ margin-top:var(--s-7); }
.footer{ position:relative; z-index:1; background:#06031a; color:var(--text-muted); padding-block:var(--s-8); border-top:1px solid var(--line); }
.footer__in{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:var(--s-6); align-items:start; }
.footer__brand img{ height:30px; width:auto; margin-bottom:var(--s-3); }
.footer__contact p{ margin-bottom:var(--s-2); }
.footer__close{ grid-column:1 / -1; margin-top:var(--s-4); color:var(--text-muted); }
@media (max-width:760px){ .footer__in{ grid-template-columns:1fr; } }
/* ==========================================================================
VIP + CẢM ƠN (khoang riêng)
========================================================================== */
.page-vip .topbar__cta, .page-camon .topbar__cta{ display:none; }
.vip-hero{ min-height:0; padding-top:var(--s-8); }
.vip-hero .stamp{ display:inline-grid; margin-bottom:var(--s-5); }
.vip-hero .stamp + .kicker{ display:flex; margin-bottom:var(--s-3); }
.vip-hero h1{ max-width:18ch; margin:var(--s-5) 0 var(--s-5); }
.vip-hero .lead{ max-width:56ch; }
.vip-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--s-4); margin-top:var(--s-7); }
.vip-facts li{ padding:var(--s-4) var(--s-5); border:1px solid var(--line-strong); border-radius:14px; background:var(--card); backdrop-filter:blur(8px); }
.vip-facts b{ display:block; font-size:1.6rem; color:#fff; font-weight:var(--fw-black); }
.vip-facts span{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.seats{ display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; max-width:420px; margin:var(--s-5) 0; }
.seats i{ aspect-ratio:1; border-radius:6px; background:rgba(255,255,255,.08); border:1px solid var(--line-strong); }
.seats i.is-taken{ background:var(--sinh-hoc); border-color:var(--sinh-hoc); box-shadow:0 0 10px var(--sinh-hoc); }
.vip-gets{ display:grid; gap:var(--s-4); margin-top:var(--s-5); }
.vip-gets li{ padding-left:var(--s-6); position:relative; font-size:var(--fs-lead); color:var(--text); }
.vip-gets li::before{ content:"—"; position:absolute; left:0; color:var(--sinh-hoc); font-family:var(--font-mono); }
.price-card{ position:relative; padding:clamp(1.5rem, 4vw, 2.5rem); background:linear-gradient(160deg, rgba(58,42,143,.85), rgba(21,11,63,.95)); color:#fff; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.25); box-shadow:var(--shadow), var(--glow-violet); }
.price-card__amount{ font-size:clamp(3rem, 8vw, 5rem); font-weight:var(--fw-black); line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.price-card__amount small{ font-size:.32em; letter-spacing:.06em; margin-left:.2em; }
.price-card__terms{ margin:var(--s-3) 0 var(--s-6); color:var(--text-muted); font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; }
.price-card .btn{ margin-bottom:var(--s-3); }
.price-card__how{ color:var(--text-muted); font-size:var(--fs-sm); }
.decline{ display:inline-block; margin-top:var(--s-6); color:var(--text-muted); font-size:1rem; text-decoration:underline; text-underline-offset:.25em; }
.decline:hover{ color:#fff; }
.todo{ display:grid; gap:var(--s-4); counter-reset:todo; margin-top:var(--s-7); }
.todo li{ counter-increment:todo; display:grid; grid-template-columns:3rem 1fr; gap:var(--s-4); padding:var(--s-5); background:var(--card); color:var(--text); border:1px solid var(--line-strong); border-radius:var(--r-md); align-items:start; backdrop-filter:blur(8px); }
.todo li::before{ content:counter(todo, decimal-leading-zero); font-size:1.8rem; font-weight:var(--fw-black); background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.todo h3{ color:#fff; margin-bottom:var(--s-2); }
.todo p{ color:var(--text-muted); margin-bottom:var(--s-3); }
.todo .btn{ min-height:46px; }
/* --- alias cho vip.html / cam-on.html (khung cũ) --------------------------- */
.bia{ background:linear-gradient(to bottom, var(--nuoc-0), var(--nuoc-2)); overflow:hidden; }
.bia__grid{ display:none; }
.ky-ten__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s-8); align-items:start; }
@media (max-width:900px){ .ky-ten__grid{ grid-template-columns:1fr; } }
.section{ position:relative; padding-block:var(--sec-pad); }
.on-paper{ background:var(--sang); color:#2a1d5c; }
.on-paper h2, .on-paper h3{ color:#1b0f45; }
.on-paper .kicker{ color:var(--mona-violet); } .on-paper .kicker::before{ background:var(--mona-violet); box-shadow:none; }
.on-paper .lead, .on-paper p{ color:#3b2d6e; }
.on-paper .tab{ display:none; }
.tab{ display:none; }
/* --- chỉnh sau lần xem 1 ---------------------------------------------------- */
.hero{ padding-top:clamp(150px, 32vh, 330px); }
@media (max-width:900px){ .hero{ padding-top:clamp(120px, 26vh, 260px); } }
.guide{ width:min(100%, 360px); }
.cut-side > p:last-child{ grid-column:2; }
.surface__deep{ opacity:.16; }
.rail__read{ padding:.35rem .5rem; border-radius:10px; background:rgba(20,10,60,.55); backdrop-filter:blur(6px); }
.hero{ padding-top:clamp(210px, 40vh, 400px); }
@media (max-width:900px){ .hero{ padding-top:clamp(150px, 30vh, 280px); } }
.on-paper .price-card p{ color:inherit; }
.on-paper .price-card .kicker{ color:var(--sinh-hoc-2); }
.on-paper .price-card__amount{ color:transparent; }
.on-paper .price-card__terms, .on-paper .price-card__how{ color:var(--text-muted); }
.hero__text .kicker{ padding:.45rem .8rem; border-radius:var(--r-pill); background:rgba(20,10,60,.6); backdrop-filter:blur(8px); color:#ffb08a; }
.num .neg{ font-size:.55em; vertical-align:.25em; margin-right:.05em; }
/* ==========================================================================
v2b — "tối quá, lộn xộn, thiếu wow" (Mon 08/09): đổi sắc sang cobalt có nắng,
xen nền xanh nhạt, dọn bố cục, tăng điểm nhấn.
========================================================================== */
body{ background:var(--nuoc-2); }
.bubbles{ opacity:.7; }
.topbar{ background:rgba(10,30,99,.55); }
/* mặt nước có nắng, bỏ ảnh nền mờ */
.surface{ background:linear-gradient(to bottom, #3b7bff 0, #2559e8 45%, #1a44c4 100%); }
.surface__deep{ display:none; }
.surface::after{ content:""; position:absolute; inset:34% 0 0 0; background:repeating-linear-gradient(105deg, rgba(255,255,255,0) 0 90px, rgba(255,255,255,.08) 90px 130px, rgba(255,255,255,0) 130px 260px); mix-blend-mode:screen; pointer-events:none; animation:rays 14s linear infinite; }
@keyframes rays{ to{ background-position:520px 0; } }
.hero__lead{ color:#e6eeff; }
.guide__glass{ background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), rgba(160,220,255,.12) 45%, rgba(47,107,255,.15) 70%, transparent 72%); box-shadow:inset 0 0 80px rgba(160,220,255,.25), 0 0 100px rgba(100,180,255,.35); }
.hero__text .kicker{ background:rgba(10,30,99,.55); }
/* −5 m: nước nông có nắng = NỀN SÁNG xanh */
.phan-noi{ --text:#1d2a5c; --text-strong:#0f2a86; --text-muted:#4b5c96; background:linear-gradient(to bottom, #d9e7ff, #e3eefb 60%, #cfe0fb); }
.phan-noi .depth{ color:#1f4fe0; }
.phan-noi .kicker{ color:var(--mona-violet); } .phan-noi .kicker::before{ background:var(--mona-violet); box-shadow:none; }
.float-field li{ background:#fff; color:#3b4a86; box-shadow:0 20px 40px -22px rgba(20,54,168,.45); }
.float-field li::before{ color:#9fb1e0; }
.cut{ color:#0f2a86; text-shadow:none; border-left-color:var(--mona-pink); }
.cut .grad{ background:linear-gradient(90deg, #7c0fd1, #ff4fa3, #ff7a3d); -webkit-background-clip:text; background-clip:text; }
.cut-side p{ color:#1d2a5c; }
.porthole--sm{ box-shadow:0 0 0 8px #fff, 0 20px 40px -20px rgba(20,54,168,.5); }
/* −20 m: ranh giới */
.ranh-gioi{ background:linear-gradient(to bottom, #cfe0fb 0, #1f4fe0 18%, var(--nuoc-2) 100%); padding-top:calc(var(--sec-pad) + 2rem); }
.thermo{ background:linear-gradient(to bottom, #3b7bff 0, #3b7bff var(--y), var(--nuoc-3) var(--y), var(--nuoc-3) 100%); }
.marquee{ color:rgba(255,255,255,.7); }
.thermo__fig{ box-shadow:var(--shadow), 0 0 60px rgba(100,230,255,.25); }
/* −35 m: cỗ máy — bố cục lưới sạch, ảnh to bên trái, ba bảng thật xếp cột bên phải */
.co-may{ background:radial-gradient(1000px 600px at 20% 0%, rgba(100,230,255,.18), transparent 60%), var(--nuoc-2); }
.co-may::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(112deg, transparent 0 140px, rgba(255,255,255,.05) 140px 200px, transparent 200px 380px); pointer-events:none; animation:rays 18s linear infinite; }
.dive{ background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.22); box-shadow:var(--shadow), 0 0 80px rgba(47,107,255,.35); }
.dive__gridlines line{ stroke:rgba(255,255,255,.14); }
/* −50 m */
.sau-cua{ background:linear-gradient(to bottom, var(--nuoc-2), var(--nuoc-3)); }
.hull{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(10,30,99,.35)); border-color:rgba(255,255,255,.25); }
.hatch__ring{ background:radial-gradient(circle at 40% 35%, #2f6bff, #0f2a86 70%); box-shadow:inset 0 0 0 8px rgba(255,255,255,.14), inset 0 0 0 10px rgba(0,0,0,.35), 0 20px 40px -20px rgba(0,0,0,.8), 0 0 30px rgba(100,230,255,.15); }
.hatch b{ color:#cfe6ff; }
/* −65 m: đường ống trên NỀN SÁNG */
.duong-ong{ --text:#1d2a5c; --text-strong:#0f2a86; --text-muted:#4b5c96; background:linear-gradient(to bottom, var(--nuoc-3) 0, #e3eefb 12%, #d3e2fb 100%); padding-top:calc(var(--sec-pad) + 1.5rem); }
.duong-ong .depth{ color:#1f4fe0; }
.duong-ong .kicker{ color:var(--mona-violet); }
.pipe__bg{ stroke:rgba(20,54,168,.18); }
.pipe__on{ stroke:#1f4fe0; filter:drop-shadow(0 0 8px rgba(47,107,255,.6)); }
.station i{ background:#fff; border-color:rgba(20,54,168,.2); box-shadow:0 0 0 6px #e3eefb; }
.station.is-on i{ border-color:#1f4fe0; background:radial-gradient(circle, #2f6bff 0, #fff 60%); box-shadow:0 0 0 6px #e3eefb, 0 0 30px rgba(47,107,255,.5); }
.station b{ color:#1f4fe0; } .station span{ color:#1d2a5c; }
.pipe__note{ color:#5b6a9c; }
/* −80 m: đáy — sâu nhưng là xanh navy, số 82 khổng lồ làm nền */
.day{ background:radial-gradient(900px 500px at 50% 100%, rgba(255,122,89,.22), transparent 60%), linear-gradient(to bottom, #d3e2fb 0, var(--nuoc-3) 10%, var(--nuoc-4) 100%); padding-top:calc(var(--sec-pad) + 2rem); }
.day .sec-head{ position:relative; }
.day .sec-head::before{ content:"82"; position:absolute; right:-6vw; top:-3.5rem; font-size:clamp(9rem, 26vw, 24rem); font-weight:var(--fw-black); line-height:1; letter-spacing:-.06em; color:rgba(255,255,255,.06); pointer-events:none; z-index:-1; }
.seabed{ background:radial-gradient(60% 80% at 50% 100%, rgba(100,230,255,.14), transparent 70%), #0b2170; border-color:rgba(255,255,255,.2); box-shadow:var(--shadow), 0 0 80px rgba(47,107,255,.3); }
.day__quote{ font-size:clamp(1.6rem, 3.4vw, 2.8rem); }
/* nổi lên / boong / vé / faq / footer */
.noi-len{ background:linear-gradient(to bottom, var(--nuoc-4) 0, #d3e2fb 8%, #e3eefb 100%); padding-top:calc(var(--sec-pad) + 2rem); }
.quote{ background:#fff; box-shadow:0 20px 50px -30px rgba(20,54,168,.35); }
.boong{ background:linear-gradient(to bottom, #e3eefb 0, #1f4fe0 12%, var(--nuoc-2) 100%); padding-top:calc(var(--sec-pad) + 2rem); }
.who__col{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); }
.ve-lan{ background:radial-gradient(900px 600px at 80% 10%, rgba(255,79,163,.3), transparent 60%), radial-gradient(700px 500px at 10% 90%, rgba(100,230,255,.18), transparent 60%), var(--nuoc-2); }
.ticket{ background:linear-gradient(160deg, rgba(31,79,224,.85), rgba(10,30,99,.95)); box-shadow:var(--shadow), 0 0 80px rgba(255,79,163,.25); }
.hoi-nhanh{ background:linear-gradient(to bottom, var(--nuoc-2) 0, #e3eefb 8%, #e3eefb 100%); padding-top:calc(var(--sec-pad) + 2rem); }
.footer{ background:var(--nuoc-4); }
.on-paper{ background:#e3eefb; color:#1d2a5c; } .on-paper h2,.on-paper h3{ color:#0f2a86; } .on-paper .lead,.on-paper p{ color:#2c3a6e; }
.bia{ background:linear-gradient(to bottom, #3b7bff, var(--nuoc-2)); }
.hero{ padding-top:clamp(240px, 45vh, 440px); }
.buoys{ top:calc(34% - 40px); }
/* ==========================================================================
−5 m v3 — nhìn từ dưới lên mặt nước: caustics + điện thoại nổi tự cuộn feed
========================================================================== */
.phan-noi{ overflow:hidden; background:linear-gradient(to bottom, #bcd6ff 0, #d9e7ff 30%, #e3eefb 70%, #cfe0fb 100%); }
.caustics{ position:absolute; left:0; top:0; width:100%; height:62%; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:.9; mask-image:linear-gradient(to bottom, #000 40%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom, #000 40%, transparent 100%); }
.sun{ position:absolute; left:58%; top:-18%; width:70vw; height:70vw; max-width:900px; max-height:900px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.95) 0, rgba(255,255,255,.45) 18%, rgba(255,255,255,0) 60%); pointer-events:none; z-index:0; animation:sunbreathe 6s ease-in-out infinite; }
@keyframes sunbreathe{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.08); opacity:1; } }
.phan-noi__grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:var(--s-7); align-items:center; min-height:min(70vh, 640px); margin-bottom:var(--s-9); }
.phan-noi__text h2{ margin-bottom:var(--s-4); }
.feedwall{ position:relative; height:min(62vh, 560px); perspective:1200px; }
.cut-grid{ position:relative; z-index:2; }
@media (max-width:900px){ .phan-noi__grid{ grid-template-columns:1fr; min-height:0; } .feedwall{ height:420px; } }
.phan-noi{ background:linear-gradient(to bottom, #7fa8ff 0, #a9c6ff 26%, #d3e2fb 58%, #e3eefb 78%, #cfe0fb 100%); }
.caustics{ mix-blend-mode:normal; opacity:.75; height:66%; }
.sun{ opacity:.85; }
.phan-noi__text h2{ text-shadow:0 2px 0 rgba(255,255,255,.4); }
/* ==========================================================================
HERO v4 — màn thumbnail (Mon 07/09: tít khổng lồ + số khoanh đỏ + LIVE +
khung ảnh có chú thích vẽ tay + nút TO). Sáng. Cú lặn bắt đầu ở mép dưới.
========================================================================== */
.thumb{ min-height:0; padding:var(--s-7) 0 0; background:linear-gradient(to bottom, #f6f8ff 0, #eaf0ff 60%, #3b7bff 88%, #1a44c4 100%); display:block; }
.thumb .surface__sky{ height:88%; background:linear-gradient(to bottom, #f7f9ff, #e9efff 70%, #dbe6ff 100%); }
.thumb .surface__sky::after{ display:none; }
.thumb::after{ inset:88% 0 0 0; }
.thumb .buoys{ top:calc(88% - 40px); }
.thumb__in{ position:relative; z-index:3; padding-bottom:calc(12% + 2rem); }
.thumb__head{ text-align:center; max-width:1100px; margin:0 auto var(--s-6); }
.thumb__title{ font-size:clamp(1.9rem, 4.6vw, 4rem); line-height:1.08; letter-spacing:-.02em; text-transform:uppercase; color:#0f1a3c; font-weight:var(--fw-black); }
.thumb__title .mark{ background:linear-gradient(transparent 40%, #ffe66d 40%, #ffe66d 92%, transparent 92%); padding:0 .1em; }
.ring{ position:relative; display:inline-block; padding:0 .12em; color:#e11d2e; }
.ring svg{ position:absolute; left:-10%; top:-18%; width:120%; height:136%; overflow:visible; pointer-events:none; }
.ring path{ fill:none; stroke:#e11d2e; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.thumb__sub{ margin:var(--s-4) auto 0; font-size:clamp(1.05rem, 2vw, 1.5rem); font-weight:var(--fw-black); text-transform:uppercase; letter-spacing:-.01em; color:#0f1a3c; max-width:30ch; }
.thumb__sub .hl{ color:#1f6fff; }
.thumb__live{ margin:var(--s-4) 0 0; display:inline-flex; align-items:center; gap:var(--s-3); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.02em; color:#0f1a3c; font-size:clamp(.9rem, 1.4vw, 1.15rem); }
.live{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .8rem; border-radius:10px; background:#e11d2e; color:#fff; font-weight:var(--fw-black); letter-spacing:.06em; box-shadow:0 8px 20px -8px rgba(225,29,46,.7); }
.live i{ width:10px; height:10px; border-radius:50%; background:#fff; animation:blink 1.4s infinite; }
.thumb__grid{ display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); gap:var(--s-6); align-items:stretch; }
.join{ background:#fff; border-radius:var(--r-lg); padding:clamp(1.25rem, 3vw, 2.25rem); box-shadow:0 40px 80px -40px rgba(20,54,168,.45), 0 0 0 1px rgba(20,54,168,.08); text-align:center; display:flex; flex-direction:column; justify-content:center; }
.join__k{ font-family:var(--font-mono); letter-spacing:.32em; text-transform:uppercase; color:#1f6fff; font-weight:var(--fw-bold); font-size:clamp(.9rem, 1.6vw, 1.3rem); margin:0 0 var(--s-2); }
.join__t{ font-size:clamp(1.9rem, 3.6vw, 3rem); color:#0f1a3c; margin:0 0 var(--s-5); }
.join__cd{ display:flex; align-items:center; justify-content:center; gap:.4rem; padding:var(--s-4) 0; border-top:2px solid #e9efff; border-bottom:2px solid #e9efff; margin-bottom:var(--s-5); }
.join__cdl{ font-weight:var(--fw-bold); color:#0f1a3c; font-size:.85rem; line-height:1.15; text-align:right; margin-right:.6rem; }
.join__cd .cd{ display:flex; flex-direction:column; align-items:center; min-width:3.2rem; }
.join__cd .cd b{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); font-weight:var(--fw-black); color:#0f1a3c; line-height:1; font-variant-numeric:tabular-nums; }
.join__cd .cd i{ font-style:normal; font-size:.7rem; color:#e11d2e; font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.06em; margin-top:.25rem; }
.join__cd em{ font-style:normal; font-size:1.6rem; font-weight:var(--fw-black); color:#0f1a3c; align-self:flex-start; margin-top:.3rem; }
.join__p{ color:#2c3a6e; font-size:.98rem; margin-bottom:var(--s-5); }
.join__p strong{ color:#0f1a3c; }
.btn--xl{ min-height:84px; flex-direction:column; gap:.15rem; border-radius:18px; font-size:clamp(1.15rem, 2vw, 1.5rem); background:linear-gradient(90deg, #ff5f3d, #ff2d7a); box-shadow:0 22px 44px -14px rgba(255,45,122,.75); animation:pulsecta 2.4s ease-in-out infinite; }
.btn--xl small{ font-size:.78rem; font-weight:var(--fw-semi); opacity:.92; letter-spacing:.02em; }
@keyframes pulsecta{ 0%,100%{ box-shadow:0 22px 44px -14px rgba(255,45,122,.75); } 50%{ box-shadow:0 22px 60px -8px rgba(255,45,122,.95), 0 0 0 8px rgba(255,45,122,.12); } }
.join__note{ margin:var(--s-3) 0 0; font-size:.8rem; color:#5b6a9c; }
.still{ margin:0; perspective:1200px; }
.still__frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 80px -40px rgba(20,54,168,.6), 0 0 0 6px #fff, 0 0 0 7px rgba(20,54,168,.12); transform-style:preserve-3d; will-change:transform; aspect-ratio:3/2; }
.still__frame img{ width:100%; height:100%; object-fit:cover; }
.still__live{ position:absolute; left:16px; top:16px; display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem; border-radius:10px; background:#e11d2e; color:#fff; font-family:var(--font-mono); font-size:.72rem; font-weight:var(--fw-bold); letter-spacing:.1em; z-index:2; }
.still__live i{ width:8px; height:8px; border-radius:50%; background:#fff; animation:blink 1.4s infinite; }
.still__play{ position:absolute; left:50%; top:50%; width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.92); color:#e11d2e; display:grid; place-items:center; font-size:2rem; transform:translate(-50%,-50%); box-shadow:0 20px 40px -14px rgba(0,0,0,.5); z-index:2; padding-left:6px; }
.still__anno{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.anno-ring, .anno-arrow{ fill:none; stroke:#e11d2e; stroke-width:12; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.still__hand{ position:absolute; right:5%; bottom:8%; z-index:4; font-family:"Caveat", "Be Vietnam Pro", cursive; font-weight:700; font-size:clamp(1.5rem, 3.2vw, 2.6rem); line-height:1; color:#fff; text-shadow:0 2px 0 #e11d2e, 0 4px 18px rgba(0,0,0,.6); transform:rotate(-6deg); text-align:right; }
.still__cap{ margin-top:var(--s-3); font-size:.8rem; color:#5b6a9c; text-align:center; }
@media (max-width:900px){ .thumb__grid{ grid-template-columns:1fr; } .thumb .surface__sky{ height:92%; } .thumb::after{ inset:92% 0 0 0; } .thumb .buoys{ top:calc(92% - 40px); } .thumb__in{ padding-bottom:calc(8% + 3rem); } .still__play{ width:64px; height:64px; font-size:1.5rem; } }
.thumb{ background:linear-gradient(to bottom, #f6f8ff 0, #eaf0ff 60%, #4d86ff 88%, #7fa8ff 100%); }
.thumb__in{ padding-bottom:calc(12% + 4.5rem); }
.thumb__title .mark{ box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* ==========================================================================
−5 m v4 — MỒI CÂU: dây câu từ mặt nước, điện thoại đung đưa ở đầu lưỡi câu,
trước to nét, sau nhỏ mờ; thân máy tối viền sáng để bật khỏi nền.
========================================================================== */
.feedwall{ height:min(66vh, 600px); }
.feedwall::before{ content:""; position:absolute; inset:-10% -10% -20% -10%; background:radial-gradient(60% 60% at 50% 55%, rgba(20,54,168,.32), transparent 70%); filter:blur(10px); pointer-events:none; }
.caustics{ opacity:.85; }
.feedwall{ height:min(68vh, 620px); }
/* ==========================================================================
MẠCH KỂ — dải sự thật, câu dẫn giữa các mục, ba bước câu chuyện MONA, CTA giữa
========================================================================== */
.truth{ position:relative; z-index:2; display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--s-7); align-items:center; padding:clamp(1.5rem, 4vw, 3rem); border-radius:var(--r-lg); background:linear-gradient(135deg, #0f2a86, #1436a8 60%, #1f4fe0); color:#e8efff; box-shadow:0 40px 80px -30px rgba(15,42,134,.6); overflow:hidden; }
.truth::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(112deg, transparent 0 140px, rgba(255,255,255,.05) 140px 200px, transparent 200px 380px); pointer-events:none; }
.truth__bear{ width:200px; box-shadow:0 0 0 8px rgba(255,255,255,.12), 0 30px 60px -20px rgba(0,0,0,.6); }
.truth__body{ position:relative; z-index:1; }
.truth__body .kicker{ color:var(--sinh-hoc-2); margin-bottom:var(--s-3); }
.truth__big{ font-size:clamp(1.6rem, 3.2vw, 2.6rem); font-weight:var(--fw-black); line-height:1.1; letter-spacing:-.02em; color:#fff; margin-bottom:var(--s-4); }
.truth__body p{ color:#d9e2ff; }
.truth__strong{ color:#fff !important; font-weight:var(--fw-bold); font-size:1.1rem; padding-left:var(--s-4); border-left:3px solid var(--sinh-hoc); }
.next{ margin:var(--s-7) 0 0; text-align:center; font-size:clamp(1.05rem, 1.6vw, 1.3rem); color:#2c3a6e; font-weight:var(--fw-medium); }
.next span{ font-weight:var(--fw-black); background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.next--dark{ color:var(--text-muted); }
.steps3{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
.steps3 li{ display:inline-flex; align-items:center; gap:.6rem; padding:.55rem 1rem .55rem .55rem; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); font-weight:var(--fw-semi); color:#fff; font-size:.95rem; }
.steps3 b{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--grad-cta); color:#fff; font-weight:var(--fw-black); }
.midcta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4); margin-top:var(--s-6); padding:var(--s-5) var(--s-6); border-radius:var(--r-lg); background:linear-gradient(90deg, rgba(255,79,163,.18), rgba(255,122,89,.12)); border:1px solid rgba(255,122,89,.4); }
.midcta p{ margin:0; color:#fff; font-size:1.05rem; }
@media (max-width:760px){ .truth{ grid-template-columns:1fr; } .truth__bear{ width:140px; } }
.phan-noi{ padding-bottom:var(--s-8); }
.ranh-gioi{ padding-top:var(--s-9); }
/* ==========================================================================
v5 LIỀN MẠCH — bỏ lớp mờ nối mục, mép sóng cắt hẳn, dây lặn xuyên suốt,
mỗi mục một bố cục + một hiệu ứng riêng. (Mon 07/09: "rập khuôn, gốm")
========================================================================== */
/* 0. nền phẳng từng mục, không fade */
.phan-noi{ background:linear-gradient(to bottom, #7fa8ff 0, #a9c6ff 26%, #d3e2fb 58%, #e3eefb 100%); }
.ranh-gioi{ background:var(--nuoc-3); padding-top:var(--s-9); }
.co-may{ background:radial-gradient(1000px 600px at 20% 0%, rgba(100,230,255,.16), transparent 60%), var(--nuoc-2); }
.sau-cua{ background:var(--nuoc-3); }
.duong-ong{ background:#e3eefb; padding-top:var(--s-9); }
.day{ background:radial-gradient(900px 500px at 50% 100%, rgba(255,122,89,.22), transparent 60%), var(--nuoc-4); padding-top:var(--s-9); }
.noi-len{ background:#e3eefb; padding-top:var(--s-9); }
.boong{ background:var(--nuoc-2); padding-top:var(--s-9); }
.hoi-nhanh{ background:#e3eefb; padding-top:var(--s-9); }
/* 1. mép sóng: màu = nền mục TRÊN, cắt vào mục dưới */
.sec.wave::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:70px; background:var(--wave, #e3eefb); z-index:3; pointer-events:none;
-webkit-mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat; }
.ranh-gioi{ --wave:#e3eefb; } .co-may{ --wave:#0f2a86; } .sau-cua{ --wave:#1436a8; } .duong-ong{ --wave:#0f2a86; } .day{ --wave:#e3eefb; } .noi-len{ --wave:#0a1e63; } .boong{ --wave:#e3eefb; } .ve-lan{ --wave:#1436a8; } .hoi-nhanh{ --wave:#1436a8; }
/* 2. dây lặn xuyên suốt + nút thắt chạy theo tiến độ */
.rope{ position:absolute; left:calc(var(--gutter) + 22px); top:100svh; bottom:0; width:2px; z-index:2; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 14px, transparent 14px 26px); }
.rope i{ position:absolute; left:50%; top:calc(var(--at, 0) * 100%); width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--sinh-hoc); transform:translate(-50%,-50%); box-shadow:0 0 0 6px rgba(255,122,89,.25), var(--glow-coral); transition:top .2s linear; }
@media (max-width:1100px){ .rope{ display:none; } }
/* chữ viết tay đỏ, cùng ngôn ngữ với hero */
.hand{ font-family:"Caveat", cursive; font-weight:700; color:#fff; text-shadow:0 2px 0 #e11d2e, 0 4px 16px rgba(0,0,0,.55); font-size:clamp(1.3rem, 2.4vw, 2rem); line-height:1; transform:rotate(-5deg); pointer-events:none; }
/* 3. −20 m: MÀN QUÉT LỘ — lớp ồn phủ trọn, cuộn tới đâu bị quét bay tới đó */
.thermo{ position:relative; background:var(--nuoc-3); min-height:70vh; }
.thermo__noise{ position:absolute; inset:0; z-index:2; padding:var(--s-6) 0; background:linear-gradient(to bottom, #3b7bff, #2559e8); clip-path:inset(0 0 calc(100% - var(--y)) 0); opacity:1; filter:none; display:flex; flex-direction:column; justify-content:center; }
.thermo__line{ position:absolute; left:0; right:0; top:var(--y); height:4px; z-index:3; background:linear-gradient(90deg, var(--ngoc), #fff, var(--sinh-hoc)); box-shadow:0 0 40px var(--ngoc), 0 0 80px rgba(100,230,255,.5); }
.thermo__deep{ position:relative; z-index:1; padding:var(--s-8) 0 var(--sec-pad); }
.thermo__grid{ grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); }
.thermo__fig{ box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.2), 0 0 80px rgba(100,230,255,.3); transform:rotate(-1.5deg); }
.flow__step{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); }
/* 4. −35 m: TƯỜNG MÀN HÌNH 3D, quét ngang theo cuộn */
/* 5. −50 m: cửa tự mở lần lượt + chùm sáng */
.hull-wrap{ position:relative; }
.hand--hull{ position:absolute; right:4%; top:-2.4rem; z-index:3; }
.hull{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(10,30,99,.5)); box-shadow:inset 0 2px 0 rgba(255,255,255,.14), 0 40px 80px -30px rgba(0,0,0,.7); }
.hatch{ position:relative; }
.hatch::after{ content:""; position:absolute; left:50%; bottom:100%; width:min(100%, 120px); height:220px; transform:translateX(-50%) scaleY(0); transform-origin:bottom; background:linear-gradient(to top, rgba(255,176,138,.55), rgba(255,122,89,0)); clip-path:polygon(35% 100%, 65% 100%, 100% 0, 0 0); filter:blur(2px); transition:transform .6s var(--ease-out); pointer-events:none; }
.hatch.is-open::after{ transform:translateX(-50%) scaleY(1); }
.hatch.is-open .hatch__ring{ transform:scale(1.06); }
.hatch.is-open .hatch__ring::before{ transform:rotate(60deg) scale(.9); }
.hatch.is-open .hatch__glow{ opacity:1; transform:scale(1.1); }
.hatch.is-open .hatch__led{ background:#42e39a; box-shadow:0 0 12px #42e39a; animation:none; }
.hatch.is-open .hatch__peek{ opacity:1; transform:none; }
/* 6. −65 m: ĐƯỜNG DỐC CHÉO xuống */
.pipe__svg{ height:140px; top:calc(var(--s-6) + 10px); }
.stations{ align-items:start; }
.station:nth-child(2){ margin-top:24px; } .station:nth-child(3){ margin-top:48px; } .station:nth-child(4){ margin-top:72px; } .station:nth-child(5){ margin-top:96px; }
.station i{ width:64px; height:64px; }
.station span{ padding:.5rem .8rem; border-radius:12px; background:#fff; box-shadow:0 14px 30px -18px rgba(20,54,168,.45); }
.station.is-on span{ background:#0f2a86; color:#fff; }
/* 7. −80 m: bản đồ full-bleed cảm giác, chú thích viết tay */
.seabed{ position:relative; }
.hand--map{ position:absolute; left:56%; top:38%; z-index:2; }
.day .sec-head{ max-width:60ch; }
/* 8. nổi lên: chân dung to, trích dẫn to */
.noi-len__grid{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); align-items:center; }
.porthole--lg{ width:min(100%, 420px); }
.quote p{ font-size:clamp(1.3rem, 2.2vw, 1.8rem); }
/* 9. boong: hai cột như hai hàng ghế, vé lặn giữ */
.who__col{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.28); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.who__col--yes{ transform:rotate(-1deg); } .who__col--no{ transform:rotate(1deg); }
@media (max-width:900px){ .thermo__grid{ grid-template-columns:1fr; } .station:nth-child(n){ margin-top:0; } .hand--hull{ top:-2rem; right:0; } }
.thermo__noise{ justify-content:space-evenly; gap:0; }
.marquee{ margin:0; font-size:clamp(1.3rem, 3vw, 2.4rem); }
.marquee--3 span{ animation-duration:36s; color:rgba(255,255,255,.5); }
.marquee--4 span{ animation-duration:30s; color:rgba(255,255,255,.3); }
.hatch::after{ height:140px; }
.rope{ mix-blend-mode:difference; }
/* ==========================================================================
v6 — Mon 08/09: bỏ điện thoại treo móc câu ở −5 m · lớp ồn −20 m thu hết,
không che nội dung · −35 m dựng lại bằng ảnh thật của MONA, không lật,
không cắt ảnh · nhật ký lặn gọn lại, số nằm đè lên biểu đồ.
========================================================================== */
/* --- A. −5 m: VŨNG RÁC NỔI — nhìn từ dưới lên, không dây, không móc ------- */
.feedwall{ position:relative; height:min(64vh, 580px); perspective:none; }
.feedwall::before{ inset:-14% -8% -18% -8%; background:radial-gradient(58% 58% at 50% 46%, rgba(255,255,255,.55), rgba(180,214,255,0) 72%); filter:blur(6px); }
.slick{ position:absolute; left:50%; top:-6%; width:120%; height:52%; transform:translateX(-50%); pointer-events:none;
background:radial-gradient(52% 74% at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); mix-blend-mode:screen; }
.fcard{ position:absolute; left:var(--x); top:var(--y); width:var(--w, 244px); display:grid; grid-template-columns:30px 1fr; gap:6px 10px;
padding:.7rem .85rem; border-radius:16px; background:#fff; color:#1d2a5c; text-align:left;
box-shadow:0 22px 44px -22px rgba(5,12,42,.55), inset 0 0 0 1px rgba(20,54,168,.10);
transform:translate(-50%,-50%) rotate(var(--r)); animation:driftfloat var(--dur, 9s) ease-in-out infinite; animation-delay:var(--d, 0s); will-change:transform; }
.fcard__av{ grid-row:1 / span 2; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, #ff4fa3, #ffa51f); }
.fcard b{ font-size:.82rem; line-height:1.22; font-weight:var(--fw-bold); }
.fcard span{ grid-column:2; font-size:.7rem; line-height:1.3; color:#6a7ab0; margin-top:-2px; }
.fcard em{ grid-column:2; font-style:normal; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; color:#ff4fa3; }
.fcard--n{ --w:250px; --dur:9s; z-index:3; }
.fcard--m{ --w:206px; --dur:11s; z-index:2; opacity:.9; transform:translate(-50%,-50%) rotate(var(--r)) scale(.94); }
.fcard--f{ --w:176px; --dur:13s; z-index:1; opacity:.52; filter:blur(1.3px); transform:translate(-50%,-50%) rotate(var(--r)) scale(.86); }
.fcard--m b{ font-size:.74rem; } .fcard--f b{ font-size:.68rem; }
@keyframes driftfloat{ 0%,100%{ translate:0 0; } 50%{ translate:6px -13px; } }
@media (prefers-reduced-motion: reduce){ .fcard{ animation:none; } }
@media (max-width:900px){
.feedwall{ height:400px; }
.fcard{ --w:180px; padding:.55rem .65rem; }
.fcard--m{ --w:150px; } .fcard--f{ display:none; }
.fcard b{ font-size:.72rem; } .fcard span{ font-size:.62rem; }
}
/* --- B. −20 m: lớp ồn nằm trong dải riêng, thu hết, không đè nội dung ---- */
.thermo{ position:relative; background:var(--nuoc-3); min-height:0; margin-top:var(--s-6); }
.thermo__band{ position:relative; height:clamp(300px, 44vh, 430px); overflow:hidden; }
.thermo__noise{ position:absolute; inset:0; z-index:2; padding:0; background:linear-gradient(to bottom, #3b7bff, #2559e8);
clip-path:inset(0 0 calc(100% - var(--y)) 0); opacity:1; filter:none; display:flex; flex-direction:column; justify-content:space-evenly; }
.thermo__line{ position:absolute; left:0; right:0; top:var(--y); z-index:3; }
.thermo__deep{ position:relative; z-index:1; padding:var(--s-7) 0 var(--sec-pad); }
.thermo__band .marquee{ font-size:clamp(1.05rem, 2.2vw, 1.8rem); }
@media (max-width:900px){ .thermo__band{ height:clamp(240px, 40vh, 320px); } }
/* --- C. −35 m: TƯỜNG BẰNG CHỨNG — ảnh thật, tỉ lệ gốc, hai cột trôi ngược */
.proofwall{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(1rem, 2.4vw, 2rem); align-items:start; margin:var(--s-7) 0 var(--s-8); }
.pwcol{ display:flex; flex-direction:column; gap:clamp(1rem, 2.4vw, 2rem); will-change:transform; }
.pwcol--a{ transform:translateY(calc(var(--pw, 0) * 22px)); }
.pwcol--b{ margin-top:clamp(1.5rem, 5vw, 4rem); transform:translateY(calc(var(--pw, 0) * -30px)); }
.pw{ position:relative; margin:0; border-radius:var(--r-md); overflow:hidden; background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.22); box-shadow:0 34px 70px -34px rgba(0,0,0,.7); }
.pw img{ display:block; width:100%; height:auto; } /* tỉ lệ gốc, không cắt */
.pw--shot img{ background:#0a1e63; }
.pw figcaption{ padding:.85rem 1rem 1rem; font-size:.86rem; line-height:1.45; color:#d6e3ff; }
.pw__tag{ display:block; margin-bottom:.3rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ngoc-2); }
.pw__tag::before{ content:"◈ "; color:var(--sinh-hoc); }
.hand--proof{ position:absolute; right:4%; top:8%; z-index:2; text-align:right; font-size:clamp(1.1rem, 1.9vw, 1.6rem); }
@media (max-width:900px){
.proofwall{ grid-template-columns:1fr; }
.pwcol--a, .pwcol--b{ transform:none; margin-top:0; }
}
/* --- D. NHẬT KÝ LẶN gọn: số đè lên biểu đồ ------------------------------- */
.dive--tight{ padding:clamp(1.25rem, 2.6vw, 2rem); }
.dive__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3); }
.dive__who{ margin:0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
padding:.35rem .8rem; border-radius:var(--r-pill); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); }
.dive__who b{ color:#fff; font-size:.95rem; }
.dive__who i{ font-style:normal; opacity:.45; margin:0 .15rem; }
.dive--tight h3{ margin:var(--s-3) 0 var(--s-5); font-size:clamp(1.35rem, 2.6vw, 2.1rem); }
.dive__stage{ position:relative; }
.dive__chart{ width:100%; height:clamp(150px, 19vw, 210px); display:block; }
.dive__big{ position:absolute; right:0; top:-2%; margin:0; text-align:right; pointer-events:none; }
.dive__big-n{ display:block; font-weight:var(--fw-black); line-height:.88; letter-spacing:-.03em; font-size:clamp(3.2rem, 8vw, 6.2rem);
background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dive__big-n small{ font-size:.42em; }
.dive__big-n b{ font-weight:inherit; }
.dive__big i{ display:block; margin-top:.2rem; font-style:normal; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sinh-hoc-2); }
.dive__axis{ margin:.4rem 0 0; }
.dive__log{ grid-template-columns:1fr 1fr; gap:var(--s-2) var(--s-6); margin:var(--s-5) 0 var(--s-4); }
.dive__log dt{ font-size:.92rem; }
.dive__note{ margin:0; font-size:.92rem; line-height:1.55; color:var(--text-muted); max-width:74ch; }
@media (max-width:820px){
.dive__big{ position:static; text-align:left; margin-top:var(--s-3); }
.dive__log{ grid-template-columns:1fr; }
}
/* --- v6 chỉnh sau lần xem ------------------------------------------------- */
.fcard b{ font-size:.86rem; } .fcard--m b{ font-size:.78rem; } .fcard--f{ filter:blur(1px); opacity:.55; }
.thermo__band{ height:clamp(250px, 34vh, 350px); background:radial-gradient(120% 90% at 50% 100%, rgba(100,230,255,.14), transparent 62%), var(--nuoc-3); }
.thermo__line span{ top:.7em; color:var(--ngoc-2); }
.pw--anno{ overflow:visible; }
.pw--anno img{ border-radius:var(--r-md) var(--r-md) 0 0; }
.hand--proof{ top:auto; bottom:calc(100% - .3rem); right:2%; }
.fcard em{ color:#7b8ac0; letter-spacing:.14em; text-transform:uppercase; font-size:.56rem; }
@media (max-width:900px){ /* kéo mấy tấm mép ngoài vào trong khung điện thoại */
.fcard:nth-of-type(2){ --x:66% !important; }
.fcard:nth-of-type(4){ --x:70% !important; }
.fcard:nth-of-type(5){ --x:26% !important; }
.fcard:nth-of-type(6){ --x:62% !important; }
}
/* --- −65 m trên điện thoại: dựng lại thành THANG DỌC, không phải lưới 2 cột --- */
.stations{ counter-reset:st; }
.station{ counter-increment:st; }
@media (max-width:820px){
.pipe{ padding-top:var(--s-5); }
.stations{ position:relative; grid-template-columns:1fr; gap:0; }
.stations::before, .stations::after{ content:""; position:absolute; left:26px; top:34px; width:6px; border-radius:3px; }
.stations::before{ bottom:34px; background:rgba(20,54,168,.16); }
.stations::after{ height:calc((100% - 68px) * var(--lit, 0)); background:linear-gradient(#2f6bff, #1f4fe0); box-shadow:0 0 18px rgba(47,107,255,.55); transition:height .2s linear; }
.station{ position:relative; z-index:1; flex-direction:row; align-items:center; text-align:left; gap:var(--s-4); padding:.5rem 0; margin-top:0 !important; }
.station i{ width:54px; height:54px; flex:0 0 54px; display:grid; place-items:center; }
.station i::before{ content:counter(st); font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:1.15rem; color:#1f4fe0; }
.station.is-on i::before{ color:#fff; }
.station b{ display:none; }
.station span{ flex:1; max-width:none; }
.pipe__note{ margin-top:var(--s-5); text-align:left; }
}
/* --- vá tầng đè: mấy lớp override sau này ghi lại luật mobile ------------- */
@media (max-width:820px){
.stations::after{ bottom:34px; height:auto; transform:scaleY(var(--lit, 0)); transform-origin:50% 0; }
}
@media (max-width:900px){
/* .noi-len__grid bị lớp v5 (dòng ~565) bật lại 2 cột, nên phải khoá lại ở đây */
.noi-len__grid{ grid-template-columns:1fr; gap:var(--s-6); align-items:start; }
.noi-len__photos{ padding-bottom:0; display:flex; gap:var(--s-4); align-items:flex-end; }
.porthole--lg{ width:58%; }
.porthole--md{ position:static; width:42%; }
}
/* --- rà bản điện thoại 390px, 08/09 -------------------------------------- */
@media (max-width:900px){
/* dải ồn −20 m: lớp v6 bị lớp chỉnh sau ghi đè, khoá lại cho gọn trên máy nhỏ */
.thermo__band{ height:clamp(170px, 26vh, 230px); }
.thermo__band .marquee{ font-size:clamp(.95rem, 4.4vw, 1.3rem); }
.thermo__line span{ font-size:.62rem; }
/* chữ tay ở bản đồ đáy tràn khỏi khung trên máy nhỏ */
.hand--map{ position:static; display:block; margin:var(--s-3) var(--gutter) 0; text-align:left; transform:rotate(-3deg); font-size:1.15rem; }
/* LIVE ở hero: xuống dòng, canh giữa như phần chữ quanh nó */
.thumb__live{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); text-align:center; }
}
@media (max-width:900px){
.thermo__noise{ padding:2.1rem 0 .5rem; }
.thermo__label--top{ top:.7rem; font-size:.6rem; }
}
@media (max-width:900px){ .feedwall{ height:360px; } .phan-noi__grid{ margin-bottom:var(--s-6); } }
/* ==========================================================================
KHỐI GHI TÊN — Mon 08/09: "rầm rộ, mạnh mẽ". Đây là chỗ duy nhất trên trang
được phép loè: hồng/san hô dồn hết về đây, phần trên giữ trục xanh.
========================================================================== */
.ve-lan{ position:relative; overflow:hidden; padding-top:0; }
.ve-lan::after{ content:""; position:absolute; inset:auto 0 -30% 0; height:70%; pointer-events:none;
background:radial-gradient(60% 100% at 50% 100%, rgba(255,79,163,.28), transparent 70%); }
/* --- băng rôn hai dải chạy ngược nhau ------------------------------------ */
.siren{ position:relative; z-index:2; margin-top:70px; padding:.55rem 0; background:linear-gradient(90deg, #ff7a59, #ff4fa3 45%, #a32dff 100%);
box-shadow:0 18px 60px -18px rgba(255,79,163,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.siren__row{ display:flex; white-space:nowrap; overflow:hidden; }
.siren__row span{ padding-right:1.2em; font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:clamp(.72rem, 1.3vw, .9rem);
letter-spacing:.16em; text-transform:uppercase; color:#fff; animation:siren 26s linear infinite; }
.siren__row--rev span{ animation-duration:34s; animation-direction:reverse; color:rgba(255,255,255,.72); }
.siren__row i{ font-style:normal; margin:0 .35em; opacity:.6; }
@keyframes siren{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion: reduce){ .siren__row span{ animation:none; } }
/* --- khối banner: đếm ngược khổng lồ + hàng nhãn ------------------------- */
.cta-hero{ position:relative; z-index:2; text-align:center; padding:clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.cta-hero .kicker{ justify-content:center; display:flex; }
.cta-hero h2{ margin:var(--s-3) 0 var(--s-6); font-size:clamp(2.1rem, 5.2vw, 4rem); }
.bigcd{ display:flex; justify-content:center; gap:clamp(.5rem, 1.4vw, 1rem); flex-wrap:wrap; }
.bigcd__cell{ min-width:clamp(76px, 11vw, 130px); padding:clamp(.7rem, 1.6vw, 1.1rem) clamp(.5rem, 1.4vw, 1rem); border-radius:var(--r-md);
background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.32);
box-shadow:0 26px 60px -26px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.bigcd__cell b{ display:block; font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:clamp(2.2rem, 6vw, 4.6rem); line-height:1;
color:#fff; text-shadow:0 0 30px rgba(255,122,89,.55); font-variant-numeric:tabular-nums; }
.bigcd__cell i{ display:block; margin-top:.35rem; font-style:normal; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--sinh-hoc-2); }
.bigcd__cell--s b{ background:var(--grad-cta); -webkit-background-clip:text; background-clip:text; color:transparent; animation:cdpulse 1s steps(2) infinite; }
@keyframes cdpulse{ 50%{ opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .bigcd__cell--s b{ animation:none; } }
.cta-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:var(--s-5); }
.cta-pills li{ padding:.4rem .95rem; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
text-transform:uppercase; color:#dfe6ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.24); }
.cta-pills .is-hot{ background:var(--grad-cta); border-color:transparent; color:#fff; font-weight:var(--fw-bold); box-shadow:0 0 26px rgba(255,79,163,.55); }
.cta-pills .is-warn{ color:#ffd0c2; border-color:rgba(255,122,89,.6); background:rgba(255,122,89,.14); }
/* --- lộ trình tới lúc mở nắp --------------------------------------------- */
.road{ position:relative; margin:var(--s-5) 0 var(--s-6); padding-left:26px; display:grid; gap:var(--s-4); }
.road::before{ content:""; position:absolute; left:5px; top:10px; bottom:10px; width:2px; background:linear-gradient(var(--ngoc), var(--sinh-hoc)); opacity:.5; }
.road__it{ position:relative; }
.road__it::before{ content:""; position:absolute; left:-26px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--nuoc-3); border:2px solid var(--ngoc); }
.road__it.is-now::before{ background:var(--sinh-hoc); border-color:var(--sinh-hoc); box-shadow:0 0 0 5px rgba(255,122,89,.25), 0 0 20px var(--sinh-hoc); }
.road__it--big::before{ background:#fff; border-color:#fff; box-shadow:0 0 24px #fff; }
.road__it--vip::before{ background:transparent; border-style:dashed; }
.road__it b{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ngoc-2); }
.road__it span{ display:block; margin-top:.25rem; color:#dfe6ff; }
.road__it--big b{ color:#fff; font-size:.9rem; }
.road__it--big span{ color:#fff; font-weight:var(--fw-semi); font-size:1.05rem; }
/* --- hộp VIP: 30 ghế ------------------------------------------------------ */
.vipbox{ position:relative; padding:clamp(1.1rem, 2.4vw, 1.6rem); border-radius:var(--r-lg); overflow:hidden;
background:linear-gradient(150deg, rgba(255,79,163,.2), rgba(163,45,255,.14) 60%, rgba(10,30,99,.4));
border:1px solid rgba(255,122,89,.5); box-shadow:0 30px 70px -34px rgba(255,79,163,.6); }
.vipbox::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(118deg, transparent 0 90px, rgba(255,255,255,.05) 90px 130px); pointer-events:none; }
.vipbox__k{ margin:0; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sinh-hoc-2); }
.vipbox__t{ margin:.3rem 0 var(--s-4); font-size:clamp(1.3rem, 2.4vw, 1.8rem); color:#fff; }
.vipbox .seats{ margin:0 0 var(--s-4); max-width:none; grid-template-columns:repeat(15, 1fr); gap:5px; }
.vipbox .seats i{ border-radius:4px; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.vipbox__p{ margin:0; color:#f0e4ff; font-size:.95rem; }
.vipbox__p b{ color:#fff; font-size:1.05rem; }
.vipbox__lock{ margin:var(--s-3) 0 0; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:#ffd0c2; }
/* --- vé: bơm thêm ánh sáng cho ra "rầm rộ" ------------------------------- */
.ticket{ box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.14), 0 0 120px rgba(255,79,163,.4); }
.lead-form__submit{ box-shadow:0 0 0 0 rgba(255,79,163,.55); animation:ctapulse 2.6s ease-out infinite; }
@keyframes ctapulse{ 0%{ box-shadow:0 0 0 0 rgba(255,79,163,.55); } 70%{ box-shadow:0 0 0 22px rgba(255,79,163,0); } 100%{ box-shadow:0 0 0 0 rgba(255,79,163,0); } }
@media (prefers-reduced-motion: reduce){ .lead-form__submit{ animation:none; } }
@media (max-width:900px){
.siren{ margin-top:52px; }
.siren__row--rev{ display:none; }
.bigcd{ gap:.4rem; }
.bigcd__cell{ min-width:0; flex:1 1 0; }
.vipbox .seats{ grid-template-columns:repeat(10, 1fr); }
}
/* 30 ghế: thắp sáng hết — đây là số ghế CÓ, không phải số ghế đã bán ------- */
.vipbox .seats i{ background:linear-gradient(160deg, rgba(255,122,89,.85), rgba(255,79,163,.7)); border-color:rgba(255,176,138,.9);
box-shadow:0 0 12px rgba(255,122,89,.55); animation:seatbreath 3.4s ease-in-out infinite; }
.vipbox .seats i:nth-child(3n){ animation-delay:-1.1s; } .vipbox .seats i:nth-child(3n+1){ animation-delay:-2.2s; }
@keyframes seatbreath{ 0%,100%{ opacity:1; } 50%{ opacity:.62; } }
@media (prefers-reduced-motion: reduce){ .vipbox .seats i{ animation:none; } }
.vipbox__cap{ margin:0 0 var(--s-4); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:#ffd0c2; }
/* mốc 26/09 trong lộ trình: nổi hẳn lên thành một thẻ ---------------------- */
.road__it--big{ padding:var(--s-4); margin:.2rem 0; border-radius:var(--r-md); background:linear-gradient(120deg, rgba(255,122,89,.22), rgba(255,79,163,.12));
border:1px solid rgba(255,122,89,.45); box-shadow:0 0 40px rgba(255,122,89,.25); }
.road__it--big::before{ top:calc(var(--s-4) + 6px); }
/* ==========================================================================
KHỐI GHI TÊN v2 — Mon 08/09: "tối và chìm, không wow như banner đầu trang".
Đổi hẳn ý: đây là lúc NỔI LÊN LẠI. Cả mục sáng như mặt nước ở 0 m, cùng ngôn
ngữ với hero (nắng, chữ navy in hoa, gạch vàng, phao LIVE) — chứ không phải
thêm một khối navy nữa nối vào chuỗi navy phía trên.
========================================================================== */
.ve-lan{
--text:#1d2a5c; --text-strong:#0f2a86; --text-muted:#4b5c96;
--line:rgba(20,54,168,.16); --line-strong:rgba(20,54,168,.32);
background:linear-gradient(to bottom, #e6edff 0, #f6f8ff 34%, #eef3ff 68%, #4d86ff 93%, #7fa8ff 100%);
}
.ve-lan::after{ inset:auto 0 0 0; height:34%; background:radial-gradient(70% 100% at 50% 100%, rgba(47,107,255,.5), transparent 72%); }
.ve-lan .sun{ left:50%; top:-26%; transform:translateX(-50%); opacity:.9;
background:radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,240,214,.6) 16%, rgba(255,255,255,0) 58%); }
.hoi-nhanh{ --wave:#7fa8ff; } /* mép sóng lấy màu nước ở đáy mục trên */
/* băng rôn: trên nền sáng thì phải dày và nặng hơn */
.siren{ padding:.7rem 0; box-shadow:0 22px 60px -16px rgba(255,79,163,.55), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15); }
/* đầu khối: cùng khuôn với hero */
.cta-hero__live{ justify-content:center; }
.cta-hero__t{ text-transform:uppercase; font-weight:var(--fw-black); letter-spacing:-.02em; color:#0f1a3c;
font-size:clamp(2rem, 5vw, 3.9rem); margin:var(--s-4) 0 var(--s-3); }
.cta-hero__t .mark{ background:linear-gradient(transparent 52%, #ffe66d 52%, #ffe66d 97%, transparent 97%);
padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.cta-hero__sub{ margin:0 auto var(--s-6); max-width:44ch; font-size:clamp(1rem, 1.6vw, 1.2rem); font-weight:var(--fw-semi); color:#2c3a6e; }
.cta-hero__sub .hl{ color:#1f6fff; font-weight:var(--fw-black); }
/* đồng hồ: thẻ trắng, số navy đặc, bóng cứng — bật hẳn khỏi nền sáng */
.bigcd__cell{ background:#fff; border:1px solid rgba(20,54,168,.14);
box-shadow:0 26px 50px -26px rgba(20,54,168,.6), 0 0 0 6px rgba(255,255,255,.5); }
.bigcd__cell b{ color:#0f1a3c; text-shadow:none; }
.bigcd__cell i{ color:#5b6a9c; }
.bigcd__cell--s{ background:linear-gradient(160deg, #fff, #ffe9e1); border-color:rgba(255,122,89,.5); }
.bigcd__cell--s b{ background:var(--grad-cta); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bigcd__cell--s i{ color:#e0603c; }
/* nhãn: viên trắng, viên nóng vẫn là gradient */
.cta-pills li{ background:#fff; border-color:rgba(20,54,168,.14); color:#2c3a6e;
box-shadow:0 10px 24px -14px rgba(20,54,168,.5); }
.cta-pills .is-hot{ background:var(--grad-cta); border-color:transparent; color:#fff; }
.cta-pills .is-warn{ background:#fff2ee; border-color:rgba(255,122,89,.6); color:#c8442a; }
/* lộ trình trên nền sáng */
.road::before{ background:linear-gradient(#2f6bff, #ff7a59); opacity:.35; }
.road__it::before{ background:#fff; border-color:#2f6bff; }
.road__it.is-now::before{ background:var(--sinh-hoc); border-color:var(--sinh-hoc); box-shadow:0 0 0 5px rgba(255,122,89,.22), 0 0 18px rgba(255,122,89,.8); }
.road__it b{ color:#1f4fe0; }
.road__it span{ color:#2c3a6e; }
.road__it--big{ background:linear-gradient(135deg, #0f2a86, #1f4fe0); border-color:transparent;
box-shadow:0 30px 60px -28px rgba(15,42,134,.8); }
.road__it--big::before{ background:#fff; border-color:#fff; box-shadow:0 0 20px rgba(255,255,255,.9); }
.road__it--big b{ color:#9ff3ff; } .road__it--big span{ color:#fff; }
/* vé: vật thể tối duy nhất giữa vùng sáng → thành tâm điểm */
.ticket{ --text:#e8efff; --text-strong:#fff; --text-muted:#b9c9ee;
--line:rgba(180,205,255,.2); --line-strong:rgba(180,205,255,.4);
box-shadow:0 60px 110px -40px rgba(15,42,134,.75), 0 0 0 1px rgba(255,255,255,.2), 0 0 90px rgba(255,79,163,.35); }
.ticket__note, .ticket .muted{ color:#b9c9ee; }
/* hộp khoang riêng: cũng để tối, làm đối trọng với vé */
.vipbox{ --text:#f0e4ff; --text-muted:#d8c8ff;
background:linear-gradient(150deg, #3a1560, #6d1a63 55%, #a8324a);
border-color:rgba(255,176,138,.55); box-shadow:0 34px 70px -30px rgba(58,21,96,.85); }
.ve-lan__echo{ color:#0f2a86; border-left-color:var(--sinh-hoc); }
.ve-lan .kicker--plain{ color:#1f4fe0; }
.ve-lan .kicker--plain::before{ background:var(--sinh-hoc); }
.ve-lan .ve-lan__grid{ padding-bottom:var(--s-6); }
.ve-lan{ padding-bottom:clamp(3rem, 7vw, 6rem); }
/* ==========================================================================
KHỐI GHI TÊN v3 — Mon 08/09: "bỏ emoji, bỏ hiệu ứng lật ở form, bốn box và
màu section nhìn phèn". Đổi cách: bớt vật thể, tăng kỷ luật.
· bốn thẻ bo góc trôi nổi → MỘT bảng kê tối, gạch chân mảnh, đánh số mono
· form kính mờ trên gradient → MỘT thẻ trắng, thanh tiêu đề navy, ô nhập rõ viền
· nền lavender nhạt → nền trắng ngà lạnh, chỉ 2 khối đặc làm điểm nhìn
========================================================================== */
.ve-lan{ background:linear-gradient(to bottom, #eaeff9 0, #f4f7fd 26%, #f4f7fd 62%, #dee7f8 84%, #7fa8ff 100%); }
.ve-lan::after{ inset:auto 0 0 0; height:22%; background:radial-gradient(80% 100% at 50% 100%, rgba(47,107,255,.35), transparent 74%); }
.ve-lan .sun{ opacity:.55; top:-32%; }
.hoi-nhanh{ --wave:#7fa8ff; }
/* --- BẢNG KÊ: một khối tối, không thẻ rời, không icon ---------------------- */
.spec{ position:relative; z-index:2; margin:var(--s-7) 0 var(--s-8); padding:clamp(1.5rem, 3.4vw, 2.75rem);
border-radius:20px; background:#0e2270; color:#dfe7ff;
box-shadow:0 40px 80px -40px rgba(10,30,99,.75), inset 0 1px 0 rgba(255,255,255,.14); }
.spec__head{ padding-bottom:clamp(1rem, 2vw, 1.6rem); border-bottom:1px solid rgba(255,255,255,.16); }
.spec__k{ margin:0; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sinh-hoc-2); }
.spec__t{ margin:.6rem 0 0; font-size:clamp(1.35rem, 2.8vw, 2.15rem); text-transform:uppercase; font-weight:var(--fw-black);
letter-spacing:-.02em; color:#fff; }
.spec__t .mark{ background:#ffe66d; padding:.06em .2em; border-radius:4px; color:#0e2270;
box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.spec__list{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(1.75rem, 4vw, 3.5rem); }
.spec__list li{ display:grid; grid-template-columns:auto 1fr; gap:clamp(.9rem, 1.8vw, 1.35rem);
padding:clamp(1.1rem, 2.2vw, 1.6rem) 0; border-bottom:1px solid rgba(255,255,255,.12); }
.spec__list li:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }
.spec__list b{ font-family:var(--font-mono); font-size:.8rem; font-weight:var(--fw-bold); letter-spacing:.06em;
color:var(--sinh-hoc); padding-top:.15rem; }
.spec__list h4{ margin:0 0 .4rem; font-size:1.05rem; line-height:1.3; color:#fff; }
.spec__list p{ margin:0; font-size:.92rem; line-height:1.6; color:#adc0ee; }
@media (max-width:820px){
.spec__list{ grid-template-columns:1fr; }
.spec__list li:nth-last-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:clamp(1.1rem, 2.2vw, 1.6rem); }
.spec__list li:last-child{ border-bottom:0; padding-bottom:0; }
}
/* --- FORM: thẻ trắng, thanh tiêu đề navy, ô nhập có viền thật ------------- */
.ticket-wrap{ perspective:none; }
.ticket{ --pad:clamp(1.25rem, 2.6vw, 2rem); --text:#1d2a5c; --text-strong:#0f2a86; --text-muted:#5b6a9c;
--line:rgba(20,54,168,.14); --line-strong:rgba(20,54,168,.28);
padding:0 var(--pad) var(--pad); border-radius:20px; overflow:hidden; background:#fff; border:1px solid rgba(20,54,168,.12);
box-shadow:0 50px 90px -44px rgba(10,30,99,.55); }
.ticket::before{ display:none; }
.ticket__head{ margin:0 calc(-1 * var(--pad)) var(--pad); padding:.95rem var(--pad); background:#0e2270; border-bottom:0; }
.ticket__brand img{ height:22px; }
.ticket__no{ color:#9ff3ff; font-size:.68rem; }
.ticket label{ color:#2c3a6e; font-weight:var(--fw-semi); font-size:.92rem; }
.ticket input, .ticket select{ background:#f6f8fd; border:1px solid #d5dff3; color:#0f1a3c; border-radius:12px; }
.ticket input::placeholder{ color:#93a3cc; }
.ticket input:focus, .ticket select:focus{ background:#fff; border-color:var(--sinh-hoc); outline:none;
box-shadow:0 0 0 3px rgba(255,122,89,.22); }
.ticket .muted, .ticket__note{ color:#7183b0; }
.lead-form__submit{ margin-top:var(--s-5); margin-bottom:.9rem; animation:none; box-shadow:0 18px 36px -16px rgba(255,79,163,.75); }
.ticket.is-done input, .ticket.is-done select{ opacity:.5; }
/* hai khối đặc duy nhất của mục → mọi thứ khác phải nhạt đi */
.road__it--big{ box-shadow:0 24px 48px -26px rgba(15,42,134,.6); }
.vipbox{ box-shadow:0 28px 56px -30px rgba(58,21,96,.7); }
@media (max-width:520px){
.ticket__head{ flex-wrap:wrap; gap:.3rem .75rem; }
.ticket__no{ font-size:.6rem; letter-spacing:.1em; }
}
/* ==========================================================================
MASTHEAD HAI CỘT — Mon 08/09: "title dồn giữa, trống hai bên, xuống hàng
một đống". Tiêu đề về bên trái và to lên, phần dẫn + các nhịp sang cột phải,
chữ số khổng lồ của chính mục nằm chìm sau tiêu đề làm mảng trang trí có nghĩa.
========================================================================== */
.sec-head--split{ position:relative; max-width:none; display:grid;
grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
gap:clamp(1.5rem, 4vw, 4rem); align-items:end; }
.sec-head--split .sec-head__l{ position:relative; }
.sec-head--split h2{ margin-bottom:0; font-size:clamp(2rem, 4.4vw, 3.5rem); }
.sec-head--split .lead{ max-width:46ch; margin:0; }
.sec-head--split .depth, .sec-head--split .kicker{ display:inline-flex; }
/* chữ số của mục, để chìm — mảng trang trí duy nhất, và nó nói đúng con số của mục */
.ghost{ position:absolute; left:-.05em; top:-.52em; z-index:0; pointer-events:none; user-select:none;
font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:clamp(7rem, 15vw, 12.5rem); line-height:.8;
color:transparent; -webkit-text-stroke:2px rgba(159,243,255,.26); letter-spacing:-.04em; }
.ghost--sm{ -webkit-text-stroke:2px rgba(255,176,138,.3); }
.sec-head--split .depth, .sec-head--split h2{ position:relative; z-index:1; }
/* ba nhịp: hàng dọc, đánh số mono, gạch chân mảnh — cùng ngôn ngữ với bảng kê */
.beats{ margin-top:var(--s-5); display:grid; }
.beats li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); align-items:baseline;
padding:.7rem 0; border-top:1px solid var(--line); }
.beats li:last-child{ border-bottom:1px solid var(--line); }
.beats b{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--sinh-hoc); }
.beats span{ color:var(--text); font-weight:var(--fw-medium); }
.beats em{ font-style:normal; font-weight:var(--fw-black); color:var(--text-strong); }
@media (max-width:900px){
.sec-head--split{ grid-template-columns:1fr; gap:var(--s-5); align-items:start; }
.ghost{ font-size:clamp(4.5rem, 20vw, 7rem); top:-.28em; left:auto; right:0; opacity:.8; }
.ghost--sm{ font-size:clamp(5rem, 20vw, 7rem); }
}
/* ==========================================================================
ẢNH TRIẾT THẬT + THANH GHI TÊN CỐ ĐỊNH (Mon 08/09)
========================================================================== */
.noi-len__triet{ display:block; background:#0e2270; }
.noi-len__triet img{ display:block; width:100%; height:auto; }
/* THANH GHI TÊN — quay lại bản đầu (thanh ngang) theo yêu cầu Mon 08/09.
Ba bản nén gọn ở giữa đều hỏng; bản này giữ nguyên bố cục ban đầu và chỉ
làm đúng một việc: đẩy cái nút nổi hẳn lên so với phần còn lại của thanh. */
.dock{ position:fixed; left:50%; bottom:clamp(.85rem, 2vw, 1.35rem); z-index:60;
width:min(880px, calc(100vw - 2rem));
transform:translate(-50%, calc(100% + 2.5rem)); opacity:0; visibility:hidden;
transition:transform .5s var(--ease-out), opacity .35s, visibility 0s .5s; }
.dock.is-on{ transform:translate(-50%, 0); opacity:1; visibility:visible; transition-delay:0s; }
@media (prefers-reduced-motion: reduce){ .dock{ transition:none; } }
.dock__in{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center;
gap:clamp(.75rem, 2vw, 1.6rem); padding:.6rem .6rem .6rem clamp(1rem, 2vw, 1.5rem);
border-radius:var(--r-pill); background:rgba(10,20,52,.93); backdrop-filter:blur(16px);
border:1px solid rgba(255,165,31,.3);
box-shadow:0 28px 62px -22px rgba(0,0,0,.82), 0 0 50px -14px rgba(255,122,57,.45),
inset 0 1px 0 rgba(255,255,255,.10); }
.dock__when{ margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:.15rem .6rem; line-height:1.25; }
.dock__when b{ color:#fff; font-size:.95rem; }
.dock__when i{ font-style:normal; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
text-transform:uppercase; color:#ffc79a; }
.dock__dot{ width:8px; height:8px; border-radius:50%; background:#42e39a; box-shadow:0 0 10px #42e39a;
animation:blink 1.7s infinite; flex:0 0 8px; }
.dock__cd{ display:flex; gap:.4rem; }
.dock__cd span{ display:grid; justify-items:center; min-width:42px; padding:.28rem .3rem; border-radius:10px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.dock__cd b{ font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:.98rem; line-height:1;
color:#fff; font-variant-numeric:tabular-nums; }
.dock__cd i{ font-style:normal; font-family:var(--font-mono); font-size:.5rem; letter-spacing:.1em;
text-transform:uppercase; color:#8fa3d6; margin-top:.18rem; }
.dock__cd-s b{ color:#ffc79a; }
/* cái nút: to hơn hẳn, cam nóng, bóng đổ riêng → nó nổi lên khỏi mặt thanh */
.dock__btn{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; text-decoration:none;
padding:.92rem 1.7rem; border-radius:var(--r-pill); font-size:1.08rem; font-weight:var(--fw-black);
letter-spacing:-.01em; color:#fff;
background:linear-gradient(100deg, #ffb020, #ff8a2b 42%, #ff5f2e 76%, #ff4520);
background-size:190% 100%; animation:dockshift 9s ease-in-out infinite alternate;
box-shadow:0 14px 28px -8px rgba(255,110,40,.85), 0 0 0 1px rgba(255,190,120,.35),
inset 0 1px 0 rgba(255,255,255,.45);
transition:transform var(--d-fast) var(--ease-out), filter var(--d-fast); }
@keyframes dockshift{ to{ background-position:100% 0; } }
.dock__btn:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.dock__btn .arrow{ display:inline-block; animation:docknudge 2s ease-in-out infinite; }
@keyframes docknudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
@media (prefers-reduced-motion: reduce){ .dock__btn, .dock__btn .arrow{ animation:none; } }
@media (max-width:820px){
.dock{ left:0; bottom:0; width:100%; transform:translateY(calc(100% + 1rem)); }
.dock.is-on{ transform:translateY(0); }
.dock__in{ grid-template-columns:minmax(0,1fr) auto; border-radius:20px 20px 0 0;
padding:.55rem .55rem .7rem .9rem; gap:.55rem .8rem; }
.dock__when{ grid-column:1 / -1; }
.dock__when b{ font-size:.85rem; } .dock__when i{ font-size:.55rem; }
.dock__cd span{ min-width:36px; } .dock__cd b{ font-size:.88rem; }
.dock__btn{ padding:.8rem 1.2rem; font-size:.98rem; }
}
@media (max-width:400px){ .dock__cd-s{ display:none; } }
/* ==========================================================================
CÂN LẠI LƯỚI QUANH ẢNH (Mon 08/09: "chèn hình mà không cân đối layout")
========================================================================== */
/* −20 m: ảnh vuông cao gần 700px đứng cạnh danh sách 5 dòng → danh sách trôi
giữa một khoảng trống trên dưới. Cân hai cột bằng nhau, ảnh cắt 4:3 chủ ý. */
.thermo__grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:clamp(1.5rem, 3.4vw, 3rem); }
.thermo__fig{ margin:0; transform:none; }
.thermo__fig img{ aspect-ratio:4/3; object-fit:cover; object-position:50% 42%; }
.flow{ display:grid; gap:clamp(.55rem, 1.1vw, .85rem); }
/* −65 m: ảnh vào hẳn cột phải của masthead, không còn đứng lẻ nửa trang */
.sec-head--photo{ align-items:end; margin-bottom:var(--s-8); }
.sec-head--photo .sec-head__r{ align-self:stretch; display:flex; }
.sec-head--photo .shot{ margin:0; width:100%; align-self:flex-end; }
.shot img{ aspect-ratio:4/3; object-fit:cover; }
@media (max-width:900px){
.sec-head--photo{ align-items:start; }
.sec-head--photo .sec-head__r{ display:block; }
.thermo__fig img{ aspect-ratio:16/10; }
}
/* masthead hai cột không được để rule bề rộng riêng của từng mục bóp lại */
.sec-head.sec-head--split{ max-width:none; }
@media (max-width:900px){ .thermo__grid{ grid-template-columns:1fr; } }
/* ==========================================================================
HEADER v2 — Mon 08/09: "gớm xấu, button lệch với nội dung".
Lệch thật: pill ngày giờ là thẻ còn dính margin-bottom, nên với
align-items:center thì hộp lề được canh giữa, còn hộp NHÌN THẤY lệch lên 8px.
Sửa luôn cả cái nền: rgba(...,.55) đè lên các mục sáng ra một vệt xám đục.
========================================================================== */
.topbar{ position:sticky; top:0; z-index:50;
background:rgba(7,16,48,.78); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
border-bottom:1px solid rgba(255,255,255,.09); transition:background var(--d-base), border-color var(--d-base); }
.topbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
background:var(--grad-mountain); opacity:.35; }
.topbar.is-stuck{ background:rgba(5,12,38,.92); border-bottom-color:rgba(255,255,255,.14); }
.topbar__in{ display:flex; align-items:center; gap:clamp(.6rem, 1.4vw, 1.1rem); min-height:64px; }
.topbar__in > *{ margin:0; } /* ← chỗ gây lệch, khoá luôn */
.topbar__brand{ display:flex; align-items:center; }
.topbar__brand img{ display:block; height:28px; width:auto; }
.topbar__rule{ width:1px; height:24px; background:rgba(255,255,255,.18); flex:0 0 1px; }
.topbar__meta{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono);
font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#a9bce8; white-space:nowrap; }
.topbar__live{ width:7px; height:7px; border-radius:50%; background:#42e39a; box-shadow:0 0 9px #42e39a;
animation:blink 1.8s infinite; flex:0 0 7px; }
.topbar__cd{ margin-left:auto !important; display:flex; align-items:baseline; gap:.28rem;
font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#8fa3d6; white-space:nowrap; }
.topbar__cd b{ color:#fff; font-size:.94rem; font-variant-numeric:tabular-nums; }
.topbar__cd i{ font-style:normal; margin-right:.18rem; color:#8fa3d6; }
.topbar__cta{ min-height:42px; padding-inline:1.35rem; font-size:.92rem; border-radius:var(--r-pill);
box-shadow:0 10px 22px -10px rgba(255,79,163,.7); }
@media (max-width:1100px){ .topbar__meta{ display:none; } .topbar__rule{ display:none; } }
@media (max-width:720px){
.topbar__in{ min-height:58px; gap:.6rem; }
.topbar__brand img{ height:24px; }
.topbar__cd{ font-size:.6rem; letter-spacing:.04em; }
.topbar__cd b{ font-size:.82rem; }
.topbar__cta{ min-height:38px; padding-inline:1rem; font-size:.85rem; }
}
@media (max-width:430px){ .topbar__cd{ display:none; } .topbar__cta{ margin-left:auto; } }
/* ==========================================================================
FOOTER v2 — trước đó là hai cột lệch + một dòng mono mồ côi, cắt ngang trang
sáng bằng một đường thẳng cứng. Giờ: mép sóng nối tiếp, ba cột có việc,
và một thanh chân trang.
========================================================================== */
.footer{ position:relative; z-index:1; background:#071336; color:#a9bce8;
padding:calc(var(--s-9) + 40px) 0 var(--s-6); border-top:0; overflow:hidden; }
/* mép sóng lấy màu mục ngay trên (hỏi nhanh) → không còn đường cắt thẳng */
.footer::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:70px; background:#e3eefb; z-index:2; pointer-events:none;
-webkit-mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat; }
/* quầng sáng sinh học ở đáy, khép lại mạch lặn */
.footer::after{ content:""; position:absolute; left:50%; bottom:-45%; width:min(900px, 90vw); aspect-ratio:2/1;
transform:translateX(-50%); background:radial-gradient(circle, rgba(255,122,89,.20), transparent 62%); pointer-events:none; }
.footer__in{ position:relative; z-index:1; display:grid;
grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr);
gap:clamp(1.75rem, 4vw, 3.5rem); align-items:start; padding-bottom:var(--s-7); }
.footer__logo{ display:block; height:30px; width:auto; margin-bottom:var(--s-4); }
.footer__tag{ margin:0; font-size:.92rem; line-height:1.65; color:#8fa3d6; max-width:34ch; }
.footer__k{ margin:0 0 var(--s-4); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--sinh-hoc-2); }
.footer__facts{ display:grid; gap:.65rem; }
.footer__facts li{ display:grid; grid-template-columns:3.6rem 1fr; gap:.9rem; align-items:baseline; }
.footer__facts span{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#6d80b4; }
.footer__facts b{ font-weight:var(--fw-semi); color:#dfe7ff; font-size:.92rem; line-height:1.45; }
.footer__links{ display:grid; gap:.7rem; margin-bottom:var(--s-5); }
.footer__links li{ display:flex; align-items:baseline; gap:.65rem; flex-wrap:wrap; }
.footer__links a{ color:#fff; font-weight:var(--fw-semi); font-size:1rem; text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.22); transition:border-color var(--d-fast), color var(--d-fast); }
.footer__links a:hover{ color:var(--sinh-hoc-2); border-bottom-color:var(--sinh-hoc); }
.footer__links span{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#6d80b4; }
.footer__cta{ min-height:46px; padding-inline:1.5rem; font-size:.95rem; }
.footer__bottom{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.6rem var(--s-6);
justify-content:space-between; align-items:baseline; padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.10); }
.footer__bottom p{ margin:0; font-size:.78rem; color:#6d80b4; max-width:72ch; }
.footer__close{ font-family:var(--font-mono); font-size:.62rem !important; letter-spacing:.16em;
text-transform:uppercase; color:var(--sinh-hoc-2) !important; white-space:nowrap; }
@media (max-width:900px){ .footer__in{ grid-template-columns:1fr 1fr; } .footer__col--brand{ grid-column:1 / -1; } }
@media (max-width:620px){ .footer__in{ grid-template-columns:1fr; gap:var(--s-6); } .footer{ padding-top:calc(var(--s-8) + 40px); } }
/* dòng định vị dưới tên buổi */
.join__tag{ margin:var(--s-3) 0 var(--s-4); font-size:clamp(.95rem, 1.35vw, 1.08rem); line-height:1.5;
font-weight:var(--fw-semi); color:#2c3a6e; }
/* --- ẢNH THẬT bổ sung (khối này bị lệnh thay CSS thanh dock cắt mất, trả lại) -- */
.thermo__fig figcaption{ padding:.7rem .95rem; font-family:var(--font-mono); font-size:.62rem;
letter-spacing:.12em; text-transform:uppercase; color:var(--ngoc-2); background:rgba(10,30,99,.55); }
.thermo__fig img{ display:block; width:100%; height:auto; }
.shot{ margin:0; border-radius:var(--r-md); overflow:hidden;
border:1px solid rgba(20,54,168,.14); box-shadow:0 34px 66px -34px rgba(20,54,168,.6); background:#fff; }
.shot img{ display:block; width:100%; height:auto; }
.shot figcaption{ padding:.85rem 1.1rem; font-size:.9rem; color:#4b5c96; }
.proofstrip{ margin-top:var(--s-7); }
.proofstrip__k{ margin:0 0 var(--s-4); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--sinh-hoc-2); }
.proofstrip ul{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(.6rem, 1.4vw, 1rem); }
.proofstrip li{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.18);
box-shadow:0 24px 46px -26px rgba(0,0,0,.8); aspect-ratio:4/3; }
.proofstrip img{ display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
@media (max-width:760px){ .proofstrip ul{ grid-template-columns:1fr 1fr; } }
/* hai rule này phải đứng SAU .shot vì .shot ở trên vừa đặt lại aspect-ratio/margin */
.sec-head--photo .shot{ margin:0; width:100%; align-self:flex-end; }
.sec-head--photo .shot img{ aspect-ratio:4/3; object-fit:cover; }
/* ==========================================================================
−2 m · VÌ SAO TRANG NÀY — dựng từ bộ hook của Mon (08/09). Dải tối chen giữa
hero sáng và −5 m sáng, vừa tạo nhịp vừa là chỗ người đọc tự nhận ra mình.
========================================================================== */
.vi-sao{ background:radial-gradient(900px 520px at 18% 0%, rgba(255,122,89,.14), transparent 62%), #0c1c4e;
padding-top:calc(var(--sec-pad) + 20px); }
.vi-sao{ --wave:#cfe0fb; }
.vi-sao .sec-head--split{ align-items:start; margin-bottom:0; }
.vi-sao h2{ font-size:clamp(1.9rem, 4vw, 3.1rem); }
.vi-sao .lead{ margin-top:var(--s-4); color:#b9c9ee; max-width:52ch; }
.vi-sao .lead b{ color:#fff; font-weight:var(--fw-bold); }
.vi-sao__q{ margin:var(--s-6) 0 0; padding:var(--s-4) 0 var(--s-4) var(--s-5);
border-left:3px solid var(--sinh-hoc); }
.vi-sao__q p{ margin:0; font-size:clamp(1.02rem, 1.5vw, 1.2rem); font-weight:var(--fw-semi); color:#fff; }
.tick{ display:grid; gap:.65rem; margin:var(--s-4) 0 var(--s-6); }
.tick li{ position:relative; padding:.7rem .9rem .7rem 3rem; border-radius:14px;
background:rgba(255,255,255,.05); border:1px solid rgba(180,205,255,.16); color:#dfe7ff; line-height:1.5; }
.tick li::before{ content:"✓"; position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:.85rem;
background:rgba(255,122,89,.16); border:1px solid rgba(255,122,89,.5); color:var(--sinh-hoc-2); }
.vi-sao__turn{ margin:0; font-size:1.05rem; color:#b9c9ee; }
.vi-sao__turn span{ display:block; margin-top:.3rem; font-weight:var(--fw-bold); color:#fff; }
@media (max-width:900px){ .vi-sao .sec-head--split{ gap:var(--s-6); } .vi-sao__q{ margin-top:var(--s-5); } }
/* ==========================================================================
MÀN LỚN 2K / 4K — Mon hỏi 08/09. Trước đó chưa hề tính: khung nội dung khoá
cứng 1200px nên ở 2560px trống 680px mỗi bên, và mọi tiêu đề đụng trần clamp
nên chữ đứng yên trong khi màn hình to gấp đôi.
Cả hệ đo bằng rem và mọi trần clamp cũng bằng rem, nên chỉ cần nâng cỡ chữ
gốc là toàn bộ thang chữ + khoảng cách giãn theo, không phải sửa 30 cái clamp.
========================================================================== */
@media (min-width:1700px){
html{ font-size:106.25%; } /* 17px */
:root{ --wrap:1360px; }
}
@media (min-width:2100px){
html{ font-size:112.5%; } /* 18px */
:root{ --wrap:1520px; --sec-pad:clamp(5rem, 9vw, 10rem); }
}
@media (min-width:2800px){
html{ font-size:125%; } /* 20px — 4K không scale */
:root{ --wrap:1720px; }
}
/* thước độ sâu bám theo mép khung nội dung, không dính mép màn hình.
Ở 2560px nó đang nằm cách chỗ người ta đọc gần 700px, thành ra vô nghĩa. */
@media (min-width:1700px){
.rail{ left:max(14px, calc((100vw - var(--wrap)) / 2 - 5.2rem)); }
}
/* mấy khối cố tình không được giãn theo khung: chỗ đọc và chỗ điền form.
Khung rộng ra là để bố cục thở, không phải để dòng chữ dài thêm. */
@media (min-width:1700px){
.lead, .sec-head--split .lead{ max-width:50ch; }
.cta-hero__sub{ max-width:46ch; }
.ticket{ max-width:640px; margin-inline:auto; }
.dive__note, .footer__bottom p{ max-width:78ch; }
}