/* NAWARUCO — giao diện theo bộ HTML demo (tokens, components, site, home, gioi-thieu, gia-nuoc).
   File sinh bằng script từ các CSS của demo: giữ luật của các lớp còn dùng ở site, bỏ luật chỉ dùng cho trang xem thử. Font tự lưu: xem fonts.css. */
/* ===== design-system/tokens.css ===== */
:root { /* ---------- Primary — xanh nước ---------- Cập nhật 2026-09-08: lấy đúng #00649F từ file logo chính thức (design-system/brand/logo-wave.svg). Các bậc còn lại suy ra bằng cách giữ nguyên tông màu và độ tươi, chỉ đổi độ sáng — pha với trắng sẽ ra màu xám. */ --c-primary-900:#003A5C; --c-primary-700:#005080; --c-primary-600:#00649F; /* màu thương hiệu chính */ --c-primary-500:#4494C4; /* số bước lớn .card-service .num — 3.34:1 trên nền trắng (chữ lớn cần 3:1) */ --c-primary-400:#51A5D6; --c-primary-100:#CBE6F6; --c-primary-50:#EFF6FB; /* ---------- Accent — xanh lá (từ logo chính thức: #00AB38) ---------- */ --c-accent-800:#00571D; /* hover của nút accent — xem ghi chú tương phản bên dưới */ --c-accent-700:#007A28; --c-accent-600:#00AB38; --c-accent-300:#7BD599; --c-accent-100:#DEF7E6; /* Bản kênh RGB, dùng khi cần pha độ trong suốt: rgb(var(--c-accent-600-rgb) / .45). Phải khớp với mã hex ngay trên — đổi hex thì đổi cả hai dòng. */ --c-accent-600-rgb:0 171 56; --c-accent-300-rgb:123 213 153; --c-primary-400-rgb:81 165 214; /* ---------- Neutral — trung tính thiên xanh (không dùng xám thuần) ---------- */ --c-neutral-950:#0E1B26; --c-neutral-800:#1E2E3B; --c-neutral-600:#51697A; /* viền ô nhập liệu — chốt theo yêu cầu khách: đậm hơn nền trắng của khung nội dung chính 15% (không theo ngưỡng WCAG nữa). #CFDBE2 giữ đúng tông xanh của thang --c-neutral-* (không dùng xám thuần), ở độ sáng tương ứng 85% — tương phản trên trắng chỉ 1.41:1, dưới mức 3:1 mà WCAG 1.4.11 yêu cầu cho viền thành phần giao diện. Đã báo lại 2026-09-09 trước khi áp dụng; xem GAPS.md mục A7 để biết đây là quyết định có chủ đích, không phải bỏ sót. */ --c-neutral-500:#CFDBE2; --c-neutral-400:#8FA3B0; --c-neutral-300:#CBD8E0; --c-neutral-200:#DFE8ED; --c-neutral-100:#F0F5F8; --c-neutral-0:#FFFFFF; /* ---------- Ngữ nghĩa (trạng thái vận hành cấp nước) ---------- */ --c-success:#007A28;      /* cấp nước bình thường — dùng bậc 700 để chữ trên nền nhạt đạt 4.5:1 */ --c-success-bg:#DEF7E6; --c-warning:#975D0C;      /* cảnh báo áp lực yếu — đủ 4.5:1 trên nền --c-warning-bg */ --c-warning-bg:#FBF0DD; --c-danger:#B23A2E;       /* sự cố / tạm ngừng cấp nước */ --c-danger-bg:#FBE7E4; --c-info:#00649F;         /* thông báo chung */ --c-info-bg:#EFF6FB; /* ---------- Vai trò bề mặt (map sang theme sáng/tối bên dưới) ---------- */ --bg-page:var(--c-neutral-100); --bg-surface:var(--c-neutral-0); --bg-surface-raised:var(--c-neutral-0); --bg-sunken:var(--c-neutral-100); --bg-tint:var(--c-primary-50); --border-default:var(--c-neutral-200);  /* viền thẻ/bảng — đồ hoạ trang trí, không thuộc diện 1.4.11 */ --border-strong:var(--c-neutral-300); /* Viền của thành phần nhập liệu là thành phần giao diện, WCAG 1.4.11 buộc ≥ 3:1. --border-strong (#CBD8E0) chỉ đạt 1.45:1 nên KHÔNG dùng cho input/select/textarea. */ --border-input:var(--c-neutral-500); --text-primary:var(--c-neutral-950); --text-secondary:var(--c-neutral-600); --text-on-brand:#FFFFFF; --text-link:var(--c-primary-700); --brand:var(--c-primary-600); --brand-strong:var(--c-primary-900); --shadow-color:220 40% 20%; /* ---------- Typography ---------- */ /* Display: Montserrat — chữ lớn, tiêu đề, wordmark. Hình học, chắc chắn, có bộ dấu tiếng Việt đầy đủ. Chỉ nạp 600/700/800. */ --font-display:'Montserrat', 'Segoe UI', system-ui, sans-serif; /* Body: Inter — toàn bộ nội dung, form, bảng biểu */ --font-body:'Inter', 'Segoe UI', system-ui, sans-serif; /* Số liệu: cũng là Inter. Canh cột bằng font-variant-numeric:tabular-nums khai báo kèm ở chỗ dùng, không đổi sang font monospace. */ --font-numeric:var(--font-body); /* Chỉ còn dành cho <code> trong bài viết — không nạp webfont cho việc này */ --font-mono:'SFMono-Regular', Consolas, 'Liberation Mono', monospace; /* Type scale */ /* --fs-base = 1rem (16px), không phải 15px như bản cũ: quy tắc UX chung "tối thiểu 16px cho chữ nội dung trên di động" — 15px không đạt. --fs-sm (13px) không đổi: nó chỉ dùng cho nhãn/nút/breadcrumb/bảng — chữ ngắn, không phải văn bản đọc dài — nên không thuộc diện quy tắc này. */ --fs-xs:.75rem;   --fs-sm:.8125rem; --fs-base:1rem; --fs-md:1.0625rem; --fs-lg:1.25rem;  --fs-xl:1.625rem; --fs-2xl:2.0625rem; --fs-3xl:2.75rem; /* ---------- Khoảng cách giữa các box thông tin và các module ---------- Chốt 2026-09-07: 20px. Không có bậc 20px trong thang --sp-* (16 → 24), nên đây là token theo VAI TRÒ, dùng cho mọi gap giữa thẻ/box/module. Sửa một chỗ này là đổi toàn site — đừng viết 20px rải rác. */ --gap-box:1.25rem; /* ---------- Bề rộng nội dung chính ---------- Chốt: 1280px. .container và phần đệm ngang của topbar/thanh chính (site.css) đều phải đọc token này — sửa một chỗ là đổi toàn site, không viết lại số 1280 ở nơi khác. */ --container-max:80rem; /* ---------- Spacing — nhịp 8px ---------- */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:2.75rem; --sp-8:3.5rem; --sp-9:4.5rem; /* Chiều cao thanh .bottom-nav (mobile ≤760px, xem components.css) -- hằng số cố định (không đo bằng JS như --header-h) vì component này không đổi chiều cao theo nội dung trang. Dùng chung ở cả .to-top (nâng nút lên khỏi thanh) và body (chừa khoảng trống cuối trang) nên đặt thành token thay vì lặp số 64px ở nhiều chỗ. Yêu cầu khách 2026-09-11 (bottom nav 5 mục: Trang chủ/Dịch vụ/Thanh toán/CSKH/Liên hệ). */ --bottomnav-h:64px; /* ---------- Radius / Shadow / Easing ---------- */ --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px; --shadow-sm:0 1px 2px hsl(var(--shadow-color)/.08); --shadow-md:0 6px 20px -6px hsl(var(--shadow-color)/.18); --shadow-lg:0 16px 40px -12px hsl(var(--shadow-color)/.28); --ease:cubic-bezier(.22,.61,.36,1); }
:root { color-scheme: light; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg-page); color:var(--text-primary); font-family:var(--font-body); font-size:var(--fs-base); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4 { font-family:var(--font-display); color:var(--text-primary); margin:0; text-wrap:pretty; font-weight:700; }
p { margin:0; }
a { color:var(--text-link); }
code, .mono { font-family:var(--font-mono); }
::selection { background:var(--c-primary-100); color:var(--c-primary-900); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
img { max-width:100%; display:block; }
.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--sp-6); }
@media (max-width:640px) {
  .container { padding:0 var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* ===== design-system/components.css ===== */
.btn, .dtf-form-actions button { font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm); border-radius:var(--radius-md); min-height:40px; padding:8px 20px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s var(--ease), box-shadow .12s var(--ease); text-decoration:none; line-height:1.2; }
.btn:active, .dtf-form-actions button:active { transform:translateY(1px); }
.btn-primary, .dtf-form-actions button { background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover, .dtf-form-actions button:hover { background:var(--c-primary-700); box-shadow:var(--shadow-md); }
.btn-accent { background:var(--c-accent-700); color:#fff; }
.btn-accent:hover { background:var(--c-accent-800); }
.btn-secondary { background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-strong); }
.btn-secondary:hover { border-color:var(--brand); color:var(--brand); }
.btn-ghost { background:transparent; color:var(--brand); border-color:transparent; padding:10px 12px; }
.btn-ghost:hover { background:var(--bg-tint); }
.btn-sm { min-height:32px; padding:6px 14px; font-size:var(--fs-xs); }
.btn-lg { min-height:48px; padding:12px 26px; font-size:var(--fs-md); border-radius:var(--radius-md); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.field { display:flex; flex-direction:column; gap:6px; max-width:340px; }
.field label, .dtf-field label, .dtf-field legend { font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); }
.field .hint, .dtf-field-help { font-size:var(--fs-xs); color:var(--text-secondary); }
.input, .select, .dtf-field input[type=text], .dtf-field input[type=email], .dtf-field input[type=tel], .dtf-field input[type=date], .dtf-field select { min-height:40px; }
.input, .select, .textarea, .dtf-field input[type=text], .dtf-field input[type=email], .dtf-field input[type=tel], .dtf-field input[type=date], .dtf-field select, .dtf-field textarea { font-family:var(--font-body); font-size:var(--fs-base); color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--border-input); border-radius:var(--radius-sm); padding:10px 12px; width:100%; transition:border-color .12s, box-shadow .12s; }
.input:focus, .select:focus, .textarea:focus, .dtf-field input[type=text]:focus, .dtf-field input[type=email]:focus, .dtf-field input[type=tel]:focus, .dtf-field input[type=date]:focus, .dtf-field select:focus, .dtf-field textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--c-primary-100); outline:none; }
.select, .dtf-field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2351697A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.textarea, .dtf-field textarea { resize:vertical; min-height:88px; }
.badge { display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); }
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-success { background:var(--c-success-bg); color:var(--c-success); }
.badge-neutral { background:var(--bg-sunken); color:var(--text-secondary); border:1px solid var(--border-default); }
.alert { display:flex; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); border-radius:var(--radius-md); border:1px solid; align-items:flex-start; }
.alert svg, .alert span.icon { flex:none; width:20px; height:20px; margin-top:2px; }
.alert strong { display:block; margin-bottom:2px; font-size:var(--fs-sm); }
.alert p { font-size:var(--fs-base); color:var(--text-secondary); margin:0; }
.alert-warning { background:var(--c-warning-bg); border-color:color-mix(in srgb, var(--c-warning) 30%, transparent); color:var(--c-warning); }
.alert-danger { background:var(--c-danger-bg); border-color:color-mix(in srgb, var(--c-danger) 30%, transparent); color:var(--c-danger); }
.alert-info { background:var(--c-info-bg); border-color:color-mix(in srgb, var(--c-info) 30%, transparent); color:var(--c-info); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap-box); }
.card { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .16s var(--ease), transform .16s var(--ease); }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-quick { padding:var(--sp-5); text-align:left; display:flex; flex-direction:column; gap:var(--sp-4); text-decoration:none; color:inherit; height:100%; }
.card-quick .icon { width:36px; height:36px; color:var(--brand); display:flex; align-items:center; justify-content:center; }
.card-quick .icon svg, .card-quick .icon span.icon { width:100%; height:100%; }
.card-quick h2, .card-quick h3, .card-quick h4 { font-size:var(--fs-base); }
.card-quick p { color:var(--text-secondary); font-size:var(--fs-base); margin:0; }
.card-quick .go { margin-top:auto; font-size:var(--fs-xs); font-weight:700; color:var(--brand); display:flex; align-items:center; gap:4px; }
.card-news { display:flex; flex-direction:column; }
.card-news .body { padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.card-news .date { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-numeric); font-variant-numeric:tabular-nums; }
.card-news h3, .card-news h4 { font-size:var(--fs-base); line-height:1.4; }
.card-news h3 a, .card-news h4 a { color:inherit; text-decoration:none; }
.card-news h3 a:hover, .card-news h4 a:hover { color:var(--brand); }
.card-news p { font-size:var(--fs-base); color:var(--text-secondary); margin:0; }
table.tariff { width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:var(--fs-base); background:var(--bg-surface); }
table.tariff th { text-align:left; background:var(--bg-tint); color:var(--brand-strong); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; padding:var(--sp-3) var(--sp-4); font-weight:700; }
table.tariff td { padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border-default); }
table.tariff td.amount { font-family:var(--font-numeric); font-variant-numeric:tabular-nums; text-align:right; }
table.tariff th.amount { text-align:right; }
table.tariff tr:hover td { background:var(--bg-sunken); }
.tabs, .dt-service-nav { display:flex; gap:var(--sp-2); border-bottom:1px solid var(--border-default); overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.tab, .dt-service-nav button { white-space:nowrap; }
.tab, .dt-service-nav button { padding:10px var(--sp-4); font-size:var(--fs-sm); font-weight:600; color:var(--text-secondary); cursor:pointer; background:none; font-family:var(--font-body); border:1px solid transparent; border-bottom:none; border-radius:var(--radius-md) var(--radius-md) 0 0; position:relative; }
.tab[aria-selected="true"], .dt-service-nav button[aria-selected="true"] { color:var(--brand); background:var(--bg-surface); border-color:var(--border-default); border-bottom:none; top:1px; z-index:1; }
.tab-group, .dt-service { border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; background:var(--bg-surface); }
.tab-group .tabs, .dt-service .dt-service-nav { background:var(--bg-sunken); border-bottom:none; padding:0; margin:0; }
.tab-group .tab[aria-selected="true"], .dt-service .dt-service-nav button[aria-selected="true"] { border:none; top:0; }
.tab-group .tab-panel, .dt-service .dt-service-panel { padding-top:0; }
.tab-group .tab-panel>.panel { border:none; border-radius:0; box-shadow:none; background:none; }
.pagination { display:flex; gap:6px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.page-btn { width:40px; height:40px; flex-shrink:0; border-radius:var(--radius-sm); border:1px solid var(--border-default); background:var(--bg-surface); color:var(--text-secondary); font-size:var(--fs-sm); font-family:var(--font-numeric); font-variant-numeric:tabular-nums; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.page-btn[aria-current="page"] { background:var(--brand); color:#fff; border-color:var(--brand); }
.breadcrumb { display:flex; gap:8px; align-items:center; font-size:var(--fs-sm); color:var(--text-secondary); }
.breadcrumb a { color:var(--text-secondary); text-decoration:none; }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb .sep { color:var(--text-secondary); }
.breadcrumb .current { color:var(--text-primary); font-weight:600; }
.site-header { background:var(--bg-surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-default); }
.topbar { background:var(--brand-strong); color:#fff; font-size:var(--fs-xs); padding:6px var(--sp-5); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.topbar a { color:#fff; opacity:.85; text-decoration:none; }
.topbar a:hover { opacity:1; }
.mainbar { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-5); gap:var(--sp-5); flex-wrap:wrap; }
.mainbar .logo-wrap { display:flex; align-items:center; gap:10px; text-decoration:none; }
.mainbar .logo-wrap svg, .mainbar .logo-wrap span.icon { width:38px; height:38px; }
.mainbar .logo-wrap img.logo-horizontal { height:68px; width:auto; display:block; flex:none; }
.mainbar .logo-wrap b { font-family:var(--font-display); font-size:var(--fs-md); color:var(--brand-strong); display:block; letter-spacing:.01em; }
.mainbar .logo-wrap span { font-size:10px; color:var(--text-secondary); letter-spacing:.06em; text-transform:uppercase; }
.mainnav { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.mainnav a { text-decoration:none; color:var(--text-primary); font-size:var(--fs-sm); font-weight:600; }
.mainnav a:hover { color:var(--brand); }
.site-footer { background:var(--brand-strong); color:rgba(255,255,255,.85); border-radius:var(--radius-lg); padding:var(--sp-7) var(--sp-6) var(--sp-5); font-size:var(--fs-base); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:var(--sp-6); margin-bottom:var(--sp-6); }
@media (max-width:760px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}
.site-footer h2 { color:#fff; font-family:var(--font-display); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp-3); }
.site-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.site-footer a { color:rgba(255,255,255,.75); text-decoration:none; }
.site-footer a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top:var(--sp-4); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:var(--fs-xs); color:rgba(255,255,255,.6); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-sm) 0; font-size:var(--fs-sm); font-weight:600; text-decoration:none; }
.skip-link:focus { left:0; }
.icon { display:inline-block; width:1.25em; height:1.25em; flex:none; vertical-align:-.15em; }
.icon-sm { width:16px; height:16px; }
.icon-md { width:24px; height:24px; }
.img-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2); padding:var(--sp-5); text-align:center; background:var(--bg-tint); border:1px dashed var(--border-strong); border-radius:var(--radius-md); color:var(--text-secondary); }
.img-ph b { font-family:var(--font-numeric); font-variant-numeric:tabular-nums; font-size:var(--fs-md); font-weight:600; color:var(--brand-strong); letter-spacing:.02em; }
.img-ph span { font-size:var(--fs-xs); line-height:1.5; }
.img-ph img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.img-ph--photo { padding:0; border:none; overflow:hidden; }
.img-ph--photo img { transition:transform .4s var(--ease); }
.img-ph--photo:hover img { transform:scale(1.05); }
.js-reveal .reveal { opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal .reveal.is-visible { opacity:1; transform:none; }
.js-reveal .reveal-group .reveal:nth-child(2) { transition-delay:.08s; }
.js-reveal .reveal-group .reveal:nth-child(3) { transition-delay:.16s; }
.js-reveal .reveal-group .reveal:nth-child(4) { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity:1; transform:none; transition:none; }
}
.topbar .brandline { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.topbar-tools { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.topbar-hotline { display:flex; align-items:center; gap:6px; color:#fff; opacity:.85; text-decoration:none; white-space:nowrap; }
.topbar-hotline:hover { opacity:1; }
.topbar-hotline svg, .topbar-hotline span.icon { flex:none; width:20px; height:20px; }
.topbar-hotline__label { font-weight:700; }
.topbar-hotline__number { font-family:var(--font-numeric); font-variant-numeric:tabular-nums; font-weight:700; font-size:15px; }
.topbar-search { display:flex; align-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); border-radius:var(--radius-sm); padding:2px 4px 2px 10px; }
.topbar-search input { background:transparent; border:none; color:#fff; font-family:var(--font-body); font-size:var(--fs-base); padding:5px 0; width:150px; }
.topbar-search input::placeholder { color:rgba(255,255,255,.6); }
.topbar-search input:focus-visible { outline:none; }
.topbar-search button { display:flex; align-items:center; background:none; border:none; color:#fff; cursor:pointer; padding:4px 6px; }
.mainnav>li { position:relative; }
.mainnav>li>a, .mainnav>li>button { display:block; padding:10px 0; }
.mainnav>li>button { background:none; border:none; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.mainnav>li>button { display:inline-flex; align-items:center; gap:4px; }
.has-sub__chevron { display:none; flex:none; transition:transform .15s var(--ease); }
.mainnav--upper>li>a, .mainnav--upper>li>button { text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-size:var(--fs-base); padding:9px 14px; border-radius:var(--radius-md); transition:background .15s var(--ease), color .15s var(--ease); }
.mainnav--upper>li:hover>a, .mainnav--upper>li:hover>button, .mainnav--upper>li>a:focus-visible, .mainnav--upper>li>button:focus-visible, .mainnav--upper>li.has-sub:focus-within>a, .mainnav--upper>li.has-sub:focus-within>button { background:var(--bg-tint); color:var(--brand); }
.mainnav--upper>li>a[aria-current="page"], .mainnav--upper>li>button[aria-current="page"] { background:var(--brand); color:#fff; }
.mainnav--upper>li>a[aria-current="page"]:hover, .mainnav--upper>li>button[aria-current="page"]:hover { background:var(--c-primary-700); color:#fff; }
.subnav { position:absolute; top:calc(100% + var(--sp-2)); left:0; min-width:230px; list-style:none; margin:0; padding:var(--sp-2); background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-md); display:none; z-index:20; }
.subnav::before { content:''; position:absolute; top:calc(var(--sp-2) * -1); left:0; right:0; height:var(--sp-2); }
.subnav--right { left:auto; right:0; }
.mainnav>li:hover>.subnav, .mainnav>li:focus-within>.subnav { display:block; }
.subnav a { display:block; padding:8px 12px; border-radius:var(--radius-sm); font-size:var(--fs-base); font-weight:500; color:var(--text-primary); text-decoration:none; white-space:nowrap; }
.subnav a:hover { background:var(--brand); color:#fff; }
.mainnav>li.nav-home>a { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:var(--radius-md); color:var(--text-primary); }
.mainnav>li.nav-home>a:hover { background:var(--bg-tint); color:var(--brand); }
.mainnav>li.nav-home>a[aria-current="page"] { background:var(--brand); color:#fff; }
.nav-home__label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.search-form { display:none; }
.search-form .input { padding:8px 12px; font-size:var(--fs-sm); min-width:200px; }
.search-form .btn { flex:none; }
.nav-toggle { display:none; align-items:center; gap:var(--sp-2); background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:8px 12px; font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); cursor:pointer; }
.header-search-toggle { display:none; }
.header-actions { display:none; }
.nav-toggle .bars { display:block; width:18px; height:2px; background:currentColor; position:relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content:''; position:absolute; left:0; width:18px; height:2px; background:currentColor; }
.nav-toggle .bars::before { top:-6px; }
.nav-toggle .bars::after { top:6px; }
.mainnav__head { display:none; }
.nav-backdrop { display:none; }
@media (max-width:1024px) {
  .topbar { display:none; }
  .nav-toggle { display:inline-flex; width:44px; height:44px; padding:0; justify-content:center; gap:0; }
  .mainbar .logo-wrap img.logo-horizontal { height:46px; }
  .header-search-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:none; border-radius:var(--radius-md); color:var(--text-primary); cursor:pointer; }
  .header-search-toggle:hover { background:var(--bg-tint); color:var(--brand); }
  .header-search-toggle[aria-expanded="true"] { background:var(--bg-tint); color:var(--brand); }
  .header-actions { display:flex; align-items:center; gap:8px; order:2; margin-left:auto; }
  .mainbar { flex-wrap:wrap; row-gap:var(--sp-3); column-gap:var(--sp-2); }
  .mainbar .logo-wrap { order:1; }
  .search-form { display:flex; gap:var(--sp-2); align-items:center; order:3; flex:1 1 100%; }
  .search-form[hidden] { display:none; }
  .mainbar>nav { display:none; }
  .mainbar>.mainnav { width:100%; }
  nav:has(>.mainnav.is-open) { display:flex; flex-direction:column; position:fixed; top:var(--topbar-h, 0px); right:0; bottom:0; left:auto; width:min(86vw, 360px); z-index:29; background:var(--bg-surface); box-shadow:var(--shadow-lg); }
  .nav-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:28; background:rgba(14,27,38,.5); }
  nav:has(>.mainnav.is-open) .mainnav__head { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-5); flex:none; border-bottom:1px solid var(--border-default); }
  .mainnav__title { font-family:var(--font-display); font-weight:700; font-size:var(--fs-xl); color:var(--brand-strong); }
  .mainnav__close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; background:none; border:none; border-radius:var(--radius-md); color:var(--text-primary); cursor:pointer; }
  .mainnav__close:hover { background:var(--bg-tint); }
  .mainnav { display:none; flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .mainnav.is-open { display:flex; flex:1 1 auto; min-height:0; margin-top:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .mainnav>li { border-bottom:1px solid var(--border-default); }
  .mainnav>li:last-child { border-bottom:none; }
  .mainnav>li>a, .mainnav>li>button { padding:14px var(--sp-5); width:100%; }
  .mainnav>li.nav-home>a { width:100%; height:auto; justify-content:flex-start; gap:var(--sp-3); padding:14px var(--sp-5); border-radius:0; }
  .nav-home__label { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; font-weight:700; font-size:var(--fs-md); }
  .mainnav--upper>li>a, .mainnav--upper>li>button { padding:14px var(--sp-5); border-radius:0; text-transform:none; letter-spacing:normal; font-size:var(--fs-md); }
  .subnav { position:static; display:none; min-width:0; border:none; box-shadow:none; padding:var(--sp-2) var(--sp-4) var(--sp-3); }
  .subnav a { padding:10px var(--sp-3); border-radius:var(--radius-md); white-space:normal; line-height:1.4; }
  .has-sub>button[aria-expanded="true"]+.subnav { display:block; }
  .has-sub>button:not([aria-expanded="true"])+.subnav { display:none; }
  .has-sub>button { justify-content:space-between; }
  .has-sub__chevron { display:inline-block; }
  .has-sub>button[aria-expanded="true"] .has-sub__chevron { transform:rotate(180deg); }
  .search-form .input { min-width:0; height:52px; }
  .search-form .btn { width:52px; height:52px; min-width:52px; min-height:52px; padding:0; aspect-ratio:1; }
}
.article-header { margin-bottom:var(--sp-5); padding-bottom:var(--sp-5); border-bottom:1px solid var(--border-default); }
.article-header h1 { font-size:1.75rem; margin-bottom:var(--sp-3); line-height:1.3; }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); color:var(--text-secondary); }
.article-meta time { font-family:var(--font-numeric); font-variant-numeric:tabular-nums; }
.article-meta .sep { color:var(--text-secondary); }
@media (max-width:760px) {
  .article-header h1 { font-size:1.375rem; line-height:1.3; }
}
.prose { font-size:var(--fs-base); line-height:1.75; color:var(--text-primary); }
.prose>*+* { margin-top:var(--sp-4); }
.prose h2 { font-size:var(--fs-xl); margin-top:var(--sp-7); }
.prose h3 { font-size:var(--fs-lg); margin-top:var(--sp-6); }
.prose>:first-child { margin-top:0; }
.prose h4 { font-size:var(--fs-md); margin-top:var(--sp-5); }
.prose a { color:var(--text-link); text-underline-offset:3px; }
.prose ul, .prose ol { padding-left:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); }
.prose li::marker { color:var(--brand); }
.prose blockquote { border-left:3px solid var(--brand); background:var(--bg-tint); padding:var(--sp-4) var(--sp-5); border-radius:0 var(--radius-md) var(--radius-md) 0; color:var(--text-secondary); }
.prose img, .prose figure img { border-radius:var(--radius-md); }
.prose figcaption { font-size:var(--fs-sm); color:var(--text-secondary); margin-top:var(--sp-2); text-align:center; }
.prose code { background:var(--bg-sunken); padding:2px 6px; border-radius:var(--radius-sm); font-size:.9em; font-family:var(--font-mono); }
.prose hr { border:none; border-top:1px solid var(--border-default); margin:var(--sp-6) 0; }
.prose table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.prose th { background:var(--bg-tint); text-align:left; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--brand-strong); }
.prose td { padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border-default); }
.tag-list { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5); }
.tag { font-size:var(--fs-xs); font-weight:600; padding:4px 12px; border-radius:var(--radius-pill); background:var(--bg-sunken); border:1px solid var(--border-default); color:var(--text-secondary); text-decoration:none; }
.tag:hover { border-color:var(--brand); color:var(--brand); }
.article-nav { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-box); margin-top:var(--gap-box); }
@media (max-width:640px) {
  .article-nav { grid-template-columns:1fr; }
}
.article-nav a { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--sp-5); text-decoration:none; display:block; }
.article-nav a:hover { border-color:var(--brand); }
.article-nav .dir { font-size:var(--fs-xs); color:var(--text-secondary); display:block; margin-bottom:4px; }
.article-nav .ttl { font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); }
.article-nav .next { text-align:right; }
.post-item { display:grid; grid-template-columns:180px minmax(0,1fr); gap:var(--sp-5); align-items:start; margin-bottom:var(--gap-box); }
.post-item:last-child { margin-bottom:0; }
@media (max-width:640px) {
  .post-item { grid-template-columns:96px minmax(0,1fr); gap:var(--sp-3); }
}
.post-item .date { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-numeric); font-variant-numeric:tabular-nums; }
.post-item h3 { font-size:var(--fs-md); margin:6px 0; }
.post-item h3 a { color:var(--text-primary); text-decoration:none; }
.post-item h3 a:hover { color:var(--brand); }
.post-item p { font-size:var(--fs-base); color:var(--text-secondary); }
@media (max-width:640px) {
  .post-item { align-items:center; }
  .post-item h3 { font-size:var(--fs-base); margin:0; }
  .post-item p { display:none; }
}
.widget { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:var(--sp-5); margin-bottom:var(--gap-box); overflow:hidden; }
.widget--tint { background:var(--bg-tint); }
.widget-promo { padding:0; }
.widget-promo__link { display:block; color:inherit; text-decoration:none; }
.widget-promo__img { aspect-ratio:21 / 8; background:var(--bg-sunken); }
.widget-promo__img img { width:100%; height:100%; object-fit:cover; display:block; }
.widget-promo__cta { font-family:var(--font-display); font-weight:700; font-size:var(--fs-base); color:var(--brand-strong); }
.widget-title { margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5); padding:15px var(--sp-5) 12px; background: radial-gradient(ellipse 55% 65% at 78% 30%, rgba(0,171,56,.45) 0%, rgba(0,171,56,0) 72%), radial-gradient(ellipse 50% 60% at 55% 85%, rgba(138,244,173,.4) 0%, rgba(138,244,173,0) 72%), radial-gradient(ellipse 40% 55% at 30% 5%, rgba(245,245,245,.6) 0%, rgba(245,245,245,0) 72%), linear-gradient(90deg, var(--c-primary-50), var(--c-accent-100)); color:var(--brand-strong); font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); line-height:1.2; border-bottom:1px solid var(--border-default); border-radius:var(--radius-lg) var(--radius-lg) 0 0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0; }
.widget-title::after { content:''; flex:none; width:72px; height:6px; margin-top:2px; background:url("data:image/svg+xml,%3Csvg version=%221.1%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 138.9 10%22%3E %3Cg%3E %3Cpath fill=%22%2300649F%22 d=%22M0,7.1c0,0,19-4.3,39.9-3.7c11.8,0.4,23.9,3.9,34.6,5.2c13.3,1.7,24.1,1.4,26.1,1.3c6.5-0.3,8.5-1,8.5-1 s-19.2,0.4-34-3.8S40.4-1.8,22.5,1.4S0,7.1,0,7.1L0,7.1z%22/%3E %3Cpath fill=%22%2300AB38%22 d=%22M67.2,0.9c0,0,11.8,1,19.8,3.3c26.8,7.7,51.9-2.5,51.9-2.5S116.1,6.8,100.9,4C81,0.3,67.2,0.9,67.2,0.9 L67.2,0.9z%22/%3E %3C/g%3E %3C/svg%3E") no-repeat left center/contain; }
.widget-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.widget-list a { font-size:var(--fs-base); color:var(--text-primary); text-decoration:none; display:block; }
.widget-list a:hover { color:var(--brand); }
.widget-list a[aria-current] { color:var(--brand); font-weight:700; }
.widget-list .date { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-numeric); font-variant-numeric:tabular-nums; display:block; margin-top:2px; }
.table-wrap { max-width:100%; overflow-x:auto; overflow-y:hidden; border:1px solid var(--border-default); border-radius:var(--radius-md); -webkit-overflow-scrolling:touch; }
.table-wrap:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.table-wrap table { min-width:560px; }
.empty-state { text-align:center; padding:var(--sp-8) var(--sp-5); background:var(--bg-surface); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); }
.empty-state__img { width:120px; height:120px; margin:0 auto var(--sp-4); display:block; }
.empty-state h2, .empty-state h3 { font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.empty-state p { font-size:var(--fs-base); color:var(--text-secondary); max-width:420px; margin:0 auto var(--sp-5); }
.accordion { display:flex; flex-direction:column; gap:var(--gap-box); }
.acc-item { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; }
.acc-item>summary { cursor:pointer; padding:var(--sp-4) var(--sp-5); font-weight:600; font-size:var(--fs-base); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); }
.acc-item>summary::-webkit-details-marker { display:none; }
.acc-item>summary::after { content:'+'; color:var(--brand); font-size:var(--fs-lg); font-weight:400; flex:none; }
.acc-item[open]>summary::after { content:'−'; }
.acc-item>summary:hover { background:var(--bg-tint); }
.acc-body { padding:0 var(--sp-5) var(--sp-5); font-size:var(--fs-base); color:var(--text-secondary); }
.step-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-5); }
.step-list li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:var(--sp-4); align-items:start; }
.step-list .no { width:36px; height:36px; border-radius:50%; background:var(--bg-tint); color:var(--brand); font-family:var(--font-numeric); font-variant-numeric:tabular-nums; font-weight:600; display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); }
.step-list h3, .step-list h4 { font-size:var(--fs-base); margin-bottom:4px; }
.step-list p { font-size:var(--fs-base); color:var(--text-secondary); }
.file-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.file-item { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) 0; border-bottom:1px solid var(--border-default); }
.file-item .ext { flex:none; font-family:var(--font-numeric); font-size:var(--fs-xs); font-weight:600; padding:6px 10px; border-radius:var(--radius-sm); background:var(--bg-tint); color:var(--brand-strong); text-transform:uppercase; }
.file-item .meta { flex:1; min-width:0; }
.file-item .meta a { font-size:var(--fs-base); font-weight:600; color:var(--text-primary); text-decoration:none; }
.file-item .meta a:hover { color:var(--brand); }
.file-item .meta span { display:block; font-size:var(--fs-xs); color:var(--text-secondary); margin-top:2px; }
.check-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.check-list li { display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fs-base); }
.check-list svg, .check-list span.icon { flex:none; margin-top:2px; color:var(--c-accent-600); }
.check-list a { color:var(--text-primary); text-decoration:none; }
.check-list a:hover { color:var(--brand); text-decoration:underline; }
.link-external::after { content:'↗'; margin-left:4px; font-size:.9em; }
.link-external .out { font-size:var(--fs-xs); color:var(--text-secondary); font-weight:400; }
.footer-grid--2 { grid-template-columns:1fr 1.8fr; }
.footer-brand .footer-logo { display:inline-flex; align-items:center; justify-content:center; width:108px; height:108px; background:#fff; border-radius:var(--radius-md); padding:12px; }
.footer-brand .footer-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.footer-brand b { display:block; font-family:var(--font-display); font-size:var(--fs-md); color:#fff; text-transform:uppercase; letter-spacing:.04em; line-height:1.4; margin-top:var(--sp-4); }
.site-footer .contact-list { display:grid; grid-template-rows:repeat(3,auto); grid-auto-flow:column; justify-content:start; gap:var(--sp-3) var(--sp-7); list-style:none; margin:0; padding:0; }
.site-footer .contact-list li { display:flex; gap:var(--sp-3); align-items:flex-start; color:rgba(255,255,255,.8); }
.site-footer .contact-list svg, .site-footer .contact-list span.icon { flex:none; margin-top:2px; color:var(--c-accent-300); }
.to-top { position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:40; width:48px; height:48px; border-radius:var(--radius-md); background:var(--c-accent-700); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); }
.to-top:hover { background:var(--c-accent-800); }
.bottom-nav { display:none; }
@media (max-width:760px) {
  .bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:25; height:var(--bottomnav-h); padding-bottom:env(safe-area-inset-bottom, 0px); background:var(--bg-surface); border-top:1px solid var(--border-default); box-shadow:var(--shadow-md); }
  .bottom-nav__item { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; padding:6px 2px; text-decoration:none; color:var(--text-secondary); font-size:11px; font-weight:600; line-height:1.2; text-align:center; }
  .bottom-nav__item .icon { color:currentColor; }
  .bottom-nav__item:hover { color:var(--brand); }
  .bottom-nav__item[aria-current="page"] { color:var(--brand); }
}
@media (max-width:760px) {
  .footer-grid--2 { grid-template-columns:1fr; }
  .site-footer .contact-list { grid-template-rows:none; grid-auto-flow:row; }
  .to-top { right:var(--sp-4); bottom:calc(var(--bottomnav-h) + var(--sp-3)); }
}
@media (max-width:640px) {
  .mainbar .logo-wrap span { display:none; }
}
.anchor-nav { display:flex; gap:8px; width:fit-content; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.anchor-nav { scrollbar-width:none; -ms-overflow-style:none; }
.anchor-nav::-webkit-scrollbar { display:none; }
.anchor-nav a { display:block; flex:none; padding:9px 16px; border-radius:var(--radius-md); white-space:nowrap; font-family:var(--font-body); font-size:var(--fs-md); font-weight:600; color:var(--text-secondary); text-decoration:none; transition:background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease), box-shadow .12s var(--ease); }
@media (max-width:760px) {
  .anchor-nav a { border:1px solid var(--border-default); background:var(--bg-surface); }
  .anchor-nav a:hover { background:var(--bg-sunken); color:var(--brand); }
  .anchor-nav a[aria-current="true"] { background:var(--bg-tint); color:var(--brand); border-color:var(--bg-tint); }
}
@media (max-width:640px) {
  .anchor-nav { width:100%; }
  .anchor-nav a { padding:9px 12px; }
}
@media (min-width:761px) {
  .anchor-nav { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:4px; gap:2px; }
  .anchor-nav a { border-radius:calc(var(--radius-md) - 2px); }
  .anchor-nav a:hover { color:var(--brand); }
  .anchor-nav a[aria-current="true"] { background:var(--brand); color:#fff; }
  .anchor-nav a[aria-current="true"]:hover { background:var(--c-primary-700); color:#fff; }
}
.info-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.info-list li { display:flex; gap:var(--sp-4); align-items:flex-start; }
.info-list svg, .info-list span.icon { flex:none; margin-top:2px; color:var(--brand); }
.info-list .lbl { display:block; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); margin-bottom:2px; }
.info-list strong { font-size:var(--fs-base); font-weight:600; }
.info-list a { color:var(--text-primary); text-decoration:none; }
.info-list a:hover { color:var(--brand); }
.form-grid, .dtf-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-box); }
.form-grid .field { max-width:none; }
.form-grid .field-full { grid-column:1 / -1; }
.form-actions { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-top:var(--sp-5); }
.form-note { font-size:var(--fs-xs); color:var(--text-secondary); }
@media (max-width:640px) {
  .form-grid, .dtf-form-grid { grid-template-columns:1fr; }
}
.file-drop { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); padding:var(--sp-5); text-align:center; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--bg-sunken); color:var(--text-secondary); font-size:var(--fs-sm); cursor:pointer; }
.file-drop:hover, .file-drop:focus-within { border-color:var(--brand); background:var(--bg-tint); }
.file-drop svg, .file-drop span.icon { color:var(--brand); }
.file-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.redirect-box { max-width:560px; margin:0 auto; text-align:center; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:var(--sp-8) var(--sp-6); }
.redirect-box .spinner { width:44px; height:44px; margin:0 auto var(--sp-5); border:3px solid var(--c-primary-100); border-top-color:var(--brand); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
.redirect-box h2 { font-size:var(--fs-xl); margin-bottom:var(--sp-3); }
.redirect-box p { color:var(--text-secondary); font-size:var(--fs-base); margin-bottom:var(--sp-5); }
.redirect-box .dest { display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--bg-tint); border-radius:var(--radius-md); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); font-weight:600; color:var(--brand-strong); margin-bottom:var(--sp-5); }
.heading-rule { margin-bottom:var(--sp-5); }
.heading-rule>h2, .heading-rule>h1, .heading-rule>h3 { color:var(--brand-strong); margin-bottom:var(--sp-1); }
.heading-rule::after { content:''; display:block; width:72px; height:6px; background:url("data:image/svg+xml,%3Csvg version=%221.1%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 138.9 10%22%3E %3Cg%3E %3Cpath fill=%22%2300649F%22 d=%22M0,7.1c0,0,19-4.3,39.9-3.7c11.8,0.4,23.9,3.9,34.6,5.2c13.3,1.7,24.1,1.4,26.1,1.3c6.5-0.3,8.5-1,8.5-1 s-19.2,0.4-34-3.8S40.4-1.8,22.5,1.4S0,7.1,0,7.1L0,7.1z%22/%3E %3Cpath fill=%22%2300AB38%22 d=%22M67.2,0.9c0,0,11.8,1,19.8,3.3c26.8,7.7,51.9-2.5,51.9-2.5S116.1,6.8,100.9,4C81,0.3,67.2,0.9,67.2,0.9 L67.2,0.9z%22/%3E %3C/g%3E %3C/svg%3E") no-repeat left center/contain; }
.map-embed { position:relative; border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-sunken); }
.map-embed iframe { display:block; width:100%; height:520px; border:0; }
.map-embed .img-ph { aspect-ratio:auto; height:520px; border:none; border-radius:0; }
@media (max-width:1024px) {
  .map-embed iframe, .map-embed .img-ph { height:420px; }
}
@media (max-width:760px) {
  .map-embed iframe, .map-embed .img-ph { height:320px; }
}
.post-feature { display:block; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:border-color .12s var(--ease), box-shadow .12s var(--ease); }
.post-feature:hover { border-color:var(--brand); box-shadow:var(--shadow-md); }
.post-feature .img-ph { aspect-ratio:16 / 9; border-radius:0; border-left:none; border-right:none; border-top:none; }
.post-feature .body { padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
.post-feature h2 { font-size:var(--fs-xl); line-height:1.3; color:var(--brand-strong); }
.post-feature p { font-size:var(--fs-base); color:var(--text-secondary); }
.post-feature .more { font-size:var(--fs-sm); font-weight:700; color:var(--text-link); }
@media (max-width:640px) {
  .post-feature h2 { font-size:var(--fs-lg); }
}
.widget-news { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.widget-news li { display:grid; grid-template-columns:84px minmax(0,1fr); gap:var(--sp-3); align-items:start; }
.widget-news .img-ph { aspect-ratio:4 / 3; border-radius:var(--radius-sm); padding:0; min-height:0; }
.widget-news .img-ph b, .widget-news .img-ph span { display:none; }
.widget-news a { font-size:var(--fs-base); font-weight:600; line-height:1.4; color:var(--text-primary); text-decoration:none; display:block; }
.widget-news a:hover { color:var(--brand); }
.widget-news .date { display:block; margin-top:4px; font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-numeric); font-variant-numeric:tabular-nums; }
.widget-list li { border-bottom:1px solid var(--border-default); padding-bottom:var(--sp-3); }
.widget-list li:last-child { border-bottom:none; padding-bottom:0; }
.sec-title h2, .empty-state h2, .empty-state h3, .page-banner h1, .redirect-box h2 { text-wrap:balance; }
.panel>.post-feature { border:none; box-shadow:none; border-radius:0; background:none; padding-bottom:var(--gap-box); border-bottom:1px solid var(--border-default); margin-bottom:var(--gap-box); }
.panel>.post-feature:hover { box-shadow:none; }
.panel>.post-feature .img-ph { border-radius:var(--radius-md); }
.panel>.post-feature .body { padding:var(--sp-5) 0 0; }
.tab-panel, .dt-service-panel { padding-top:0; }
.tab-panel[hidden] { display:none; }
.post-feature[hidden], .post-item[hidden], .empty-state[hidden], .pagination[hidden], .tabs[hidden] { display:none; }
.tabs--lg .tab, .dt-service-nav button { font-size:var(--fs-lg); padding:var(--sp-4) var(--sp-5); }
@media (max-width:760px) {
  .tab-group, .dt-service { border:none; border-radius:0; box-shadow:none; background:none; }
  .tab-group .tabs, .dt-service .dt-service-nav { background:none; margin:0 0 var(--gap-box); gap:var(--sp-2); scrollbar-width:none; -ms-overflow-style:none; }
  .tab-group .tabs::-webkit-scrollbar { display:none; }
  .tab-group .tab { border:1px solid var(--border-default); background:var(--bg-surface); border-radius:var(--radius-md); font-size:var(--fs-md); padding:9px 14px; top:0; }
  .tab-group .tab[aria-selected="true"], .dt-service .dt-service-nav button[aria-selected="true"] { background:var(--bg-tint); color:var(--brand); border:1px solid var(--bg-tint); }
}
.year-head { display:flex; align-items:center; gap:0; margin-bottom:var(--gap-box); }
.year-head__label { flex:none; padding:var(--sp-2) var(--sp-4); background:var(--brand-strong); color:#fff; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.year-head__rule { flex:1; height:1px; background:var(--border-strong); align-self:flex-end; }
.year-group + .year-head { margin-top:var(--sp-8); }
@media (max-width:1024px) {
  input, select, textarea { font-size:16px!important; }
}
@media (max-width:1024px) {
  form.search-form>input.input { flex:1 1 auto; width:calc(100% - 60px); min-width:0; height:52px; font-size:16px!important; }
  form.search-form>button.btn { flex:0 0 52px!important; width:52px!important; max-width:52px; height:52px!important; min-width:52px; min-height:52px; padding:0!important; aspect-ratio:1 / 1; border-radius:var(--radius-md); }
  .mainnav .subnav { width:100%; margin:0; padding:var(--sp-2) var(--sp-4) var(--sp-4)!important; box-sizing:border-box; }
  .mainnav .subnav>li>a { display:block; width:100%; margin:0; padding:12px 14px!important; border-radius:var(--radius-md); white-space:normal; line-height:1.4; box-sizing:border-box; }
}

/* ===== screen/site.css ===== */
[data-include] { display:contents; }
.topbar, .site-header .mainbar { padding-inline:max(var(--sp-6), calc((100% - var(--container-max)) / 2)); }
.site-header { position:sticky; top:0; z-index:30; border-radius:0; border:none; overflow:visible; background:var(--bg-surface); border-bottom:1px solid var(--border-default); }
.site-header .mainbar { border-bottom:none; min-height:100px; }
@media (max-width:1024px) {
  .site-header .mainbar { min-height:0; }
}
@media (max-width:640px) {
  .site-header .mainbar { padding-inline:var(--sp-4); }
}
.site-footer { padding-inline:0; border-radius:0; }
.section { padding:var(--sp-9) 0; }
.section--sunken { background:var(--bg-sunken); }
.section--surface { background:var(--bg-surface); }
.section--tight { padding:var(--sp-7) 0; }
.page-banner + .section, .crumb-bar + .section { padding-top:var(--gap-box); }
.anchor-nav-wrap + .section { padding-top:var(--gap-box); }
.page-banner + .section > .container > .after-block:first-child, .crumb-bar + .section > .container > .after-block:first-child, .page-banner + .section > .container > .tabs[hidden] + .after-block, .crumb-bar + .section > .container > .tabs[hidden] + .after-block { margin-top:0; }
.after-block:first-child { margin-top:0; }
main > .section:last-of-type { padding-bottom:var(--gap-box); }
.sec-title { text-align:center; margin-bottom:var(--sp-7); }
.sec-title h2 { font-size:var(--fs-2xl); color:var(--brand-strong); text-transform:uppercase; letter-spacing:.02em; }
.sec-title .drops { display:flex; justify-content:center; gap:6px; margin-top:var(--sp-3); color:var(--brand); }
.sec-title .drops--wave { margin-top:4px; }
.sec-title .drops--wave svg, .sec-title .drops--wave span.icon { display:block; }
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-5); margin-bottom:var(--sp-6); flex-wrap:wrap; }
.sec-head h2 { font-size:var(--fs-xl); color:var(--brand-strong); }
.sec-head p { color:var(--text-secondary); font-size:var(--fs-base); margin-top:var(--sp-2); max-width:62ch; }
.page-banner { position:relative; isolation:isolate; color:#fff; background-color:var(--brand-strong); background-size:cover; background-position:center; }
.page-banner::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(11,60,93,.92) 0%, rgba(11,60,93,.72) 45%, rgba(11,60,93,.35) 100%); }
.page-banner .container { min-height:300px; display:flex; flex-direction:column; justify-content:center; padding-block:var(--sp-8); }
.page-banner h1 { color:#fff; font-size:var(--fs-3xl); margin-bottom:var(--sp-4); }
.page-banner p { color:rgba(255,255,255,.85); max-width:64ch; }
.page-banner .breadcrumb { margin-top:var(--sp-4); color:rgba(255,255,255,.8); }
.page-banner .breadcrumb a { color:rgba(255,255,255,.8); }
.page-banner .breadcrumb a:hover { color:#fff; }
.page-banner .breadcrumb .sep { color:rgba(255,255,255,.75); }
.page-banner .breadcrumb .current { color:#fff; }
.page-banner--image { overflow:hidden; }
.page-banner--image::before { content:'';position:absolute;inset:0;z-index:-2; background-image:var(--banner-image);background-repeat:no-repeat; background-position:var(--banner-position,center 55%);background-size:cover; }
.page-banner--image::after { background:linear-gradient(90deg,rgba(5,24,38,.76) 0%,rgba(5,24,38,.68) 48%,rgba(5,24,38,.38) 100%); }
.page-banner--image .container { min-height:clamp(300px,23vw,420px); }
.page-banner--image h1 { max-width:65%;font-size:clamp(1.625rem,2.8vw,2.75rem);line-height:1.2; }
.page-banner--image p { max-width:58%;color:#fff; }
.page-banner--image .breadcrumb { max-width:65%;flex-wrap:wrap; }
@media(max-width:760px) {
  .page-banner--image::before, .page-banner--image::after { display:none; }
  .page-banner--image h1, .page-banner--image p, .page-banner--image .breadcrumb { max-width:100%; }
}
@media (max-width:760px) {
  .page-banner { background:none; }
  .page-banner::after { display:none; }
  .page-banner .container { min-height:0; padding-block:var(--gap-box); }
  .page-banner h1 { font-size:var(--fs-2xl); color:var(--text-primary); margin-bottom:0; }
  .page-banner p, .page-banner .breadcrumb { display:none; }
}
@media (max-width:640px) {
  .page-banner h1 { font-size:1.375rem; }
}
@media (max-width:640px) {
  .sec-head h2 { font-size:var(--fs-lg); }
}
.crumb-bar { background:var(--bg-tint); border-bottom:1px solid var(--border-default); padding:var(--sp-4) 0; }
.two-col { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--gap-box); align-items:start; }
.two-col--thirds { grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--gap-box); }
@media (max-width:1024px) {
  .two-col, .two-col--thirds { grid-template-columns:minmax(0,1fr); }
}
.panel { min-width:0; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:var(--sp-5); }
.panel>h2, .panel>h3 { font-size:var(--fs-lg); margin-bottom:var(--sp-4); }
.panel--tint { background:var(--bg-tint); }
@media (max-width:760px) {
  .panel:not(.panel--tint) { background:none; border:none; border-radius:0; box-shadow:none; padding:0; }
}
@media (max-width:760px) {
  body { background:var(--bg-surface); padding-bottom:var(--bottomnav-h); }
  .section--sunken { background:none; }
  .crumb-bar { background:none; }
}
.readable { max-width:78ch; }
.readable>h2, .readable>h3 { font-size:var(--fs-lg); margin-bottom:var(--sp-4); }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:var(--gap-box); }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:var(--gap-box); }
.grid-3--compact { grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.related-news { margin-top:var(--sp-6); padding-top:var(--sp-6); border-top:1px solid var(--border-default); }
.related-news .card-news { border:none; box-shadow:none; background:none; border-radius:0; }
.related-news .card-news .body { padding:var(--sp-3) 0 0; }
@media (max-width:1024px) {
  .section { padding:var(--sp-8) 0; }
}
@media (max-width:760px) {
  .sec-title { margin-bottom:var(--sp-6); }
  .sec-title h2 { font-size:var(--fs-xl); }
}
@media (max-width:640px) {
  .section { padding:var(--sp-7) 0; }
}
.icon-tile { flex:none; align-self:flex-start; color:var(--brand); display:flex; align-items:center; }
.icon-tile .icon, .icon-tile svg, .icon-tile span.icon { width:36px; height:36px; }
.icon-tile img { height:48px; width:auto; display:block; }
.card-grid--2col { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:640px) {
  .card-grid--2col { grid-template-columns:1fr; }
}
.bank-logos { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5) var(--sp-6); }
.bank-logos img { height:40px; width:auto; display:block; }
.svc-card { padding:var(--sp-5); }
.svc-card>.img-ph { aspect-ratio:21 / 8; margin-bottom:var(--sp-5); }
.svc-card h2, .svc-card h3 { font-size:var(--fs-lg); color:var(--brand-strong); margin-bottom:var(--sp-3); }
.svc-card>p { font-size:var(--fs-base); color:var(--text-secondary); margin-bottom:var(--sp-4); }
.svc-card .check-list { margin-bottom:var(--sp-5); }
.svc-overview { align-items:start; }
.svc-overview .svc-card { padding:0; background:transparent; border:0; box-shadow:none; }
.media-16-9 { aspect-ratio:16 / 9; }
.media-4-3 { aspect-ratio:4 / 3; }
.after-block { margin-top:var(--gap-box); }
.after-note { margin-top:var(--sp-4); }
.form-actions--center { justify-content:center; }
.anchor-nav-wrap { position:sticky; top:calc(var(--header-h, 76px) + var(--gap-box)); z-index:20; margin-top:var(--gap-box); }
.contact-card, .contact-form { padding:var(--sp-6); }
.contact-card__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap-box); align-items:center; }
.contact-card .info-list li { font-size:var(--fs-base); }
.contact-form__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap-box); align-items:stretch; }
.contact-form__grid .field { max-width:none; }
.contact-form__col { display:flex; flex-direction:column; gap:var(--gap-box); }
.field-textarea { height:100%; }
.field-textarea .textarea { height:100%; min-height:150px; resize:vertical; }
.contact-form__foot { grid-column:1 / -1; display:flex; align-items:center; justify-content:flex-end; gap:var(--gap-box); flex-wrap:wrap; }
@media (max-width:1024px) {
  .contact-card__grid { grid-template-columns:minmax(0,1fr); gap:var(--gap-box); align-items:start; }
}
@media (max-width:760px) {
  .contact-form__grid { grid-template-columns:minmax(0,1fr); }
  .field-textarea .textarea { min-height:130px; }
  .contact-form__foot { justify-content:stretch; }
  .contact-form__foot .btn { width:100%; justify-content:center; }
}
@media (max-width:640px) {
  .contact-card, .contact-form { padding:var(--sp-4); }
}

/* ===== screen/home.css ===== */
.hero-slider { position:relative; background:var(--brand-strong); overflow:hidden; aspect-ratio:2400 / 800; max-height:640px; max-width:1920px; margin-inline:auto; }
.hero-slider .slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .5s var(--ease); }
.hero-slider .slide[aria-hidden="false"] { opacity:1; }
.hero-slider .slide picture { display:block; width:100%; height:100%; }
.hero-slider .slide img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slider .slide[aria-hidden="false"] img { animation:hero-kenburns 8s var(--ease) forwards; }
}
@keyframes hero-kenburns { from{transform:scale(1);} to{transform:scale(1.06);} }
@media (prefers-reduced-motion: no-preference) {
  .hero-slider { animation:hero-enter .9s var(--ease) both; }
  .hero-controls { animation:hero-enter .7s var(--ease) .35s both; }
}
@keyframes hero-enter { from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;} }
.hero-controls { position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-controls>* { pointer-events:auto; }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.85); color:var(--brand-strong); box-shadow:var(--shadow-md); transition:background .12s var(--ease), transform .12s var(--ease); }
.hero-arrow:hover { background:#fff; }
.hero-arrow:active { transform:translateY(-50%) scale(.94); }
.hero-arrow:focus-visible { outline:2px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px rgba(11,60,93,.55); }
.hero-arrow--prev { left:var(--sp-5); }
.hero-arrow--next { right:var(--sp-5); }
.hero-dots { position:absolute; left:50%; bottom:var(--sp-5); transform:translateX(-50%); display:flex; gap:10px; }
.hero-dots button { width:24px; height:24px; padding:0; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hero-dots button::after { content:''; width:26px; height:6px; border-radius:var(--radius-pill); background:rgba(255,255,255,.45); transition:background .12s var(--ease), width .12s var(--ease); }
.hero-dots button:hover::after { background:rgba(255,255,255,.75); }
.hero-dots button[aria-current="true"]::after { background:#fff; width:34px; }
.hero-dots button:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:50%; box-shadow:0 0 0 4px rgba(11,60,93,.55); }
.hero-slider:not(.is-ready) .slide:first-child { opacity:1; }
.hero-slider:not(.is-ready) .hero-controls { display:none; }
@media (max-width:760px) {
  .hero-slider { aspect-ratio:3 / 4; max-height:none; }
  .hero-slider .slide img { object-fit:cover; object-position:center; animation:none!important; transform:none!important; }
  .hero-controls { inset:auto 0 var(--sp-4) 0; display:flex; align-items:center; justify-content:center; gap:var(--sp-5); }
  .hero-arrow, .hero-dots { position:static; transform:none; }
  .hero-arrow { width:38px; height:38px; }
  .hero-arrow:active { transform:scale(.94); }
}
.support-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:var(--gap-box); }
.support { position:relative; padding-top:44px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.support .hotline { position:absolute; top:0; left:50%; transform:translateX(-50%); display:flex; align-items:baseline; gap:var(--sp-3); white-space:nowrap; font-family:var(--font-numeric); font-variant-numeric:tabular-nums; font-size:var(--fs-lg); font-weight:600; color:var(--brand-strong); }
.support .hotline .lbl { font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; color:var(--text-secondary); }
.support .hotline a { color:inherit; text-decoration:none; }
.support .hotline a:hover { color:var(--brand); }
.support .ico { width:112px; height:112px; display:flex; align-items:center; justify-content:center; transition:transform .25s var(--ease); }
.support .ico img { width:100%; height:100%; object-fit:contain; }
.support:hover .ico { transform:scale(1.12) rotate(-4deg); }
.support h3 { font-size:var(--fs-md); text-transform:uppercase; color:var(--brand-strong); letter-spacing:.02em; }
.support p { color:var(--text-secondary); max-width:38ch; }
.support .go { margin-top:auto; padding-top:var(--sp-4); font-size:var(--fs-sm); font-weight:700; color:var(--brand); text-decoration:none; }
.support .go:hover { text-decoration:underline; }
.news-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-box); }
.news-3 .card-news { border:none; background:transparent; box-shadow:none; }
.news-3 .card-news:hover { transform:none; box-shadow:none; }
.news-3 .img-ph { aspect-ratio:16 / 9; height:auto; }
.news-3 .card-news .body { padding:var(--sp-3) 0 0; }
.news-3 .card-news h4 { font-size:var(--fs-md); line-height:1.45; color:var(--brand-strong); }
.news-3 .more { font-size:var(--fs-sm); font-style:italic; color:var(--text-link); text-decoration:none; margin-top:var(--sp-2); }
.news-3 .more:hover { text-decoration:underline; }
.svc-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-box); }
.svc-2>:nth-child(2) { margin-top:var(--sp-8); }
.svc__media { aspect-ratio:21 / 8; }
.svc h3 { font-size:var(--fs-lg); text-transform:uppercase; color:var(--brand-strong); margin:var(--sp-5) 0 var(--sp-4); }
@media (max-width:1024px) {
  .section { padding:var(--sp-8) 0; }
  .news-3 { grid-template-columns:repeat(2,1fr); }
  .svc-2>:nth-child(2) { margin-top:0; }
}
@media (max-width:760px) {
  .support p { max-width:46ch; }
  .svc-2 { grid-template-columns:1fr; }
  .sec-title { margin-bottom:var(--sp-6); }
  .sec-title h2 { font-size:var(--fs-xl); }
}
@media (max-width:640px) {
  .section { padding:var(--sp-7) 0; }
  .support-3 { grid-template-columns:1fr; }
  .news-3 { grid-template-columns:1fr; }
}
.section--wave-cut { position:relative; isolation:isolate; }
.section--wave-cut>.container { position:relative; z-index:1; }
.wave-cutoff { position:absolute; left:0; right:0; top:calc(38% - 65px); bottom:0; z-index:0; display:flex; flex-direction:column; pointer-events:none; }
.wave-cutoff svg, .wave-cutoff span.icon { display:block; width:100%; aspect-ratio:2039/367.92; max-height:220px; flex:none; }
.wave-cutoff path { fill:var(--bg-surface); }
.wave-cutoff__fill { flex:1 1 auto; background:var(--bg-surface); margin-top:-1px; }
@media (max-width:640px) {
  .wave-cutoff { top:calc(30% - 65px); }
}

/* ===== screen/gioi-thieu.css ===== */
.about-page { display:grid;gap:var(--gap-box) }
.about-page .nw-wrap { min-width:0 }
.about-page .nw-section, .about-page .nw-hero { padding:var(--sp-6);margin:0;scroll-margin-top:110px }
.about-page h2 { font-size:var(--fs-xl);line-height:1.35;color:var(--c-primary-900);margin:0 0 var(--sp-5) }
.about-page h3 { font-size:var(--fs-lg);line-height:1.45;color:var(--c-primary-700);margin:0 0 var(--sp-3) }
.about-page p { margin:0 0 var(--sp-4) }
.about-page p:last-child { margin-bottom:0 }
.about-page .nw-eyebrow, .about-page .nw-num, .about-page .nw-time { display:block;font-size:var(--fs-sm);font-weight:700;color:var(--c-accent-700);letter-spacing:.04em;margin:0 0 var(--sp-3) }
.about-page .nw-hero { background:linear-gradient(125deg,var(--c-primary-900),var(--c-primary-700));color:var(--text-on-brand) }
.about-page .nw-hero h2 { color:var(--text-on-brand);font-size:var(--fs-2xl) }
.about-page .nw-hero .nw-eyebrow { color:var(--c-accent-100) }
.about-page .nw-hero-grid { display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:var(--gap-box) }
.about-page figure { margin:0;min-width:0 }
.about-page img { display:block;width:100%;height:auto;border-radius:var(--radius-md) }
.about-page figcaption { font-size:var(--fs-xs);line-height:1.6;margin-top:var(--sp-2);color:var(--text-secondary) }
.about-page .nw-hero figcaption { color:var(--c-primary-100) }
.about-page .nw-stats, .about-page .nw-facts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-box);margin-top:var(--gap-box) }
.about-page .nw-stat { border-top:1px solid var(--c-primary-400);padding-top:var(--sp-4) }
.about-page .nw-stat strong, .about-page .nw-facts strong { display:block;font-family:var(--font-numeric);font-variant-numeric:tabular-nums;font-size:var(--fs-xl);line-height:1.3;font-weight:700 }
.about-page .nw-stat span, .about-page .nw-facts span { display:block;font-size:var(--fs-sm);margin-top:var(--sp-2) }
.about-page .nw-cols { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:var(--gap-box) }
.about-page .nw-history-timeline { border-left:2px solid var(--c-primary-100);padding-left:var(--sp-5) }
.about-page .nw-history-timeline>div { position:relative;padding-bottom:var(--gap-box) }
.about-page .nw-history-timeline>div:last-child { padding-bottom:0 }
.about-page .nw-history-timeline>div>span[aria-hidden] { position:absolute;left:calc(-1 * var(--sp-5) - 6px);top:5px;width:10px;height:10px;border-radius:50%;background:var(--c-accent-700) }
.about-page .nw-networks, .about-page .nw-highlight { background:var(--c-primary-50);border-left:3px solid var(--c-primary-600);padding:var(--sp-5);border-radius:var(--radius-sm);margin:var(--gap-box) 0 }
.about-page .nw-highlight strong, .about-page .nw-highlight span { display:block }
.about-page .nw-highlight strong { color:var(--c-primary-900);margin-bottom:var(--sp-2) }
.about-page .nw-facts>div { border-top:3px solid var(--c-accent-700);padding-top:var(--sp-4) }
.about-page .nw-facts strong { color:var(--c-primary-700) }
.about-page .nw-note { font-size:var(--fs-xs);color:var(--text-secondary);margin-top:var(--sp-4) }
.about-page .nw-quality { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--gap-box) }
.about-page .nw-org { list-style:none;padding:0;margin:var(--gap-box) 0 }
.about-page .nw-org li { padding:var(--sp-4) 0;border-top:1px solid var(--border-default) }
.about-page .nw-org strong, .about-page .nw-org span { display:block }
.about-page .nw-org strong { color:var(--c-primary-700);margin-bottom:var(--sp-2) }
.about-page .nw-future-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-box);margin-top:var(--gap-box) }
.about-page .nw-future-grid>div { border-top:1px solid var(--border-default);padding-top:var(--sp-5) }
@media(max-width:1024px) {
  .about-page .nw-hero-grid { grid-template-columns:1fr 1fr }
  .about-page .nw-hero h2 { font-size:var(--fs-xl) }
}
@media(max-width:760px) {
  .about-page .nw-hero-grid, .about-page .nw-cols, .about-page .nw-quality { grid-template-columns:1fr }
  .about-page .nw-stats, .about-page .nw-facts { grid-template-columns:1fr }
  .about-page .nw-facts>div { padding-top:var(--sp-3) }
  .about-page .nw-quality figure { order:2 }
}
@media(max-width:640px) {
  .about-page .nw-section, .about-page .nw-hero { padding:var(--sp-5) }
  .about-page .nw-future-grid { grid-template-columns:1fr }
  .about-page h2 { font-size:var(--fs-lg) }
}
.about-page .nw-overview-model { margin:0;min-width:0 }
.about-page .nw-overview-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-box);align-items:start }
@media(max-width:760px) {
  .about-page .nw-overview-grid { grid-template-columns:1fr }
}
.about-page .nw-people-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-box);align-items:start }
.about-page .nw-people-photos { position:relative;min-width:0;padding-bottom:24% }
.about-page .nw-people-photo-main { width:82%;margin-left:auto;border:6px solid var(--bg-surface,white);border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(0,58,92,.12);overflow:hidden }
.about-page .nw-people-photo-inset { position:absolute;left:0;bottom:0;width:60%;border:6px solid var(--bg-surface,white);border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(0,58,92,.14);overflow:hidden }
.about-page .nw-people-photos img { border-radius:var(--radius-md);height:auto;width:100% }
@media(max-width:760px) {
  .about-page .nw-people-grid { grid-template-columns:1fr }
}

/* ===== screen/gia-nuoc.css ===== */
.price-content>p { margin:var(--sp-4) 0 }
.price-content>h2 { margin-bottom:var(--gap-box) }
.price-content .price-pdf { display:block;width:100%;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-page) }
@media(max-width:760px) {
  .price-content .price-pdf { height:480px }
}