/* Bố cục và bảng màu gốc v2 nằm trong site.css. Chỉ bổ sung các yêu cầu đã chốt. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,500;1,8..60,500&display=swap');
:root{--serif:'Source Serif 4',Georgia,serif;--sans:'Be Vietnam Pro',-apple-system,sans-serif}
.header .brand{flex-shrink:0;gap:10px}
.brand-cloud{display:block;width:100px;height:42px;flex:0 0 100px;background:#98603c;mask-image:url('/assets/cloud-scroll-mask.png');mask-mode:luminance;mask-size:contain;mask-repeat:no-repeat;mask-position:center;pointer-events:none}
/* Không đặt họa tiết lên ảnh. */
.hero-art::after{content:none}
.motto{font-style:italic}.motto-line{white-space:nowrap}
.hero h1.motto{font-size:clamp(28px,3.25vw,46px);line-height:1.35;letter-spacing:-.035em}
.hero h1.motto em{color:#598080;font-weight:500}
.footer .motto{color:#e3e8df}.footer .motto em{color:#d5aa78}
.values-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.values-grid article{padding:22px;border:1px solid #bccbbb;min-width:0}
.value-number{font-size:11px;color:#7c8e7d}
.values-grid h3{font:23px/1.4 var(--serif);margin:20px 0 14px}
.values-grid p{font-size:13px;line-height:1.85;color:var(--muted);margin:0}
.about-quote{text-align:center;padding-block:48px 56px;max-width:780px}
.about-quote p{font:24px/1.7 var(--serif);margin:0}.about-quote strong{color:var(--accent)}
.quote-mark{display:block;color:var(--accent);font:70px/1 var(--serif)}
@media(max-width:1050px){.header nav{gap:16px}.values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.header .brand{gap:8px}.brand-cloud{width:76px;height:32px;flex-basis:76px}.hero h1.motto{font-size:clamp(26px,6.9vw,46px)}.values-grid article{padding:18px}.values-grid h3{font-size:21px}.about-quote p{font-size:21px}}
@media(max-width:420px){.values-grid{grid-template-columns:1fr}}

/* Phân cấp rõ tiêu đề và liên kết ở chân trang. */
.footer .brand{font-size:36px;color:#fff}
.footer h2{font-family:var(--sans);font-size:20px;font-weight:600;line-height:1.4;color:#f1d6a3;margin-bottom:20px}
.footer a:not(.brand){font-size:13px;line-height:1.8;color:#d3e0d9}
.footer a:not(.brand):hover,.footer a:not(.brand):focus-visible{color:#fff;text-decoration:underline}
.footer-bottom{color:#bdcfc6}

/* Ba màu luân phiên, giữ màu khi rê chuột. */
.topic-grid>a:nth-child(3n+1){background:#eee4d1;color:#202420;border-color:#d4c7ae}
.topic-grid>a:nth-child(3n+2){background:#214e42;color:#fff;border-color:#214e42}
.topic-grid>a:nth-child(3n){background:#896619;color:#fff;border-color:#896619}
.topic-grid>a .topic-number{color:inherit;opacity:.85}
.topic-grid>a h2,.topic-grid>a h3{color:inherit}
.topic-grid>a:hover{box-shadow:0 4px 12px #193f4018}
.topic-grid>a:focus-visible{outline:3px solid #193f40;outline-offset:4px}

.privacy-page .page-intro{padding-bottom:26px;border-bottom:1px solid var(--line)}
.privacy-page .page-intro h1{font-size:clamp(28px,3.5vw,42px)}
.privacy-page .page-intro p{font-size:13px}
.privacy-page .info{padding-top:32px;font-size:14px;line-height:1.85}
.privacy-page .info>div>div{margin-bottom:32px}
.privacy-page .info h2{font-family:var(--serif);font-size:23px;line-height:1.4;margin:0 0 12px;color:var(--ink)}
.privacy-page .info p{margin-bottom:12px}
.privacy-page .info ul{padding-left:22px;margin:0 0 12px}
.privacy-page .info li{margin-bottom:6px}
.privacy-page .info strong{font-weight:600}
.privacy-page .info>div>p:last-child{font-size:12px;margin-top:28px;color:var(--muted)}
@media(max-width:760px){.footer h2{font-size:18px;margin-bottom:14px}.footer .brand{font-size:32px}}