/* Thinking Skills Practice: hệ thiết kế dùng chung cho trang chủ + 4 trang nội dung.
   Design read: phụ huynh di dân ở Úc, cần tin cậy, bình tĩnh, kiểu sách vở trường học. Dials 4/3/4.
   Phông tự lưu trữ (Google Fonts tải về): Lexend tiêu đề, Noto Sans thân bài (có dấu tiếng Việt, có nghiêng).
   Chữ Trung/Hàn (6-10 MB mỗi phông) tải từ Google chỉ khi trang cần, ghi ở từng trang. */
@font-face{font-family:"Lexend";font-weight:400;font-display:swap;src:url(/fonts/Lexend-Regular.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:600;font-display:swap;src:url(/fonts/Lexend-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:700;font-display:swap;src:url(/fonts/Lexend-Bold.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:400;font-display:swap;src:url(/fonts/NotoSans-Regular.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:700;font-display:swap;src:url(/fonts/NotoSans-Bold.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/NotoSans-Italic.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Thai";font-weight:400;font-display:swap;src:url(/fonts/NotoSansThai-Regular.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Thai";font-weight:700;font-display:swap;src:url(/fonts/NotoSansThai-Bold.woff2) format("woff2")}

:root{
  --paper:#F6F8FC; --card:#FFFFFF; --ink:#14244F; --muted:#56628A; --line:#D8DFEE;
  --red:#BE1E2D; --on-red:#FFFFFF; --blue:#1B3F8F; --blue-soft:#E4ECFA; --hl:#FFF1B8; --hl-edge:#D9A400;
  --display:"Lexend","Noto Sans SC","Noto Sans KR","Noto Sans Thai",system-ui,sans-serif;
  --read:"Noto Sans","Noto Sans SC","Noto Sans KR","Noto Sans Thai","Segoe UI",Arial,sans-serif;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --s1:14px; --s2:16px; --s3:18px; --s4:22px; --s5:32px; --s6:44px; --s7:60px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0D1430; --card:#152049; --ink:#EEF2FB; --muted:#AAB5D8; --line:#2A3768;
  --red:#FF6B78; --on-red:#1A0A0D; --blue:#8FB0FF; --blue-soft:#1F2D63; --hl:#3A3410; --hl-edge:#E8C547; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--s2)/1.6 var(--read);touch-action:manipulation}
img{max-width:100%;height:auto}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(var(--s5),5.2vw,var(--s7));line-height:1.08;font-weight:700}
h2{font-size:clamp(var(--s4),3.2vw,var(--s5));line-height:1.2;font-weight:700}
h3{font-size:var(--s3);line-height:1.35;font-weight:600}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.measure{max-width:62ch}
:focus-visible{outline:3px solid var(--hl-edge);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--card);padding:8px 12px;border-radius:var(--r-sm)}
.skip:focus{left:16px;top:16px;z-index:10}

/* nav: một hàng, cao 72px */
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font:700 var(--s3) var(--display);color:var(--red);text-decoration:none;white-space:nowrap}
.nav-links{display:flex;gap:22px;align-items:center;font:600 var(--s1) var(--display);flex-shrink:0}
.nav-links a{color:var(--ink);text-decoration:none;white-space:nowrap;flex-shrink:0}
.nav-links a:hover{color:var(--blue)}
.nav-links a.btn,.nav-links a.btn:hover{color:var(--on-red)}
@media (max-width:800px){.nav-links .nl{display:none}}

/* nút: một kiểu chính (đỏ), một kiểu phụ (viền) */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 var(--s2) var(--display);padding:13px 22px;border-radius:var(--r-md);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform .12s ease}
.btn:active{transform:scale(.97)}
.btn,.btn-red{background:var(--red);color:var(--on-red)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--blue)}
.fine{font-size:var(--s1);color:var(--muted)}

/* 4 trang nội dung: header .top (cùng dáng .nav), bài viết trong main */
.top{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top nav{display:flex;gap:20px;align-items:center;font:600 var(--s1) var(--display);flex-wrap:wrap}
.top nav a{color:var(--ink);text-decoration:none;white-space:nowrap}
.top nav a[aria-current="page"]{color:var(--blue);border-bottom:2px solid var(--blue);padding-bottom:2px}
main.prose,.wrap>main{padding-block:28px 56px;display:grid;gap:18px}
.lead{font-size:var(--s3);color:var(--muted);max-width:60ch;line-height:1.55}
.note{background:var(--blue-soft);border-radius:var(--r-md);padding:14px 16px;max-width:66ch}
.note p{max-width:none}
.table-scroll{overflow-x:auto}
.cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px}
main h2{margin-top:18px}
main p,main li{max-width:66ch;line-height:1.7}
main ul,main ol{margin:0;padding-left:22px;display:grid;gap:8px}
main table{border-collapse:collapse;width:100%;max-width:680px;font-size:var(--s1)}
main th,main td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
main th{font-family:var(--display);font-weight:600;color:var(--blue)}

/* khối nội dung trang bài viết (4 trang SEO) */
.prose{padding-block:28px 56px;display:grid;gap:18px}
.prose h1{margin-bottom:6px}
.prose h2{margin-top:22px}
.prose p,.prose li{max-width:66ch;line-height:1.7}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:6px}
.prose table{border-collapse:collapse;width:100%;max-width:640px;font-size:var(--s1)}
.prose th,.prose td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--display);font-weight:600;color:var(--blue)}
.prose .cta{margin-top:10px}
.meta{font:600 var(--s1) var(--display);color:var(--muted)}
.lang-note{background:var(--blue-soft);border-radius:var(--r-md);padding:14px 16px}

footer{border-top:1px solid var(--line);margin-top:48px;padding-block:28px 40px;color:var(--muted);font-size:var(--s1);display:grid;gap:8px}
footer nav{display:flex;flex-wrap:wrap;gap:16px}
footer a{color:inherit}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}