/* [db8dd01c] Ken 28/10: menu trỏ xuống (9 mục, kiểu 1 «Thanh kính trên cùng») + 3 chương mới — «Câu chuyện dự án» (.st, sau ch01), «Thư viện» (.lib) và
   «Tin tức» (.news) (sau Chủ đầu tư, trước Đăng ký). Mỗi chương 3 kiểu chọn trong dock (?st / ?lib / ?news), mockup: design/mockups/nav/.
   Bố cục co giãn theo khung nhìn (nhiều chữ — như khối Chủ đầu tư), hành vi: sections.js. */

/* ===== Menu ===== (kiểu 1 «Thanh kính trên cùng», số đo từ design/mockups/nav/menu-1.jpg quy về thang 1672×941 — bảng: design/mockups/nav/story-inventory.md) */
.mn { --m: min(100vw / 1672, 100vh / 941); --b: calc(var(--m) * .78); position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: max(44px, 64 * var(--b)); display: flex; align-items: center;
  padding-left: calc(57 * var(--m) + (100vw - 1672 * var(--m)) / 2); /* khung 1672 căn giữa: màn rộng hơn 16:9 vẫn giữ đúng vị trí tương đối */
  background: linear-gradient(90deg, rgba(38, 66, 100, .86), rgba(30, 56, 88, .82) 50%, rgba(36, 58, 82, .84)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(233, 196, 138, .75); box-shadow: 0 1px 10px rgba(250, 207, 113, .18); transition: translate .45s cubic-bezier(.2, .7, .2, 1); }
.mn.is-hide { translate: 0 -100%; } /* cuộn xuống: thu lên để không đè tiêu đề chương; cuộn lên / rê chuột mép trên: hiện lại */
.mn__logo { flex: none; display: block; width: max(118px, 174 * var(--b)); } /* Ken 28/10 «thanh dẫn hướng quá to»: cao / chữ / logo / nút = 78% mockup (--b), sàn 44px / chữ 12.5px cho màn ~1440; vị trí ngang giữ thang mockup (--m) */
@media (min-width: 761px) { .hero__logo { top: max(calc(47 * var(--u)), 58px, calc(64 * min(100vw / 1672, 100vh / 941))); } } /* logo lớn màn đầu đứng dưới thanh menu (cách đáy thanh ≥ 14px) */
.mn__logo img { display: block; width: 100%; height: auto; }
.mn__list { display: flex; align-items: center; justify-content: space-between; width: calc(1198 * var(--m)); margin: 0 0 0 calc(296 * var(--m) - max(118px, 174 * var(--b))); padding: 0; list-style: none; } /* chữ đầu x 353u, chữ cuối hết 1551u */
.mn__list > li:first-child { margin-right: calc(9 * var(--m)); } /* mockup: khe sau «Trang chủ» rộng hơn các khe khác */
.mn__list a { display: block; font: 500 max(12.5px, 17 * var(--b)) / 1 "Lora", serif; letter-spacing: .085em; text-transform: uppercase; color: #F3E6D2; text-decoration: none; white-space: nowrap; transition: color .25s; }
.mn__list > li > a { position: relative; padding: max(15px, 23 * var(--b)) 0; }
.mn__list > li > a::after { content: ""; position: absolute; left: 50%; bottom: calc(10 * var(--b)); width: calc(50 * var(--b)); translate: -50% 0; border-top: 2px solid #F2CF8E;
  box-shadow: 0 0 8px 1px rgba(250, 207, 113, .8); border-radius: 2px; opacity: 0; scale: .3 1; transition: opacity .3s, scale .3s; }
.mn__list > li > a:is(:hover, :focus-visible, [aria-current="true"]) { color: #FBE9C8; }
.mn__list > li > a:is(:hover, :focus-visible, [aria-current="true"])::after { opacity: 1; scale: 1; }
.mn__list .mn__vr { width: max(106px, 139 * var(--b)); padding: calc(8 * var(--b)) 0; text-align: center; border: 1.5px solid rgba(236, 200, 146, .9); border-radius: 99px; }
.mn__list .mn__vr::after { display: none; }
.mn__has { position: relative; }
/* bảng thả: 419×326u, đỉnh ngay đáy thanh (y 66u), 2×2 ô ảnh 189×120u viền vàng, nhãn Lora dưới ô, mũi nhọn chỉ lên mục */
.mn__drop { position: absolute; left: 50%; top: calc(100% + 3 * var(--m)); translate: calc(-50% + 25 * var(--m)) calc(6 * var(--m)); display: grid; grid-template-columns: repeat(2, calc(189 * var(--m)));
  column-gap: calc(12 * var(--m)); row-gap: 0; padding: calc(17 * var(--m)) calc(16 * var(--m)) calc(1 * var(--m)); width: calc(419 * var(--m)); box-sizing: border-box;
  border: 1.5px solid rgba(233, 196, 138, .7); border-radius: calc(13 * var(--m)); background: linear-gradient(rgba(30, 54, 86, .94), rgba(20, 40, 68, .95));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0, 8, 20, .5); opacity: 0; visibility: hidden; transition: opacity .25s, translate .25s, visibility .25s; }
.mn__drop::before { content: ""; position: absolute; left: calc(50% - 25 * var(--m)); top: calc(-7 * var(--m)); width: calc(12 * var(--m)); height: calc(12 * var(--m)); translate: -50% 0; rotate: 45deg;
  background: #F2CF8E; box-shadow: 0 0 8px rgba(250, 207, 113, .9); clip-path: polygon(0 0, 100% 0, 0 100%); } /* mũi nhọn vàng dưới mục Tiện ích */
.mn__drop::after { content: ""; position: absolute; left: 0; right: 0; top: calc(-24 * var(--m)); height: calc(24 * var(--m)); } /* cầu nối chuột từ mục xuống bảng */
.mn__has:is(:hover, :focus-within) .mn__drop { opacity: 1; visibility: visible; translate: calc(-50% + 25 * var(--m)) 0; }
.mn__drop a { padding: 0; letter-spacing: 0; text-transform: none; font: 400 calc(19.5 * var(--m)) / calc(33 * var(--m)) "Lora", serif; color: #F3E6D2; text-align: center; }
.mn__drop img { display: block; width: 100%; height: calc(120 * var(--m)); object-fit: cover; border-radius: calc(8 * var(--m)); border: 1.5px solid rgba(236, 200, 146, .85); box-sizing: border-box; transition: filter .25s; }
.mn__drop a:hover img { filter: brightness(1.12); translate: 0 calc(-3 * var(--m)); box-shadow: 0 0 calc(14 * var(--m)) rgba(250, 207, 113, .55); }
.mn__drop img { transition: filter .25s, translate .3s, box-shadow .3s; }
.mn__drop a { opacity: 0; translate: 0 calc(10 * var(--m)); transition: opacity .35s, translate .45s cubic-bezier(.2, .7, .2, 1); } /* mở bảng: 4 ô hiện lần lượt */
.mn__has:is(:hover, :focus-within) .mn__drop a { opacity: 1; translate: none; }
.mn__has:is(:hover, :focus-within) .mn__drop a:nth-child(2) { transition-delay: .05s; } .mn__has:is(:hover, :focus-within) .mn__drop a:nth-child(3) { transition-delay: .1s; } .mn__has:is(:hover, :focus-within) .mn__drop a:nth-child(4) { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .mn__drop a { opacity: 1; translate: none; } }
.mn__burger, .mn__foot { display: none; }

/* ===== Chung 3 chương ===== */
:is(.st, .lib, .news) { --ink: #F3E2CC; --muted: #CDB596; --line: rgba(233, 196, 138, .35); position: relative; min-height: 100vh; overflow: hidden; box-sizing: border-box;
  padding: clamp(84px, 11vh, 120px) clamp(20px, 6vw, 112px) clamp(28px, 5vh, 56px); color: var(--ink); font: 400 16px / 1.65 "Be Vietnam Pro", sans-serif; background: #071a2e; }
:is(.st, .lib, .news) *, :is(.st, .lib, .news) *::before, :is(.st, .lib, .news) *::after { box-sizing: border-box; }
:is(.st__kicker, .lib__kicker, .news__kicker) { display: flex; align-items: center; gap: 18px; margin: 0; font: 500 14px / 1 "Lora", serif; letter-spacing: .32em; text-transform: uppercase; color: #E9C9A6; }
:is(.st__kicker, .lib__kicker, .news__kicker)::after { content: ""; width: 64px; border-top: 1px solid currentColor; opacity: .7; }
:is(.st__title, .lib__title, .news__title) { margin: 14px 0 18px; font: italic 500 clamp(40px, 4.4vw, 68px) / 1.08 "Lora", serif;
  background: linear-gradient(#FBE3C8, #E2B28A 60%, #B98262); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 10, 25, .5)); }
:is(.st, .lib, .news) button { font: inherit; color: inherit; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border: 1px solid rgba(233, 196, 138, .7); border-radius: 99px; background: rgba(6, 22, 40, .5);
  font: 500 14px / 1 "Be Vietnam Pro", sans-serif; color: #F3E2CC; text-decoration: none; cursor: pointer; transition: background .25s; }
.pill:is(:hover, :focus-visible, [aria-pressed="true"]) { background: rgba(226, 185, 121, .22); }
.pill[aria-pressed="true"] { background: linear-gradient(#F8E1A6, #E9B866); color: #071c33; border-color: transparent; }

/* ===== Câu chuyện dự án (.st) — dựng TRÙNG mockup design/mockups/nav/story-<1|2|3>.jpg (bảng: design/mockups/nav/story-inventory.md).
   Hai thang: --u = min (khung an toàn 1672×941 cho chữ / thẻ / nút), --s = max (= thang của ảnh nền cover: huy chương + đường vàng kiểu 3 bám đúng địa hình).
   Nền = nền mockup đã gỡ giao diện (tmp/st_plates.py). Toạ độ viết theo pixel mockup: calc(50% + (x - 836) * u) = điểm x của mockup. ===== */
.st { --u: min(100vw / 1672, 100vh / 941); --s: max(100vw / 1672, 100vh / 941); height: 100vh; min-height: 0; padding: 0; background: #0b1f36; font-family: "Lora V", serif; } /* «Lora V» = Lora có đậm thật 400–700 (fonts-lora.css) */
.st::before, .st::after { content: ""; position: absolute; left: 0; right: 0; z-index: 5; height: 5vh; pointer-events: none; } /* dải nối chương trên (kem bản đồ ch01) / dưới (hồng đào ch02) */
.st::before { top: 0; background: linear-gradient(#F8E7CE, rgba(248, 231, 206, 0)); }
.st::after { bottom: 0; background: linear-gradient(rgba(246, 220, 203, 0), #F6DCCB); }
.st__plate { position: absolute; inset: 0; background: center / cover no-repeat; }
.st__geo { display: none; position: absolute; left: 50%; top: 50%; width: calc(1672 * var(--s)); height: calc(941 * var(--s)); translate: -50% -50%; z-index: 1; pointer-events: none; }
.st__stage { position: absolute; left: 50%; top: 50%; width: calc(1672 * var(--u)); height: calc(941 * var(--u)); translate: -50% -50%; z-index: 2; pointer-events: none; }
.st__stage > * { pointer-events: auto; }
.st__stage > :is(.st__360, .st__top, .st__pager, .st__thumbs), .st__panel > .st__dots { display: none; }
.st__kicker { display: flex; align-items: center; gap: calc(20 * var(--u)); margin: 0; font: 500 calc(16 * var(--u)) / 1 "Lora V", serif; letter-spacing: .36em; text-transform: uppercase; color: #E6D3B8; }
.st__kicker::after { content: ""; width: calc(52 * var(--u)); border-top: 1px solid currentColor; opacity: .8; }
.st__title { margin: 0; font: 500 calc(66 * var(--u)) / 1.1 "Lora V", serif; letter-spacing: -.01em; color: #F6E6CF; background: none; filter: none; -webkit-text-fill-color: currentColor; white-space: nowrap; }
.st__lead p, .st__more p { margin: 0; color: #F1E6D6; }
.st__sign { display: flex; align-items: center; gap: calc(22 * var(--u)); margin: 0; font: 500 calc(15 * var(--u)) / 1 "Lora V", serif; letter-spacing: .62em; text-transform: uppercase; color: #E6D3B8; }
.st__sign::before { content: ""; width: calc(52 * var(--u)); border-top: 1px solid currentColor; opacity: .8; }
.st__more h3 { margin: 0; font: 600 calc(22 * var(--u)) / 1.2 "Lora V", serif; letter-spacing: .03em; text-transform: uppercase; color: #E9C27E; }
.st__360 { position: absolute; left: calc(43 * var(--u)); top: calc(33 * var(--u)); align-items: center; gap: calc(12 * var(--u)); height: calc(47 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(8 * var(--u));
  border: 1.5px solid rgba(236, 200, 146, .85); border-radius: 99px; background: rgba(6, 22, 40, .35); font: 500 calc(20 * var(--u)) / 1 "Lora V", serif; color: #F6E6CF; text-decoration: none; }
.st__360 b { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: radial-gradient(#F9E3A8, #D9A75A); font: 600 calc(10 * var(--u)) / 1 "Lora V", serif; color: #13253A; }
.st__xem { display: none; } /* «Xem thêm»: chỉ điện thoại */
.st__slides { margin: 0; padding: 0; list-style: none; }
.st__slides li { position: relative; overflow: hidden; cursor: pointer; }
.st__slides figure { margin: 0; width: 100%; height: 100%; }
.st__slides img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st__dots { display: flex; align-items: center; gap: calc(9 * var(--u)); }
.st__dots i { display: block; width: calc(62 * var(--u)); height: 2px; background: rgba(233, 214, 186, .45); transition: background .4s; }
.st__dots i.is-on { background: #F0C878; height: 3px; }
:is(.st__prev, .st__next) { flex: none; display: grid; place-items: center; padding: 0; border: 1.5px solid rgba(236, 200, 146, .85); border-radius: 50%; background: rgba(6, 22, 40, .55); cursor: pointer; }
:is(.st__prev, .st__next)::before { content: ""; width: 28%; height: 28%; border: solid #F6E6CF; border-width: 0 0 2px 2px; rotate: 45deg; translate: 18% 0; }
.st__next::before { rotate: -135deg; translate: -18% 0; }
.st__slides .is-wait figure::before { content: ""; position: absolute; left: 50%; translate: -50% 0; top: calc(83 * var(--u)); width: calc(44 * var(--u)); height: calc(38 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 38' fill='none' stroke='%23CDBDA6' stroke-width='2'%3E%3Crect x='1' y='1' width='42' height='36' rx='4'/%3E%3Cpath d='M5 31l11-12 8 8 5-5 10 9' stroke-linejoin='round'/%3E%3Ccircle cx='31' cy='11' r='3.5' fill='%23CDBDA6' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; } /* biểu tượng ảnh «chờ ảnh» */

/* kiểu 1 · Thư ngỏ + băng phim (story-1.jpg) */
[data-st="1"] .st__plate { background-image: url(assets/st/plate-s1.jpg); }
[data-st="1"] .st__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 23, 44, .9), rgba(9, 23, 44, .72) 26%, rgba(9, 23, 44, 0) 50%); } /* mockup: nửa trái tối navy dưới chữ */
[data-st="1"] .st__stage > .st__360 { display: flex; }
[data-st="1"] .st__stage::before { content: ""; position: absolute; left: calc((1672 * var(--u) - 100vw) / 2); width: 100vw; top: calc(628 * var(--u)); border-top: 1.5px solid #E8C27E;
  -webkit-mask: linear-gradient(90deg, #000 70%, transparent 92%); mask: linear-gradient(90deg, #000 70%, transparent 92%); box-shadow: 0 0 10px rgba(250, 207, 113, .6); } /* vạch vàng chia đôi màn */
[data-st="1"] .st__panel { display: contents; }
[data-st="1"] .st__text { position: absolute; left: calc(42 * var(--u)); top: calc(110 * var(--u)); width: calc(490 * var(--u)); }
[data-st="1"] .st__title { margin: calc(20 * var(--u)) 0 calc(22 * var(--u)); }
[data-st="1"] .st__lead { line-height: calc(25 * var(--u)); }
[data-st="1"] .st__lead p { display: inline; font: 300 calc(17 * var(--u)) / calc(25 * var(--u)) "Be Vietnam Pro", sans-serif; }
[data-st="1"] .st__lead p + p::before { content: " "; }
[data-st="1"] .st__sign { margin-top: calc(28 * var(--u)); }
[data-st="1"] .st__more { position: absolute; left: calc(44 * var(--u)); top: calc(682 * var(--u)); width: calc(992 * var(--u)); }
[data-st="1"] .st__more h3 { font-size: calc(44.5 * var(--u)); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; background: linear-gradient(#F8DFA6, #D9A35A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-st="1"] .st__more p { margin-top: calc(26 * var(--u)); font: 300 calc(17 * var(--u)) / calc(25 * var(--u)) "Be Vietnam Pro", sans-serif; text-align: justify; }
[data-st="1"] .st__slides { position: absolute; z-index: 2; left: calc(50% + (556 - 836) * var(--u)); top: calc(50% + (185 - 470.5) * var(--u)); width: calc(1013 * var(--u)); height: calc(343 * var(--u));
  display: flex; align-items: center; gap: calc(8.3 * var(--u)); }
[data-st="1"] .st__slides li { flex: none; width: calc(128 * var(--u)); height: calc(305 * var(--u)); border: 1.5px solid rgba(236, 200, 146, .9); border-radius: calc(10 * var(--u)); background: #0b2038;
  transition: width .7s cubic-bezier(.2, .7, .2, 1), height .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s; }
[data-st="1"] .st__slides li.is-on { width: calc(182 * var(--u)); height: calc(343 * var(--u)); border: 3px solid #F4D290; border-radius: calc(14 * var(--u)); box-shadow: 0 0 calc(24 * var(--u)) rgba(250, 207, 113, .65); }
[data-st="1"] .st__slides li.is-wait { width: calc(141 * var(--u)); background: rgba(8, 24, 44, .78); }
[data-st="1"] .st__slides figcaption { position: absolute; left: 0; right: 0; bottom: 0; height: calc(38 * var(--u)); display: grid; place-items: center; background: rgba(10, 26, 46, .88);
  font: 500 calc(15 * var(--u)) / 1 "Lora V", serif; color: #F6E6CF; white-space: nowrap; }
[data-st="1"] .st__slides li.is-on figcaption { height: calc(52 * var(--u)); font-size: calc(20 * var(--u)); }
[data-st="1"] .st__slides .is-wait figure { position: absolute; inset: calc(10 * var(--u)); width: auto; height: auto; border: 1px dashed rgba(233, 196, 138, .45); border-radius: calc(8 * var(--u)); }
[data-st="1"] .st__slides .is-wait > figcaption { display: none; }
[data-st="1"] .st__slides .is-wait figure::after { content: "Sắp có ảnh"; position: absolute; left: 0; right: 0; top: calc(150 * var(--u)); text-align: center; font: 400 calc(16 * var(--u)) / 1 "Lora V", serif; color: #CDBDA6; }
[data-st="1"] .st__stage > .st__pager { display: flex; position: absolute; left: calc(873 * var(--u)); top: calc(554 * var(--u)); width: calc(294 * var(--u)); align-items: center; justify-content: space-between; }
[data-st="1"] .st__pager :is(.st__prev, .st__next) { width: calc(45 * var(--u)); height: calc(45 * var(--u)); }
[data-st="1"] .st__pager .st__dots { gap: calc(7 * var(--u)); }
[data-st="1"] .st__pager .st__dots i { width: calc(19 * var(--u)); height: calc(5 * var(--u)); border-radius: 99px; background: rgba(205, 205, 210, .45); }
[data-st="1"] .st__pager .st__dots i.is-on { width: calc(36 * var(--u)); background: linear-gradient(90deg, #F8DFA6, #E2AE5E); }

/* kiểu 2 · Toàn cảnh slide lớn (story-2.jpg) — slide đầu = nền mockup, các slide sau = ảnh thật từng danh thắng */
[data-st="2"] .st__slides { position: absolute; inset: 0; z-index: 0; }
[data-st="2"] .st__slides li { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
[data-st="2"] .st__slides li.is-on { opacity: 1; }
[data-st="2"] .st__slides li img { object-position: 50% 50%; transform: scale(1.06); transition: transform 9s linear; }
[data-st="2"] .st__slides li.is-on img { transform: scale(1); }
[data-st="2"] .st__slides figcaption { display: none; }
[data-st="2"] .st__slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 68%, rgba(4, 14, 26, .78)); }
[data-st="2"] .st__panel { position: absolute; left: 0; top: 0; width: calc(670 * var(--u)); height: calc(700 * var(--u)); padding: calc(85 * var(--u)) 0 0 calc(45 * var(--u)); }
[data-st="2"] .st__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 24, 44, .92), rgba(12, 30, 54, .84));
  clip-path: polygon(0 0, 78.8% 0, 81.8% 6%, 84.5% 13%, 87.4% 21%, 90.1% 29.7%, 93% 38.5%, 95.8% 47.8%, 97.6% 56%, 98.8% 65.2%, 98.6% 73%, 97.6% 80%, 95.9% 87%, 93.7% 93%, 90.4% 100%, 0 100%); }
[data-st="2"] .st__panel::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 100%; width: calc((100vw - 1672 * var(--u)) / 2 + 2px); background: rgba(9, 24, 44, .92); } /* màn rộng hơn 16:9: khung kéo tới mép trái */
[data-st="2"] .st__title { margin: calc(20 * var(--u)) 0 calc(26 * var(--u)) calc(-5 * var(--u)); font-size: calc(75.5 * var(--u)); }
[data-st="2"] .st__lead { width: calc(548 * var(--u)); }
[data-st="2"] .st__lead p { font-size: calc(20.3 * var(--u)); line-height: calc(26.3 * var(--u)); }
[data-st="2"] .st__lead p + p, [data-st="2"] .st__sign, [data-st="2"] .st__rest { display: none; } /* mockup kiểu 2: đoạn 2 dừng ở «…miền duyên hải.» */
[data-st="2"] .st__more { width: calc(592 * var(--u)); margin-top: calc(28 * var(--u)); }
[data-st="2"] .st__more h3 { margin-bottom: calc(16 * var(--u)); font-size: calc(24.3 * var(--u)); }
[data-st="2"] .st__more p { font-size: calc(20 * var(--u)); line-height: calc(27.2 * var(--u)); }
[data-st="2"] .st__panel > .st__dots { display: flex; position: absolute; left: calc(48 * var(--u)); top: calc(624 * var(--u)); }
[data-st="2"] .st__panel > .st__dots i.is-on { width: calc(55 * var(--u)); }
[data-st="2"] .st__stage > .st__thumbs { display: flex; position: absolute; left: calc(35 * var(--u)); top: calc(680 * var(--u)); width: calc(1601 * var(--u)); height: calc(217 * var(--u)); gap: calc(15 * var(--u)); }
[data-st="2"] .st__thumbs button { flex: 1; display: flex; flex-direction: column; padding: calc(3 * var(--u)); border: 1.5px solid rgba(236, 200, 146, .6); border-radius: calc(12 * var(--u)); background: rgba(14, 30, 52, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: border-color .3s, box-shadow .3s; }
[data-st="2"] .st__thumbs button[aria-pressed="true"] { border: 3px solid #F4D290; padding: calc(1.5 * var(--u)); box-shadow: 0 0 calc(22 * var(--u)) rgba(250, 207, 113, .7); }
[data-st="2"] .st__thumbs img { display: block; width: 100%; height: calc(168 * var(--u)); object-fit: cover; border-radius: calc(9 * var(--u)) calc(9 * var(--u)) 0 0;
  clip-path: inset(0 round calc(9 * var(--u)) calc(9 * var(--u)) 0 0); transition: transform .8s cubic-bezier(.2, .7, .2, 1), clip-path .8s cubic-bezier(.2, .7, .2, 1); }
/* Ken 28/10: ảnh phóng 1,07 khi rê tràn khung + đè tên → cắt ngược 3,27% (= .07/1,07/2, đo trong hệ toạ độ trước scale) để ảnh phóng mà khung đứng yên */
[data-st="2"] .st__thumbs button:not(.is-wait):hover img { clip-path: inset(3.27% round calc(8.4 * var(--u)) calc(8.4 * var(--u)) 0 0); }
[data-st="2"] .st__thumbs span { flex: 1; display: grid; place-items: center; font: 400 calc(21 * var(--u)) / 1 "Lora V", serif; color: #F6E6CF; white-space: nowrap; }
[data-st="2"] .st__thumbs .is-wait { position: relative; }
[data-st="2"] .st__thumbs .is-wait::before { content: "Sắp có ảnh"; height: calc(168 * var(--u)); display: grid; place-items: end center; padding-bottom: calc(52 * var(--u)); border-radius: calc(9 * var(--u)) calc(9 * var(--u)) 0 0;
  background: rgba(150, 160, 170, .14); font: 400 calc(16 * var(--u)) / 1 "Lora V", serif; color: #E6DED2; }
[data-st="2"] .st__thumbs .is-wait::after { content: ""; position: absolute; left: 50%; top: calc(58 * var(--u)); translate: -50% 0; width: calc(60 * var(--u)); height: calc(30 * var(--u)); background: rgba(225, 220, 212, .55);
  clip-path: polygon(0 100%, 38% 15%, 52% 45%, 66% 0, 100% 100%); } /* núi nhỏ «chờ ảnh» */

/* kiểu 3 · Bản đồ hành trình (story-3.jpg) */
[data-st="3"] .st__plate { background-image: url(assets/st/plate-s3.jpg); }
[data-st="3"] .st__geo { display: block; }
[data-st="3"] .st__stage > :is(.st__360, .st__top) { display: flex; }
.st__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st__map path { fill: none; stroke: #F5D48E; stroke-width: 2; filter: drop-shadow(0 0 3px rgba(250, 207, 113, .9)); }
.st__map path.is-on { stroke-width: 3; }
.st__map circle { fill: #FFE7A8; filter: drop-shadow(0 0 4px rgba(255, 214, 120, 1)); }
.st__map .st__hub { fill: #FFF3D2; stroke: #F0B860; stroke-width: 4; filter: drop-shadow(0 0 10px rgba(255, 200, 90, 1)); }
.st__logo { position: absolute; left: calc(1183 * var(--s)); top: calc(437 * var(--s)); width: calc(150 * var(--s)); filter: drop-shadow(0 1px 3px rgba(0, 10, 25, .6)); }
[data-st="3"] .st__top { position: absolute; left: calc(628 * var(--u)); top: calc(36 * var(--u)); margin: 0; font: 500 calc(40.5 * var(--u)) / 1.1 "Lora V", serif; text-transform: uppercase; color: #13253A; white-space: nowrap; }
[data-st="3"] .st__panel { position: absolute; left: calc(20 * var(--u)); top: calc(100 * var(--u)); width: calc(520 * var(--u)); height: calc(756 * var(--u)); padding: calc(38 * var(--u)) calc(36 * var(--u)) 0;
  border: 1px solid rgba(233, 196, 138, .5); border-radius: calc(14 * var(--u)) calc(34 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(100deg, rgba(10, 26, 48, .9), rgba(14, 32, 56, .78)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-st="3"] .st__kicker { font-size: calc(14 * var(--u)); }
[data-st="3"] .st__title { margin: calc(10 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(56 * var(--u)); }
[data-st="3"] .st__lead p, [data-st="3"] .st__more p { font-size: calc(17.4 * var(--u)); line-height: calc(23.1 * var(--u)); }
[data-st="3"] .st__lead p + p { margin-top: calc(18 * var(--u)); }
[data-st="3"] .st__sign { display: none; }
[data-st="3"] .st__more { margin-top: calc(21 * var(--u)); }
[data-st="3"] .st__more h3 { margin-bottom: calc(12 * var(--u)); font-size: calc(17.5 * var(--u)); }
[data-st="3"] .st__slides li { position: absolute; z-index: 2; left: calc(50% + (var(--x) - 836) * var(--s)); top: calc(50% + (var(--y) - 470.5) * var(--s)); width: calc(146 * var(--s)); height: calc(146 * var(--s));
  translate: -50% -50%; overflow: visible; transition: scale .5s cubic-bezier(.2, .7, .2, 1); }
[data-st="3"] .st__slides li:hover { scale: 1.06; }
[data-st="3"] .st__slides figure { border-radius: 50%; overflow: hidden; border: 3px solid #F2D08E; box-shadow: 0 0 calc(14 * var(--s)) rgba(250, 207, 113, .55), 0 8px 22px rgba(0, 10, 25, .45); }
[data-st="3"] .st__slides figure { overflow: visible; } [data-st="3"] .st__slides img { border-radius: 50%; } /* nhãn nằm ngoài hình tròn → không cắt figure, bo ảnh */
[data-st="3"] .st__slides figcaption { position: absolute; left: 50%; top: calc(100% - 24 * var(--s)); translate: -50% 0; padding: calc(5 * var(--s)) calc(16 * var(--s)); border: 1.5px solid rgba(236, 200, 146, .8);
  border-radius: 99px; background: rgba(8, 22, 42, .9); font: 400 calc(19 * var(--s)) / 1.15 "Lora V", serif; color: #F6E6CF; white-space: nowrap; }
[data-st="3"] .st__slides .is-wait figure { position: relative; background: rgba(14, 30, 52, .78); border-radius: 50%; }
[data-st="3"] .st__slides .is-wait figure::before { top: calc(42 * var(--s)); width: calc(40 * var(--s)); height: calc(34 * var(--s)); }
[data-st="3"] .st__slides .is-wait figure::after { content: "Sắp có ảnh"; position: absolute; left: 0; right: 0; top: calc(92 * var(--s)); text-align: center; font: 400 calc(14 * var(--s)) / 1 "Lora V", serif; color: #CDBDA6; }

/* Hiệu ứng (Ken 28/10: "thêm UIX và hiệu ứng cho mượt mà") — chỉ khi tới chương (1 lần) / khi tương tác; chỉ transform · opacity · stroke (không theo cuộn: memory motion-interaction-only).
   Vạch tiến độ tự chạy 5 s = đồng hồ chuyển slide (sections.js nghe animationend); .is-hold (rê chuột / khuất màn) → dừng. */
.st__dots i { position: relative; overflow: hidden; }
[data-st="1"] .st__pager .st__dots i.is-on, [data-st="2"] .st__panel > .st__dots i.is-on { background: linear-gradient(90deg, #F8DFA6, #E2AE5E) 0 0 / 0 100% no-repeat, rgba(233, 214, 186, .45); animation: st-run 5s linear forwards; }
[data-st="1"] .st__pager .st__dots i.is-on { background-color: rgba(205, 205, 210, .45); }
.st.is-hold .st__dots i.is-on { animation-play-state: paused; }
@keyframes st-run { to { background-size: 100% 100%; } }
.st--anim :is(.st__kicker, .st__title, .st__lead, .st__sign, .st__more, .st__360, .st__top, .st__dots, .st__pager) { transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.st--anim:not(.is-in) :is(.st__kicker, .st__title, .st__lead, .st__sign, .st__more, .st__360, .st__top, .st__dots, .st__pager) { opacity: 0; translate: 0 calc(22 * var(--u)); }
.st__title { --d: .1s; } .st__lead { --d: .22s; } .st__sign { --d: .34s; } .st__more { --d: .4s; } .st__pager, .st__dots { --d: .55s; } .st__top { --d: .3s; }
.st--anim:not(.is-in) .st__kicker::after { scale: 0 1; } .st__kicker::after { transform-origin: left; transition: scale 1s cubic-bezier(.2, .7, .2, 1) .5s; }
.st--anim .st__slides li { transition-property: width, height, box-shadow, opacity, scale, translate; transition-duration: .7s, .7s, .7s, .8s, .8s, .3s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.st--anim:not(.is-in) :is([data-st="1"] .st__slides li, [data-st="3"] .st__slides li) { opacity: 0; scale: .86; }
.st--anim.is-in :is([data-st="1"] .st__slides li, [data-st="3"] .st__slides li) { transition-delay: 0s, 0s, 0s, calc(.25s + var(--i) * .08s), calc(.25s + var(--i) * .08s), 0s; }
.st--anim .st__thumbs button { transition: border-color .3s, box-shadow .3s, opacity .8s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--i) * .07s), translate .8s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--i) * .07s); }
.st--anim:not(.is-in) .st__thumbs button { opacity: 0; translate: 0 calc(30 * var(--u)); }
.st__map path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6, .05, .25, 1) calc(.6s + var(--i) * .12s), stroke-width .4s; }
.st--anim:not(.is-in) .st__map path { stroke-dashoffset: 1; }
.st__map g { transition: opacity .6s 1.9s; } .st--anim:not(.is-in) .st__map g, .st--anim:not(.is-in) .st__logo { opacity: 0; }
.st__logo { transition: opacity 1s 1.2s; }
.st__map .st__hub { transform-box: fill-box; transform-origin: center; animation: st-hub 2.6s ease-in-out infinite; }
@keyframes st-hub { 50% { scale: 1.35; opacity: .75; } }
/* tương tác: thẻ nhấc + sáng viền, ảnh phóng nhẹ; nút ánh vàng */
.st__slides img, .st__thumbs img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
[data-st="1"] .st__slides li:not(.is-wait):hover { translate: 0 calc(-6 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0, 10, 25, .45), 0 0 calc(16 * var(--u)) rgba(250, 207, 113, .4); }
[data-st="1"] .st__slides li:not(.is-wait):hover img, [data-st="2"] .st__thumbs button:not(.is-wait):hover img, [data-st="3"] .st__slides li:hover img { transform: scale(1.07); }
[data-st="2"] .st__thumbs button:not(.is-wait):hover { translate: 0 calc(-6 * var(--u)); border-color: rgba(244, 210, 144, .95); }
:is(.st__prev, .st__next, .st__360) { transition: background .3s, box-shadow .3s, translate .3s; }
:is(.st__prev, .st__next):hover { background: rgba(226, 185, 121, .35); box-shadow: 0 0 calc(14 * var(--u)) rgba(250, 207, 113, .55); }
.st__360:hover { background: rgba(226, 185, 121, .25); box-shadow: 0 0 calc(16 * var(--u)) rgba(250, 207, 113, .45); translate: 0 -2px; }
[data-st="3"] .st__slides li:hover figure { box-shadow: 0 0 calc(26 * var(--s)) rgba(250, 207, 113, .9), 0 8px 22px rgba(0, 10, 25, .45); }
[data-st="3"] .st__map path.is-on { stroke: #FFE3A3; }
@media (prefers-reduced-motion: reduce) {
  .st--anim:not(.is-in) *, .st--anim:not(.is-in) :is(.st__kicker, .st__title, .st__lead, .st__sign, .st__more, .st__360, .st__top, .st__dots, .st__pager) { opacity: 1 !important; translate: none !important; scale: none !important; }
  .st__map path { stroke-dashoffset: 0 !important; } .st__dots i.is-on { animation: none !important; } .st__map .st__hub { animation: none; }
}

/* ===== Thư viện (.lib) ===== */
.lib__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; z-index: 2; margin-bottom: 22px; }
.lib__head .lib__title { margin-bottom: 0; }
.lib__filters { display: flex; gap: 10px; flex-wrap: wrap; }
.lib__grid { position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; }
.lib__grid li[hidden] { display: none; }
.lib__item { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; overflow: hidden; cursor: pointer; text-decoration: none; color: #FFF4E4; }
.lib__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .7, .2, 1), filter .4s; }
.lib__item:is(:hover, :focus-visible) img { scale: 1.05; filter: brightness(1.08); }
.lib__item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; font: 500 15px / 1.2 "Lora", serif; text-align: left; background: linear-gradient(transparent, rgba(4, 16, 32, .85)); }
.lib__item i { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 99px; background: rgba(6, 22, 40, .7);
  border: 1px solid rgba(233, 196, 138, .7); font: 600 12px / 1 "Be Vietnam Pro", sans-serif; font-style: normal; color: #F6DDB0; }
.lib__nav { display: none; }
.lib__box { max-width: min(1200px, 92vw); max-height: 90vh; padding: 0; border: 1px solid rgba(233, 196, 138, .6); border-radius: 14px; background: #071a2e; color: #F3E2CC; overflow: hidden; }
.lib__box::backdrop { background: rgba(2, 8, 18, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lib__box img { display: block; max-width: 100%; max-height: calc(90vh - 52px); margin: 0 auto; }
.lib__box p { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 12px 18px; font: 500 16px / 1.2 "Lora", serif; }
.lib__box button { border: 0; background: none; color: inherit; font: 400 22px / 1 sans-serif; cursor: pointer; }

/* kiểu 1 · Phòng tranh: tường gallery, khung vàng nhiều cỡ, đèn rọi */
[data-lib="1"] .lib { background: radial-gradient(60% 40% at 50% 0, rgba(255, 210, 140, .12), transparent), linear-gradient(#0e1b2c, #0a1522 70%, #060e18); }
[data-lib="1"] .lib::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; background: linear-gradient(rgba(255, 220, 160, .05), rgba(0, 0, 0, .35)); border-top: 1px solid rgba(233, 196, 138, .18); }
[data-lib="1"] .lib__grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, calc((100vh - 330px) / 2)); grid-auto-flow: dense; gap: 26px 22px; } /* 1 khung lớn 2×2 + 6 khung nhỏ = 10 ô */
[data-lib="1"] .lib__grid li { position: relative; padding: 7px; background: linear-gradient(135deg, #F6DDB0, #A8744A 45%, #E9C48A); box-shadow: 0 16px 30px rgba(0, 0, 0, .5); }
[data-lib="1"] .lib__grid li::before { content: ""; position: absolute; left: 20%; right: 20%; top: -30px; height: 60px; background: radial-gradient(closest-side, rgba(255, 226, 170, .55), transparent); pointer-events: none; }
[data-lib="1"] .lib__grid li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
[data-lib="1"] .lib__grid li:nth-child(n + 8) { display: none; }
[data-lib="1"] .lib__item { border: 2px solid #1a1206; }

/* kiểu 2 · Lưới kính: ô bo góc trên nền biển hoàng hôn */
[data-lib="2"] .lib { background: linear-gradient(rgba(6, 22, 40, .78), rgba(6, 22, 40, .88)), url(assets/b/ft-bg.jpg) center 30% / cover; }
[data-lib="2"] .lib__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, calc((100vh - 320px) / 3)); grid-auto-flow: dense; gap: 12px; } /* 2×2 + 8 ô = 12 */
[data-lib="2"] .lib__grid li { border-radius: 12px; overflow: hidden; border: 1px solid rgba(233, 196, 138, .4); }
[data-lib="2"] .lib__grid li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
[data-lib="2"] .lib__grid li:nth-child(n + 10) { display: none; }

/* kiểu 3 · Băng chuyền vòm: thẻ vòm cuộn ngang, thẻ giữa lớn */
[data-lib="3"] .lib { background: radial-gradient(70% 50% at 50% 100%, rgba(255, 170, 90, .22), transparent 60%), linear-gradient(#0b2442, #071a2e); }
[data-lib="3"] .lib__grid { display: flex; align-items: center; gap: 18px; height: min(56vh, 520px); padding: 0 38%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
[data-lib="3"] .lib__grid::-webkit-scrollbar { display: none; }
[data-lib="3"] .lib__grid li { flex: none; width: clamp(200px, 19vw, 300px); height: 78%; scroll-snap-align: center; border: 2px solid #E9C48A; border-radius: 999px 999px 14px 14px; overflow: hidden;
  opacity: .55; scale: .86; transition: scale .6s cubic-bezier(.2, .7, .2, 1), opacity .6s, height .6s; }
[data-lib="3"] .lib__grid li.is-mid { opacity: 1; scale: 1; height: 100%; box-shadow: 0 0 30px rgba(250, 207, 113, .35); }
[data-lib="3"] .lib__nav { display: flex; justify-content: center; gap: 16px; position: relative; z-index: 2; margin-top: 18px; }
[data-lib="3"] .lib__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #E9C48A; background: rgba(6, 22, 40, .6); color: #F6DDB0; font-size: 18px; cursor: pointer; }

/* ===== Tin tức (.news) ===== */
.news { background: linear-gradient(rgba(6, 22, 40, .82), rgba(6, 22, 40, .92)), url(assets/b/eco-night.webp) center 60% / cover; }
.news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.news__head .news__title { margin-bottom: 0; }
.news__note { margin: 0 0 6px; font: italic 400 14px / 1.3 "Lora", serif; color: var(--muted); }
.news__list { margin: 0; padding: 0; list-style: none; }
.news__card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none; }
.news__card img { display: block; width: 100%; object-fit: cover; }
.news__meta { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font: 500 12px / 1 "Be Vietnam Pro", sans-serif; color: var(--muted); }
.news__tag { padding: 4px 9px; border: 1px solid rgba(233, 196, 138, .7); border-radius: 99px; letter-spacing: .12em; text-transform: uppercase; color: #F6DDB0; }
.news__card h3 { margin: 0; font: 500 clamp(18px, 1.5vw, 23px) / 1.25 "Lora", serif; color: #FFF1DC; }
.news__card p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.news__more { display: inline-flex; margin-top: 10px; font: 500 13px / 1 "Be Vietnam Pro", sans-serif; color: #E9C48A; }

/* kiểu 1 · Tạp chí: bài nổi bật vòm lớn trái + 3 bài nhỏ phải */
[data-news="1"] .news__list { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 48px); height: calc(100vh - 310px); }
[data-news="1"] .news__list li:first-child { grid-row: 1 / -1; }
[data-news="1"] .news__list li:first-child .news__card { padding: 0 0 18px; border: 1px solid rgba(233, 196, 138, .55); border-radius: 999px 999px 18px 18px / 260px 260px 18px 18px; background: rgba(6, 22, 40, .85); }
[data-news="1"] .news__list li:first-child img { flex: 1; min-height: 0; }
[data-news="1"] .news__list li:first-child :is(.news__meta, h3, p, .news__more) { margin-left: 26px; margin-right: 26px; }
[data-news="1"] .news__list li:first-child h3 { font-size: clamp(24px, 2.2vw, 34px); font-style: italic; }
[data-news="1"] .news__list li:not(:first-child) { border-bottom: 1px solid var(--line); }
[data-news="1"] .news__list li:not(:first-child) .news__card { display: grid; grid-template-columns: 34% 1fr; gap: 0 18px; align-content: center; padding: 14px 0; }
[data-news="1"] .news__list li:not(:first-child) img { grid-row: 1 / 4; height: 100%; max-height: 15vh; border-radius: 10px; }
[data-news="1"] .news__list li:not(:first-child) :is(p:not(.news__meta), .news__more) { display: none; }
[data-news="1"] .news__list li:not(:first-child) .news__meta { margin-top: 0; }

/* kiểu 2 · Dòng thời gian: lụa vàng ngang, thẻ treo trên / dưới theo ngày */
[data-news="2"] .news__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; min-height: 58vh; align-items: center; }
[data-news="2"] .news__list::before { content: ""; position: absolute; left: -6vw; right: -6vw; top: 50%; border-top: 2px solid #E9C48A; box-shadow: 0 0 12px rgba(250, 207, 113, .7); }
[data-news="2"] .news__list li { position: relative; align-self: start; }
[data-news="2"] .news__list li:nth-child(even) { align-self: end; }
[data-news="2"] .news__list li::after { content: ""; position: absolute; left: 50%; width: 13px; height: 13px; translate: -50% 0; border-radius: 50%; background: #F6DDB0; box-shadow: 0 0 10px rgba(250, 207, 113, .9); }
[data-news="2"] .news__list li:nth-child(odd)::after { top: calc(100% + 14px); }
[data-news="2"] .news__list li:nth-child(even)::after { bottom: calc(100% + 14px); }
[data-news="2"] .news__card { padding: 10px 10px 14px; border: 1px solid rgba(233, 196, 138, .5); border-radius: 14px; background: rgba(6, 22, 40, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-news="2"] .news__card img { aspect-ratio: 16 / 9; border-radius: 9px; }
[data-news="2"] .news__card h3 { font-style: italic; font-size: clamp(16px, 1.25vw, 19px); }
[data-news="2"] .news__card :is(p:not(.news__meta), .news__more) { display: none; }

/* kiểu 3 · Ba thẻ vòm */
[data-news="3"] .news { display: grid; grid-template-columns: minmax(240px, 24%) 1fr; gap: clamp(24px, 3vw, 56px); align-items: center; }
[data-news="3"] .news__head { flex-direction: column; align-items: flex-start; }
[data-news="3"] .news__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
[data-news="3"] .news__list li:nth-child(4) { display: none; }
[data-news="3"] .news__card { border: 2px solid #E9C48A; border-radius: 999px 999px 18px 18px / 180px 180px 18px 18px; background: linear-gradient(#FBF2E4, #F1E2CB); }
[data-news="3"] .news__card img { height: min(30vh, 280px); }
[data-news="3"] .news__card :is(.news__meta, h3, .news__more) { margin-left: 20px; margin-right: 20px; }
[data-news="3"] .news__card h3 { color: #13253A; }
[data-news="3"] .news__card .news__meta { color: #7A6448; }
[data-news="3"] .news__card .news__tag { color: #8A5E33; border-color: #C9A57A; }
[data-news="3"] .news__card .news__more { margin-bottom: 18px; color: #6E4622; }
[data-news="3"] .news__card p:not(.news__meta) { display: none; }

/* ===== Điện thoại ===== */
@media (max-width: 760px) {
  .mn { height: 52px; padding: 0 14px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-end; pointer-events: none; }
  .mn__logo { display: none; }
  .mn__burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(233, 196, 138, .8); background: rgba(6, 22, 40, .7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #F6DDB0; pointer-events: auto; position: relative; z-index: 2; }
  .mn__burger svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
  .mn__list { position: fixed; left: 0; right: 0; top: 0; display: block; margin: 0; padding: 76px 24px 120px; counter-reset: mn; background: rgba(6, 22, 40, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid #E9C48A; border-radius: 0 0 28px 28px; translate: 0 -105%; transition: translate .5s cubic-bezier(.2, .7, .2, 1); pointer-events: auto; max-height: 100svh; overflow-y: auto; }
  .mn.is-open .mn__list { translate: 0 0; }
  .mn.is-open { translate: none; }
  .mn__list > li { counter-increment: mn; border-bottom: 1px solid rgba(233, 196, 138, .2); }
  .mn__list > li > a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; font: 500 20px / 1.2 "Lora", serif; letter-spacing: 0; text-transform: none; }
  .mn__list > li > a::before { content: counter(mn, decimal-leading-zero); font-size: 12px; color: #E9C48A; }
  .mn__list > li > a::after { display: none; }
  .mn__list .mn__vr { width: auto; padding: 12px 0; border: 0; border-radius: 0; text-align: left; }
  .mn__drop { display: none; }
  .mn__foot { display: flex; gap: 10px; position: fixed; left: 24px; right: 24px; top: 0; translate: 0 calc(-100% - 20px); transition: translate .5s cubic-bezier(.2, .7, .2, 1); pointer-events: auto; }
  .mn.is-open .mn__foot { translate: 0 calc(min(100svh, 640px) - 74px); }
  .mn__foot a { flex: 1; justify-content: center; height: 44px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
  :is(.st, .lib, .news) { padding: 74px 20px 40px; min-height: 0; }
  :is(.st, .lib, .news) :is(.st__title, .lib__title, .news__title) { font-size: 40px; }
  /* Câu chuyện điện thoại — MỘT bố cục cho cả 3 kiểu, TRÙNG mockup design/mockups/nav/story-m.jpg (bảng: story-m-inventory.md). --v = 1px mockup 390.
     Thứ tự mockup (kicker → tiêu đề → thân bài → dải ảnh → chấm → «Một điểm đến») khác thứ tự markup PC → khung PC display: contents + order.
     :root[data-st] .st … (0,4,x) đè các rule kiểu [data-st="n"] … (≤ 0,3,1); cao theo nội dung (bấm «Xem thêm» thì dài ra, không cắt chữ). */
  :root[data-st] .st { --v: calc(100vw / 390); display: flex; flex-direction: column; height: auto; min-height: calc(844 * var(--v)); padding: calc(91 * var(--v)) calc(27 * var(--v)) calc(136 * var(--v)); background: #F2E2CE; }
  :root[data-st] .st::after, :root[data-st] .st .st__plate::after, :root[data-st] .st .st__stage::before, :root[data-st] .st .st__panel::before, :root[data-st] .st .st__panel::after, :root[data-st] .st .st__slides::after { display: none; }
  :root[data-st] .st .st__plate { background: url(assets/st/plate-sm.jpg) 50% 100% / cover no-repeat; }
  :root[data-st] .st .st__geo { display: block; inset: 0; width: auto; height: auto; translate: none; }
  :root[data-st] .st .st__map { display: none; }
  :root[data-st] .st .st__logo { left: calc(25 * var(--v)); top: calc(34 * var(--v)); width: calc(148 * var(--v)); filter: brightness(.82) saturate(1.3); } /* mockup: đồng đậm hơn trên trời sáng */
  :root[data-st] .st :is(.st__stage, .st__panel, .st__text) { display: contents; }
  :root[data-st] .st :is(.st__kicker, .st__title, .st__lead, .st__dots, .st__more) { position: relative; z-index: 2; left: auto; top: auto; } /* trong dòng chảy nhưng phải nằm trên nền (absolute) */
  :root[data-st] .st :is(.st__360, .st__top, .st__sign, .st__pager, .st__thumbs, .st__slides .is-wait) { display: none; }
  :root[data-st] .st .st__kicker { order: 1; gap: calc(9 * var(--v)); margin-top: calc(4 * var(--v)); font: 400 calc(15.5 * var(--v)) / 1 "Lora V", serif; letter-spacing: .14em; color: #7A5634; } /* mockup #8C6A48 → đậm hơn cho đủ tương phản 4,5 trên trời sáng */
  :root[data-st] .st .st__kicker::after { width: calc(75 * var(--v)); opacity: .7; }
  :root[data-st] .st .st__title { order: 2; margin: calc(2 * var(--v)) 0 0; font: 700 calc(37 * var(--v)) / 1.1 "Lora V", serif; letter-spacing: -.02em; color: #17345A; }
  :root[data-st] .st .st__title span { color: #946538; }
  :root[data-st] .st .st__title::after, :root[data-st] .st .st__more h3::after { content: ""; display: block; width: calc(43 * var(--v)); margin-top: calc(4 * var(--v)); border-top: 1px solid #B48A5E; }
  :root[data-st] .st .st__lead { order: 3; width: calc(314 * var(--v)); margin-top: calc(11 * var(--v)); line-height: 0; }
  :root[data-st] .st .st__lead p { display: inline; font: 400 calc(13 * var(--v)) / calc(16.6 * var(--v)) "Lora V", serif; letter-spacing: -.005em; color: #1C2F4D; }
  :root[data-st] .st .st__lead p + p { display: none; }
  :root[data-st] .st .st__lead p + p::before { content: none; }
  :root[data-st] .st .st__xem { display: inline-flex; align-items: center; gap: calc(5 * var(--v)); margin-left: calc(3 * var(--v)); padding: 0 0 1px; border: 0; border-bottom: 1px solid currentColor; background: none;
    font: 500 calc(13 * var(--v)) / calc(16.9 * var(--v)) "Lora V", serif; color: #7A5634; cursor: pointer; }
  :root[data-st] .st .st__xem::after { content: ""; width: calc(5 * var(--v)); height: calc(5 * var(--v)); border: solid currentColor; border-width: 1.5px 1.5px 0 0; rotate: 45deg; }
  :root[data-st] .st.is-open .st__lead p + p { display: block; margin-top: calc(8 * var(--v)); }
  :root[data-st] .st.is-open .st__xem::after { rotate: -45deg; translate: 0 25%; }
  :root[data-st] .st .st__slides { order: 4; position: relative; inset: auto; z-index: 2; display: flex; align-items: center; width: auto; height: calc(218 * var(--v)); margin: calc(18 * var(--v)) calc(-27 * var(--v)) 0;
    padding: 0 calc(46.5 * var(--v)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  :root[data-st] .st .st__slides::-webkit-scrollbar { display: none; }
  :root[data-st] .st .st__slides li { position: relative; left: auto; top: auto; inset: auto; flex: none; width: calc(297 * var(--v)); height: calc(218 * var(--v)); translate: none; opacity: 1; scale: .9; overflow: hidden; scroll-snap-align: center;
    border: 1.5px solid rgba(255, 241, 218, .95); border-radius: calc(14 * var(--v)); box-shadow: 0 calc(6 * var(--v)) calc(16 * var(--v)) rgba(40, 46, 70, .28); background: #d9c3a5; transition: scale .45s cubic-bezier(.2, .7, .2, 1); }
  :root[data-st] .st .st__slides li.is-on { scale: 1; }
  :root[data-st] .st .st__slides figure { border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
  :root[data-st] .st .st__slides img { border-radius: 0; transform: none; }
  :root[data-st] .st .st__slides figcaption { position: absolute; display: flex; align-items: center; gap: calc(8 * var(--v)); left: calc(14 * var(--v)); right: auto; top: auto; bottom: calc(16 * var(--v)); height: auto; translate: none;
    padding: 0 0 calc(5 * var(--v)); border: 0; border-radius: 0; font: 600 calc(16 * var(--v)) / 1 "Lora V", serif; color: #fff; text-shadow: 0 1px 6px rgba(0, 10, 25, .7);
    background: linear-gradient(#fff, #fff) calc(20 * var(--v)) 100% / calc(22 * var(--v)) 1.5px no-repeat; }
  :root[data-st] .st .st__slides figcaption::before { content: ""; width: calc(12 * var(--v)); height: calc(16 * var(--v)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0a6 6 0 0 0-6 6c0 4.5 6 10 6 10s6-5.5 6-10a6 6 0 0 0-6-6zm0 8.2A2.2 2.2 0 1 1 6 3.8a2.2 2.2 0 0 1 0 4.4z' fill='%23F3DDB5'/%3E%3C/svg%3E") center / contain no-repeat; }
  :root[data-st] .st .st__panel > .st__dots { order: 5; display: flex; position: static; justify-content: center; gap: calc(13 * var(--v)); margin-top: calc(9 * var(--v)); height: calc(10 * var(--v)); }
  :root[data-st] .st .st__dots i { width: calc(5 * var(--v)); height: calc(5 * var(--v)); border-radius: 50%; background: #99A2B1; animation: none; }
  :root[data-st] .st .st__dots i.is-on { width: calc(10 * var(--v)); height: calc(10 * var(--v)); background: #D2AE84; box-shadow: inset 0 0 0 1.5px #A97E52; }
  :root[data-st] .st .st__more { order: 6; width: calc(318 * var(--v)); margin: calc(20 * var(--v)) 0 0; padding: 0; border: 0; }
  :root[data-st] .st .st__more h3 { margin: 0; width: calc(275 * var(--v)); font: 700 calc(32 * var(--v)) / calc(31 * var(--v)) "Lora V", serif; letter-spacing: -.01em; text-transform: uppercase; white-space: normal; color: #17345A; background: none; -webkit-text-fill-color: currentColor; }
  :root[data-st] .st .st__more h3 span { display: block; color: #A77B4F; }
  :root[data-st] .st .st__more h3::after { width: calc(37 * var(--v)); margin-top: calc(8 * var(--v)); }
  :root[data-st] .st .st__more p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: calc(12 * var(--v)); font: 400 calc(13 * var(--v)) / calc(16 * var(--v)) "Lora V", serif; letter-spacing: -.005em; color: #1C2F4D; text-align: left; }
  :root[data-st] .st .st__rest { display: inline; }
  :root[data-st] .st.is-open .st__more p { display: block; }
  /* Thư viện: lưới 2 cột (kiểu 3 giữ dải vòm vuốt ngang) */
  .lib__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
  .lib__filters .pill { flex: none; white-space: nowrap; }
  [data-lib="1"] .lib__grid, [data-lib="2"] .lib__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 34vw; gap: 10px; }
  [data-lib="1"] .lib__grid li, [data-lib="2"] .lib__grid li { grid-column: span 1 !important; grid-row: span 1 !important; }
  [data-lib="1"] .lib__grid li:nth-child(1), [data-lib="2"] .lib__grid li:nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
  [data-lib="1"] .lib__grid li { padding: 4px; }
  [data-lib="1"] .lib__grid li::before { display: none; }
  [data-lib="3"] .lib__grid { height: 110vw; padding: 0 18vw; margin: 0 -20px; }
  [data-lib="3"] .lib__grid li { width: 64vw; }
  [data-lib="3"] .lib__nav { display: none; }
  /* Tin tức: bài nổi bật + danh sách hàng (mọi kiểu) */
  [data-news] .news { display: block; }
  [data-news] .news__list { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 0; min-height: 0; }
  [data-news] .news__list::before, [data-news] .news__list li::after { display: none; }
  [data-news] .news__list li { display: block !important; align-self: auto; border-bottom: 1px solid var(--line); }
  [data-news] .news__card { display: grid !important; grid-template-columns: 30% 1fr; gap: 0 14px; align-content: center; padding: 12px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
  [data-news] .news__card img { grid-row: 1 / 4; height: 24vw !important; max-height: none; border-radius: 8px; aspect-ratio: auto; }
  [data-news] .news__card :is(.news__meta, h3, .news__more) { margin: 0 !important; }
  [data-news] .news__card h3 { color: #FFF1DC !important; font-size: 17px !important; font-style: normal; }
  [data-news] .news__card .news__meta { color: var(--muted) !important; margin-bottom: 4px !important; }
  [data-news] .news__card .news__tag { color: #F6DDB0 !important; border-color: rgba(233, 196, 138, .7) !important; }
  [data-news] .news__card :is(p:not(.news__meta), .news__more) { display: none !important; }
  [data-news] .news__list li:first-child .news__card { grid-template-columns: 1fr; }
  [data-news] .news__list li:first-child img { grid-row: auto; height: 52vw !important; margin-bottom: 10px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { [data-st="2"] .st__slides li img { transition: none; transform: none; } }