/* =====================================================
   SieuThiCloud v2 — Base (reset + typography + utilities)
   ===================================================== */

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

* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Người nhạy cảm chuyển động: tắt smooth scroll, anchor nhảy tức thời */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--stc-font-sans);
    font-size: var(--stc-text-base);
    line-height: var(--stc-leading-normal);
    color: var(--stc-text);
    background: var(--stc-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

/* Thuộc tính hidden phải thắng mọi display ở author CSS (menu, modal...) */
[hidden] {
    display: none !important;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* iOS Safari tự zoom trang khi focus input có font-size < 16px.
 * Base của site là 14px nên mobile phải ép 16px cho MỌI ô nhập liệu
 * (chỉ màn hình nhỏ — desktop giữ nguyên thiết kế). Không dùng
 * maximum-scale=1 ở viewport vì sẽ chặn pinch-zoom của user. */
@media (max-width: 768px) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: var(--stc-primary);
    text-decoration: none;
    transition: color var(--stc-duration-fast) var(--stc-ease);
}

a:hover {
    color: var(--stc-primary-hover);
}

a:focus-visible {
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--stc-text-strong);
    line-height: var(--stc-leading-tight);
    font-weight: var(--stc-weight-bold);
}

h1 {
    font-size: var(--stc-text-4xl);
}

h2 {
    font-size: var(--stc-text-3xl);
}

h3 {
    font-size: var(--stc-text-xl);
}

h4 {
    font-size: var(--stc-text-lg);
}

p {
    margin: 0;
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
}

:focus-visible {
    outline: 2px solid var(--stc-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--stc-primary-a25);
}

/* Anchor (#faq, #tinh-nang, #password...) không bị sticky header che khi nhảy */
[id] {
    scroll-margin-top: calc(var(--stc-header-height, 68px) + var(--stc-space-2, 8px));
}

section[id],
h2[id],
h3[id] {
    scroll-margin-top: calc(var(--stc-header-height, 68px) + var(--stc-space-2, 8px));
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--stc-space-2);
    z-index: var(--stc-z-toast);
    background: var(--stc-primary);
    color: #fff;
    padding: var(--stc-space-2) var(--stc-space-4);
    border-radius: var(--stc-radius-sm);
}

.skip-link:focus {
    left: var(--stc-space-2);
    color: #fff;
}

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: var(--stc-container);
    margin-inline: auto;
    padding-inline: var(--stc-space-6);
}

.container--wide {
    max-width: var(--stc-container-wide);
}

/* ---------- Utilities ---------- */
.u-text-center {
    text-align: center;
}

.u-text-muted {
    color: var(--stc-text-muted);
}

.u-hidden {
    display: none !important;
}

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .container {
        padding-inline: var(--stc-space-4);
    }

    h1 {
        font-size: var(--stc-text-3xl);
    }

    h2 {
        font-size: var(--stc-text-2xl);
    }
}

/* ---------- Error page ---------- */
.error-page__inner {
    text-align: center;
    max-width: 560px;
    margin-inline: auto;
    padding-block: var(--stc-space-16);
}

.error-page__code {
    font-size: 110px;
    font-weight: var(--stc-weight-extrabold);
    line-height: 1;
    background: var(--stc-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--stc-space-4);
}

.error-page__title {
    font-size: var(--stc-text-3xl);
    margin-bottom: var(--stc-space-3);
}

.error-page__desc {
    color: var(--stc-text-muted);
    font-size: var(--stc-text-lg);
    margin-bottom: var(--stc-space-8);
}

.error-page__actions {
    display: flex;
    gap: var(--stc-space-4);
    justify-content: center;
    flex-wrap: wrap;
}