/* ===================================================================
   base.css — reset, typography, khối bố cục dùng chung
   Nạp SAU tokens.css, TRƯỚC layout.css.
   Chỉ chứa thứ dùng ở mọi trang. Style của một section cụ thể
   thuộc về components.css / home.css / pages.css.
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-body);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;           /* dải chéo tràn viền không được đẩy thanh cuộn ngang */
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-accent); }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var(--c-ink);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
ul:last-child, ol:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-6) 0; }

strong, b { font-weight: var(--fw-bold); color: var(--c-ink); }

/* Con số phải thẳng cột ở mọi chỗ có giá — đây là site bán giá. */
.num, .price, table td, table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

::selection { background: var(--c-accent); color: #fff; }

:focus-visible {
    outline: 3px solid var(--c-primary-soft);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ---- Bố cục ---- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container-narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: calc(var(--section-y) * .62); }
.section-soft { background: var(--c-bg-soft); }
.section-mist { background: var(--c-primary-mist); }

/* Section nền tối: đảo màu chữ một lần ở đây thay vì lặp ở từng khối. */
.section-dark {
    background: var(--c-primary-darker);
    color: rgba(255, 255, 255, .82);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark a { color: #fff; }
.section-dark a:hover { color: var(--c-accent-soft); }
.section-dark .section-heading-desc { color: rgba(255, 255, 255, .74); }

/* ---- Nhãn nhỏ trên tiêu đề section ---- */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-kicker);
    font-weight: var(--fw-black);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-accent);
    display: none;
}
.kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--c-accent);
}
.section-dark .kicker { color: #ff8a8f; }
.section-dark .kicker::before { background: #ff8a8f; }

/* ---- Cấp chữ "statement" ---- */
.statement {
    font-family: var(--font-display);
    font-size: var(--fs-statement);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    color: var(--c-ink);
    letter-spacing: -.015em;
    font-family: "Josefin Sans", sans-serif;
}
.section-dark .statement { color: #fff; }

/* ---- Nội dung do CKEditor sinh ---- */
.rich-text { font-size: var(--fs-lead); line-height: var(--lh-body); }
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }
.rich-text h2 { margin-top: var(--sp-7); font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.rich-text h3 { margin-top: var(--sp-6); }
.rich-text h2:first-child, .rich-text h3:first-child { margin-top: 0; }
.rich-text img { border-radius: var(--radius); margin-block: var(--sp-5); }
.rich-text ul, .rich-text ol { padding-left: 1.15rem; }
.rich-text li { margin-bottom: .4rem; }
.rich-text ul { list-style: none; padding-left: 0; }
.rich-text ul li {
    position: relative;
    padding-left: 1.6rem;
}
.rich-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    background: var(--c-accent);
    transform: rotate(45deg);
}
.rich-text ol li::marker { color: var(--c-accent); font-weight: var(--fw-bold); }
.rich-text blockquote {
    margin: var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-accent-soft);
    border-left: var(--rule) solid var(--c-accent);
    font-style: italic;
    color: var(--c-ink);
}
.rich-text a { text-decoration: underline; text-underline-offset: .18em; }

/* Bảng trong nội dung CKEditor — cùng ngôn ngữ với bảng giá. */
.rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--sp-5);
    font-size: var(--fs-sm);
}
.rich-text table th,
.rich-text table td {
    padding: .7rem .85rem;
    border: 1px solid var(--c-line);
    text-align: left;
}
.rich-text table th {
    background: var(--c-primary);
    color: #fff;
    font-weight: var(--fw-bold);
}
.rich-text table tbody tr:nth-child(odd) { background: var(--c-primary-mist); }

/* Mọi bảng rộng phải cuộn TRONG khung riêng — thân trang không được cuộn ngang. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: var(--sp-5);
}
.rich-text table { min-width: 640px; }
.rich-text .table-scroll table { margin-block: 0; }

/* ---- Tiện ích ---- */
.text-center { text-align: center; }
.text-accent { color: var(--c-accent); }
.text-muted-sm { color: var(--c-muted); font-size: var(--fs-sm); }
.mb-0 { margin-bottom: 0 !important; }
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
}

.empty-note {
    padding: var(--sp-6);
    text-align: center;
    color: var(--c-muted);
    background: var(--c-bg-soft);
    border: 1px dashed var(--c-line);
    border-radius: var(--radius);
}
.empty-note i { color: var(--c-primary-soft); margin-right: .4em; }

/* AOS: nếu CDN bị chặn, main.js gỡ data-aos. Giữ nhánh đó khi sửa. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}