/* ========================================================================== Hồng Thạo Mart+ – main stylesheet Brand: HỒNG THẠO BLUE #0878C9 · ORANGE #F58220 · WOOD #EAD6BB ========================================================================== */ /* ---------- 1. Fonts (self-hosted Be Vietnam Pro) ---------- */ @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/be-vietnam-pro-vietnamese-400-normal.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-normal.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: 500; font-display: swap; src: url(../fonts/be-vietnam-pro-vietnamese-500-normal.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-normal.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-normal.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-normal.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-normal.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-normal.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-normal.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-normal.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; } /* Script cho slogan thương hiệu (Dancing Script – hỗ trợ tiếng Việt) */ @font-face { font-family: "HTM Script"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/dancing-script-vietnamese-700-normal.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: "HTM Script"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/dancing-script-latin-700-normal.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; } /* ---------- 2. Tokens & base ---------- */ :root { --blue: #0878c9; --blue-700: #0663a6; --blue-800: #054f85; --blue-50: #eaf4fc; --blue-100: #d3e8f8; --orange: #f58220; --orange-600: #e07114; --orange-50: #fff4ea; --wood: #ead6bb; --wood-ink: #8c6a3e; --red: #d92d20; --green: #12a150; --ink: #0f172a; --text: #1e293b; --muted: #64748b; --line: #e2e8f0; --line-2: #edf1f5; --bg: #f3f6f9; --card: #ffffff; --radius: 14px; --radius-sm: 10px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 6px 20px -8px rgba(15, 23, 42, .18); --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .35); --container: 1280px; --gutter: 16px; --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-script: "HTM Script", "Dancing Script", cursive; --blue-900: #03406b; --brand-grad: linear-gradient(135deg, var(--blue) 0%, var(--blue-800) 100%); --header-h: 76px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.htm-locked { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; } img { display: block; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-700); } h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; } p { margin: 0 0 1em; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid rgba(245, 130, 32, .55); outline-offset: 2px; border-radius: 6px; } .htm-hidden { display: none !important; } .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:focus { position: fixed !important; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 10px 16px; background: #fff; border-radius: 8px; } .htm-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .htm-main { padding-top: 20px; padding-bottom: 48px; min-height: 50vh; } .htm-icon { flex-shrink: 0; vertical-align: middle; } /* ---------- 3. UI primitives ---------- */ .htm-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 18px; font-family: var(--font); font-size: 14px; font-weight: 700; line-height: 1.2; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--blue); color: #fff; transition: background-color .15s, transform .1s, box-shadow .15s, color .15s; cursor: pointer; text-decoration: none; white-space: nowrap; } .htm-btn:active, .woocommerce .button:active { transform: scale(.97); } .htm-btn--orange, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .single_add_to_car_button, .woocommerce #place_order, .woocommerce a.checkout-button { background: var(--orange); color: #fff; box-shadow: 0 6px 16px -8px rgba(245, 130, 32, .8); } .htm-btn--orange:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--orange-600); color: #fff; } .htm-btn--blue, .woocommerce a.button, .woocommerce button.button { background: var(--blue); color: #fff; } .htm-btn--blue:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--blue-700); color: #fff; } .htm-btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); } .htm-btn--ghost:hover { border-color: var(--blue); color: var(--blue); } .htm-btn--glass { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); } .htm-btn--glass:hover { background: rgba(255, 255, 255, .25); color: #fff; } .htm-btn--lg { min-height: 50px; padding: 12px 24px; font-size: 15px; border-radius: 12px; } .htm-btn--block { width: 100%; } .htm-btn.loading, .woocommerce .button.loading { opacity: .7; pointer-events: none; } .woocommerce .button.loading::after { display: none !important; } .woocommerce a.added_to_cart { display: none !important; } .htm-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .htm-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; } .htm-icon-btn:hover { background: rgba(15, 23, 42, .06); } .htm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .htm-pill--blue { background: var(--blue-50); color: var(--blue); } .htm-pill--orange { background: var(--orange-50); color: var(--orange-600); } .htm-pill--wood { background: var(--wood); color: #5b4220; } .htm-chips { display: flex; flex-wrap: wrap; gap: 8px; } .htm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 13px; font-weight: 600; transition: all .15s; } .htm-chip small { color: var(--muted); font-weight: 500; } .htm-chip:hover { border-color: var(--blue); color: var(--blue); } .htm-chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; } .htm-chip.is-active small { color: var(--blue-100); } .htm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: inline-block; animation: htm-pulse 1.6s infinite; } @keyframes htm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .htm-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .htm-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #ffb35c); transition: width .4s; } .htm-checklist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; } .htm-checklist li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; } .htm-checklist .htm-icon { color: var(--green); margin-top: 3px; } .htm-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); } .htm-table th, .htm-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); text-align: left; } .htm-table thead th { background: var(--bg); font-weight: 700; color: var(--ink); } .htm-table--specs th { width: 34%; background: var(--bg); font-weight: 600; } .htm-table .is-plus { color: var(--green); font-weight: 700; } .htm-table .is-minus { color: var(--red); font-weight: 700; } /* Forms */ input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=number], input[type=url], select, textarea, .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .select2-container--default .select2-selection--single { width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--ink); background-color: #fff; border: 1px solid #cfd8e3; border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; appearance: none; } textarea { min-height: 96px; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } input:focus, select:focus, textarea:focus, .woocommerce form .form-row .input-text:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8, 120, 201, .15); } .select2-container--default .select2-selection--single { display: flex; align-items: center; height: 44px; } .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--ink); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 8px; } .select2-dropdown { border-color: #cfd8e3; border-radius: var(--radius-sm); overflow: hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--blue); } label { font-weight: 600; font-size: 14px; color: var(--ink); } .htm-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 500; cursor: pointer; } .htm-check input { width: 18px; height: 18px; accent-color: var(--blue); } /* ---------- 4. Topbar & header ---------- */ .htm-topbar { background: var(--blue-900); color: #dcebf8; font-size: 12.5px; } .htm-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; } .htm-topbar__msg { margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .htm-topbar__msg .htm-icon { color: var(--orange); flex-shrink: 0; } .htm-topbar__msg { min-width: 0; } .htm-topbar__text { display: block; min-width: 0; overflow: hidden; } .htm-topbar__text > span { display: inline-block; white-space: nowrap; } .htm-topbar__text.is-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent); } .htm-topbar__text.is-marquee > span { padding-left: 12px; animation: htm-marquee var(--marquee-d, 14s) ease-in-out infinite alternate; } @keyframes htm-marquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--marquee-x, -50%)); } } .htm-topbar__links { display: flex; align-items: center; gap: 18px; } .htm-topbar__menu { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } .htm-topbar__menu a { color: #dcebf8; } .htm-topbar__menu a:hover { color: #fff; } .htm-topbar__member { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 6px; background: var(--wood); color: #3d2c12; font-size: 12px; font-weight: 700; } .htm-topbar__member .htm-icon { color: var(--blue); } .htm-header { position: sticky; top: 0; z-index: 50; background: var(--blue); color: #fff; transition: box-shadow .2s; } .htm-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(5, 79, 133, .7); } .htm-header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); } .htm-header__burger { display: none; color: #fff; background: transparent; border: 0; padding: 6px; } .htm-header__logo { flex-shrink: 0; } .htm-header__logo .custom-logo { max-height: 52px; width: auto; } .htm-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); } .htm-logo__mark { display: block; width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; box-shadow: 0 4px 12px -6px rgba(2, 30, 55, .45); } .htm-logo__mark img { display: block; width: 100%; height: 100%; } .htm-logo__text { display: flex; flex-direction: column; line-height: 1.05; } .htm-logo__name { display: block; line-height: 0; } .htm-logo__name img { display: block; width: auto; height: 24px; max-width: none; } .htm-logo__slogan { font-family: var(--font-script); font-weight: 700; font-size: 15px; line-height: 1.1; color: var(--blue-800); margin-top: 2px; white-space: nowrap; } .htm-logo--inv .htm-logo__mark { background: #fff; color: var(--blue); } .htm-logo--inv .htm-logo__name { color: #fff; } .htm-logo--inv .htm-logo__slogan { color: #fff; } .htm-logo:hover { color: inherit; } .htm-cats-dd { position: relative; } .htm-cats-dd__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; background: var(--blue-700); color: #fff; font-weight: 700; font-size: 14px; } .htm-cats-dd__btn:hover, .htm-cats-dd__btn[aria-expanded=true] { background: var(--blue-800); } .htm-mega { position: absolute; top: calc(100% + 12px); left: 0; z-index: 60; width: min(860px, 90vw); background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; } .htm-mega__list { list-style: none; margin: 0; padding: 8px; width: 280px; min-height: 380px; position: relative; } .htm-mega__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text); font-weight: 600; font-size: 14px; } .htm-mega__link > span:nth-child(2) { flex: 1; } .htm-mega__link > .htm-icon:last-child { color: #94a3b8; } .htm-mega__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--blue-50); color: var(--blue); } .htm-mega__item.is-active > .htm-mega__link { background: var(--blue-50); color: var(--blue); } .htm-mega__panel { display: none; position: absolute; top: 0; left: 280px; right: -580px; bottom: 0; padding: 22px 26px; border-left: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--blue-50)); } .htm-mega__item.is-active > .htm-mega__panel { display: block; } .htm-mega__panel h4 { font-size: 17px; margin-bottom: 14px; } .htm-mega__panel h4 a { color: var(--ink); } .htm-mega__panel ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; } .htm-mega__panel ul a { color: var(--text); font-size: 14px; } .htm-mega__panel ul a:hover { color: var(--blue); } .htm-mega__panel p { color: var(--muted); font-size: 13px; } .htm-search { position: relative; flex: 1; max-width: 560px; display: flex; } .htm-search input[type=search] { height: 46px; min-height: 46px; padding: 0 52px 0 18px; border: 0; border-radius: 12px; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); } .htm-search input[type=search] { text-overflow: ellipsis; } .htm-search input[type=search]::placeholder { text-overflow: ellipsis; } .htm-search input[type=search]:focus { box-shadow: 0 0 0 3px rgba(245, 130, 32, .55); } .htm-search > button { position: absolute; top: 4px; right: 4px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--orange); color: #fff; } .htm-search__results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70; max-height: 70vh; overflow: auto; padding: 10px; background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .htm-search__label { margin: 6px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .htm-search__cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; } .htm-search__cats a { padding: 5px 12px; border-radius: 999px; background: var(--blue-50); font-size: 13px; font-weight: 600; } .htm-search__results ul { list-style: none; margin: 0; padding: 0; } .htm-search__results li a { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; color: var(--text); } .htm-search__results li a:hover { background: var(--bg); } .htm-search__results img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--bg); } .htm-search__name { font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .htm-search__price { font-weight: 800; color: var(--red); font-size: 14px; white-space: nowrap; text-align: right; } .htm-search__price del { display: block; color: #94a3b8; font-weight: 500; font-size: 12px; } .htm-search__all { display: block; margin-top: 6px; padding: 10px; text-align: center; border-top: 1px solid var(--line); font-weight: 700; } .htm-search__empty { padding: 16px; margin: 0; color: var(--muted); text-align: center; } .htm-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .htm-hact { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; color: #fff; } .htm-hact:hover { background: rgba(255, 255, 255, .12); color: #fff; } .htm-hact > span:last-child { display: flex; flex-direction: column; line-height: 1.2; } .htm-hact small { font-size: 11.5px; color: rgba(255, 255, 255, .78); } .htm-hact strong { font-size: 14px; white-space: nowrap; } .htm-hact--phone .htm-icon { color: #ffd29e; } .htm-hact__icon { position: relative; display: inline-flex; } .htm-cart-count { position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; border: 2px solid var(--blue); line-height: 1; } .htm-cart-count[data-count="0"] { display: none; } .htm-hact--cart { background: #fff; color: var(--ink); } .htm-hact--cart:hover { background: #f1f5f9; color: var(--ink); } .htm-hact--cart .htm-icon { color: var(--blue); } .htm-hact--cart small { color: var(--muted); } .htm-hact--cart .htm-cart-count { border-color: #fff; } .is-bump { animation: htm-bump .45s ease; } @keyframes htm-bump { 30% { transform: scale(1.12); } 60% { transform: scale(.96); } } .htm-nav { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); } .htm-nav__inner { display: flex; align-items: center; gap: 6px; min-height: 48px; overflow-x: auto; scrollbar-width: none; } .htm-nav__inner::-webkit-scrollbar { display: none; } .htm-nav__flash { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--orange-50); color: var(--orange-600); font-weight: 800; font-size: 13.5px; white-space: nowrap; border: 1px solid #ffd9b8; } .htm-nav__flash .htm-icon { animation: htm-flame 1.2s infinite; } @keyframes htm-flame { 50% { transform: translateY(-2px) scale(1.08); } } .htm-nav__menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .htm-nav__menu > li { position: relative; } .htm-nav__menu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); font-weight: 600; font-size: 14px; white-space: nowrap; } .htm-nav__menu a:hover, .htm-nav__menu .current-menu-item > a { color: var(--blue); background: var(--blue-50); } .htm-nav__menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 40; min-width: 220px; padding: 8px; list-style: none; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); } .htm-nav__menu li:hover > .sub-menu, .htm-nav__menu li:focus-within > .sub-menu { display: block; } /* ---------- 5. Homepage blocks ---------- */ .htm-blocks > * + * { margin-top: 28px; } .htm-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .htm-section__title { font-size: clamp(20px, 2.2vw, 26px); margin: 0; position: relative; padding-left: 14px; } .htm-section__title::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 5px; border-radius: 4px; background: var(--blue); } .htm-accent--orange .htm-section__title::before { background: var(--orange); } .htm-accent--wood .htm-section__title::before { background: var(--wood-ink); } .htm-section__sub { margin: 4px 0 0 14px; color: var(--muted); font-size: 14px; } .htm-section__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; white-space: nowrap; } /* Hero */ .htm-hero { display: grid; gap: 16px; grid-template-columns: 1fr; } .htm-hero.has-side { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); } .htm-hero__slider { position: relative; border-radius: 20px; overflow: hidden; background: var(--blue-900); min-height: 380px; box-shadow: var(--shadow); } .htm-hero__track { position: relative; height: 100%; min-height: inherit; } .htm-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; display: flex; align-items: center; } .htm-hero__slide.is-active { opacity: 1; visibility: visible; position: relative; min-height: 380px; } .htm-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 50, 88, .94) 0%, rgba(4, 70, 122, .72) 45%, rgba(8, 120, 201, .12) 100%); z-index: 1; } .htm-hero__slide--fallback { background: linear-gradient(120deg, var(--blue-800), var(--blue) 60%, var(--orange)); } .htm-hero__slide--fallback::after { display: none; } .htm-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .htm-hero__content { position: relative; z-index: 2; max-width: 600px; padding: 40px 48px; color: #fff; } .htm-hero__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(245, 130, 32, .14); border: 1px solid rgba(245, 130, 32, .45); color: #ffb469; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; } .htm-hero__title { color: #fff; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; margin-bottom: 12px; letter-spacing: -.02em; } .htm-hero__sub { color: #cbd5e1; font-size: 15px; max-width: 520px; } .htm-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .htm-hero__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s, background .2s; } .htm-hero__slider:hover .htm-hero__nav { opacity: 1; } .htm-hero__nav:hover { background: rgba(255, 255, 255, .3); } .htm-hero__nav--prev { left: 14px; } .htm-hero__nav--next { right: 14px; } .htm-hero__dots { position: absolute; bottom: 16px; left: 48px; z-index: 3; display: flex; gap: 6px; } .htm-hero__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); transition: width .25s, background .25s; } .htm-hero__dots button.is-active { width: 28px; background: var(--orange); } .htm-hero__side { display: grid; gap: 16px; grid-template-rows: 1fr 1fr; } .htm-promo-card { position: relative; display: flex; align-items: flex-end; min-height: 182px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, var(--blue), var(--blue-800)); color: #fff; box-shadow: var(--shadow-sm); isolation: isolate; } .htm-hero__side .htm-promo-card__bg { object-position: 100% 30%; } .htm-promo-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; } .htm-promo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 45, 80, .92) 0%, rgba(3, 45, 80, .55) 45%, rgba(3, 45, 80, .04) 85%); } .htm-promo-card:hover { color: #fff; } .htm-promo-card:hover .htm-promo-card__bg { transform: scale(1.05); } .htm-promo-card__body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; } .htm-promo-card__kicker { align-self: flex-start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 10px; border-radius: 999px; background: var(--orange); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .htm-promo-card strong { font-size: 18px; line-height: 1.25; } .htm-promo-card small { color: #cbd5e1; font-size: 13px; } .htm-promo-card__cta { font-size: 13px; font-weight: 700; color: #ffc48a; } /* USP */ .htm-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line-2); } .htm-usp__item { display: flex; align-items: center; gap: 12px; padding: 6px 8px; } .htm-usp__item + .htm-usp__item { border-left: 1px solid var(--line-2); } .htm-usp__icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--blue-50); color: var(--blue); } .htm-usp__item:nth-child(even) .htm-usp__icon { background: var(--orange-50); color: var(--orange); } .htm-usp strong { display: block; color: var(--ink); font-size: 14px; } .htm-usp small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; } /* Categories */ .htm-cats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; } .htm-cats__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; text-align: center; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; } .htm-cats__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-100); color: var(--blue); } .htm-cats__thumb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-50), #fff); color: var(--blue); overflow: hidden; } .htm-cats__thumb img { width: 64px; height: 64px; object-fit: cover; } .htm-cats__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; } .htm-cats__count { font-size: 12px; color: var(--muted); } /* Flash sale */ .htm-flash { padding: 20px; border-radius: 20px; background: linear-gradient(110deg, var(--blue) 0%, #0a6db6 45%, var(--orange) 130%); color: #fff; box-shadow: var(--shadow); } .htm-flash__head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } .htm-flash__title { display: flex; align-items: center; gap: 12px; margin-right: auto; } .htm-flash__title h2 { color: #fff; margin: 0; font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; letter-spacing: .01em; } .htm-flash__title p { margin: 2px 0 0; color: var(--blue-100); font-size: 13px; } .htm-flash__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--orange); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35); animation: htm-flame 1.2s infinite; } .htm-flash__all { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .htm-flash__all:hover { color: #ffd29e; } .htm-flash__notice { margin: -6px 0 14px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .14); font-size: 13px; } .htm-countdown { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 12px; background: rgba(3, 45, 80, .45); font-variant-numeric: tabular-nums; } .htm-countdown__label { font-size: 12.5px; font-weight: 600; color: var(--blue-100); margin-right: 6px; } .htm-countdown__box { min-width: 34px; padding: 5px 6px; border-radius: 8px; background: var(--blue-900); color: #ffc36b; font-weight: 800; font-size: 16px; text-align: center; } .htm-countdown i { font-style: normal; font-weight: 800; color: #ffc36b; } .htm-countdown--sm .htm-countdown__box { min-width: 28px; font-size: 14px; padding: 3px 5px; } /* Grids */ .htm-grid { display: grid; gap: 14px; } .htm-grid--products { grid-template-columns: repeat(5, minmax(0, 1fr)); } .htm-shop .htm-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } .htm-scroller { position: relative; } .htm-scroller__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; margin: -4px -2px -8px; } .htm-scroller__track::-webkit-scrollbar { display: none; } .htm-scroller__track > * { scroll-snap-align: start; } .htm-grid--flash { grid-auto-columns: calc((100% - 4 * 14px) / 5); } .htm-scroller__btn { position: absolute; top: 38%; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow); } .htm-scroller__btn:hover { color: var(--blue); } .htm-scroller.no-overflow .htm-scroller__btn { display: none; } .htm-scroller__btn--prev { left: -16px; } .htm-scroller__btn--next { right: -16px; } /* Product card */ .htm-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; min-width: 0; } .htm-card:hover { box-shadow: var(--shadow); border-color: var(--blue-100); transform: translateY(-2px); } .htm-card__media { position: relative; aspect-ratio: 1 / 1; background: #f8fafc; overflow: hidden; } .htm-card__img, .htm-card__img img { display: block; width: 100%; height: 100%; } .htm-card__img img { object-fit: cover; transition: transform .35s ease; } .htm-card:hover .htm-card__img img { transform: scale(1.05); } .htm-card__discount { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 8px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; } .htm-card__badge { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .htm-card__badge--flash { background: var(--orange); } .htm-card__quick { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(-4px); transition: all .2s; } .htm-card:hover .htm-card__quick, .htm-card__quick:focus-visible { opacity: 1; transform: none; } .htm-card__quick:hover { color: var(--blue); } .htm-card__oos { position: absolute; inset: auto 0 0; padding: 6px; text-align: center; background: rgba(15, 23, 42, .78); color: #fff; font-size: 12px; font-weight: 700; } .htm-card.is-oos .htm-card__img img { opacity: .55; } .htm-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 12px; } .htm-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; row-gap: 2px; min-width: 0; font-size: 11.5px; } .htm-card__meta > * { min-width: 0; max-width: 100%; } .htm-card__brand { color: var(--blue); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .htm-card__unit { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .htm-card__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; min-height: 2.8em; } .htm-card__title a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .htm-card__title a:hover { color: var(--blue); } .htm-card__stats { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); min-height: 18px; } .htm-card__rating { display: inline-flex; align-items: center; gap: 3px; color: #b7791f; font-weight: 700; } .htm-card__rating .htm-icon { fill: #f6b01e; stroke: #f6b01e; } .htm-card__progress { position: relative; height: 20px; border-radius: 999px; background: #ffe7d1; overflow: hidden; } .htm-card__progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 10%); background: linear-gradient(90deg, #ffb066, var(--orange)); border-radius: inherit; } .htm-card__progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.25)); } .htm-card__progress span { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; padding-left: 10px; font-size: 11px; font-weight: 800; line-height: 20px; color: #7c2d12; } .htm-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px dashed var(--line); } .htm-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-variant-numeric: tabular-nums; } .htm-card__price ins { text-decoration: none; color: var(--red); font-weight: 800; font-size: 17px; } .htm-card__price del { color: #94a3b8; font-size: 12.5px; } .htm-card__price .woocommerce-Price-currencySymbol { font-size: .85em; } .htm-card__add { width: 100%; min-height: 38px; padding: 8px 12px; font-size: 13.5px; } .htm-card__add.added { background: var(--green); } /* Promo banners row */ .htm-promos { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); } .htm-promos--1 { grid-template-columns: 1fr; } .htm-promos--2 { grid-template-columns: repeat(2, 1fr); } .htm-promos .htm-promo-card { min-height: 200px; } /* Membership */ .htm-membership { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; padding: 36px 40px; border-radius: 22px; background: radial-gradient(circle at 88% 15%, rgba(245, 130, 32, .32), transparent 38%), linear-gradient(120deg, var(--blue-900) 0%, var(--blue-800) 45%, var(--blue) 100%); color: #e6f1fb; overflow: hidden; } .htm-membership h2 { color: #fff; font-size: clamp(22px, 2.6vw, 32px); margin: 12px 0 10px; } .htm-membership p { color: #cbd5e1; max-width: 560px; } .htm-membership__tiers { display: flex; gap: 8px; margin: 4px 0 20px; } .htm-membership__tiers .tier { padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; } .tier--silver { background: #e2e8f0; color: #334155; } .tier--gold { background: linear-gradient(135deg, #f8d77a, #e0a82e); color: #4a3307; } .tier--diamond { background: linear-gradient(135deg, #a5f3fc, #818cf8); color: #1e1b4b; } .htm-membership__visual { display: flex; justify-content: center; } .htm-membership__visual .htm-member__card { transform: rotate(-4deg); max-width: 380px; width: 100%; } /* Member card */ .htm-member { display: grid; gap: 16px; } .htm-member__card { position: relative; padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-800) 100%); box-shadow: var(--shadow-lg); overflow: hidden; } .htm-member__card::before { content: ""; position: absolute; width: 220px; height: 220px; right: -60px; top: -80px; border-radius: 50%; background: rgba(255, 255, 255, .1); } .htm-member__card--gold { background: linear-gradient(135deg, #c98a12, #f5b942 50%, #b0700a); } .htm-member__card--diamond { background: linear-gradient(135deg, #312e81, #4f46e5 50%, #0e7490); } .htm-member__top { position: relative; display: flex; justify-content: space-between; gap: 12px; } .htm-member__brand { display: block; font-weight: 800; letter-spacing: .02em; font-size: 15px; } .htm-member__brand b { color: #ffd6ad; } .htm-member__card--gold .htm-member__brand b { color: #fff; } .htm-member__tier { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 700; } .htm-member__points { text-align: right; } .htm-member__points strong { display: block; font-size: 28px; line-height: 1; font-weight: 800; } .htm-member__points span { font-size: 12px; opacity: .9; } .htm-member__name { position: relative; margin: 14px 0 10px; font-weight: 600; font-size: 14px; opacity: .95; } .htm-member__barcode { position: relative; padding: 10px 12px 6px; background: #fff; border-radius: 12px; text-align: center; } .htm-member__barcode svg { display: block; width: 100%; } .htm-member__barcode span { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .25em; font-variant-numeric: tabular-nums; } .htm-member__hint { position: relative; margin: 10px 0 0; font-size: 12px; opacity: .9; } .htm-member__progress-label { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .htm-member__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .htm-stat { padding: 14px; background: var(--bg); border-radius: 12px; } .htm-stat span { display: block; font-size: 12.5px; color: var(--muted); } .htm-stat strong { font-size: 18px; color: var(--ink); } .htm-member h3 { margin-top: 10px; font-size: 17px; } .htm-member-guest { text-align: center; } .htm-member-guest__icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--orange-50); color: var(--orange); margin-bottom: 10px; } .htm-member-guest h3 { font-size: 18px; } .htm-member-guest .htm-checklist { text-align: left; margin: 14px 0 18px; } .htm-member-guest__actions { display: grid; gap: 8px; } /* Posts */ .htm-posts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .htm-posts__grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); } .htm-post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s; } .htm-post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .htm-post-card__img { display: block; aspect-ratio: 16 / 10; background: var(--blue-50); overflow: hidden; } .htm-post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .htm-post-card:hover .htm-post-card__img img { transform: scale(1.05); } .htm-post-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .htm-post-card__cat { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--orange-50); color: var(--orange-600); font-size: 11.5px; font-weight: 700; } .htm-post-card h2, .htm-post-card h3 { font-size: 16px; line-height: 1.4; margin: 0; } .htm-post-card h2 a, .htm-post-card h3 a { color: var(--ink); } .htm-post-card h2 a:hover, .htm-post-card h3 a:hover { color: var(--blue); } .htm-post-card p { margin: 0; color: var(--muted); font-size: 13.5px; } .htm-post-card time { margin-top: auto; font-size: 12px; color: #94a3b8; } /* Stores */ .htm-stores__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .htm-store { display: flex; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); } .htm-store__icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--blue); color: #fff; } .htm-store strong { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .htm-store span { color: var(--muted); font-size: 13px; } .htm-store .htm-store__icon { color: #fff; } .htm-store__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 13px; font-weight: 700; } .htm-store__actions a { display: inline-flex; align-items: center; gap: 4px; } /* ---------- 6. Footer (nền xanh thương hiệu) ---------- */ .htm-footer { margin-top: 32px; background: var(--brand-grad); color: rgba(255, 255, 255, .84); font-size: 14px; } .htm-footer__tagline { position: relative; display: inline-block; margin: 0; font-family: var(--font-script); font-weight: 700; font-size: 26px; line-height: 1.15; color: #fff; padding-bottom: 12px; } .htm-footer__tagline span { display: block; padding-left: 18px; } .htm-footer__tagline::after { content: ""; position: absolute; left: 6px; right: -6px; bottom: 0; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 60 1, 140 1, 198 6' fill='none' stroke='%23F58220' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } .htm-footer__pillars { background: #fff; border-bottom: 3px solid var(--orange); } .htm-footer__pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 22px; padding-bottom: 22px; } .htm-pillar { display: flex; align-items: center; gap: 12px; } .htm-pillar strong { display: block; color: var(--blue-800); font-size: 14px; text-transform: uppercase; letter-spacing: .02em; } .htm-pillar small { display: block; color: var(--muted); font-size: 12.5px; } .htm-pillar__icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--blue-50); color: var(--blue); } .htm-pillar__icon--orange { background: var(--orange-50); color: var(--orange-600); } .htm-pillar__icon--wood { background: #f7eddf; color: var(--wood-ink); } .htm-footer__main { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-top: 40px; padding-bottom: 32px; } .htm-footer__brand .htm-logo__slogan { display: none; } .htm-footer__brand .htm-footer__tagline { display: table; margin-top: 16px; } .htm-footer__brand p { margin: 14px 0; line-height: 1.6; } .htm-footer h3 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; } .htm-footer h3::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--orange); } .htm-footer__menu, .htm-footer__stores { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .htm-footer__menu a, .htm-footer a { color: rgba(255, 255, 255, .88); } .htm-footer__menu a:hover, .htm-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; } .htm-footer__stores li { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; } .htm-footer__stores .htm-icon { color: var(--orange); margin-top: 3px; } .htm-footer__contact { display: flex; flex-direction: column; gap: 6px; } .htm-footer__hotline { display: inline-flex; align-self: flex-start; white-space: nowrap; padding: 6px 14px; border-radius: 10px; background: var(--orange); color: #fff !important; font-size: clamp(19px, 5vw, 22px); font-weight: 800; letter-spacing: .01em; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45); } .htm-footer__hotline:hover { background: var(--orange-600); text-decoration: none !important; } .htm-footer__social { display: flex; gap: 8px; } .htm-footer__social a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff !important; font-weight: 700; font-size: 13px; } .htm-footer__social a:hover { background: rgba(255, 255, 255, .26); text-decoration: none !important; } .htm-footer__social a.is-zalo { background: #fff; color: #0068ff !important; } .htm-footer__pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .htm-footer__pay span { padding: 4px 10px; border-radius: 6px; background: #fff; color: var(--blue-800); font-size: 11.5px; font-weight: 800; } .htm-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .16); background: rgba(2, 30, 55, .28); } .htm-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; font-size: 12.5px; } .htm-footer__bottom p { margin: 0; } .htm-footer__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; } .htm-footer__credit { color: rgba(255, 255, 255, .75); } .htm-footer__credit a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--orange); } .htm-footer__credit a:hover { color: #ffd2a8; text-decoration: none; } .htm-footer__company { color: rgba(255, 255, 255, .62); margin-top: 4px !important; } .htm-footer__bct { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; } /* Map */ .htm-map { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--blue-50); border: 1px solid var(--line-2); } .htm-map iframe { display: block; width: 100%; border: 0; } .htm-map__open { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: var(--shadow); } .htm-map__open:hover { color: var(--blue); } .htm-map--stores { margin-bottom: 14px; } .htm-stores--single .htm-stores__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: stretch; } .htm-stores--single .htm-map--stores { margin: 0; } .htm-stores--single .htm-stores__grid { grid-template-columns: 1fr; } .htm-stores--single .htm-store { flex-direction: column; justify-content: center; padding: 24px; } .htm-stores--single .htm-store strong { font-size: 16px; } .htm-footer__mapbox { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: stretch; padding-bottom: 32px; } .htm-footer__mapinfo { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius); background: rgba(2, 30, 55, .32); border: 1px solid rgba(255, 255, 255, .14); } .htm-footer__mapinfo strong { color: #fff; font-size: 17px; } .htm-footer__mapinfo p { display: flex; gap: 8px; margin: 0; font-size: 13.5px; } .htm-footer__mapinfo .htm-icon { color: #ffb36e; margin-top: 3px; } .htm-footer__mapinfo .htm-btn { align-self: flex-start; margin-top: auto; color: #fff !important; } .htm-map--footer { border-color: rgba(255, 255, 255, .2); } .htm-footer .htm-map__open { color: var(--ink); text-decoration: none; } .htm-footer .htm-map__open:hover { color: var(--blue); } .htm-footer__mapinfo .htm-btn .htm-icon { color: #fff; margin: 0; } .htm-prose > .htm-section, .htm-prose > .htm-map-section { max-width: none; } .htm-prose .htm-map__open, .htm-prose .htm-store a { text-decoration: none; } .htm-member__expire { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fef3c7; color: #92400e; font-size: 13.5px; font-weight: 600; } .htm-member__rule { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 13px; } /* ---------- 7. Overlays ---------- */ .htm-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .55); opacity: 0; transition: opacity .2s; backdrop-filter: blur(2px); } .htm-backdrop.is-open { opacity: 1; } .htm-drawer { position: fixed; top: 0; bottom: 0; z-index: 100; width: min(420px, 92vw); display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-lg); transition: transform .25s ease; } .htm-drawer--right { right: 0; transform: translateX(105%); } .htm-drawer--left { left: 0; transform: translateX(-105%); width: min(340px, 88vw); } .htm-drawer.is-open { transform: none; } .htm-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .htm-drawer__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; } .htm-drawer__head h2 .htm-cart-count { position: static; border: 0; } .htm-drawer__head--blue { background: var(--blue); color: #fff; border-bottom: 0; } .htm-drawer__head--blue .htm-icon-btn { color: #fff; } .htm-drawer__body { flex: 1; overflow-y: auto; padding: 16px; } .htm-drawer__label { margin: 8px 0; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .htm-drawer__call { margin-top: 20px; } .htm-drawer-freeship { padding: 12px 16px 0; font-size: 13px; } .htm-drawer-freeship:empty { display: none; } .htm-drawer-freeship p { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; } .htm-drawer-freeship .htm-icon { color: var(--green); } .htm-mobile-cats, .htm-mobile-menu { list-style: none; margin: 0 0 12px; padding: 0; } .htm-mobile-cats a, .htm-mobile-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-2); } .htm-mobile-menu .sub-menu { list-style: none; padding-left: 16px; } /* Mini cart (WooCommerce markup) */ .htm-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .htm-drawer .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; padding: 12px 28px 12px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; } .htm-drawer .woocommerce-mini-cart-item > a:not(.remove) { display: contents; color: var(--ink); font-weight: 600; } .htm-drawer .woocommerce-mini-cart-item img { grid-row: span 2; width: 64px !important; height: 64px; object-fit: cover; border-radius: 10px; float: none !important; margin: 0 !important; } .htm-drawer .woocommerce-mini-cart-item .quantity { grid-column: 2; color: var(--muted); font-size: 13px; } .htm-drawer .woocommerce-mini-cart-item .quantity .amount { color: var(--red); font-weight: 800; } .htm-drawer .woocommerce-mini-cart-item a.remove { position: absolute; top: 12px; right: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #94a3b8 !important; font-size: 18px; line-height: 1; } .htm-drawer .woocommerce-mini-cart-item a.remove:hover { background: #fee2e2; color: var(--red) !important; } .htm-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 14px 0; margin: 0; font-size: 16px; } .htm-drawer .woocommerce-mini-cart__total .amount { color: var(--red); font-weight: 800; } .htm-drawer .woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; } .htm-drawer .woocommerce-mini-cart__buttons a { display: flex; align-items: center; justify-content: center; min-height: 46px; margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue); font-weight: 700; font-size: 14px; } .htm-drawer .woocommerce-mini-cart__buttons a:hover { background: var(--blue-100); } .htm-drawer .woocommerce-mini-cart__buttons a.checkout { background: var(--orange); color: #fff; box-shadow: 0 6px 16px -8px rgba(245, 130, 32, .8); } .htm-drawer .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--orange-600); } .htm-drawer .woocommerce-mini-cart__empty-message { padding: 40px 0; text-align: center; color: var(--muted); } .htm-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .2s; } .htm-modal.is-open { opacity: 1; } .htm-modal[hidden] { display: none; } .htm-modal__box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); transform: translateY(12px) scale(.98); transition: transform .2s; } .htm-modal.is-open .htm-modal__box { transform: none; } .htm-modal__box--wide { width: min(940px, 100%); } .htm-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--blue); color: #fff; } .htm-modal__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; color: #fff; } .htm-modal__head .htm-icon-btn { color: #fff; } .htm-modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; background: #fff; box-shadow: var(--shadow-sm); } .htm-modal__content { padding: 20px; } .htm-loading { display: grid; place-items: center; min-height: 280px; } .htm-loading span { width: 36px; height: 36px; border: 3px solid var(--blue-100); border-top-color: var(--blue); border-radius: 50%; animation: htm-spin .8s linear infinite; } @keyframes htm-spin { to { transform: rotate(360deg); } } .htm-qv { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .htm-qv__media { position: relative; border-radius: 16px; overflow: hidden; background: #f8fafc; aspect-ratio: 1; } .htm-qv__media img { width: 100%; height: 100%; object-fit: cover; } .htm-qv__brand { color: var(--blue); font-weight: 700; font-size: 13px; } .htm-qv__title { font-size: 22px; margin: 4px 0 8px; } .htm-qv__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 12px; } .htm-qv__price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--orange-50); font-size: 24px; font-weight: 800; color: var(--red); } .htm-qv__price del { font-size: 15px; color: #94a3b8; font-weight: 500; } .htm-qv__price ins { text-decoration: none; } .htm-qv__desc { color: var(--text); font-size: 14px; } .htm-qv__specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 16px; font-size: 14px; } .htm-qv__specs dt { color: var(--muted); } .htm-qv__specs dd { margin: 0; font-weight: 600; } .htm-qv__buy { display: flex; gap: 10px; margin-bottom: 14px; } .htm-qv__buy .htm-btn { flex: 1; } .htm-qv__oos { padding: 10px 14px; border-radius: 10px; background: #fef2f2; color: var(--red); font-weight: 600; } .htm-qty { display: inline-flex; align-items: stretch; border: 1px solid #cfd8e3; border-radius: var(--radius-sm); background: #fff; overflow: hidden; height: 48px; } .htm-qty input, .woocommerce .quantity.htm-qty .qty { width: 52px; min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; box-shadow: none !important; } .htm-qty input::-webkit-inner-spin-button, .htm-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .htm-qty__btn { width: 40px; display: grid; place-items: center; border: 0; background: var(--bg); color: var(--ink); font-size: 18px; font-weight: 700; } .htm-qty__btn:hover { background: var(--blue-50); color: var(--blue); } .htm-toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--blue-900); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); transform: translate(-50%, 20px); opacity: 0; transition: all .25s; } .htm-toast.is-show { transform: translate(-50%, 0); opacity: 1; } .htm-toast::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); font-size: 13px; } .htm-toast button { padding: 6px 12px; border: 0; border-radius: 8px; background: var(--orange); color: #fff; font-weight: 700; font-size: 13px; } .htm-mobilebar { display: none; } .htm-float { position: fixed; right: 16px; bottom: 24px; z-index: 40; display: flex; flex-direction: column; gap: 10px; } .htm-float__btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff !important; font-weight: 800; font-size: 13px; box-shadow: var(--shadow); transition: transform .15s; } .htm-float__btn:hover { transform: scale(1.06); } .htm-float__btn--zalo { background: #0068ff; } .htm-float__btn--phone { background: var(--orange); animation: htm-ring 2.4s infinite; } .htm-float { transition: transform .25s ease, opacity .25s ease; } .htm-float.is-hidden { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; } @keyframes htm-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 130, 32, .55); } 50% { box-shadow: 0 0 0 12px rgba(245, 130, 32, 0); } } /* ---------- 8. Shop archive ---------- */ .htm-breadcrumb, .woocommerce .woocommerce-breadcrumb { margin: 0 0 16px; font-size: 13px; color: var(--muted); } .htm-breadcrumb a { color: var(--muted); } .htm-breadcrumb a:hover { color: var(--blue); } .htm-breadcrumb .sep { margin: 0 8px; color: #cbd5e1; } .htm-archive-head { margin-bottom: 20px; padding: 22px 24px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .htm-archive-head h1 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 6px; } .htm-archive-head__desc { color: var(--muted); max-width: 820px; } .htm-archive-head__desc p:last-child { margin-bottom: 0; } .htm-archive-head .htm-chips { margin-top: 14px; } .htm-archive-head--shop { background: linear-gradient(110deg, #fff 60%, var(--blue-50)); } .htm-shop { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; } .htm-shop__filters { position: sticky; top: calc(var(--header-h) + 64px); display: grid; gap: 14px; max-height: calc(100vh - var(--header-h) - 80px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; } .htm-shop__filters-head { display: none; } .htm-filter { padding: 16px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); } .htm-filter__title { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); } .htm-filter--form .htm-filter__title:not(:first-child) { margin-top: 18px; } .htm-filter__cats, .htm-filter__brands { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .htm-filter__cats a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 600; } .htm-filter__cats a span { flex: 1; } .htm-filter__cats small, .htm-filter__brands small { color: var(--muted); font-weight: 500; font-size: 12px; } .htm-filter__cats a:hover, .htm-filter__cats .is-active a { background: var(--blue-50); color: var(--blue); } .htm-filter__brands a { display: flex; justify-content: space-between; padding: 5px 0; color: var(--text); font-size: 14px; } .htm-price-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .htm-price-presets .htm-chip { padding: 5px 10px; font-size: 12.5px; } .htm-price-inputs { display: flex; align-items: center; gap: 8px; } .htm-price-inputs input { min-height: 38px; padding: 6px 10px; font-size: 14px; } .htm-filter__actions { display: grid; gap: 8px; margin-top: 16px; text-align: center; } .htm-shop__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 10px 14px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .htm-shop__toolbar .woocommerce-notices-wrapper { flex-basis: 100%; } .htm-shop__toolbar .woocommerce-notices-wrapper:empty { display: none; } .woocommerce .htm-shop__toolbar .woocommerce-result-count { margin: 0; color: var(--muted); font-size: 14px; float: none; } .woocommerce .htm-shop__toolbar .woocommerce-ordering { margin: 0; float: none; margin-left: auto; } .woocommerce .htm-shop__toolbar .woocommerce-ordering select { min-height: 38px; padding: 6px 36px 6px 12px; font-size: 14px; } .htm-shop__filter-btn { display: none; } .woocommerce nav.woocommerce-pagination, .htm-pagination { margin-top: 24px; text-align: center; } .woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 6px; border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .htm-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700; } .woocommerce nav.woocommerce-pagination ul li span.current, .htm-pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; } .htm-pagination .nav-links { display: inline-flex; gap: 6px; } .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews, p.no-comments { border-radius: var(--radius-sm); border-top-width: 0; border-left: 4px solid var(--blue); background: #fff; box-shadow: var(--shadow-sm); padding: 14px 18px 14px 48px !important; font-size: 14px; } .woocommerce-message { border-left-color: var(--green); } .woocommerce-message::before { color: var(--green); } .woocommerce-error { border-left-color: var(--red); } .woocommerce-info::before { color: var(--blue); } .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { top: 14px; left: 18px; } /* ---------- 9. Single product ---------- */ .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; padding: 24px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0 !important; } .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .related, .woocommerce div.product > .upsells { grid-column: 1 / -1; } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { border-radius: 16px; overflow: hidden; background: #f8fafc; } .woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin-top: 10px !important; } .woocommerce div.product div.images .flex-control-thumbs li { width: 76px !important; } .woocommerce div.product div.images .flex-control-thumbs img { border-radius: 10px; border: 2px solid transparent; opacity: .7; } .woocommerce div.product div.images .flex-control-thumbs img.flex-active { border-color: var(--blue); opacity: 1; } .woocommerce span.onsale { display: none; } .htm-sp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .htm-sp-brand { font-weight: 700; font-size: 14px; } .woocommerce div.product .product_title { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 8px; } .htm-sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 12px; } .htm-sp-meta .sep { color: #cbd5e1; } .woocommerce div.product .woocommerce-product-rating { margin-bottom: 10px; } .woocommerce .star-rating span::before, .woocommerce p.stars a { color: #f6b01e; } .woocommerce div.product p.price, .woocommerce div.product span.price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 18px; margin: 4px 0 14px; border-radius: 14px; background: var(--orange-50); color: var(--red); font-size: 30px; font-weight: 800; } .woocommerce div.product p.price del { order: 2; color: #94a3b8; font-size: 17px; font-weight: 500; opacity: 1; } .woocommerce div.product p.price ins { text-decoration: none; } .htm-sp-off { order: 3; padding: 3px 10px; border-radius: 8px; background: var(--red); color: #fff; font-size: 14px; font-weight: 800; } .htm-sp-flash { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: -6px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--orange), #ff6a3d); color: #fff; } .htm-sp-flash + p.price { border-radius: 0 0 14px 14px; } .htm-sp-flash__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .02em; margin-right: auto; } .htm-sp-flash .htm-countdown { background: rgba(0, 0, 0, .2); padding: 4px 8px; } .htm-sp-flash .htm-countdown__label { color: #fff; } .htm-sp-flash__left { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); } .htm-sp-flash-hint { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--blue-50); color: var(--blue-800); font-size: 13.5px; font-weight: 600; } .htm-points-hint { padding: 8px 12px; border-radius: 10px; background: #fdf6ec; border: 1px dashed var(--wood-ink); color: #5b4220; font-size: 13.5px; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--text); font-size: 14.5px; margin-bottom: 14px; } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; } .woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { display: none; } .woocommerce div.product form.cart div.quantity { float: none; margin: 0; } .woocommerce div.product form.cart .button { flex: 1; min-height: 48px; font-size: 15px; float: none; } .woocommerce div.product form.cart .single_add_to_cart_button { background: var(--orange); } .woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--orange-600); } .htm-buy-now { flex: 1; min-height: 48px; font-size: 15px; } .woocommerce div.product p.stock { font-weight: 600; } .woocommerce div.product .stock.in-stock { color: var(--green); } .htm-sp-promise { list-style: none; margin: 18px 0 10px; padding: 14px; display: grid; gap: 12px; border-radius: 14px; background: var(--bg); } .htm-sp-promise li { display: flex; gap: 12px; align-items: center; } .htm-sp-promise .htm-icon { color: var(--blue); } .htm-sp-promise strong { display: block; font-size: 14px; color: var(--ink); } .htm-sp-promise small { color: var(--muted); font-size: 12.5px; } .htm-sp-call { font-size: 14px; color: var(--muted); } .htm-sp-call a { font-weight: 800; color: var(--orange-600); } .woocommerce div.product .woocommerce-tabs { margin-top: 8px; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 6px; padding: 0; margin: 0 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: transparent; border-radius: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 16px; color: var(--muted); font-weight: 700; border-bottom: 3px solid transparent; white-space: nowrap; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--blue); border-bottom-color: var(--blue); } .woocommerce div.product .woocommerce-tabs .panel { margin: 0; font-size: 15px; line-height: 1.7; } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; } .woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 { font-size: 22px; margin: 16px 0 14px; } .woocommerce #reviews #comments ol.commentlist li .comment-text { border-radius: 12px; border-color: var(--line); } /* ---------- 10. Cart & checkout ---------- */ .htm-page__head { margin-bottom: 16px; } .htm-page__title { font-size: clamp(22px, 2.6vw, 30px); } .htm-main--wc .htm-wc-page { background: transparent; } .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce > .cart-empty, .woocommerce-cart .woocommerce > .return-to-shop, .woocommerce-cart .woocommerce > .wc-empty-cart-message { grid-column: 1 / -1; } .woocommerce-cart-form { padding: 8px 18px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .woocommerce table.shop_table { border: 0; border-radius: 0; margin: 0; } .woocommerce table.shop_table th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .woocommerce table.shop_table td { border-top: 1px solid var(--line-2); padding: 14px 10px; } .woocommerce table.cart img { width: 72px; border-radius: 10px; } .woocommerce table.cart td.product-name a { color: var(--ink); font-weight: 600; } .woocommerce table.cart td.product-subtotal .amount { color: var(--red); font-weight: 800; } .woocommerce table.cart td.actions .coupon .input-text { width: 180px; min-height: 42px; margin-right: 8px; } .woocommerce table.cart td.actions > .button[name=update_cart] { display: none; } .woocommerce a.remove { color: #94a3b8 !important; font-size: 20px; } .woocommerce a.remove:hover { background: #fee2e2; color: var(--red) !important; } .woocommerce-cart .cart-collaterals { width: 100%; } .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; position: sticky; top: calc(var(--header-h) + 64px); padding: 18px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .woocommerce-cart .cart-collaterals .cross-sells { width: 100%; float: none; } .woocommerce-cart .cart_totals h2 { font-size: 18px; } .cart_totals .order-total .amount, .woocommerce-checkout-review-order-table .order-total .amount { color: var(--red); font-size: 22px; font-weight: 800; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { min-height: 52px; font-size: 16px; margin-bottom: 0; } .htm-freeship { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--blue-50); font-size: 13.5px; } .htm-freeship p { margin: 0 0 8px; } .htm-points-row th, .htm-points-row td { color: var(--wood-ink); } .htm-freeship-row td { color: var(--blue-800); font-size: 13px; background: var(--blue-50); } .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px 24px; align-items: start; } .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup, .woocommerce-checkout form.checkout > .wc_coupon_message_wrapper { grid-column: 1 / -1; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; padding: 20px 22px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; } .woocommerce-checkout h3 { font-size: 18px; margin: 4px 0 14px; } .woocommerce-checkout #order_review_heading { grid-column: 2; margin: 0; padding: 18px 20px 0; background: #fff; border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--line-2); border-bottom: 0; } .woocommerce-checkout #order_review { grid-column: 2; padding: 4px 20px 20px; margin-top: -24px; background: #fff; border-radius: 0 0 var(--radius) var(--radius); border: 1px solid var(--line-2); border-top: 0; position: sticky; top: calc(var(--header-h) + 64px); } .woocommerce form .form-row { padding: 0; margin: 0 0 14px; } .woocommerce form .form-row label { margin-bottom: 6px; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 7px); } .woocommerce-checkout #payment { background: transparent; border-radius: 0; } .woocommerce-checkout #payment ul.payment_methods { padding: 0; border: 0; display: grid; gap: 8px; } .woocommerce-checkout #payment ul.payment_methods li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--blue); background: var(--blue-50); } .woocommerce-checkout #payment ul.payment_methods li label { font-weight: 700; } .woocommerce-checkout #payment div.payment_box { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff; font-size: 13.5px; } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce-checkout #payment div.form-row { padding: 14px 0 0; } .woocommerce-checkout #place_order { width: 100%; min-height: 54px; font-size: 16px; } .woocommerce-checkout .woocommerce-shipping-methods li label { font-weight: 600; } #shipping_method li { margin-bottom: 6px !important; } .htm-points-box { margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: #fdf6ec; border: 1px dashed var(--wood-ink); font-size: 14px; } .htm-points-box label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; } .htm-points-box input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); } .woocommerce form.checkout_coupon { border-radius: var(--radius); background: #fff; border: 1px solid var(--line); } .htm-thanks { display: flex; align-items: center; gap: 16px; padding: 22px; margin-bottom: 20px; border-radius: var(--radius); background: linear-gradient(110deg, #ecfdf3, #fff); border: 1px solid #bbf7d0; } .htm-thanks__icon { color: var(--green); } .htm-thanks h1 { margin: 0 0 4px; font-size: 24px; } .htm-thanks p { margin: 0; color: var(--muted); } .woocommerce-order { padding: 0; } .woocommerce ul.order_details { display: flex; flex-wrap: wrap; gap: 0; padding: 16px; margin: 0 0 20px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .woocommerce ul.order_details li { border-right-color: var(--line); } .woocommerce-order-received .woocommerce-notice--success { display: none; } .htm-vietqr { margin: 0 0 24px; padding: 22px; border-radius: var(--radius); background: #fff; border: 2px solid var(--blue); } .htm-vietqr h2 { font-size: 20px; } .htm-vietqr__grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; } .htm-vietqr__img { width: 280px; height: auto; border-radius: 12px; border: 1px solid var(--line); } .htm-vietqr__info { width: 100%; font-size: 14px; border-collapse: collapse; } .htm-vietqr__info th, .htm-vietqr__info td { padding: 9px 0; border-bottom: 1px solid var(--line-2); text-align: left; } .htm-vietqr__info th { color: var(--muted); font-weight: 500; width: 40%; } .htm-vietqr__status { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--orange-50); color: var(--orange-600); font-weight: 700; font-size: 14px; } .htm-vietqr.is-paid { border-color: var(--green); } .htm-vietqr__status[data-status=paid] { background: #ecfdf3; color: var(--green); } .woocommerce .woocommerce-customer-details, .woocommerce .woocommerce-order-details { padding: 18px; margin-bottom: 18px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } /* ---------- 11. Account ---------- */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--text); font-weight: 600; font-size: 14px; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--blue-50); color: var(--blue); } .woocommerce-MyAccount-navigation-link--the-thanh-vien a { color: var(--orange-600) !important; } .woocommerce-MyAccount-content { padding: 22px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .woocommerce-MyAccount-content .htm-member { max-width: 720px; } .woocommerce-account:not(.logged-in) .woocommerce { display: block; max-width: 980px; margin: 0 auto; } .htm-auth-intro { text-align: center; margin: 8px auto 24px; max-width: 620px; } .htm-auth-intro h1 { font-size: 30px; } .htm-auth-intro p { color: var(--muted); } .woocommerce #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .woocommerce #customer_login::before, .woocommerce #customer_login::after, .woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after, .woocommerce-cart .woocommerce::before, .woocommerce-cart .woocommerce::after, .woocommerce-checkout form.checkout::before, .woocommerce-checkout form.checkout::after { display: none !important; } .woocommerce #customer_login .u-column1, .woocommerce #customer_login .u-column2 { width: 100%; float: none; } .woocommerce #customer_login h2 { font-size: 20px; } .woocommerce form.login, .woocommerce form.register { margin: 0; padding: 22px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); } .woocommerce form.login .button, .woocommerce form.register .button { width: 100%; min-height: 48px; margin-top: 6px; } .woocommerce-account .addresses .title h2 { font-size: 18px; } /* ---------- 12. Blog & pages ---------- */ .htm-page { padding: 28px 32px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .htm-prose { font-size: 16.5px; line-height: 1.75; color: #1f2a3c; } .htm-prose > * { max-width: 760px; } .htm-prose > .alignwide, .htm-prose > .alignfull { max-width: none; } .htm-prose h2 { font-size: 24px; margin-top: 1.6em; } .htm-prose h3 { font-size: 19px; margin-top: 1.4em; } .htm-prose ul, .htm-prose ol { padding-left: 1.3em; } .htm-prose li { margin-bottom: .4em; } .htm-prose blockquote { margin: 1.5em 0; padding: 14px 20px; border-left: 4px solid var(--orange); background: var(--orange-50); border-radius: 0 12px 12px 0; font-style: italic; } .htm-prose img { border-radius: 12px; } .htm-prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .htm-prose table th, .htm-prose table td { padding: 10px 12px; border: 1px solid var(--line); } .htm-prose table th { background: var(--bg); } .htm-prose a { text-decoration: underline; text-underline-offset: 3px; } .htm-single { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .htm-article { padding: 28px 36px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .htm-article__head h1 { font-size: clamp(26px, 3vw, 38px); margin: 10px 0 12px; } .htm-article__lead { font-size: 18px; color: var(--muted); } .htm-article__hero { margin: 0 0 24px; border-radius: 16px; overflow: hidden; } .htm-article__hero img { width: 100%; } .htm-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; } .htm-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: 999px; background: var(--bg); font-size: 13px; } .htm-single__side { position: sticky; top: calc(var(--header-h) + 64px); display: grid; gap: 16px; } .htm-side-card { padding: 18px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); } .htm-side-card strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 8px; } .htm-side-card--blue { background: linear-gradient(135deg, var(--blue), var(--blue-800)); color: #e0f0ff; border: 0; } .htm-side-card--blue strong { color: #fff; } .htm-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .htm-side-list a { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; } .htm-side-list img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; } .htm-post-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0; padding: 18px 20px; border-radius: 16px; background: linear-gradient(110deg, var(--blue-50), var(--orange-50)); border: 1px solid var(--blue-100); } .htm-post-cta__kicker { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--orange-600); } .htm-post-cta strong { font-size: 17px; color: var(--ink); line-height: 1.4; } .htm-post-cta .htm-btn { text-decoration: none; color: #fff; } .htm-post-products h3 { font-size: 20px; } .htm-prose > .htm-post-products { max-width: none; } .htm-post-products .htm-grid--products { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .htm-prose .htm-card a, .htm-prose a.htm-btn, .htm-prose .htm-post-cta a { text-decoration: none; } .htm-prose .htm-card { font-size: 14px; line-height: 1.5; } .htm-prose .htm-card__title { font-size: 14px; margin: 0; } .htm-prose .htm-card__price del { font-size: 12.5px; } .htm-post-products .woocommerce { max-width: none; } .htm-comments { max-width: 860px; margin-top: 24px; padding: 24px; background: #fff; border-radius: var(--radius); } .htm-empty { padding: 40px; text-align: center; background: #fff; border-radius: var(--radius); } .htm-searchform { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; } .htm-404 { max-width: 620px; margin: 40px auto; padding: 48px 32px; text-align: center; background: #fff; border-radius: 20px; border: 1px solid var(--line-2); } .htm-404__code { display: block; font-size: 96px; font-weight: 800; line-height: 1; background: linear-gradient(120deg, var(--blue), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; } .htm-404__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .wp-block-image img { border-radius: 12px; } /* ---------- 13. Responsive ---------- */ @media (max-width: 1280px) { .htm-hact--phone { display: none; } .htm-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } .htm-scroller__track, .htm-grid--flash { grid-auto-columns: calc((100% - 3 * 14px) / 4); } .htm-footer__main { grid-template-columns: 1.4fr repeat(2, 1fr); } .htm-footer__contact { grid-column: span 1; } } @media (max-width: 1100px) { .htm-shop .htm-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } .htm-hact--account > span:last-child { display: none; } .htm-hact--cart > span:last-child { display: none; } .htm-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .htm-membership { grid-template-columns: 1fr; } .htm-membership__visual { display: none; } .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) 360px; } } @media (max-width: 1024px) { :root { --header-h: 64px; } .htm-topbar__links .htm-topbar__menu { display: none; } .htm-header__burger { display: inline-grid; } .htm-cats-dd { display: none; } .htm-header__inner { flex-wrap: wrap; gap: 8px 10px; padding-top: 8px; padding-bottom: 10px; } .htm-header__logo { flex: 1; } .htm-search { order: 10; flex-basis: 100%; max-width: none; } .htm-header__logo .htm-logo__slogan, .htm-header__logo .htm-logo__name { display: none; } .htm-logo__mark { width: 38px; height: 38px; } .htm-logo__name img { height: 20px; } .htm-drawer .htm-logo__slogan { display: none; } .htm-nav { display: none; } .htm-hero.has-side { grid-template-columns: 1fr; } .htm-hero__side { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .htm-hero__side .htm-promo-card { min-height: 150px; } .htm-hero__side .htm-promo-card__bg { object-position: 100% 30%; } .htm-hero__side .htm-promo-card__body { max-width: 66%; padding: 16px 18px; } .htm-hero__side .htm-promo-card::after { background: linear-gradient(90deg, rgba(3, 45, 80, .92) 0%, rgba(3, 45, 80, .62) 55%, rgba(3, 45, 80, .06) 100%); } .htm-usp { grid-template-columns: repeat(2, 1fr); } .htm-usp__item:nth-child(3) { border-left: 0; } .htm-shop { grid-template-columns: minmax(0, 1fr); } .htm-shop__filters { position: fixed; top: 0; bottom: 0; left: 0; z-index: 105; width: min(340px, 88vw); padding: 0 14px 20px; overflow-y: auto; background: var(--bg); transform: translateX(-105%); transition: transform .25s; align-content: start; } .htm-filters-open .htm-shop__filters { transform: none; box-shadow: var(--shadow-lg); } .htm-filters-open::after { content: ""; position: fixed; inset: 0; z-index: 104; background: rgba(15, 23, 42, .5); } .htm-shop__filters-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; padding: 12px 0; background: var(--bg); } .htm-shop__filter-btn { display: inline-flex; min-height: 38px; padding: 6px 12px; } .woocommerce div.product { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 20px; } .woocommerce-cart .woocommerce, .woocommerce-checkout form.checkout, .woocommerce-account .woocommerce, .htm-single { grid-template-columns: minmax(0, 1fr); } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; } .woocommerce-checkout #order_review, .woocommerce-cart .cart-collaterals .cart_totals, .htm-single__side { position: static; } .htm-footer__pillars-grid { grid-template-columns: repeat(2, 1fr); } .htm-stores__grid { grid-template-columns: 1fr 1fr; } .htm-posts__grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } .htm-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, .25); } .htm-mobilebar > a, .htm-mobilebar > button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; } .htm-mobilebar > .is-active { color: var(--blue); } .htm-mobilebar__flash { color: var(--orange-600) !important; } .htm-mobilebar .htm-cart-count { border-color: #fff; top: -6px; right: -12px; } body.htm { padding-bottom: 0; } .htm-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .htm-float { bottom: calc(80px + env(safe-area-inset-bottom)); right: 10px; gap: 8px; } .htm-float__btn { width: 44px; height: 44px; font-size: 11px; box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .45); } .htm-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } .htm-qv { grid-template-columns: 1fr; gap: 16px; } .htm-qv__media { aspect-ratio: 4 / 3; } } @media (max-width: 768px) { body { font-size: 14.5px; } .htm-topbar__member { display: none; } .htm-topbar__msg { font-size: 12px; } .htm-main { padding-top: 14px; } .htm-blocks > * + * { margin-top: 22px; } .htm-hero__slider, .htm-hero__slide.is-active { min-height: 320px; } .htm-hero__content { padding: 28px 22px 44px; } .htm-hero__dots { left: 22px; } .htm-hero__nav { display: none; } .htm-hero__kicker { letter-spacing: .02em; font-size: 11px; } .htm-header__actions { gap: 2px; } .htm-hact { padding: 6px 8px; } .htm-hero__sub { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .htm-hero__side .htm-promo-card strong { font-size: 16px; } .htm-card__brand { flex: 1 1 auto; } .htm-pillar { gap: 10px; align-items: flex-start; } .htm-pillar__icon { width: 40px; height: 40px; } .htm-pillar strong { font-size: 13.5px; line-height: 1.35; } .htm-pillar small { font-size: 12px; line-height: 1.45; } .htm-usp { padding: 8px; gap: 6px; } .htm-usp__item { padding: 6px; gap: 8px; } .htm-usp__item + .htm-usp__item { border-left: 0; } .htm-usp__icon { width: 38px; height: 38px; } .htm-usp small { display: none; } .htm-cats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .htm-cats__item { padding: 10px 4px; border-radius: 12px; } .htm-cats__thumb { width: 48px; height: 48px; } .htm-cats__name { font-size: 12px; } .htm-cats__count { display: none; } .htm-flash { padding: 14px; border-radius: 16px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; } .htm-flash__head { gap: 10px; } .htm-flash__title { flex-basis: 100%; } .htm-flash__icon { width: 40px; height: 40px; } .htm-flash__all { margin-left: auto; } .htm-grid { gap: 10px; } .htm-grid--products, .htm-shop .htm-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .htm-scroller__track, .htm-grid--flash { grid-auto-columns: calc((100% - 10px) / 2.15); } .htm-scroller__btn { display: none; } .htm-card__body { padding: 10px; gap: 5px; } .htm-card__title { font-size: 13.5px; } .htm-card__price ins { font-size: 15.5px; } .htm-card__quick { opacity: 1; transform: none; width: 30px; height: 30px; } .htm-promos, .htm-promos--2 { grid-template-columns: 1fr; } .htm-promos .htm-promo-card { min-height: 160px; } .htm-membership { padding: 26px 20px; border-radius: 18px; } .htm-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .htm-post-card__body { padding: 10px 12px 14px; } .htm-post-card h3, .htm-post-card h2 { font-size: 14.5px; } .htm-post-card p { display: none; } .htm-stores__grid { grid-template-columns: 1fr; } .htm-section__sub { display: none; } .htm-footer__main { grid-template-columns: 1fr 1fr; gap: 24px; } .htm-footer__brand { grid-column: 1 / -1; } .htm-footer__pillars-grid { gap: 14px; } .htm-pillar__icon { width: 40px; height: 40px; } .htm-footer__bottom-inner { flex-direction: column; align-items: flex-start; } .htm-footer__meta { align-items: flex-start; text-align: left; } .htm-member__grid { grid-template-columns: 1fr; } .htm-footer__mapbox { grid-template-columns: 1fr; } .htm-stores--single .htm-stores__layout { grid-template-columns: 1fr; } .htm-vietqr__grid { grid-template-columns: 1fr; justify-items: center; } .woocommerce #customer_login { grid-template-columns: 1fr; } .htm-page, .htm-article { padding: 20px 18px; } .htm-posts__grid--archive { grid-template-columns: 1fr; } .woocommerce div.product p.price { font-size: 26px; } .woocommerce table.shop_table_responsive tr td::before { font-weight: 600; } .woocommerce-cart-form { padding: 4px 12px; } .woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; } .woocommerce table.cart td.actions .coupon .input-text { width: auto !important; min-width: 0; flex: 1; margin: 0 !important; } .woocommerce table.cart td.actions .coupon .button { width: auto !important; flex-shrink: 0; } .woocommerce table.shop_table_responsive, .woocommerce table.shop_table_responsive tbody, .woocommerce table.shop_table_responsive tr { display: block; width: 100%; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; } .htm-qv__title { font-size: 19px; } .htm-modal__content { padding: 16px; } .htm-post-cta { flex-direction: column; align-items: flex-start; } .htm-shop__toolbar { padding: 8px 10px; } .woocommerce .htm-shop__toolbar .woocommerce-result-count { display: none; } } @media (max-width: 600px) { .htm-hero__side { grid-template-columns: 1fr; } .htm-hero__side .htm-promo-card { min-height: 140px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }