/* Layout: một cột đọc hẹp trên nền trời nhạt; ảnh và trích dẫn mở rộng ra khung lớn; tít phụ là khối chữ riêng
   có vạch tim đường băng làm hoa văn. Nhịp dọc đều nhờ khoảng cách cố định giữa các khối. */
:root{
  --paper:#f7f9fa;      /* nền trắng sạch như thân máy bay */
  --mist:#dfe8ed;
  --ink:#0b2a3f;
  --ink-soft:#557081;
  --sea:#0c5a78;        /* xanh biển Phú Quốc, khớp màu bìa */
  --sea-deep:#063049;
  --night:#052439;
  --amber:#f08a1c;      /* cam đuôi máy bay */
  --sun-red:#d9342b;
  --sun-gold:#f6b62b;
  --sunset:linear-gradient(90deg,#d9342b 0%,#f08a1c 55%,#f6b62b 100%);
  --on-dark:#eef5f8;
  --on-dark-soft:#a9c3d1;

  --f-display:"Lora", Georgia, "Times New Roman", serif;
  --f-body:"Noto Serif", Georgia, "Times New Roman", serif;

  --measure:680px;
  --wide:1180px;
  --space:clamp(56px,7vw,104px);
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.22,.61,.21,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:19px;line-height:1.8;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--night)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){body{font-size:17.5px;line-height:1.78}}

/* ---------- Thanh tiến độ: vạch tim đường băng ---------- */
.runway-progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:28px;z-index:50;pointer-events:none;
  padding-left:var(--gutter-l);padding-right:var(--gutter-r);
  background:linear-gradient(rgba(5,36,57,.85),rgba(5,36,57,0));opacity:0;transition:opacity .5s var(--ease)}
.runway-progress.on{opacity:1}
.runway-progress .track{position:relative;height:100%}
.runway-progress .track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:repeating-linear-gradient(90deg,rgba(233,243,247,.35) 0 14px,transparent 14px 26px)}
.runway-progress .fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:var(--sunset)}
.runway-progress .plane{position:absolute;top:50%;left:0;width:20px;height:20px;margin:-10px 0 0 -10px;color:var(--on-dark)}

/* ---------- Bìa: cảnh hạ cánh theo cuộn ---------- */
.scene{position:relative;height:440vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1100px;perspective-origin:50% 38%;background:#cfd3c9;isolation:isolate}
.sky{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(42% 30% at 18% 30%,rgba(255,214,150,.55),rgba(255,214,150,0) 70%),
  linear-gradient(180deg,#061a33 0%,#0d3561 24%,#3f6f97 40%,#b9c9cf 52%,#e9dcc4 58%,#cfd7d2 66%)}
.ridge{position:absolute;left:-4%;right:-4%;top:0;height:30vh;z-index:-2;background-size:cover;background-position:50% 8%;filter:saturate(.85) contrast(.95) brightness(1.05) blur(.6px);opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%)}

.hills{position:absolute;left:-10%;width:120%;top:0;height:24vh;z-index:-2;pointer-events:none;will-change:transform}
.outro{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(6,50,77,0) 40%,rgba(6,50,77,.7) 80%,#06324d 100%)}
.flare{top:0!important;will-change:transform}
.haze{position:absolute;inset:0;z-index:2;pointer-events:none}
.vign{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 75% at 50% 70%,transparent 55%,rgba(3,19,38,.6) 100%)}
.grain{position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.07;background-size:200px;animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
.flare{position:absolute;z-index:3;pointer-events:none;left:14%;top:24%;width:30vmax;height:30vmax;margin:-15vmax 0 0 -15vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,230,180,.45),rgba(255,210,140,.12) 35%,transparent 62%);mix-blend-mode:screen}


.hint{position:absolute;z-index:5;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:var(--f-ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#eef5f8;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s}
.hint span{width:1px;height:42px;background:linear-gradient(#eef5f8,transparent);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.photo-end{position:absolute;inset:0;z-index:4;overflow:hidden;visibility:hidden;clip-path:circle(0px at 50% 50%);background:#1d2a22}
/* ảnh cover có tít + sapo mở ra ngay trong khung cảnh hạ cánh, từ vị trí máy bay */
.photo-end{background:#06324d;z-index:7}
.photo-end .pe-box{position:absolute;left:50%;top:50%;width:max(100%,calc(100svh * 2380 / 1547));aspect-ratio:2380/1547;transform:translate(-50%,-50%) scale(var(--pe-s,1));transform-origin:50% 55%;will-change:transform}
.photo-end .pe-box picture{display:block;width:100%;height:100%}
.photo-end .pe-box img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media (max-width:767px){
  /* điện thoại: giữ trọn khung ảnh (mũi đến đuôi máy bay), nền trời và cỏ nối liền mép ảnh */
  .photo-end{background:linear-gradient(180deg,rgba(0,0,0,0) 72%,#8f8c3d 72%,#7a7632 86%,#5e5a25 100%),linear-gradient(100deg,#c4bccc 0%,#aaabc9 48%,#3f75c0 100%)}
  .photo-end .pe-box{width:100%;top:auto;bottom:24%;transform:translateX(-50%) scale(var(--pe-s,1));transform-origin:50% 60%}
  .photo-end .pe-box img{object-fit:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%)}
}
/* tít trên ảnh cover tĩnh: dòng đậm + dòng thường trên nền xanh ngọc mờ, góc trên bên trái */
.pe-title{position:absolute;z-index:2;left:0;top:calc(56px + env(safe-area-inset-top,0px));margin:0;
  padding:.38em .7em .44em max(48px,var(--gutter-l));
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:400;font-size:clamp(34px,4.3vw,70px);line-height:1.08;letter-spacing:-.02em;color:#04171d;width:max-content;
  opacity:0;transform:translateX(-28px);transition:opacity .9s var(--ease) .15s,transform 1.1s var(--ease) .15s}
.pe-title::before{content:"";position:absolute;z-index:-1;left:0;top:-30%;right:-18%;bottom:-40%;pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 32% 46%,rgba(170,226,232,.62) 0%,rgba(170,226,232,.34) 48%,rgba(170,226,232,0) 100%)}
.pe-title .ln{display:block;white-space:nowrap}
.pe-title b{display:block;font-weight:800;letter-spacing:-.028em;margin-bottom:.04em}
.photo-end.done .pe-title,.stage.nogl .pe-title{opacity:1;transform:none}
@media (max-width:767px){.pe-title b ~ .ln{display:inline;white-space:normal}.pe-title{width:auto;right:0;top:calc(48px + env(safe-area-inset-top,0px));max-width:none;padding:.42em 20px .5em;font-size:clamp(23px,7vw,34px);line-height:1.13}}
@media (prefers-reduced-motion:reduce){.pe-title{transition:none}}
.stage.nogl .photo-end{visibility:visible;clip-path:none}

.gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.stage.nogl{background:#0b2a4a url('../img/img-02.jpg') center/cover no-repeat}
.stage.nogl .plane2d,.stage.nogl .hills,.stage.nogl .haze,.stage.nogl .sky,.stage.nogl .flare,.stage.nogl .hint{display:none}
.plane2d{position:absolute;left:0;top:0;width:313px;height:295px;margin:-147px 0 0 -156px;z-index:3;pointer-events:none;will-change:transform;transform-origin:50% 50%;opacity:0;visibility:hidden}
.plane2d.ready{visibility:visible}
.plane2d img{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)) saturate(1.05)}
.hint{gap:0;z-index:6}
.hint span{height:54px}
/* ---------- Chữ chạy góc phải dưới: chỉ hiện khi máy bay đang chuyển động ---------- */
.fdata{position:absolute;z-index:6;right:max(28px,var(--gutter-r));bottom:calc(32px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100% - 32px));
  color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease);
  padding:16px 18px 14px;border-radius:6px;background:linear-gradient(160deg,rgba(5,36,57,.72),rgba(5,36,57,.52));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 18px 40px -18px rgba(3,19,38,.7);border-left:3px solid var(--amber)}
.fdata.on{opacity:1;transform:none}
.fdata .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sun-gold);min-height:1.4em;white-space:nowrap;overflow:hidden}
.fdata .h{font-family:var(--f-display);font-weight:700;font-size:clamp(19px,1.7vw,23px);line-height:1.3;margin:6px 0 12px;min-height:2.6em;text-wrap:balance}
.fdata .h .t,.fdata .k .t{display:inline-block;opacity:0;transform:translateY(.35em);animation:fdIn .45s var(--ease) forwards;animation-delay:calc(var(--i) * 90ms)}
@keyframes fdIn{to{opacity:1;transform:none}}
.fdata .rw{position:relative;height:6px;margin:0 0 6px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 8px,rgba(255,255,255,.1) 8px 14px)}
.fdata .rw i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--sunset)}
.fdata .rw b{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(240,138,28,.45)}
.fdata .ends{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.06em;color:var(--on-dark-soft);margin-bottom:10px}
.fdata .rd{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--on-dark-soft);font-variant-numeric:tabular-nums;border-top:1px solid rgba(238,245,248,.16);padding-top:9px}
.fdata .rd strong{color:#fff;font-weight:600;font-size:14px;margin-left:5px}
@media (max-width:600px){.fdata{right:16px;width:min(290px,calc(100% - 32px));bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:10px 12px 9px}.fdata .k{font-size:9.5px;letter-spacing:.14em}.fdata .h{font-size:15.5px;margin:3px 0 8px}.fdata .ends{display:none}.fdata .rw{margin-bottom:8px}.fdata .rd{font-size:11px;padding-top:7px}.fdata .rd strong{font-size:12.5px}}
.stage.nogl .fdata{display:none}
@media (prefers-reduced-motion:reduce){.fdata .t{animation:none!important;opacity:1!important;transform:none!important}}
.byline{margin-top:2.4em!important;padding-top:18px;border-top:1px solid var(--mist);text-align:right;font-size:15px;letter-spacing:.02em;color:var(--ink-soft)}
.byline b{color:var(--ink);font-weight:600}
.byline span{margin:0 .7em;color:var(--amber)}
.scene.nogl{height:auto}.scene.nogl .stage{position:relative}
@media (prefers-reduced-motion:reduce){.grain{animation:none!important}}


/* ---------- Nhịp bố cục ---------- */
main{overflow-x:clip;display:flex;flex-direction:column;gap:var(--space);padding-top:calc(var(--space) * .6);padding-bottom:calc(var(--space) * 1.4)}
.wrap{padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.col{max-width:var(--measure);margin:0 auto}
.col-wide{max-width:var(--wide);margin:0 auto}


/* Văn bản */
.text p{margin:0 0 1.2em}
.text p:last-child{margin-bottom:0}
.dropcap::first-letter{font-family:var(--f-display);font-weight:700;float:left;font-size:4.3em;line-height:.82;padding:.08em .12em 0 0;color:var(--sea)}

/* ---------- Sapo dưới cover ---------- */
.sapo{padding-top:calc(var(--space) * .4)}
.sapo .col{max-width:860px;text-align:center}
.sapo .bar{width:72px;height:4px;background:var(--sunset);margin:0 auto 30px}
.sapo p{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.7vw,38px);line-height:1.5;color:var(--sea-deep);margin:0;text-wrap:pretty;letter-spacing:-.003em}
.sapo p b{font-weight:700;color:var(--sea)}

/* ---------- Tít phụ: khối chữ, không ảnh ---------- */
.chap{text-align:center;margin-top:calc(var(--space) * -.3);margin-bottom:calc(var(--space) * -.55)}
.chap .mark{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 20px;max-width:420px;color:var(--amber)}
.chap .mark::before,.chap .mark::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--sea) 0 12px,transparent 12px 22px);opacity:.45}
.chap .mark svg{width:26px;height:26px;flex:0 0 auto}
.chap h2{font-family:var(--f-display);font-weight:600;font-size:clamp(30px,4.2vw,52px);line-height:1.18;letter-spacing:-.005em;color:var(--ink);margin:0 auto;max-width:20ch;text-wrap:balance}
.chap .bar{width:56px;height:3px;background:var(--sunset);margin:20px auto 0}
.chap.rv .mark svg{transition:transform 1.4s var(--ease)}
.chap.rv.wait .mark svg{transform:translateX(-120px) rotate(0deg)}

/* ---------- Ảnh ---------- */
figure{margin:0}
.full img{width:100%;height:auto}
figcaption{font-size:15px;line-height:1.65;color:var(--ink-soft);font-style:italic;margin:16px auto 0;max-width:var(--measure);padding-left:14px;border-left:2px solid var(--amber)}
.pic img{width:100%;height:auto}

/* Video */
.vframe{position:relative;aspect-ratio:16/9;background:var(--night);overflow:hidden;border-radius:4px}
.vframe iframe,.vframe video{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--night);object-fit:cover}
.vposter{position:absolute;inset:0;display:block}
.vposter img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vposter::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,36,57,.1),rgba(5,36,57,.45))}
.vposter:hover img{transform:scale(1.04)}
.vplay{position:absolute;left:50%;top:50%;z-index:1;width:clamp(64px,8vw,96px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--sunset);box-shadow:0 0 0 10px rgba(255,255,255,.18),0 20px 40px -10px rgba(3,30,48,.6)}
.vplay svg{width:42%;height:42%;margin-left:6%}

/* Ghép 2 ảnh */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.pair figure:nth-child(2){margin-top:clamp(0px,6vw,72px)}
.pair5{row-gap:14px}
.pair-cap{max-width:var(--wide);margin:16px auto 0}
.pair5 figure:nth-child(2n){margin-top:clamp(0px,6vw,72px)}
.pair5 figure:nth-child(3){margin-top:0}
.pair5 figure:nth-child(4){margin-top:clamp(0px,6vw,72px)}
.pair5 figure:nth-child(5){grid-column:1 / span 2}
@media (max-width:700px){.pair{grid-template-columns:1fr}.pair figure:nth-child(n){margin-top:0}.pair5 figure:nth-child(5){grid-column:auto}}

/* Ghép 3 ảnh: 1 lớn + 2 nhỏ xếp chồng */
.trio{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
.trio figure{overflow:hidden;min-height:0}
.trio img{width:100%;height:100%;object-fit:cover}
.trio figure:first-child{grid-row:1 / span 2}
@media (max-width:700px){.trio{grid-template-columns:1fr 1fr;grid-template-rows:auto}.trio figure:first-child{grid-column:1 / span 2;grid-row:auto}.trio img{aspect-ratio:3/2;height:auto}}

/* ---------- Ảnh trượt ---------- */
.slider{position:relative}
.slider .track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:calc((100% - min(78vw, 980px)) / 2);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slider .track::-webkit-scrollbar{display:none}
.slider .slide{flex:0 0 min(78vw,980px);scroll-snap-align:center;transition:opacity .6s var(--ease),transform .6s var(--ease);opacity:.45;transform:scale(.94)}
.slider .slide.on{opacity:1;transform:none}
.slider .slide img{width:100%;aspect-ratio:3/2;object-fit:cover}
.slider.r169 .slide img{aspect-ratio:16/9}
.slider .ctrl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:24px;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.slider button.arr{appearance:none;border:1px solid rgba(13,37,55,.25);background:transparent;color:var(--ink);width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.slider button.arr:hover{background:var(--sea);color:var(--on-dark);border-color:var(--sea)}
.slider button.arr svg{width:18px;height:18px}
.slider .dots{display:flex;gap:8px}
.slider .dots button{appearance:none;border:0;padding:0;width:26px;height:3px;background:rgba(13,37,55,.2);cursor:pointer;transition:background .3s,width .3s}
.slider .dots button.on{background:var(--sunset);width:42px}
@media (max-width:600px){.slider .track{padding-inline:7vw;gap:10px}.slider .slide{flex-basis:86vw}}

/* ---------- Ảnh xếp chồng: mỗi ảnh dừng lại rồi ảnh sau trượt lên phủ ---------- */
.stackgal .col-wide{position:relative;max-width:1080px}
.stackgal .card{position:sticky;top:calc(9vh + var(--i) * 14px);margin:0 0 9vh;border-radius:6px;overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(3,30,48,.55);transform-origin:50% 0;will-change:transform;background:var(--night)}
.stackgal .card:last-child{margin-bottom:0}
.stackgal .card img{width:100%;aspect-ratio:16/9;object-fit:cover;transform:scale(var(--z,1));transition:transform .2s linear}
.stackgal .card .no{position:absolute;right:16px;bottom:14px;font-family:var(--f-display);font-size:14px;letter-spacing:.14em;color:#fff;
  background:rgba(5,36,57,.55);padding:6px 12px;border-radius:40px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:600px){.stackgal .card{top:calc(12vh + var(--i) * 10px);margin-bottom:6vh}}

/* ---------- Trích dẫn ---------- */
blockquote{margin:0}
.qmark{display:block;font-family:var(--f-display);font-size:92px;line-height:.6;height:.5em;color:var(--amber);background:var(--sunset);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:max-content}
.qtext{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(23px,2.6vw,32px);line-height:1.45;text-wrap:balance;margin:14px 0 22px}
.qwho{font-size:15px;line-height:1.6;color:var(--on-dark-soft)}
.qwho b{display:block;color:var(--on-dark);font-weight:600;font-size:16px}

/* chân dung dọc: ảnh có khung lệch màu hoàng hôn, trích dẫn trên nền trời nhạt */
.q-portrait{position:relative;background:linear-gradient(120deg,#2a8fae 0%,#16739a 48%,#0e5b80 100%);color:var(--on-dark)}
.q-portrait .inner{max-width:1180px;margin:0 auto;padding-block:clamp(64px,8vw,112px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,6vw,96px);align-items:center}
.q-portrait .photo{position:relative;padding:0 22px 22px 0}
.q-portrait .photo::before{content:"";position:absolute;inset:22px 0 0 22px;border:2px solid transparent;
  background:var(--sunset) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.q-portrait .photo figure{position:relative;box-shadow:0 30px 60px -24px rgba(3,30,48,.6)}
.q-portrait img{width:100%;aspect-ratio:3/2;object-fit:cover}
.q-portrait blockquote{position:relative}
.q-portrait .qmark{font-size:110px}
.q-portrait .qtext{color:#fff;font-size:clamp(25px,2.8vw,36px);line-height:1.42;margin:18px 0 30px}
.q-portrait .qwho{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--on-dark-soft)}
.q-portrait .qwho::before{content:"";width:48px;height:3px;background:var(--sunset);flex:0 0 auto}
.q-portrait .qwho b{display:inline;color:#fff;font-size:17px;letter-spacing:.01em}
@media (max-width:760px){.q-portrait .inner{grid-template-columns:1fr}.q-portrait .photo{max-width:100%}}

/* trên ảnh ngang */
.q-wide{position:relative;overflow:hidden;background:#0e5b80;color:var(--on-dark)}
.q-wide img{width:100%;height:auto;min-height:440px;object-fit:cover}
.q-wide .over{position:absolute;inset:0;display:flex;align-items:center;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.q-wide.left .over{background:linear-gradient(90deg,rgba(14,91,128,.92) 0%,rgba(22,115,154,.66) 38%,rgba(22,115,154,0) 64%)}
.q-wide.right .over{justify-content:flex-end;background:linear-gradient(270deg,rgba(14,91,128,.92) 0%,rgba(22,115,154,.66) 38%,rgba(22,115,154,0) 64%)}
.q-wide blockquote{width:min(44%,540px);margin-inline:clamp(0px,5vw,80px)}
.q-wide .qtext{font-size:clamp(24px,2.7vw,34px)}
.q-wide .qwho{padding-top:18px;border-top:1px solid rgba(238,245,248,.18);position:relative}
.q-wide .qwho::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:3px;background:var(--sunset)}
.q-wide.stack img{min-height:0}
.q-thinh img{object-position:100% 50%}
.q-wide.stack .over{position:static;justify-content:center;background:var(--night);padding-block:clamp(40px,5vw,64px)}
.q-wide.stack blockquote{width:min(100%,760px);margin:0 auto;text-align:center}
.q-wide.stack .qtext{margin-inline:auto}
@media (max-width:820px){
  .q-wide img{min-height:0;aspect-ratio:16/10}
  .q-wide .over{position:static;background:linear-gradient(120deg,#2a8fae,#0e5b80)!important;padding-block:36px 48px}
  .q-wide blockquote{width:100%;margin:0}
}

/* ---------- Hiệu ứng xuất hiện ---------- */
.rv{transition:opacity 1s var(--ease),transform 1.15s var(--ease)}
.rv.wait{opacity:0;transform:translate3d(var(--dx,0),var(--dy,26px),0)}
.rv-img{overflow:hidden;transition:opacity 1.1s var(--ease),transform 1.3s var(--ease),clip-path 1.3s var(--ease)}
.rv-img img{transition:transform 1.9s var(--ease)}
.rv-img.wait{opacity:0;transform:translate3d(var(--dx,-90px),0,0);clip-path:inset(0 0 0 0)}
.rv-img.wait img{transform:scale(1.1)}
.rv-zoom{transition:transform 2s var(--ease),opacity 1.2s var(--ease)}
.rv-zoom.wait{transform:scale(1.12);opacity:.35}
.cover .bg img,.cover .ka,.cover h1,.cover .sp,.cover .rule{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-img,.rv-img img,.rv-zoom,.cover *,.slider .slide,.chap .mark svg{transition:none!important;animation:none!important}
  .rv.wait,.rv-img.wait,.rv-zoom.wait{opacity:1;transform:none}.rv-img.wait img{transform:none}
  .chap.rv.wait .mark svg{transform:none}
}

html.lenis,html.lenis body{height:auto!important}
html.lenis.lenis-smooth,html.lenis.lenis-smooth body{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}