@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@500;600&family=Be+Vietnam+Pro:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
/* Aroma UI v1.4.0 — tokens + thành phần. Nguồn: Design System "Aroma UI". Không sửa tay: sửa trong Design System rồi xuất lại. */
:root,[data-theme="light"]{--canvas:#F4F6F9;--surface:#FFFFFF;--surface-sunken:#EDF1F5;--line:#DCE2EA;--line-strong:#76839A;--ink:#111B2B;--ink-muted:#536177;--primary:#1B4F93;--primary-hover:#143D73;--primary-soft:#E5EEF9;--on-primary:#FFFFFF;--brand:#F47A20;--brand-soft:#FEEDE0;--brand-ink:#A3470A;--on-brand:#1B1208;--success:#0E6F78;--success-soft:#E0F2F3;--warning:#855600;--warning-soft:#FBF0D4;--danger:#B5321A;--danger-soft:#FBE6E1;--on-danger:#FFFFFF;--info:var(--primary);--info-soft:var(--primary-soft);--focus:#2563D9;--shadow-raise:0 1px 2px rgba(17,27,43,0.06), 0 4px 12px rgba(17,27,43,0.06);--shadow-pop:0 8px 28px rgba(17,27,43,0.16);color-scheme:light}
[data-theme="dark"]{--canvas:#0C121B;--surface:#131B26;--surface-sunken:#090E15;--line:#243042;--line-strong:#66758C;--ink:#E6ECF4;--ink-muted:#A0AEC2;--primary:#8DB8F5;--primary-hover:#B1CFF8;--primary-soft:#14263F;--on-primary:#0B1524;--brand:#F58A3D;--brand-soft:#3A2312;--brand-ink:#FFAD6B;--on-brand:#1B1208;--success:#5CCFD6;--success-soft:#0F2F33;--warning:#F2C46B;--warning-soft:#3A2E12;--danger:#FF9B7D;--danger-soft:#3F1D14;--on-danger:#22101A;--info:var(--primary);--info-soft:var(--primary-soft);--focus:#8CB4F8;--shadow-raise:0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);--shadow-pop:0 8px 28px rgba(0,0,0,0.5);color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--canvas:#0C121B;--surface:#131B26;--surface-sunken:#090E15;--line:#243042;--line-strong:#66758C;--ink:#E6ECF4;--ink-muted:#A0AEC2;--primary:#8DB8F5;--primary-hover:#B1CFF8;--primary-soft:#14263F;--on-primary:#0B1524;--brand:#F58A3D;--brand-soft:#3A2312;--brand-ink:#FFAD6B;--on-brand:#1B1208;--success:#5CCFD6;--success-soft:#0F2F33;--warning:#F2C46B;--warning-soft:#3A2E12;--danger:#FF9B7D;--danger-soft:#3F1D14;--on-danger:#22101A;--info:var(--primary);--info-soft:var(--primary-soft);--focus:#8CB4F8;--shadow-raise:0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);--shadow-pop:0 8px 28px rgba(0,0,0,0.5);color-scheme:dark}}
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;--w-text:46rem;--w-page:72rem;--h-control:40px;--h-control-sm:32px;--h-topbar:60px;--font-display:"Lexend", "Be Vietnam Pro", system-ui, sans-serif;--font-sans:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace}
.t-display{font-family:var(--font-display);font-size:40px;line-height:48px;font-weight:600;letter-spacing:-0.02em}
.t-h1{font-family:var(--font-display);font-size:30px;line-height:38px;font-weight:600;letter-spacing:-0.015em}
.t-h2{font-family:var(--font-display);font-size:22px;line-height:30px;font-weight:600;letter-spacing:-0.01em}
.t-stat{font-family:var(--font-display);font-size:30px;line-height:36px;font-weight:500}
.t-h3{font-family:var(--font-sans);font-size:17px;line-height:26px;font-weight:600}
.t-lead{font-family:var(--font-sans);font-size:18px;line-height:30px;font-weight:400}
.t-body{font-family:var(--font-sans);font-size:16px;line-height:26px;font-weight:400}
.t-body-sm{font-family:var(--font-sans);font-size:14px;line-height:22px;font-weight:400}
.t-label{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.06em}
.t-caption{font-family:var(--font-sans);font-size:12px;line-height:18px;font-weight:500}
.t-code{font-family:var(--font-mono);font-size:13px;line-height:20px;font-weight:400}
/* Aroma UI — thành phần CSS. Đọc sau tokens.css. Mọi class bắt đầu bằng ar-. Mọi màu, khoảng cách, bo góc lấy từ token. */

/* ---------- Nền ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:26px;background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--font-display);font-weight:600;text-wrap:balance}
h1{font-size:30px;line-height:38px;letter-spacing:-0.015em}
h2{font-size:22px;line-height:30px;letter-spacing:-0.01em}
h3{font-size:17px;line-height:26px;font-weight:600;text-wrap:balance}
a{color:var(--primary);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--primary-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
code{font-family:var(--font-mono);font-size:.84em;background:var(--surface-sunken);border:1px solid var(--line);padding:1px 6px;border-radius:var(--radius-sm);overflow-wrap:anywhere}
.ar-num{font-variant-numeric:tabular-nums}
.ar-muted{color:var(--ink-muted)}
.ar-small{font-size:14px;line-height:22px}
.ar-label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.ar-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Bố cục ---------- */
.ar-page{max-width:var(--w-page);margin:0 auto;padding-inline:var(--space-4);padding-block:var(--space-8) var(--space-16)}
.ar-page--text{max-width:calc(var(--w-text) + 2 * var(--space-6))}
@media (min-width:720px){.ar-page{padding-inline:var(--space-6)}}
.ar-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.ar-stack--sm{gap:var(--space-2)}
.ar-stack--lg{gap:var(--space-6)}
.ar-stack--xl{gap:var(--space-12)}
.ar-stack>*{min-width:0}
.ar-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.ar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--space-4)}
.ar-grid>*{min-width:0}
.ar-prose{max-width:var(--w-text)}
.ar-list{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--space-2)}
.ar-list li::marker{color:var(--ink-muted)}

/* ---------- Shell: thanh menu và footer ---------- */
.ar-topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:inset 0 3px 0 var(--brand)}
.ar-topbar__in{max-width:var(--w-page);margin:0 auto;padding-inline:var(--space-4);min-height:var(--h-topbar);display:flex;align-items:center;gap:var(--space-6)}
@media (min-width:720px){.ar-topbar__in{padding-inline:var(--space-6)}}
.ar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.ar-brand img{width:30px;height:30px;display:block;border-radius:2px}
.ar-brand__text{display:flex;flex-direction:column;line-height:1.1}
.ar-brand b{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-0.01em}
.ar-brand span{font-size:12px;line-height:16px;font-weight:500;color:var(--ink-muted)}
.ar-brand:hover{color:var(--ink)}
.ar-nav{display:flex;gap:var(--space-1);overflow-x:auto;scrollbar-width:none;min-width:0;padding-block:var(--space-2)}
.ar-nav::-webkit-scrollbar{display:none}
.ar-nav a{flex:none;text-decoration:none;color:var(--ink-muted);font-size:14px;line-height:20px;font-weight:500;padding:6px 12px;border-radius:var(--radius-pill)}
.ar-nav a:hover{color:var(--ink);background:var(--surface-sunken)}
.ar-nav a[aria-current="page"]{color:var(--brand-ink);background:var(--brand-soft);font-weight:600}
@media (max-width:719px){
  .ar-topbar__in{flex-direction:column;align-items:stretch;gap:0;padding-top:var(--space-3)}
  .ar-nav{margin-inline:calc(-1 * var(--space-2))}
}
.ar-footer{border-top:1px solid var(--line);background:var(--surface)}
.ar-footer__in{max-width:var(--w-page);margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);justify-content:space-between;font-size:14px;line-height:22px;color:var(--ink-muted)}
@media (min-width:720px){.ar-footer__in{padding-inline:var(--space-6)}}

/* ---------- Đầu trang ---------- */
.ar-pagehead{display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:var(--space-2)}
.ar-pagehead__eyebrow{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center}
.ar-pagehead h1{font-size:clamp(28px,4.4vw,40px);line-height:1.18;letter-spacing:-0.02em;max-width:22ch}
.ar-pagehead__lead{font-size:18px;line-height:30px;color:var(--ink-muted);max-width:var(--w-text)}
.ar-toc{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-2)}
.ar-toc a{font-size:14px;line-height:20px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:5px 12px;border-radius:var(--radius-pill)}
.ar-toc a:hover{border-color:var(--line-strong)}
.ar-section{display:flex;flex-direction:column;gap:var(--space-4)}
.ar-section__head{display:flex;flex-direction:column;gap:var(--space-1)}
.ar-section__head p{color:var(--ink-muted)}

/* ---------- Nút ---------- */
.ar-btn{font:inherit;font-size:15px;line-height:20px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--h-control);padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.ar-btn:hover{background:var(--surface-sunken);color:var(--ink)}
.ar-btn--primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.ar-btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)}
.ar-btn--danger{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}
.ar-btn--danger:hover{background:var(--danger);color:var(--on-danger);filter:brightness(.92)}
.ar-btn--ghost{background:transparent;border-color:transparent;color:var(--primary)}
.ar-btn--ghost:hover{background:var(--primary-soft);color:var(--primary)}
.ar-btn--sm{height:var(--h-control-sm);padding:0 var(--space-3);font-size:13px;border-radius:var(--radius-sm)}
.ar-btn[disabled],.ar-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* ---------- Ô nhập ---------- */
.ar-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ar-field__label{font-size:14px;line-height:20px;font-weight:600}
.ar-field__label small{font-weight:400;color:var(--ink-muted);font-size:13px}
.ar-input,.ar-select,.ar-textarea{font:inherit;font-size:15px;line-height:22px;width:100%;min-height:var(--h-control);padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink)}
.ar-textarea{min-height:96px;resize:vertical}
.ar-input::placeholder,.ar-textarea::placeholder{color:var(--ink-muted)}
.ar-input:focus-visible,.ar-select:focus-visible,.ar-textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.ar-field__help{font-size:13px;line-height:18px;color:var(--ink-muted)}
.ar-field__error{font-size:13px;line-height:18px;color:var(--danger);font-weight:500}
.ar-field.is-invalid .ar-input,.ar-field.is-invalid .ar-select,.ar-field.is-invalid .ar-textarea{border-color:var(--danger)}
.ar-check{display:flex;gap:var(--space-2);align-items:flex-start;font-size:15px;line-height:22px;cursor:pointer}
.ar-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--primary);flex:none}

/* ---------- Tab ---------- */
.ar-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ar-tabs button{font:inherit;font-size:15px;line-height:20px;font-weight:500;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px;color:var(--ink-muted);cursor:pointer;white-space:nowrap}
.ar-tabs button:hover{color:var(--ink)}
.ar-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}
.ar-tabpanel{padding-top:var(--space-4)}

/* ---------- Chip lọc ---------- */
.ar-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.ar-chips__label{font-size:14px;color:var(--ink-muted);margin-right:var(--space-1)}
.ar-chip{font:inherit;font-size:14px;line-height:20px;font-weight:500;height:var(--h-control-sm);padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer}
.ar-chip:hover{background:var(--surface-sunken)}
.ar-chip[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:600}
.ar-chip__count{font-variant-numeric:tabular-nums;color:var(--ink-muted);margin-left:4px;font-weight:500}
.ar-chip[aria-pressed="true"] .ar-chip__count{color:var(--primary)}

/* ---------- Badge ---------- */
.ar-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:18px;font-weight:500;padding:1px 8px;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--ink-muted);border:1px solid var(--line);white-space:nowrap}
.ar-badge--brand{background:var(--brand-soft);color:var(--brand-ink);border-color:transparent}
.ar-badge--success{background:var(--success-soft);color:var(--success);border-color:transparent}
.ar-badge--warning{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.ar-badge--danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.ar-badge--info{background:var(--info-soft);color:var(--info);border-color:transparent}

/* ---------- Thẻ ---------- */
.ar-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.ar-card__eyebrow{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink)}
.ar-card__foot{margin-top:auto;padding-top:var(--space-2);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
a.ar-card{text-decoration:none;color:var(--ink)}
a.ar-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-raise);color:var(--ink)}
a.ar-card .ar-card__more{color:var(--primary);font-weight:600;font-size:15px}
.ar-card--sunken{background:var(--surface-sunken);border-color:transparent}

/* ---------- Khung thông báo ---------- */
.ar-callout{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);align-items:start;padding:var(--space-4);border-radius:var(--radius-md);background:var(--info-soft);color:var(--ink);font-size:15px;line-height:24px}
.ar-callout__tag{grid-row:span 2;font-size:12px;line-height:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-sm);background:var(--surface);color:var(--info);margin-top:2px;white-space:nowrap}
.ar-callout__title{font-weight:600}
.ar-callout>:not(.ar-callout__tag){grid-column:2;min-width:0}
.ar-callout .ar-list{margin-top:var(--space-1)}
.ar-callout--warning{background:var(--warning-soft)}
.ar-callout--warning .ar-callout__tag{color:var(--warning)}
.ar-callout--danger{background:var(--danger-soft)}
.ar-callout--danger .ar-callout__tag{color:var(--danger)}
.ar-callout--success{background:var(--success-soft)}
.ar-callout--success .ar-callout__tag{color:var(--success)}
@media (max-width:479px){.ar-callout{grid-template-columns:1fr}.ar-callout__tag{grid-row:auto;justify-self:start}.ar-callout>:not(.ar-callout__tag){grid-column:1}}

/* ---------- Các bước ---------- */
.ar-steps{list-style:none;margin:0;padding:0;counter-reset:ar-step;display:flex;flex-direction:column}
.ar-steps>li{counter-increment:ar-step;position:relative;display:grid;grid-template-columns:32px 1fr;gap:var(--space-4);padding-bottom:var(--space-6)}
.ar-steps>li:last-child{padding-bottom:0}
.ar-steps>li::before{content:counter(ar-step);width:32px;height:32px;border-radius:var(--radius-pill);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:14px;background:var(--brand);color:var(--on-brand);font-variant-numeric:tabular-nums}
.ar-steps>li::after{content:"";position:absolute;left:15.5px;top:40px;bottom:8px;width:1px;background:var(--line)}
.ar-steps>li:last-child::after{display:none}
.ar-steps__body{min-width:0;display:flex;flex-direction:column;gap:var(--space-2);padding-top:4px}
.ar-screen{border:1px dashed var(--line-strong);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:14px;line-height:22px;background:var(--surface)}

/* ---------- Câu mẫu ---------- */
.ar-prompt{background:var(--surface-sunken);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:start}
.ar-prompt__text{margin:0;font-family:var(--font-sans);font-size:15px;line-height:24px;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;color:var(--ink)}
.ar-prompt__text.is-code{font-family:var(--font-mono);font-size:13px;line-height:20px}
.ar-slot{background:var(--brand-soft);color:var(--brand-ink);border-radius:4px;padding:0 3px;font-weight:500}
.ar-prompt .ar-btn--sm{background:var(--surface)}

/* ---------- Thẻ tình huống ---------- */
.ar-scenario{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.ar-scenario__head{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:flex-start;justify-content:space-between}
.ar-scenario__head h3{flex:1 1 18rem}
.ar-scenario__tags{display:flex;flex-wrap:wrap;gap:var(--space-1);padding-top:3px}
.ar-scenario__ctx{color:var(--ink)}
.ar-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:13px;line-height:20px;color:var(--ink-muted)}
.ar-flow__label{font-weight:600;color:var(--ink);margin-right:var(--space-2)}
.ar-flow li:not(.ar-flow__label){background:var(--surface-sunken);border-radius:var(--radius-sm);padding:1px 8px;color:var(--ink)}
.ar-flow li:not(.ar-flow__label)+li{margin-left:22px;position:relative}
.ar-flow li:not(.ar-flow__label)+li::before{content:"";position:absolute;left:-17px;top:50%;width:12px;height:1px;background:var(--line-strong)}
.ar-scenario__note{font-size:14px;line-height:22px;color:var(--ink-muted);border-top:1px solid var(--line);padding-top:var(--space-3)}
.ar-scenario__note b{color:var(--ink)}

/* ---------- Bảng dữ liệu ---------- */
.ar-tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.ar-table{border-collapse:collapse;width:100%;font-size:14px;line-height:22px;min-width:34rem}
.ar-table th{text-align:left;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);background:var(--surface-sunken);padding:10px var(--space-4);border-bottom:1px solid var(--line);white-space:nowrap}
.ar-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);vertical-align:top}
.ar-table tbody tr:last-child td{border-bottom:0}
.ar-table tbody tr:hover td{background:var(--canvas)}
.ar-table .is-num{text-align:right;font-variant-numeric:tabular-nums}
.ar-table th button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.ar-table th button::after{content:"↕";font-size:11px;opacity:.5}
.ar-table th[aria-sort="ascending"] button::after{content:"↑";opacity:1}
.ar-table th[aria-sort="descending"] button::after{content:"↓";opacity:1}
.ar-table th[aria-sort] {color:var(--ink)}
.ar-tablefoot{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:space-between;padding-top:var(--space-3);font-size:14px;color:var(--ink-muted)}

/* ---------- Ô chỉ số ---------- */
.ar-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.ar-stat__value{font-family:var(--font-display);font-size:30px;line-height:36px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.ar-stat__meta{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:13px;line-height:18px;color:var(--ink-muted)}

/* ---------- Trạng thái trống, đang tải ---------- */
.ar-empty{border:1px dashed var(--line-strong);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-5);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2)}
.ar-empty__title{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:24px}
.ar-empty p{color:var(--ink-muted);max-width:34rem}
.ar-empty .ar-btn{margin-top:var(--space-2)}
.ar-skeleton{display:block;height:14px;border-radius:var(--radius-sm);background:var(--surface-sunken)}
.ar-skeleton--title{height:22px;width:40%}
.ar-skeleton--line{width:100%}
.ar-skeleton--short{width:60%}
@media (prefers-reduced-motion: no-preference){
  .ar-skeleton{background:linear-gradient(90deg,var(--surface-sunken) 0%,var(--line) 50%,var(--surface-sunken) 100%);background-size:200% 100%;animation:ar-shimmer 1.4s ease-in-out infinite}
  @keyframes ar-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
  .ar-btn,.ar-chip,.ar-nav a,a.ar-card{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
}

/* ---------- Khung xác nhận ---------- */
.ar-confirm{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.ar-confirm__head{background:var(--warning-soft);padding:var(--space-3) var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center}
.ar-confirm__head strong{font-weight:600}
.ar-confirm__body{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.ar-confirm__foot{padding:var(--space-3) var(--space-5) var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}
.ar-confirm--danger .ar-confirm__head{background:var(--danger-soft)}
.ar-diff{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);font-size:14px;line-height:22px;margin:0}
.ar-diff dt{color:var(--ink-muted)}
.ar-diff dd{margin:0;min-width:0}
.ar-diff del{color:var(--danger);text-decoration-thickness:1px}
.ar-diff ins{color:var(--success);text-decoration:none;font-weight:600}

/* ---------- Thông báo nổi ---------- */
.ar-toast{position:fixed;left:50%;bottom:calc(var(--space-6) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--canvas);font-size:14px;line-height:20px;font-weight:500;padding:10px 16px;border-radius:var(--radius-md);box-shadow:var(--shadow-pop);z-index:50;max-width:calc(100% - 2 * var(--space-4))}

/* ---------- AppShell: menu dọc bên trái + vùng nội dung ---------- */
:root{--ar-side-w:272px;--ar-secnav-h:52px;--ar-mobilebar-h:56px;--ar-sticky-offset:calc(var(--ar-secnav-h) + var(--space-4))}
.ar-app{min-height:100vh}
.ar-icon{width:18px;height:18px;flex:none;display:block}
.ar-side{background:var(--surface);border-right:1px solid var(--line);box-shadow:inset 0 3px 0 var(--brand);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) var(--space-3) var(--space-3)}
.ar-side__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.ar-side__brand{display:flex;align-items:center;gap:10px;padding:0 var(--space-2);text-decoration:none;color:var(--ink);min-width:0}
.ar-side__brand img{width:32px;height:32px;display:block;border-radius:2px;flex:none}
.ar-side__brand b{display:block;font-family:var(--font-display);font-weight:600;font-size:16px;line-height:20px}
.ar-side__brand span{display:block;font-size:12px;line-height:16px;color:var(--ink-muted)}
.ar-side__brand:hover{color:var(--ink)}
.ar-side .ar-side__close{display:none}
.ar-side__tools{display:flex;gap:6px;align-items:center}
.ar-search{position:relative;flex:1;min-width:0}
.ar-search input{font:inherit;font-size:14px;line-height:20px;width:100%;height:36px;padding:0 30px 0 34px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink)}
.ar-search input::placeholder{color:var(--ink-muted)}
.ar-search input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.ar-search .ar-icon{position:absolute;left:10px;top:9px;color:var(--ink-muted);pointer-events:none;width:16px;height:16px}
.ar-search kbd{position:absolute;right:8px;top:8px;font-family:var(--font-mono);font-size:11px;line-height:18px;padding:0 5px;border:1px solid var(--line);border-radius:4px;color:var(--ink-muted);background:var(--surface-sunken)}
.ar-search input:not(:placeholder-shown)~kbd,.ar-search input:focus~kbd{display:none}
.ar-iconbtn{font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-width:36px;padding:0 9px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);cursor:pointer;font-size:14px;font-weight:600;flex:none}
.ar-iconbtn:hover{background:var(--surface-sunken)}
.ar-iconbtn[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.ar-side__nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;flex:1;padding-bottom:var(--space-2);margin:0 calc(-1 * var(--space-1));padding-inline:var(--space-1)}
.ar-side__status{font-size:12px;line-height:18px;color:var(--ink-muted);padding:2px var(--space-3) 4px}
.ar-side__group{display:flex;flex-direction:column;gap:1px}
.ar-side__group+.ar-side__group{margin-top:2px}
.ar-side__head-row,.ar-side__label{font:inherit;display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;cursor:pointer;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);padding:8px var(--space-3);border-radius:var(--radius-md);text-decoration:none}
.ar-side__label:hover,.ar-side__head-row:hover{background:var(--surface-sunken);color:var(--ink)}
.ar-side__label .ar-icon,.ar-side__head-row .ar-icon{color:var(--ink-muted)}
.ar-side__head-row[aria-current="page"]{background:var(--brand-soft);color:var(--brand-ink)}
.ar-side__head-row[aria-current="page"] .ar-icon{color:var(--brand-ink)}
.ar-side__label-text{flex:1;min-width:0}
.ar-side__count{font-variant-numeric:tabular-nums;letter-spacing:0;font-weight:600;font-size:12px;min-width:22px;text-align:center;padding:0 6px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--ink-muted);line-height:20px}
.ar-side__chev{width:14px;height:14px;flex:none;color:var(--ink-muted);transition:transform .15s}
.ar-side__label[aria-expanded="false"] .ar-side__chev{transform:rotate(-90deg)}
.ar-side__label.has-current{color:var(--brand-ink)}
.ar-side__label.has-current .ar-icon{color:var(--brand-ink)}
.ar-side__label.is-fav .ar-icon{color:var(--brand)}
.ar-side__items{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px}
.ar-side__items[hidden]{display:none}
.ar-side__item{position:relative;display:flex;align-items:center;border-radius:var(--radius-md)}
.ar-side__item:hover{background:var(--surface-sunken)}
.ar-side__link{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--ink);font-size:15px;line-height:22px;font-weight:500;padding:6px 4px 6px 40px;border-radius:var(--radius-md)}
.ar-side__link span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-side__link:hover{color:var(--ink)}
.ar-side__item.is-current{background:var(--brand-soft)}
.ar-side__item.is-current .ar-side__link{color:var(--brand-ink);font-weight:600}
.ar-side__tag{font-size:11px;line-height:16px;font-weight:600;padding:0 6px;border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--primary);flex:none}
.ar-side__link mark{background:var(--brand-soft);color:var(--brand-ink);border-radius:3px;padding:0 1px}
.ar-star{font:inherit;display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border:0;background:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink-muted)}
.ar-star svg{width:16px;height:16px}
.ar-star:hover{background:var(--surface);color:var(--ink)}
.ar-star[aria-pressed="true"]{color:var(--brand)}
.ar-star[aria-pressed="true"] svg{fill:currentColor}
.ar-side__item .ar-star{opacity:0;margin-right:2px}
.ar-side__item:hover .ar-star,.ar-side__item .ar-star:focus-visible,.ar-side__item .ar-star[aria-pressed="true"]{opacity:1}
@media (hover:none){.ar-side__item .ar-star{opacity:1}}
.ar-side__empty{font-size:13px;line-height:20px;color:var(--ink-muted);padding:4px var(--space-3) 8px 40px}
.ar-side__foot{border-top:1px solid var(--line);padding:var(--space-3) var(--space-3) 0;font-size:12px;line-height:18px;color:var(--ink-muted)}
.ar-mobilebar{display:none}
.ar-backdrop{display:none}
@media (min-width:960px){
  .ar-app{display:grid;grid-template-columns:var(--ar-side-w) minmax(0,1fr)}
  .ar-side{position:sticky;top:0;height:100vh}
  .ar-main{min-width:0}
}
@media (max-width:959px){
  :root{--ar-sticky-offset:calc(var(--ar-mobilebar-h) + var(--ar-secnav-h) + var(--space-4))}
  .ar-mobilebar{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:var(--ar-mobilebar-h);align-items:center;gap:var(--space-3);padding:0 var(--space-4);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:inset 0 3px 0 var(--brand)}
  .ar-mobilebar .ar-side__brand{padding:0}
  .ar-mobilebar .ar-side__brand img{width:28px;height:28px}
  .ar-side{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(88vw,320px);transform:translateX(-102%);visibility:hidden;padding-top:calc(var(--space-4) + env(safe-area-inset-top,0px))}
  .ar-side .ar-side__close{display:inline-flex}
  .ar-app.is-open .ar-side{transform:none;visibility:visible;box-shadow:var(--shadow-pop)}
  .ar-app.is-open .ar-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(9,14,21,.45)}
}
@media (prefers-reduced-motion: no-preference) and (max-width:959px){.ar-side{transition:transform .2s ease,visibility .2s}}
@media (prefers-reduced-motion: reduce){.ar-side__chev{transition:none}}

/* ---------- SectionNav: thanh mục trong trang, dính trên cùng ---------- */
.ar-secnav{position:sticky;top:0;z-index:20;background:var(--canvas);border-bottom:1px solid var(--line)}
@media (max-width:959px){.ar-secnav{top:calc(var(--ar-mobilebar-h) + env(safe-area-inset-top,0px))}}
.ar-secnav__in{max-width:var(--w-page);margin:0 auto;padding-inline:var(--space-4);height:var(--ar-secnav-h);display:flex;align-items:center;gap:var(--space-4)}
@media (min-width:720px){.ar-secnav__in{padding-inline:var(--space-6)}}
.ar-secnav__title{flex:none;font-family:var(--font-display);font-weight:600;font-size:15px;line-height:20px;color:var(--ink);max-width:14rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-secnav__title::after{content:"";display:inline-block;width:1px;height:16px;background:var(--line);margin-left:var(--space-4);vertical-align:-3px}
@media (max-width:719px){.ar-secnav__title{display:none}}
.ar-secnav__links{display:flex;gap:var(--space-1);overflow-x:auto;scrollbar-width:none;min-width:0;height:100%}
.ar-secnav__links::-webkit-scrollbar{display:none}
.ar-secnav__links a{flex:none;display:flex;align-items:center;text-decoration:none;color:var(--ink-muted);font-size:14px;line-height:20px;font-weight:500;padding:0 10px;border-bottom:2px solid transparent;margin-bottom:-1px}
.ar-secnav__links a:hover{color:var(--ink)}
.ar-secnav__links a[aria-current="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}
.ar-section{scroll-margin-top:var(--ar-sticky-offset)}

/* ---------- Accordion: hỏi đáp, lỗi thường gặp, chi tiết mở khi cần ---------- */
.ar-acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.ar-acc details+details{border-top:1px solid var(--line)}
.ar-acc summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);font-weight:600}
.ar-acc summary::-webkit-details-marker{display:none}
.ar-acc summary::after{content:"";margin-left:auto;margin-top:7px;width:7px;height:7px;flex:none;border-right:1.5px solid var(--ink-muted);border-bottom:1.5px solid var(--ink-muted);transform:rotate(45deg)}
.ar-acc details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.ar-acc summary:hover{background:var(--canvas)}
.ar-acc__body{padding:0 var(--space-5) var(--space-4);color:var(--ink-muted);display:flex;flex-direction:column;gap:var(--space-2)}
.ar-acc__tools{display:flex;justify-content:flex-end}

/* ---------- Compare: hai cột đối chiếu (nên và tránh, trước và sau, hỏi trước và làm ngay) ---------- */
.ar-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--space-4)}
.ar-compare__col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.ar-compare__head{display:flex;align-items:center;gap:var(--space-2);font-weight:600}
.ar-compare__col .ar-list{font-size:15px;line-height:24px}
.ar-compare__col .ar-prompt{background:var(--surface-sunken)}

/* ---------- Hero: mở đầu trang chủ, trang tổng quan ---------- */
.ar-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-8);align-items:end;padding-top:var(--space-6)}
.ar-hero__main{display:flex;flex-direction:column;gap:var(--space-4)}
.ar-hero h1{font-size:clamp(30px,4.6vw,44px);line-height:1.14;letter-spacing:-0.02em}
.ar-hero__lead{font-size:18px;line-height:30px;color:var(--ink-muted)}
.ar-hero__facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:799px){.ar-hero{grid-template-columns:1fr;gap:var(--space-6)}}

/* ---------- Feature: lưới ý ngắn có số thứ tự hoặc nhãn ---------- */
.ar-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:var(--space-5) var(--space-6)}
.ar-feature{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);border-top:2px solid var(--line);min-width:0}
.ar-feature__k{font-family:var(--font-display);font-weight:600;font-size:13px;line-height:18px;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.ar-feature h3{font-size:16px;line-height:24px}
.ar-feature p{font-size:15px;line-height:24px;color:var(--ink-muted)}

/* ---------- Split: chữ một bên, khối minh họa một bên ---------- */
.ar-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
@media (max-width:799px){.ar-split{grid-template-columns:1fr}}

/* ---------- Panel: khung lớp 1 cho một phần nội dung ---------- */
.ar-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
@media (max-width:719px){.ar-panel{padding:var(--space-4);gap:var(--space-4)}}
.ar-panel>.ar-section__head{padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
/* Lớp 2: thành phần bên trong panel chuyển sang nền lõm, bỏ viền, để không thành thẻ trong thẻ */
.ar-panel .ar-compare__col,.ar-panel .ar-stat,.ar-panel .ar-card{background:var(--surface-sunken);border-color:transparent}
.ar-panel .ar-compare__col .ar-prompt,.ar-panel .ar-card .ar-prompt,.ar-panel .ar-stat .ar-prompt{background:var(--surface);border:1px solid var(--line)}
.ar-panel .ar-acc,.ar-panel .ar-tablewrap{border-color:var(--line)}
.ar-panel .ar-feature{border-top-color:var(--brand)}
.ar-section__head{display:flex;flex-direction:column;gap:var(--space-1)}
.ar-section__head--row{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.ar-pagehead__eyebrow .ar-star,.ar-section__head .ar-star{width:auto;height:28px;padding:0 10px;gap:6px;display:inline-flex;font-size:13px;font-weight:600;border:1px solid var(--line-strong);border-radius:var(--radius-pill);color:var(--ink)}
.ar-pagehead__eyebrow .ar-star[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.ar-pagehead__eyebrow .ar-star[aria-pressed="true"] svg{color:var(--brand)}

/* ---------- ToolCard: thẻ một trang, công cụ trong danh mục ---------- */
.ar-toolcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.ar-toolcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow-raise)}
.ar-toolcard__top{display:flex;align-items:flex-start;gap:var(--space-2)}
.ar-toolcard__icon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.ar-toolcard__title{flex:1;min-width:0;font-weight:600;font-size:16px;line-height:22px;padding-top:7px}
.ar-toolcard__title a{color:var(--ink);text-decoration:none}
.ar-toolcard__title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ar-toolcard .ar-star{position:relative;z-index:1;margin:-2px -8px 0 0}
.ar-toolcard__desc{color:var(--ink-muted);font-size:14px;line-height:22px}
.ar-toolcard__meta{margin-top:auto;padding-top:var(--space-2);display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);align-items:center;font-size:12px;line-height:18px;color:var(--ink-muted)}
.ar-panel .ar-features{grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:var(--space-5)}
@media (min-width:720px){.ar-features.ar-features--3,.ar-panel .ar-features.ar-features--3{grid-template-columns:repeat(3,minmax(0,1fr))}}