/*
 * Kanto — base stylesheet (LEAD-OWNED): reset, design tokens, base typography,
 * layout primitives, shared utilities. Component styles live in components/*.css.
 * NOT wrapped in @layer (plugin CSS is unlayered and would otherwise win).
 */

/* --------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-vietnamese-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro Fallback';
  src: local('Arial');
  size-adjust: 107.15%;
  ascent-override: 93.33%;
  descent-override: 24.73%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-vietnamese-500.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-vietnamese-600.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-vietnamese-700.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-vietnamese-800.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--k-zalo-blue); outline-offset: 2px; }

/* --------------------------------------------------------------- tokens */
:root {
  --k-font-sans: 'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Arial, 'Helvetica Neue', sans-serif;
  --k-brand-pink: #E5187F;
  --k-brand-pink-rgb: 229 24 127;
  --k-brand-yellow: #FFCB05;
  --k-ink: #1E1812;
  --k-ink-rgb: 30 24 18;
  --k-trust-green: #18A957;
  --k-zalo-blue: #0068FF;
  --k-cream-bg: #FAF7F1;
  --k-surface: #FFFFFF;
  --k-surface-rgb: 255 255 255;
  --k-card-border: #E7E1D8;
  --k-muted: #6A6157;
  --k-muted-2: #A7A096;
  --k-muted-3: #8A7D6C;
  --k-surface-2: #FBF9F4;
  --k-surface-active: #FFFBEB;
  --k-border-warm: #F3ECE1;
  --k-border-faint: #F3EEE6;
  --k-border-soft: #F7F2EB;
  --k-trash-muted: #C1BAB0;
  --k-topbar-bg: #FDF3E3;
  --k-accent-text: #D6157E;
  --k-accent-strong: #AB1160;
  --k-survey-page-bg: #FBF8F2;
  --k-survey-hero-start: #FFEDF6;
  --k-survey-hero-mid: #FFF6E1;
  --k-survey-hero-end: #FFFDF7;
  --k-survey-hero-border: #F6E6F0;
  --k-survey-soft-yellow: #FFF6D6;
  --k-survey-soft-yellow-2: #FFF9EC;
  --k-survey-soft-yellow-border: #F6E6A8;
  --k-survey-soft-yellow-border-2: #F0D98A;
  --k-survey-card-border: #F0E7DB;
  --k-survey-input-border: #E7E1D8;
  --k-survey-label: #4A4339;
  --k-survey-copy: #5A5148;
  --k-survey-success: #1E8A4C;
  --k-survey-success-bg: #EAFBF1;
  --k-survey-danger: #C0392B;
  --k-survey-danger-border: #F0DEDE;
  --k-ecare-icon-bg: #FFF6DB;
  --k-ecare-captcha-border: #D9D1C4;
  --k-ecare-success-bg: #EFFAF1;
  --k-ecare-success-border: #BEE7C6;
  --k-ecare-success-ink: #1F8A44;
  --k-ecare-success-copy: #4B5B4D;
  --k-ecare-not-found-bg: #FCEFEF;
  --k-ecare-not-found-border: #F1C6C6;
  --k-ecare-not-found-ink: #C23A3A;
  --k-survey-thumb-bg-1: #FFF0F6;
  --k-survey-thumb-bg-2: #FFE0EF;
  --k-survey-thumb-border: #FFD9EA;
  --k-grad-hero: linear-gradient(115deg,#FF2EA6 0%,#FF8A5C 52%,#FFD24D 100%);
  --k-grad-combo: linear-gradient(115deg,#FF2EA6,#D6006E);
  --k-grad-promo: linear-gradient(135deg,#FFF3D6,#FFE4CF);
  --k-grad-survey-hero: linear-gradient(120deg,var(--k-survey-hero-start) 0%,var(--k-survey-hero-mid) 55%,var(--k-survey-hero-end) 100%);
  --k-space-1: 0.5rem;
  --k-space-2: 0.75rem;
  --k-space-3: 1rem;
  --k-space-4: 1.5rem;
  --k-space-5: 2rem;
  --k-space-6: 3rem;
  --k-wrap: 1200px;
  --k-shadow: 0 1px 2px rgb(30 24 18 / 6%), 0 8px 24px rgb(30 24 18 / 10%);

  /* DEPRECATED v1 aliases — remove after R1–R3.
     v1 names that became v2 tokens stay defined above: ink, muted, surface, shadow. */
  --k-line: var(--k-card-border);
  --k-subtle: var(--k-cream-bg);
  --k-accent: var(--k-accent-text);
  --k-yellow: var(--k-brand-yellow);
  --k-yellow-dark: #E6B800;
  --k-header-ink: var(--k-ink);
}

/* ----------------------------------------------------------------- base */
body { font-family: var(--k-font-sans); font-size: 1rem; line-height: 1.6; color: var(--k-ink); background: var(--k-surface); }
.topbar { --k-cream-bg: var(--k-topbar-bg); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 0; left: 0; z-index: 1000; padding: 10px 16px; background: var(--k-ink); color: var(--k-surface); transform: translateY(-110%); }
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------- layout */
.wrap { width: min(100% - 2rem, var(--k-wrap)); margin-inline: auto; }
.site-main { padding-block: var(--k-space-4); min-height: 50svh; }

/* Page canvas stays white; cream remains an accent token inside components. */
body.home main#main.site-main,
body.home main#main.site-main .kanto-home,
body.post-type-archive-product main#main.site-main,
body.tax-product_cat main#main.site-main,
body.tax-product_tag main#main.site-main,
html body.single-product > main#main.site-main,
body.single-product main.site-main.kanto-product-main {
  background: var(--k-surface);
}

/* --------------------------------------------------------- shared bits */
.entry__content > * + * { margin-block-start: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Visual Composer rows can use negative gutters; contain them on Woo archives. */
body.archive.woocommerce .wpb-content-wrapper > .vc_row {
  margin-inline: 0;
}

body.archive.woocommerce .products .product .onsale {
  margin-inline-end: 0;
}