/* Generated by deploy/gen_site_css.py; do not edit directly. */

/* --- styles.css --- */
/* Điện Máy Ngô Gia — hệ màu và bố cục theo mẫu dien-may-ngo-gia.azichigoza.chatgpt.site */
:root {
  --navy: #0c2340;
  --navy-2: #102f55;
  --navy-deep: #07182d;
  --orange: #f05a28;
  --orange-2: #ff7a3e;
  --orange-soft: #ffb18f;
  --cream: #fff7ed;
  --ink: #172033;
  --muted: #667085;
  --line: #e7e9ee;
  --bg: #f5f7fa;
  --white: #fff;
  --green: #178553;
  --red: #c0392b;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(12, 35, 64, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
button, input, select { font: inherit; }
button, a { color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orange-2); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.eyebrow, .section-heading > div > span {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--orange-2);
}

/* ---------- Buttons ---------- */
.button {
  min-height: 44px; border: 0; border-radius: 11px; padding: 0 17px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: .84rem; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button--primary { background: var(--orange); color: #fff; }
.button--light { background: #fff; color: var(--navy); margin-top: 12px; }
.button--outline { background: #fff; color: var(--navy); border: 1px solid #d8dde5; }
.button--full { width: 100%; min-height: 51px; }
.text-link { color: var(--navy); font-size: .84rem; font-weight: 700; text-decoration: none; }
.text-link:hover { color: var(--orange); }

/* ---------- Header ---------- */
.top-strip { background: var(--navy-deep); color: #d9e5f2; font-size: .76rem; }
.top-strip__inner { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.top-strip__inner div { display: flex; gap: 24px; }
.top-strip a { text-decoration: none; }
.site-header { background: var(--navy); color: #fff; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; box-shadow: 0 6px 20px rgba(12, 35, 64, .13); }
.header-main { display: grid; grid-template-columns: auto minmax(240px, 1fr) auto auto; gap: 18px; align-items: center; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand__mark {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px 13px 13px 3px; background: var(--orange); color: #fff;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em;
}
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: .62rem; letter-spacing: .25em; }
.brand b { font-size: 1.05rem; letter-spacing: .03em; }
.header-action { border: 0; background: transparent; color: #fff; display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 12px; text-decoration: none; text-align: left; }
.header-action:hover { background: rgba(255, 255, 255, .08); }
.header-action svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.header-action > span { display: flex; flex-direction: column; }
.header-action small { font-size: .67rem; color: #b8c9dc; }
.header-action strong { font-size: .8rem; }
.search { height: 48px; background: #fff; border-radius: 13px; display: flex; overflow: hidden; }
.search input { min-width: 0; flex: 1; border: 0; padding: 0 17px; outline: 0; color: var(--ink); font-size: .9rem; }
.search button { width: 52px; border: 0; background: var(--orange); display: grid; place-items: center; }
.search svg { width: 22px; fill: none; stroke: #fff; stroke-width: 2; }
.mobile-search { display: none; }
.category-nav { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.category-nav__inner { display: flex; overflow-x: auto; scrollbar-width: none; }
.category-nav__inner::-webkit-scrollbar { display: none; }
.category-nav a { padding: 15px 18px; font-size: .82rem; font-weight: 600; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
.category-nav a:hover, .category-nav a[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); }

/* ---------- Home ---------- */
.hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; padding-top: 24px; }
.hero-card {
  min-height: 360px; border-radius: 24px; overflow: hidden; position: relative; display: flex;
  background: linear-gradient(125deg, var(--navy-2) 0%, var(--navy-deep) 74%); color: #fff; box-shadow: var(--shadow);
}
.hero-card::after {
  content: ""; position: absolute; width: 300px; height: 300px; right: -50px; top: -70px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%;
  box-shadow: 0 0 0 65px rgba(255, 255, 255, .025), 0 0 0 130px rgba(255, 255, 255, .018);
}
.hero-card__copy { padding: 48px 0 44px 48px; width: 58%; position: relative; z-index: 2; }
.hero-card h1 { font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.06; margin: 14px 0; letter-spacing: -.05em; text-wrap: balance; }
.hero-card h1 em { font-style: normal; color: var(--orange-soft); }
.hero-card p { max-width: 460px; color: #d5e2ef; font-size: .92rem; }
.hero-card__visual { width: 42%; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hero-card__visual img { max-height: 290px; object-fit: contain; background: #fff; border-radius: 20px; padding: 18px; filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .35)); }
.side-deals { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.side-deal {
  border-radius: 22px; padding: 26px; overflow: hidden; display: flex; justify-content: space-between;
  color: #fff; text-decoration: none; box-shadow: var(--shadow); transition: transform .2s;
}
.side-deal:hover { transform: translateY(-3px); }
.side-deal--orange { background: linear-gradient(135deg, #f05a28, #ff8047); }
.side-deal--blue { background: linear-gradient(135deg, #1d5f96, #103c69); }
.side-deal span { font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.side-deal h2 { margin: 8px 0 12px; font-size: 1.2rem; line-height: 1.25; text-wrap: balance; }
.side-deal b { font-size: .78rem; }
.side-deal__icon { font-size: 5rem !important; opacity: .16; align-self: center; transform: rotate(-9deg); letter-spacing: 0 !important; }

.trust-row { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 17px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px 8px; }
.trust-row article { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 18px; border-right: 1px solid var(--line); }
.trust-row article:last-child { border: 0; }
.trust-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cream); color: var(--orange); font-weight: 800; font-size: 1.15rem; flex: none; }
.trust-row div { display: flex; flex-direction: column; }
.trust-row strong { font-size: .82rem; }
.trust-row small { font-size: .72rem; color: var(--muted); }

.category-section, .products-section { padding-top: 44px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { font-size: 1.6rem; margin: 4px 0 0; letter-spacing: -.035em; text-wrap: balance; }
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.category-grid a {
  border: 1px solid var(--line); background: #fff; border-radius: 16px; min-height: 128px; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; transition: .2s; text-align: center; padding: 10px;
}
.category-grid a:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(12, 35, 64, .08); }
.category-grid span { font-size: 2rem; color: var(--navy); height: 46px; }
.category-grid strong { font-size: .86rem; }
.category-grid small { font-size: .72rem; color: var(--muted); margin-top: 3px; }

/* ---------- Product card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: 19px; overflow: hidden; position: relative; transition: transform .22s, box-shadow .22s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card__badges { position: absolute; top: 14px; left: 14px; z-index: 2; }
.product-card__badges span { background: var(--orange); color: #fff; padding: 5px 8px; border-radius: 6px; font-size: .68rem; font-weight: 800; }
.product-card__image { height: 230px; background: linear-gradient(145deg, #f8fafc, #edf2f6); display: grid; place-items: center; padding: 26px; }
.product-card__image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-card__body { padding: 17px; display: flex; flex-direction: column; flex: 1; }
.product-code { font-size: .68rem; color: #7d8797; letter-spacing: .09em; margin: 0; font-weight: 600; }
.product-card h3 { font-size: .92rem; line-height: 1.4; margin: 6px 0; min-height: 2.8em; font-weight: 600; }
.product-card h3 a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card h3 a:hover { color: var(--orange); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin: 10px 0 4px; }
.price strong { font-size: 1.2rem; color: var(--orange); font-variant-numeric: tabular-nums; }
.price del { font-size: .76rem; color: #98a0ad; }
.product-card__actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7px; margin-top: auto; padding-top: 12px; }
.product-card__actions .button { padding: 0 8px; font-size: .78rem; }

/* ---------- Service banner & footer ---------- */
.service-banner {
  margin-block: 48px 55px; padding: 35px 40px; border-radius: 24px; background: var(--navy); color: #fff;
  display: grid; grid-template-columns: 1fr 1.45fr; align-items: center; gap: 30px;
}
.service-banner h2 { font-size: 1.6rem; line-height: 1.27; margin: 8px 0; text-wrap: balance; }
.service-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.service-steps span { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); padding: 13px; border-radius: 11px; font-size: .8rem; }
.service-steps b { color: var(--orange-2); margin-right: 7px; }
.site-footer { background: var(--navy-deep); color: #fff; padding: 42px 0 60px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 38px; }
.footer-grid > div { display: flex; flex-direction: column; gap: 8px; }
.footer-grid p { font-size: .76rem; color: #9eb2c9; max-width: 340px; margin: 6px 0 0; }
.footer-grid h3 { font-size: .8rem; margin: 5px 0 6px; }
.footer-grid > div > a:not(.brand) { font-size: .76rem; color: #aebed0; text-decoration: none; }
.footer-grid > div > a:not(.brand):hover { color: #fff; }
.footer-grid .hotline { font-size: 1.1rem !important; color: #fff !important; font-weight: 800; }
.mobile-bottom-nav { display: none; }

/* ---------- Listing ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--muted); padding: 18px 0 4px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb span:last-child { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.listing { padding-bottom: 50px; }
.listing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 12px 0 16px; }
.listing-head h1 { margin: 0; font-size: 1.8rem; letter-spacing: -.035em; }
.listing-head p { margin: 4px 0 0; font-size: .85rem; }
.sort-form { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.sort-form select { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; }
.brand-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: thin; }
.chip { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chip small { color: var(--muted); font-weight: 500; }
.chip:hover { border-color: var(--orange); }
.chip--active { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip--active small { color: #b8c9dc; }
.pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 28px; font-size: .85rem; }
.pager a { text-decoration: none; font-weight: 700; border: 1px solid var(--line); background: #fff; padding: 9px 16px; border-radius: 10px; }
.pager a:hover { border-color: var(--orange); color: var(--orange); }
.no-results { text-align: center; background: #fff; border-radius: 16px; padding: 48px 20px; color: var(--muted); }
.no-results h2 { color: var(--ink); margin-top: 0; }

/* ---------- Product detail ---------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; margin-top: 12px; }
.pdp__media { position: relative; background: linear-gradient(145deg, #f8fafc, #edf2f6); border-radius: 18px; display: grid; place-items: center; padding: 30px; min-height: 380px; }
.pdp__media img { max-height: 420px; object-fit: contain; mix-blend-mode: multiply; }
.pdp__badge { position: absolute; top: 16px; left: 16px; background: var(--orange); color: #fff; font-weight: 800; font-size: .8rem; padding: 6px 10px; border-radius: 8px; }
.pdp__info h1 { font-size: 1.55rem; line-height: 1.3; margin: 6px 0 14px; letter-spacing: -.02em; text-wrap: balance; }
.pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 16px; background: var(--cream); border-radius: 14px; }
.pdp__price strong { font-size: 1.9rem; color: var(--orange); font-variant-numeric: tabular-nums; }
.pdp__price del { color: #98a0ad; }
.save { font-size: .76rem; font-weight: 700; color: var(--green); }
.pdp__buy { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; margin: 18px 0; }
.qty-picker { display: flex; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.qty-picker button { width: 40px; border: 0; background: #f3f5f8; font-size: 1.1rem; }
.qty-picker input { width: 46px; border: 0; text-align: center; -moz-appearance: textfield; }
.qty-picker input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pdp__installment { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px dashed var(--orange); border-radius: 12px; font-size: .82rem; margin-bottom: 14px; }
.pdp__services { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; font-size: .86rem; }
.pdp__services b { color: var(--green); margin-right: 8px; }
.pdp-market { margin: 6px 0 0; font-size: .86rem; color: #5b4a1e; }
.pdp-market b { font-weight: 800; }
.pdp-market span { color: #8a7a55; font-size: .8rem; }
.pdp-stock { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #e9f8ef; color: #12633a; font-size: .88rem; }
.pdp-stock b { font-weight: 800; }
.pdp__consult { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--navy); color: #fff; border-radius: 14px; margin-bottom: 16px; font-size: .85rem; }
.pdp__consult a { color: #fff; font-weight: 800; text-decoration: none; }

.pdp__highlights { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.pdp__highlights li { border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; }
.pdp__highlights span { font-size: .7rem; color: var(--muted); }
.pdp__highlights b { font-size: .92rem; }

/* Nội dung chi tiết dưới khung mua hàng */
.pdp-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-top: 20px; align-items: start; }
.pdp-article { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px 30px; min-width: 0; }
.pdp-article h2 { font-size: 1.15rem; margin: 26px 0 12px; letter-spacing: -.02em; text-wrap: balance; }
.pdp-article h2:first-child { margin-top: 0; }
.pdp-lead { font-size: 1rem; line-height: 1.7; margin: 0; max-width: 72ch; }
.spec-table, .compare-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.spec-table th, .spec-table td, .compare-table th, .compare-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { width: 38%; color: var(--muted); font-weight: 600; background: #fafbfc; }
.spec-table tr:last-child th, .spec-table tr:last-child td, .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.pdp-article .table-scroll { border-radius: 12px; }
.compare-table { min-width: 560px; }
.compare-table thead th { font-size: .78rem; font-weight: 600; background: #fafbfc; line-height: 1.4; }
.compare-table thead th a { text-decoration: none; color: var(--navy); }
.compare-table tbody th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.compare-table .is-current { background: var(--cream); }
/* Ghim cột tiêu chí khi cuộn ngang bảng trên điện thoại */
.compare-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: #fafbfc; box-shadow: 1px 0 0 var(--line); }
.compare-table td b { color: var(--orange); font-variant-numeric: tabular-nums; }
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
.faq details[open] { border-color: #f3c2ad; background: #fffaf7; }
.faq summary { cursor: pointer; font-weight: 700; font-size: .92rem; padding: 14px 24px 14px 0; list-style: none; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 11px; font-size: 1.2rem; color: var(--orange); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 14px; font-size: .9rem; line-height: 1.65; color: #3b4556; }
.pdp-side { position: sticky; top: 140px; }
.pdp-side__box { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.pdp-side__box h2 { font-size: .95rem; margin: 0 0 12px; }
.pdp-side__box dl { margin: 0; display: grid; gap: 4px; font-size: .84rem; }
.pdp-side__box dt { color: var(--muted); font-size: .74rem; margin-top: 8px; }
.pdp-side__box dd { margin: 0; }
.pdp-side__box a { font-weight: 700; text-decoration: none; color: var(--navy); line-height: 1.9; }

/* ---------- Bài tư vấn ---------- */
.guide { padding-bottom: 50px; }
.guide-article { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 32px 36px; margin-top: 12px; }
.guide-head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; margin: 8px 0 8px; letter-spacing: -.03em; text-wrap: balance; }
.guide-meta { font-size: .8rem; color: var(--muted); margin: 0 0 18px; }
.guide-lead { font-size: 1.05rem; line-height: 1.7; max-width: 72ch; margin: 0 0 20px; }
.guide-article h2 { font-size: 1.2rem; margin: 30px 0 12px; letter-spacing: -.02em; text-wrap: balance; }
.guide-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0; }
.guide-stats > div { background: #fafbfc; padding: 14px 16px; }
.guide-stats dt { font-size: .72rem; color: var(--muted); }
.guide-stats dd { margin: 3px 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.guide-table { min-width: 640px; }
.guide-table tbody th { white-space: normal; color: var(--ink); font-weight: 600; min-width: 200px; }
.guide-table tbody th a { text-decoration: none; color: var(--navy); }
.guide-table tbody th a:hover { color: var(--orange); }
.guide-list { list-style: none; counter-reset: guide; padding: 0; margin: 0; display: grid; gap: 12px; }
.guide-item { counter-increment: guide; display: grid; grid-template-columns: 130px 1fr; gap: 18px; border: 1px solid var(--line); border-radius: 16px; padding: 14px; align-items: center; }
.guide-item__img { position: relative; background: linear-gradient(145deg, #f8fafc, #edf2f6); border-radius: 12px; aspect-ratio: 1; display: grid; place-items: center; padding: 10px; }
.guide-item__img::before { content: counter(guide); position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.guide-item__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.guide-item h3 { font-size: 1rem; margin: 0 0 6px; line-height: 1.4; }
.guide-item h3 a { text-decoration: none; }
.guide-item h3 a:hover { color: var(--orange); }
.guide-item p { margin: 0; font-size: .88rem; color: #3b4556; line-height: 1.6; }
.guide-item__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.guide-method { font-size: .9rem; line-height: 1.7; max-width: 72ch; color: #3b4556; background: #fafbfc; border-left: 3px solid var(--orange); padding: 14px 18px; border-radius: 0 10px 10px 0; }
.guide-more { margin-top: 26px; }
.guide-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.guide-card { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; text-decoration: none; transition: border-color .2s; }
.guide-card:hover { border-color: var(--orange); }
.guide-card img { width: 110px; height: 110px; object-fit: contain; background: linear-gradient(145deg, #f8fafc, #edf2f6); border-radius: 12px; padding: 10px; mix-blend-mode: multiply; }
.guide-card h2, .guide-card h3 { font-size: .98rem; line-height: 1.4; margin: 0 0 6px; text-wrap: balance; }
.guide-card p { margin: 0; font-size: .8rem; color: var(--ink); }
.guide-card small { font-size: .72rem; color: var(--muted); }

/* ---------- Cart drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(3, 12, 24, .57); backdrop-filter: blur(2px); z-index: 70; }
.cart-drawer {
  position: fixed; z-index: 80; right: 0; top: 0; bottom: 0; width: min(460px, 100%); background: #fff;
  transform: translateX(105%); transition: transform .25s; display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(0, 0, 0, .18);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cart-drawer.open { transform: translateX(0); }
.drawer-header { padding: 22px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.drawer-header h2 { margin: 3px 0 0; font-size: 1.2rem; }
.close-button { border: 0; background: #eef1f5; width: 39px; height: 39px; border-radius: 50%; font-size: 1.35rem; line-height: 1; }
.cart-items { flex: 1; overflow: auto; padding: 12px 22px; }
.empty-cart { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-cart strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; }
.cart-item { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 74px; height: 74px; object-fit: contain; background: #f3f5f8; border-radius: 10px; padding: 6px; mix-blend-mode: multiply; }
.cart-item h4 { font-size: .8rem; margin: 0 0 5px; line-height: 1.4; font-weight: 600; }
.cart-item h4 a { text-decoration: none; }
.cart-item strong { font-size: .85rem; color: var(--orange); }
.qty { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.qty button { width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 7px; }
.qty span { font-size: .8rem; min-width: 18px; text-align: center; }
.remove-item { border: 0; background: transparent; color: #9ca3af; font-size: 1.25rem; align-self: start; }
.remove-item:hover { color: var(--red); }
.cart-footer { padding: 18px 22px; border-top: 1px solid var(--line); }
.cart-footer > div { display: flex; justify-content: space-between; font-size: .95rem; }
.cart-footer strong { color: var(--orange); }
.cart-footer small { display: block; color: var(--muted); font-size: .72rem; margin: 7px 0 14px; }
.continue-shopping { width: 100%; border: 0; background: transparent; font-weight: 600; font-size: .8rem; margin-top: 10px; padding: 8px; }

/* ---------- Checkout ---------- */
.checkout-content { width: min(1160px, calc(100% - 40px)); margin: 28px auto 55px; display: grid; grid-template-columns: 1.55fr .85fr; gap: 23px; align-items: start; }
.checkout-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.checkout-empty { padding: 50px 30px; text-align: center; }
.checkout-empty h1 { margin-top: 0; }
.checkout-step { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 24px; border-bottom: 1px solid var(--line); }
.checkout-step:last-child { border: 0; }
.step-number { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .82rem; font-weight: 700; }
.step-content h2 { margin: 6px 0 5px; font-size: 1.02rem; }
.step-hint { font-size: .76rem; color: var(--muted); margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.form-grid label, .stack label, .login-card label { font-size: .72rem; color: var(--muted); font-weight: 600; }
.form-grid input, .form-grid select, .stack input, .stack select, .login-card input {
  display: block; width: 100%; height: 45px; border: 1px solid var(--line); border-radius: 9px;
  padding: 0 12px; margin-top: 5px; outline: 0; color: var(--ink); background: #fff; font-size: .9rem;
}
.form-grid input:focus, .form-grid select:focus, .stack input:focus, .stack select:focus, .login-card input:focus { border-color: var(--orange); }
.form-grid input[aria-invalid="true"] { border-color: var(--red); background: #fff6f5; }
.span-2 { grid-column: span 2; }
.option-list { display: grid; gap: 9px; margin-top: 14px; }
.option-card {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 11px;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer;
}
.option-card:has(input:checked) { border-color: var(--orange); background: #fffaf7; }
.option-card input { accent-color: var(--orange); width: 18px; height: 18px; }
.option-icon, .payment-logo { width: 42px; height: 42px; background: #edf2f7; color: var(--navy); border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: .72rem; }
.option-card > span:last-of-type { display: flex; flex-direction: column; }
.option-card strong { font-size: .84rem; }
.option-card small { font-size: .74rem; color: var(--muted); }
.option-card > b { font-size: .74rem; justify-self: end; text-align: right; }
.free { color: var(--green); }
.addon-list { display: grid; gap: 4px; margin-top: 12px; }
.addon-list label { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.addon-list label:last-child { border: 0; }
.addon-list input { accent-color: var(--orange); width: 17px; height: 17px; }
.addon-list span { display: flex; flex-direction: column; }
.addon-list strong { font-size: .84rem; }
.addon-list small { font-size: .74rem; color: var(--muted); }
.addon-list b { font-size: .74rem; text-align: right; }
.payment-tabs { display: flex; background: #edf0f4; border-radius: 10px; padding: 4px; margin-top: 14px; width: max-content; }
.payment-tabs button { border: 0; background: transparent; border-radius: 8px; padding: 8px 16px; font-size: .8rem; font-weight: 600; }
.payment-tabs button.active { background: #fff; color: var(--orange); box-shadow: 0 2px 8px rgba(12, 35, 64, .08); }
.payment-panel { display: none; }
.payment-panel.active { display: block; }
.installment-table { margin: 14px 0; border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; }
.installment-table p { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; font-size: .82rem; }
.installment-table p b { font-variant-numeric: tabular-nums; }
.installment-table .emph { border-top: 1px solid var(--line); padding-top: 8px; }
.checkout-error { background: #fff6f5; border: 1px solid #f3c7c2; color: var(--red); padding: 10px 12px; border-radius: 10px; font-size: .82rem; margin: 14px 0 0; }
.order-summary { position: sticky; top: 140px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 21px; }
.order-summary h2 { margin: 0 0 12px; font-size: 1.02rem; }
.summary-item { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary-item img { width: 52px; height: 52px; object-fit: contain; background: #f3f5f8; border-radius: 8px; padding: 4px; mix-blend-mode: multiply; }
.summary-item p { margin: 0; font-size: .76rem; line-height: 1.35; }
.summary-item strong { font-size: .8rem; color: var(--orange); }
.summary-lines { border-bottom: 1px solid var(--line); padding: 8px 0; }
.summary-lines p { display: flex; justify-content: space-between; margin: 8px 0; font-size: .78rem; }
.summary-total { display: flex; justify-content: space-between; align-items: end; padding: 14px 0; }
.summary-total > span { font-size: .84rem; display: flex; flex-direction: column; }
.summary-total small { font-size: .68rem; color: var(--muted); }
.summary-total strong { font-size: 1.3rem; color: var(--orange); font-variant-numeric: tabular-nums; }
.secure-note { text-align: center; color: var(--muted); font-size: .72rem; margin: 12px 0 0; }

/* ---------- Order done / errors ---------- */
.done { padding: 40px 0 70px; }
.done-card { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 36px 32px; text-align: center; }
.done-card h1 { font-size: 1.5rem; margin: 12px 0 6px; text-wrap: balance; }
.done-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e6f4ec; color: var(--green); font-size: 2rem; font-weight: 800; }
.done-code { font-size: 1.05rem; }
.done-summary { text-align: left; background: var(--bg); border-radius: 14px; padding: 8px 16px; margin: 18px 0; }
.done-summary p { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; margin: 10px 0; }
.done-total { border-top: 1px solid var(--line); padding-top: 10px; font-size: .95rem !important; }
.done-total b { color: var(--orange); }

/* ---------- Toast & flash ---------- */
.toast {
  position: fixed; z-index: 100; left: 50%; bottom: 30px; transform: translate(-50%, 30px);
  background: var(--ink); color: #fff; border-radius: 11px; padding: 12px 18px; font-size: .82rem;
  opacity: 0; pointer-events: none; transition: .25s; box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.flash-list { padding-top: 14px; }
.flash { padding: 11px 14px; border-radius: 10px; font-size: .85rem; margin: 0 0 12px; }
.flash--ok { background: #e6f4ec; color: #0f5f3a; }
.flash--error { background: #fff6f5; color: var(--red); border: 1px solid #f3c7c2; }

/* ---------- Admin ---------- */
body.admin { background: var(--bg); }
.admin-bar { background: var(--navy); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; gap: 16px; flex-wrap: wrap; }
.admin-bar__user { display: flex; align-items: center; gap: 16px; font-size: .82rem; }
.admin-bar__user a { color: #b8c9dc; text-decoration: none; }
.admin-bar__user button { border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; border-radius: 8px; padding: 6px 12px; font-size: .78rem; }
.admin-main { width: min(1200px, calc(100% - 32px)); margin: 24px auto 60px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-head h1 { margin: 0; font-size: 1.5rem; }
.admin-search { display: flex; gap: 8px; }
.admin-search input { height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; min-width: 260px; }
.status-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; }
.status-tabs a { flex: none; text-decoration: none; background: #fff; border: 1px solid var(--line); padding: 8px 13px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.status-tabs a b { color: var(--muted); font-weight: 600; margin-left: 4px; }
.status-tabs a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.status-tabs a[aria-current="page"] b { color: #b8c9dc; }
.table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.admin-table th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table a { text-decoration: none; color: var(--navy); }
.admin-table small { color: var(--muted); }
.total-row td { font-weight: 700; background: var(--bg); }
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.status--new { background: #fff1e8; color: #b8420f; }
.status--confirmed { background: #e8f0fb; color: #1d4f8f; }
.status--shipping { background: #efe9fb; color: #5b3aa0; }
.status--delivered { background: #e6f4ec; color: #0f5f3a; }
.status--cancelled { background: #f0f1f3; color: #5b6472; }
.pay { font-weight: 600; }
.pay--paid { color: var(--green); }
.pay--unpaid { color: #b8420f; }
.pay--refunded { color: #5b6472; }
.empty-state { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 40px; text-align: center; color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.admin-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.admin-panel h2 { font-size: .95rem; margin: 18px 0 10px; }
.admin-panel h2:first-child { margin-top: 0; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; font-size: .86rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.stack { display: grid; gap: 10px; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.timeline li { display: flex; flex-direction: column; border-left: 2px solid var(--line); padding-left: 12px; font-size: .82rem; }
.timeline small { color: var(--muted); }
.back-link { display: inline-block; margin-bottom: 10px; font-size: .82rem; text-decoration: none; color: var(--muted); }
.login-card { max-width: 380px; margin: 60px auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: 14px; }
.login-card h1 { margin: 0 0 4px; font-size: 1.3rem; }

/* ---------- Cảm ứng (điện thoại + iPad) ----------
   iOS Safari tự phóng to cả trang khi chạm vào ô nhập có chữ nhỏ hơn 16px. Đặt 16px cho
   mọi ô nhập ở mọi kích thước — nhìn vẫn gọn trên máy tính, và không thiết bị nào bị zoom. */
.search input, .form-grid input, .form-grid select, .stack input, .stack select,
.login-card input, .sort-form select, .admin-search input, .qty-picker input { font-size: 16px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, label, select { -webkit-tap-highlight-color: rgba(240, 90, 40, .15); touch-action: manipulation; }

/* Hiệu ứng nổi khi di chuột chỉ dành cho thiết bị có chuột. Trên màn cảm ứng, :hover bị
   "dính" sau khi chạm, làm thẻ sản phẩm cứ lơ lửng. */
@media (hover: none) {
  .button:hover, .side-deal:hover, .category-grid a:hover, .product-card:hover { transform: none; box-shadow: none; }
  .category-grid a:hover { border-color: var(--line); }
  .button:active { transform: scale(.98); }
  .product-card:active, .category-grid a:active { border-color: var(--orange); }
}

/* Vùng chạm tối thiểu ~44px theo khuyến nghị của Apple/Google */
.close-button { width: 44px; height: 44px; }
.qty button { width: 40px; height: 40px; border-radius: 9px; font-size: 1.05rem; }
.qty span { min-width: 26px; font-size: .9rem; }
.remove-item { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.breadcrumb a { padding: 12px 6px; margin: -12px -6px; }
.chip { min-height: 38px; display: inline-flex; align-items: center; gap: 4px; }
.qty-picker button { width: 44px; }
.qty-picker input { width: 48px; }

/* Thanh đặt hàng dính đáy — chỉ hiện trên điện thoại (xem media query bên dưới) */
.checkout-bar { display: none; }

/* ---------- Responsive ----------
   Ba nhóm thiết bị:
     > 1000px      máy tính, iPad ngang (1024–1366): bố cục đầy đủ
     761–1000px    iPad dọc (768–834): vẫn 2 cột ở trang sản phẩm và thanh toán — đủ chỗ,
                   giữ giá + nút mua + tổng tiền trong tầm nhìn đầu
     ≤ 760px       điện thoại: 1 cột, thanh điều hướng đáy, thanh đặt hàng dính đáy */
@media (max-width: 1000px) {
  .container { width: calc(100% - 32px); }
  .header-main { grid-template-columns: auto 1fr auto; gap: 14px; }
  .header-main > a.header-action { display: none; }
  .hero-card { min-height: 320px; }
  .hero-card__copy { width: 64%; padding: 34px 0 34px 30px; }
  .hero-card h1 { font-size: 2.1rem; }
  .hero-card__visual { width: 36%; padding: 16px; }
  .hero-card__visual img { max-height: 210px; padding: 12px; }
  .side-deal { padding: 22px 20px; }
  .side-deal h2 { font-size: 1.05rem; }
  .side-deal__icon { font-size: 3.4rem !important; }
  /* 4 mục cam kết chật ở 820px (chữ xuống 3 dòng) -> 2×2 */
  .trust-row { grid-template-columns: repeat(2, 1fr); padding: 6px 8px; }
  .trust-row article { justify-content: flex-start; padding: 14px 16px; border-right: 0; }
  .trust-row article:nth-child(odd) { border-right: 1px solid var(--line); }
  .trust-row article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  /* 8 danh mục: 4 cột = 2 hàng khít, không lẻ ô */
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .product-grid, .product-grid--4 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .product-card__image { height: 200px; padding: 22px; }
  .service-banner { grid-template-columns: 1fr; padding: 30px; }
  /* Trang sản phẩm: giữ 2 cột trên iPad dọc để giá và nút mua nằm trong tầm nhìn đầu */
  .pdp { gap: 24px; padding: 22px; }
  .pdp__media { min-height: 0; padding: 22px; }
  .pdp__media img { max-height: 320px; }
  .pdp__info h1 { font-size: 1.3rem; }
  .pdp__price strong { font-size: 1.55rem; }
  .pdp__buy { grid-template-columns: 1fr 1fr; }
  .pdp__buy .qty-picker { grid-column: span 2; justify-self: start; }
  /* Thanh toán: vẫn 2 cột, tóm tắt đơn dính bên phải */
  .checkout-content { width: calc(100% - 32px); grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 20px; }
  .checkout-step { grid-template-columns: 34px 1fr; gap: 10px; padding: 20px 18px; }
  .step-number { width: 30px; height: 30px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .option-card { grid-template-columns: auto 1fr; }
  .option-card .option-icon, .option-card .payment-logo { display: none; }
  .option-card > b { grid-column: 2; justify-self: start; text-align: left; }
  .order-summary { top: 128px; padding: 18px; }
  .admin-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* iPad dọc: khung liên hệ xuống dưới bài, bài chiếm đủ chiều ngang */
  .pdp-detail { grid-template-columns: 1fr; }
  .pdp-side { position: static; }
  .pdp-article { padding: 22px 24px; }
  .guide-article { padding: 26px 26px; }
  .guide-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .container { width: calc(100% - 24px); }
  .top-strip { display: none; }
  .header-main { min-height: 58px; grid-template-columns: 1fr; }
  .header-main > .search, .cart-action { display: none; }
  .brand__mark { width: 36px; height: 36px; border-radius: 10px 10px 10px 3px; font-size: .8rem; }
  .mobile-search { display: flex; gap: 9px; padding-bottom: 11px; }
  .mobile-search .search { flex: 1; height: 43px; }
  .mobile-cart { position: relative; width: 44px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); border-radius: 11px; color: #fff; }
  .mobile-cart svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .mobile-cart .cart-count { position: absolute; right: -4px; top: -5px; width: 19px; height: 19px; border-radius: 50%; background: var(--orange); font-size: .62rem; display: grid; place-items: center; }
  .category-nav a { padding: 11px 13px; font-size: .78rem; }
  .hero-grid { display: block; padding-top: 12px; }
  .hero-card { min-height: 0; border-radius: 19px; }
  .hero-card__copy { width: 100%; padding: 26px 20px; }
  .hero-card h1 { font-size: 1.75rem; }
  .hero-card p { font-size: .82rem; }
  .hero-card__visual { display: none; }
  .side-deals { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 9px; margin-top: 9px; }
  .side-deal { padding: 16px 14px; border-radius: 14px; }
  .side-deal h2 { font-size: .9rem; }
  .side-deal__icon { display: none; }
  .trust-row { grid-template-columns: repeat(2, 1fr); padding: 6px; margin-top: 11px; }
  .trust-row article { justify-content: flex-start; padding: 10px 8px; border-right: 0; }
  .trust-icon { width: 34px; height: 34px; }
  .trust-row strong { font-size: .74rem; }
  .trust-row small { font-size: .68rem; }
  .category-section, .products-section { padding-top: 30px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .section-heading h2 { font-size: 1.3rem; }
  /* 4 cột gọn kiểu ứng dụng mua sắm: 8 danh mục = 2 hàng khít */
  .category-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .category-grid a { min-height: 92px; border-radius: 13px; padding: 8px 4px; }
  .category-grid span { font-size: 1.45rem; height: 34px; }
  .category-grid strong { font-size: .72rem; line-height: 1.25; }
  .category-grid small { font-size: .62rem; }
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .product-card { border-radius: 14px; }
  .product-card:hover { transform: none; box-shadow: none; }
  .product-card__image { height: 160px; padding: 16px; }
  .product-card__body { padding: 11px; }
  .product-card h3 { font-size: .84rem; }
  .price strong { font-size: 1rem; }
  .product-card__actions { grid-template-columns: 1fr; }
  .product-card__actions .button--outline { display: none; }
  .service-banner { margin-block: 28px; padding: 24px 20px; border-radius: 18px; }
  .service-steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .mobile-bottom-nav {
    position: fixed; z-index: 60; bottom: 0; left: 0; right: 0;
    height: calc(66px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff; box-shadow: 0 -5px 25px rgba(12, 35, 64, .12);
    display: grid; grid-template-columns: repeat(4, 1fr);
  }
  .mobile-bottom-nav a, .mobile-bottom-nav button {
    border: 0; background: transparent; text-decoration: none; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; font-size: .68rem; color: #697586;
  }
  .mobile-bottom-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  .mobile-bottom-nav span { white-space: nowrap; }
  .bottom-cart { position: relative; }
  .bottom-cart__count {
    position: absolute; top: 8px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--orange); color: #fff; font-size: .6rem; display: grid; place-items: center;
  }
  /* dvh: chiều cao thật của màn hình khi thanh địa chỉ Safari co/giãn; vh làm dự phòng */
  .cart-drawer { top: auto; height: min(84vh, 720px); height: min(84dvh, 720px); border-radius: 22px 22px 0 0; transform: translateY(105%); width: 100%; }
  .cart-drawer.open { transform: translateY(0); }
  .checkout-content { width: 100%; margin: 0; grid-template-columns: 1fr; gap: 0; }
  .checkout-form { border: 0; border-radius: 0; }
  .checkout-step { grid-template-columns: 1fr; padding: 20px 14px; gap: 8px; }
  .option-card { padding: 12px; }
  .payment-tabs { width: 100%; }
  .payment-tabs button { flex: 1; }
  .order-summary { position: static; border: 0; border-radius: 0; border-top: 8px solid var(--bg); padding: 20px 14px; }
  /* Trang thanh toán: bỏ thanh điều hướng đáy, thay bằng thanh tổng tiền + nút Đặt hàng
     luôn trong tầm ngón tay, không phải cuộn qua hết form mới thấy nút. */
  .page-checkout .mobile-bottom-nav { display: none; }
  .page-checkout { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .page-checkout .order-summary [data-place-order] { display: none; }
  .checkout-bar {
    display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; gap: 12px;
    align-items: center; justify-content: space-between; background: #fff;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(12, 35, 64, .14);
  }
  .checkout-bar > span { display: flex; flex-direction: column; min-width: 0; }
  .checkout-bar small { font-size: .7rem; color: var(--muted); }
  .checkout-bar strong { font-size: 1.15rem; color: var(--orange); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .checkout-bar .button { min-height: 50px; padding: 0 26px; font-size: .95rem; flex: none; }
  .pdp { grid-template-columns: 1fr; padding: 14px; gap: 16px; border-radius: 16px; }
  .pdp__media { padding: 16px; }
  .pdp__media img { max-height: 240px; }
  .pdp__info h1 { font-size: 1.2rem; }
  .pdp__price strong { font-size: 1.5rem; }
  .pdp__highlights { grid-template-columns: 1fr 1fr; }
  .pdp-detail { margin-top: 12px; gap: 12px; }
  .pdp-article { padding: 18px 16px; border-radius: 16px; }
  .pdp-article h2 { font-size: 1.05rem; margin-top: 22px; }
  .pdp-lead { font-size: .95rem; }
  .spec-table th, .spec-table td { padding: 10px 11px; }
  .spec-table th { width: 44%; }
  .guide-article { padding: 18px 16px; border-radius: 16px; }
  .guide-lead { font-size: .98rem; }
  .guide-stats dd { font-size: 1rem; }
  .guide-item { grid-template-columns: 88px 1fr; gap: 12px; padding: 12px; align-items: start; }
  .guide-item h3 { font-size: .92rem; }
  .guide-item p { font-size: .84rem; }
  .guide-item__actions .button { flex: 1; padding: 0 10px; }
  .guide-cards { grid-template-columns: 1fr; gap: 10px; }
  .guide-card { grid-template-columns: 84px 1fr; gap: 12px; }
  .guide-card img { width: 84px; height: 84px; }
  .listing-head h1 { font-size: 1.4rem; }
  .done-card { padding: 28px 18px; }
  .admin-search input { min-width: 0; flex: 1; }
  .admin-search { width: 100%; }
  .toast { bottom: 84px; max-width: calc(100% - 28px); }
  .page-checkout .toast { bottom: 94px; }
}

/* Điện thoại nhỏ (iPhone SE đời đầu, Android 360px trở xuống) */
@media (max-width: 374px) {
  .hero-card h1 { font-size: 1.5rem; }
  .side-deals { grid-template-columns: 1fr; }
  .product-card__image { height: 140px; padding: 12px; }
  .product-card h3 { font-size: .8rem; }
  .price strong { font-size: .95rem; }
  .category-grid strong { font-size: .66rem; }
.checkout-bar .button { padding: 0 18px; }
}

.checkout-voucher{margin:16px 0;padding:14px;border:1px dashed var(--orange);border-radius:14px;background:#fffaf4}.checkout-voucher>div:first-child{display:flex;flex-direction:column;gap:2px}.checkout-voucher small{color:var(--muted);font-size:.75rem}.voucher-entry{display:flex;gap:7px;margin-top:10px}.voucher-entry input{min-width:0;flex:1;text-transform:uppercase}.voucher-message{margin:7px 0 0;color:#18794e;font-size:.78rem;min-height:1.2em}.summary-lines [data-voucher-row] strong{color:#18794e}
.checkout-offers{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.checkout-offers__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.checkout-offers__head h3{font-size:.95rem;margin:0}.checkout-offers__head a{font-size:.75rem}.checkout-offer{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--line)}.checkout-offer:first-child{border-top:0}.checkout-offer img{width:54px;height:54px;object-fit:contain;border-radius:8px;background:#fff}.checkout-offer div{display:grid;min-width:0}.checkout-offer div small{color:var(--orange);font-weight:700}.checkout-offer div a{font-size:.77rem;line-height:1.35;color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.checkout-offer div b{font-size:.82rem}.checkout-offer div span{font-size:.7rem;color:#18794e}

/* iPad/điện thoại xoay ngang, màn thấp: thu gọn header để còn chỗ cho nội dung */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header { position: static; }
  .cart-drawer { height: 100%; height: 100dvh; top: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Điểm nổi bật (lấy từ trang sản phẩm của công ty, đã lọc cam kết dịch vụ) */
.pdp-points { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.pdp-points li { position: relative; padding: 10px 12px 10px 34px; border: 1px solid var(--line); border-radius: 11px; line-height: 1.5; }
.pdp-points li::before { content: "✓"; position: absolute; left: 12px; top: 10px; color: var(--orange); font-weight: 700; }

/* ---------- Quản trị: phân quyền, bài viết, nhân viên ---------- */
.admin-nav { background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 4px; padding: 0 16px; overflow-x: auto; }
.admin-nav a { flex: none; padding: 13px 14px; min-height: 44px; text-decoration: none; font-weight: 600; font-size: .86rem; color: var(--muted); border-bottom: 3px solid transparent; }
.admin-nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--orange); }
.assignee { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: var(--navy); white-space: nowrap; }
.assignee--none { background: #fff1e8; color: #b8420f; }
.notice { background: var(--cream); border: 1px solid var(--orange-soft); border-radius: 12px; padding: 12px 14px; font-size: .86rem; margin: 0 0 12px; }
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; font-size: .84rem; }
.checks li { padding: 8px 10px 8px 30px; border-radius: 10px; position: relative; line-height: 1.45; }
.checks li::before { position: absolute; left: 10px; top: 8px; font-weight: 700; }
.checks .err { background: #fdecec; color: #8f1d1d; }
.checks .err::before { content: "✕"; }
.checks .tip { background: #f5f7fa; color: var(--ink); }
.checks .tip::before { content: "!"; color: #b8420f; }
.checks .ok { background: #e6f4ec; color: #0f5f3a; }
.checks .ok::before { content: "✓"; }
.editor label { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; }
.editor input, .editor textarea, .editor select { font: inherit; font-size: 16px; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; box-sizing: border-box; background: #fff; }
.editor textarea { min-height: 420px; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; resize: vertical; }
.editor textarea[name="summary"] { min-height: 90px; font-family: inherit; }
.editor .hint { font-weight: 400; color: var(--muted); font-size: .78rem; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.format-help { font-size: .8rem; line-height: 1.6; }
.format-help code { background: #f2f4f7; padding: 1px 5px; border-radius: 5px; }
.role-grid { display: grid; gap: 8px; }
.role-grid label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.role-grid input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.role-grid b { display: block; font-size: .88rem; }
.role-grid small { color: var(--muted); }
.temp-password { font: 700 1.6rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; background: var(--cream); border: 2px dashed var(--orange); border-radius: 12px; padding: 16px; text-align: center; user-select: all; }
.inactive td { color: var(--muted); }
.preview-bar { background: #fff1e8; border-bottom: 2px solid var(--orange); padding: 10px 16px; text-align: center; font-weight: 600; font-size: .88rem; }
.article-body { font-size: 1.02rem; line-height: 1.75; }
.article-body h2 { margin: 1.8em 0 .6em; font-size: 1.3rem; scroll-margin-top: 90px; }
.article-body h3 { margin: 1.4em 0 .5em; font-size: 1.08rem; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.article-body figure { margin: 1.4em 0; }
.article-body figcaption { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 6px; }
.article-body blockquote { margin: 1.2em 0; padding: 4px 16px; border-left: 4px solid var(--orange); background: var(--cream); border-radius: 0 10px 10px 0; }
.article-body .table-scroll { margin: 1.2em 0; }
.article-toc { background: #f7f8fa; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 0 0 20px; }
.article-toc ol { margin: 6px 0 0; padding-left: 20px; line-height: 1.8; }
.article-cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; margin-bottom: 18px; }
.article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.article-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.article-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #f2f4f7; }
.article-card div { padding: 14px 16px 16px; display: grid; gap: 6px; }
.article-card h2 { font-size: 1.02rem; margin: 0; line-height: 1.4; }
.article-card p { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) {
  .editor textarea { min-height: 320px; }
  .admin-bar__user { width: 100%; justify-content: space-between; gap: 10px; }
}
/* Ô lưới mặc định min-width:auto → bảng rộng đẩy cả trang tràn ngang trên điện thoại */
.admin-grid > * { min-width: 0; }
.admin-panel p { font-size: .88rem; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; line-height: 1.5; margin: 14px 0 4px; cursor: pointer; }
.consent input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--orange); }
.consent input[aria-invalid="true"] { outline: 2px solid #d92d20; outline-offset: 2px; }
.bct-badge { display: inline-block; margin-top: 8px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-size: .78rem; }

/* =====================================================================
   Tìm kiếm: ô chọn danh mục + gợi ý khi gõ
   ===================================================================== */
.search--suggest { position: relative; overflow: visible; }
.search--suggest input { border-radius: 0; }
.search__cat { border: 0; border-right: 1px solid var(--line); background: #f4f6f9; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; padding: 0 10px; max-width: 150px; border-radius: 13px 0 0 13px; }
.search--suggest > button { border-radius: 0 13px 13px 0; }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(12, 35, 64, .18); z-index: 90; max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; color: var(--ink); }
.suggest__section { padding: 6px 4px; }
.suggest__section + .suggest__section { border-top: 1px solid var(--line); }
.suggest h4 { margin: 4px 8px 6px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.suggest a { display: block; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-size: .86rem; }
.suggest a:hover, .suggest a.is-active { background: #f1f4f8; }
.suggest__product { display: grid !important; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.suggest__product img { width: 40px; height: 40px; object-fit: contain; background: #fafbfc; border-radius: 6px; }
.suggest__product span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.suggest__product b { color: var(--orange); white-space: nowrap; font-size: .84rem; }
.suggest__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.suggest__chips a.chip { display: inline-flex; padding: 6px 11px; }
.suggest__all { font-weight: 700; color: var(--navy); text-align: center; border-top: 1px solid var(--line); margin-top: 4px; }
.suggest__hint { margin: 6px 10px; font-size: .78rem; color: var(--muted); }

/* =====================================================================
   Trang danh sách: bộ lọc
   ===================================================================== */
.listing-tools { display: flex; gap: 10px; align-items: center; }
.filter-toggle { display: none; }
.filter-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--orange); color: #fff; font-size: .7rem; margin-left: 4px; }
.price-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.active-filter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 36px; border-radius: 999px; background: var(--cream); border: 1px solid var(--orange-soft); font-size: .8rem; font-weight: 600; text-decoration: none; }
.active-filter span { color: var(--orange); font-size: 1rem; }
.clear-filters { font-size: .8rem; color: var(--muted); }
.listing-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filters { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.filters__head { display: flex; justify-content: space-between; align-items: center; }
.filters__head h2 { font-size: 1rem; margin: 0; }
.filters__head .close-button { display: none; }
.filters fieldset { border: 0; border-top: 1px solid var(--line); margin: 12px 0 0; padding: 12px 0 0; }
.filters legend { font-weight: 700; font-size: .82rem; padding: 0; margin-bottom: 6px; }
.opt { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 6px 2px; font-size: .84rem; cursor: pointer; min-height: 36px; }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); }
.opt small { color: var(--muted); }
.opt--more { display: none; }
.opt--more.show { display: grid; }
.link-button { border: 0; background: none; color: var(--navy); font-weight: 700; font-size: .8rem; padding: 6px 2px; cursor: pointer; }
.price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-top: 8px; }
.price-range input { width: 100%; box-sizing: border-box; height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 8px; font-size: 16px; }
.filters__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 14px; position: sticky; bottom: -14px; background: #fff; padding: 10px 0 4px; }
body.no-scroll { overflow: hidden; }

@media (max-width: 1000px) {
  .filter-toggle { display: inline-flex; align-items: center; }
  .listing-layout { grid-template-columns: 1fr; }
  .product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters { position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); max-height: none; border-radius: 0 18px 18px 0; z-index: 80; transform: translateX(-105%); transition: transform .25s; padding-bottom: 0; }
  .filters.open { transform: none; }
  .filters__head .close-button { display: grid; }
  .search__cat { display: none; }
}
@media (max-width: 760px) {
  .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .listing-tools { width: 100%; justify-content: space-between; }
}

/* =====================================================================
   Flash Sale
   ===================================================================== */
.nav-flash { color: var(--orange) !important; font-weight: 800 !important; }
.flash-section { background: linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, #1b3f6b); color: #fff; border-radius: 22px; padding: 22px; margin: 22px 0; }
.flash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.flash-head h2 { margin: 4px 0 0; font-size: 1.7rem; letter-spacing: -.03em; }
.flash-head .eyebrow { color: var(--orange-soft); }
.text-link--light { color: #fff; }
.flash-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; }
.flash-tabs button { flex: none; display: grid; gap: 2px; text-align: left; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; border-radius: 12px; padding: 8px 14px; min-height: 48px; cursor: pointer; }
.flash-tabs button b { font-size: 1rem; }
.flash-tabs button small { font-size: .7rem; opacity: .8; }
.flash-tabs button[aria-selected="true"] { background: var(--orange); border-color: var(--orange); }
.flash-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-bottom: 14px; }
.flash-meta strong { font-size: 1rem; }
.flash-meta small { width: 100%; opacity: .75; font-size: .74rem; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 800; background: rgba(255,255,255,.14); padding: 3px 8px; border-radius: 7px; letter-spacing: .04em; }
.flash-section .product-card { color: var(--ink); }
.badge-flash { background: linear-gradient(90deg, #ff3d2e, var(--orange)) !important; }
.price--flash strong { color: #e0301e; }
.flash-progress { position: relative; height: 22px; border-radius: 11px; background: #ffe3d6; overflow: hidden; margin: 6px 0 10px; }
.flash-progress span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff7a3e, #e0301e); border-radius: 11px; }
.flash-progress b { position: relative; display: block; text-align: center; font-size: .7rem; line-height: 22px; color: #7a1d0f; }
.flash-note { display: block; color: #c2410c; font-size: .74rem; font-weight: 600; margin: 2px 0; }
.flash-rules { margin: -8px 0 24px; }
.pdp-flash { border: 2px solid #ffb18f; background: #fff7f2; border-radius: 16px; padding: 12px 14px; margin: 6px 0 12px; }
.pdp-flash__top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; color: #c2410c; font-size: .82rem; }
.pdp-flash__top .countdown { background: #e0301e; color: #fff; }
.pdp-flash .pdp__price strong { color: #e0301e; }
.product-card--upcoming { opacity: .95; }

/* =====================================================================
   Trang chủ: tìm theo mức giá, tab giá tốt, yêu thích
   ===================================================================== */
.price-finder__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.price-finder__group { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.price-finder__group h3 { margin: 0 0 10px; font-size: .95rem; }
.price-finder__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tab-row { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; }
.tab-row button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; min-height: 40px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.tab-row button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.wish-button { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92); font-size: 1.1rem; color: #e0301e; cursor: pointer; display: grid; place-items: center; }
.wish-button[aria-pressed="true"] { background: #fff1ee; border-color: #ffb8a8; }
@media (max-width: 760px) {
  .price-finder__grid { grid-template-columns: 1fr; }
  .flash-section { padding: 16px 12px; border-radius: 16px; margin: 16px -4px; }
  .flash-head h2 { font-size: 1.35rem; }
  .wish-button { width: 34px; height: 34px; top: 8px; right: 8px; }
}
.pick-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; font-size: .84rem; max-height: 300px; overflow-y: auto; }
.pick-list li { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; display: flex; justify-content: space-between; gap: 8px; }
.pick-list a { color: var(--navy); }

/* Tra cứu đơn + tiến trình đơn cho khách */
.lookup-card { display: grid; gap: 12px; text-align: left; max-width: 440px; }
.lookup-card label { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; }
.lookup-card input { height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 16px; }
.order-timeline { list-style: none; padding: 0; margin: 10px auto 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.order-timeline li { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .8rem; text-align: center; }
.order-timeline small { color: var(--muted); }

/* ---------- Dịch vụ bảo trì ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 24px; }
.svc-card { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-decoration: none; color: inherit; }
.svc-card:hover { border-color: var(--orange); }
.svc-card__icon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--cream); display: grid; place-items: center; }
.svc-card__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--orange); stroke-width: 1.8; }
.svc-card h2 { font-size: 1rem; margin: 0 0 4px; }
.svc-card p { margin: 0 0 6px; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.svc-card b { color: var(--orange); font-size: .9rem; }
.svc-steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; counter-reset: s; }
.svc-steps li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: .86rem; counter-increment: s; }
.svc-steps li::before { content: counter(s, decimal-leading-zero); display: block; color: var(--orange); font-weight: 800; }
.svc-steps b { display: block; }
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.svc-book { position: sticky; top: 14px; }
.svc-form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.svc-form h2 { margin: 0; font-size: 1.05rem; }
.svc-form label { display: grid; gap: 5px; font-size: .82rem; font-weight: 600; }
.svc-form input:not([type=checkbox]), .svc-form select { height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font-size: 16px; background: #fff; width: 100%; box-sizing: border-box; }
.svc-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 0; display: grid; gap: 6px; max-height: 330px; overflow-y: auto; }
.svc-form legend { font-size: .8rem; font-weight: 700; padding: 0 4px; }
.svc-pick { display: grid; grid-template-columns: 1fr 64px; gap: 8px; align-items: center; }
.svc-pick label { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: .82rem; }
.svc-pick label input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--orange); }
.svc-pick small { display: block; color: var(--orange); font-weight: 700; }
.svc-pick input[type=number] { height: 38px !important; text-align: center; }
.svc-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svc-inc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-ex { padding-left: 18px; line-height: 1.7; font-size: .9rem; color: var(--muted); }
.svc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-table td small { margin-left: 2px; }
@media (max-width: 1000px) { .svc-layout { grid-template-columns: 1fr; } .svc-book { position: static; } .svc-steps ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .svc-inc { grid-template-columns: 1fr; } .svc-when { grid-template-columns: 1fr; } }
.svc-layout > * { min-width: 0; }
.svc-form label.consent { display: flex; font-weight: 400; }
.svc-table th, .svc-table td { white-space: normal; }
.svc-table th[scope="row"] { position: static; min-width: 0; }
@media (max-width: 760px) {
  .svc-table th:nth-child(2), .svc-table td:nth-child(2) { display: none; }
  .svc-table td b { white-space: nowrap; }
}
/* Bảng giá dịch vụ: không cần cuộn ngang như bảng so sánh sản phẩm */
.compare-table.svc-table { min-width: 0; }
.compare-table.svc-table tbody th { white-space: normal; color: var(--ink); }
.compare-table.svc-table tr > :first-child { position: static; box-shadow: none; }

/* ---------- Đặt lịch nhanh /dich-vu ---------- */
.svcb { padding-bottom: 110px; max-width: 880px; }
.svcb-head h1 { margin: 6px 0 4px; font-size: 1.7rem; letter-spacing: -.03em; }
.svcb-head p { margin: 0 0 16px; color: var(--muted); }
.svcb-form { display: grid; gap: 14px; }
.svcb-step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.svcb-step h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.05rem; }
.svcb-step h2 span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .82rem; }
.svcb-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.svcb-devices button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; min-height: 92px; border: 2px solid var(--line); border-radius: 14px; background: #fff; font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; }
.svcb-devices svg { width: 30px; height: 30px; fill: none; stroke: var(--navy); stroke-width: 1.7; }
.svcb-devices button[aria-selected="true"] { border-color: var(--orange); background: var(--cream); }
.svcb-devices button[aria-selected="true"] svg { stroke: var(--orange); }
.svcb-devices b { position: absolute; top: 6px; right: 8px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--orange); color: #fff; font-size: .72rem; display: grid; place-items: center; }
.svcb-panel h3 { margin: 14px 0 6px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.svcb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.svcb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: 12px; min-height: 60px; }
.svcb-row.on { border-color: var(--orange); background: #fff8f3; }
.svcb-row label { display: grid; gap: 2px; font-size: .86rem; font-weight: 600; cursor: pointer; }
.svcb-row label b { color: var(--orange); font-size: .84rem; }
.svcb-row label small { color: var(--muted); font-weight: 500; }
.stepper { display: flex; align-items: center; flex: none; }
.stepper button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 1.2rem; font-weight: 700; color: var(--navy); cursor: pointer; }
.stepper button[data-step="1"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.stepper input { width: 34px; height: 38px; border: 0; text-align: center; font-size: 16px; font-weight: 700; background: transparent; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.svcb-row:not(.on) .stepper button[data-step="-1"], .svcb-row:not(.on) .stepper input { visibility: hidden; }
.svcb-hint { font-size: .78rem; color: var(--muted); margin: 6px 2px 0; }
.svcb-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.svcb-chips::-webkit-scrollbar { display: none; }
.svcb-chips--slot { margin-top: 10px; }
.svcb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.svcb-chip span { display: grid; gap: 1px; text-align: center; min-width: 76px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; font-size: .78rem; color: var(--muted); cursor: pointer; }
.svcb-chip b { color: var(--ink); font-size: .86rem; }
.svcb-chip input:checked + span { border-color: var(--orange); background: var(--cream); }
.svcb-chip input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.svcb-chips--slot .svcb-chip span { min-width: 150px; }
.svcb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svcb-fields label { display: grid; gap: 5px; font-size: .82rem; font-weight: 600; }
.svcb-wide { grid-column: 1 / -1; }
.svcb-fields input, .svcb-note input { height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 16px; width: 100%; box-sizing: border-box; }
.svcb-note { margin: 10px 0 4px; }
.svcb-note summary { cursor: pointer; font-size: .84rem; color: var(--navy); font-weight: 600; padding: 4px 0; }
.svcb-note input { margin-top: 6px; }
.svcb-bar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--navy); color: #fff; border-radius: 16px; padding: 10px 10px 10px 18px; box-shadow: 0 14px 34px rgba(12, 35, 64, .3); }
.svcb-bar small { display: block; color: #b8c9dc; font-size: .76rem; }
.svcb-bar strong { font-size: 1.15rem; }
.svcb-bar .button { min-width: 140px; min-height: 48px; }
.svcb-more { margin-top: 28px; }
.svcb-more h2 { font-size: 1.1rem; }
.svcb-more .svc-card h3 { font-size: .95rem; margin: 0 0 4px; }
@media (max-width: 760px) {
  .svcb-list { grid-template-columns: 1fr; }
  .svcb-fields { grid-template-columns: 1fr; }
  .svcb-step { padding: 14px 12px; }
  .svcb-bar { bottom: 74px; }
  .svcb-devices button { min-height: 80px; font-size: .8rem; }
}
.svc-quick { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.svc-quick h2 { margin: 0; font-size: 1.05rem; }
.svc-quick p { margin: 0; }
.svc-quick ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.svc-quick li a { display: grid; grid-template-columns: 1fr auto 32px; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-size: .82rem; min-height: 44px; }
.svc-quick li a:hover { border-color: var(--orange); }
.svc-quick li b { color: var(--orange); white-space: nowrap; font-size: .8rem; }
.svc-quick li i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--orange); color: #fff; font-weight: 800; }
.pdp-svc-hint { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin: 4px 0 10px; border: 1px dashed #c9d3df; border-radius: 12px; font-size: .82rem; text-decoration: none; color: var(--ink); }
.pdp-svc-hint b { color: var(--navy); white-space: nowrap; }
.svcb-form > * { min-width: 0; }
.svcb-chip { position: relative; flex: none; }
.svcb-chip em { display: block; font-style: normal; font-size: .7rem; font-weight: 700; color: #c2410c; }
.svcb-chip--ot span { border-style: dashed; }
/* Chọn buổi: 3 ô bằng nhau, luôn thấy đủ cả buổi tối (ngoài giờ) */
.svcb-chips--slot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.svcb-chips--slot .svcb-chip span { min-width: 0; height: 100%; box-sizing: border-box; }
.svcb-promo { display: inline-block; margin: 4px 0 2px; padding: 8px 12px; border-radius: 10px; background: var(--cream); border: 1px solid var(--orange-soft); font-size: .86rem; }
.svcb-loyal { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border: 2px dashed var(--orange-soft); border-radius: 12px; background: #fffaf6; cursor: pointer; }
.svcb-loyal input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--orange); }
.svcb-loyal b { display: block; font-size: .88rem; }
.svcb-loyal small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.45; margin-top: 2px; }

/* ---------- Tài khoản khách hàng ---------- */
.acct-badge{border-color:var(--tier,#6b7a90);color:var(--tier,#6b7a90)}
.acct-loyal-card{background:linear-gradient(135deg,color-mix(in srgb,var(--tier) 11%,white),#fff 58%);border:1px solid color-mix(in srgb,var(--tier) 35%,#dbe3ec);border-radius:18px;padding:20px;margin:18px 0;box-shadow:0 8px 24px rgba(26,43,70,.06)}
.acct-loyal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.acct-loyal-top h2{color:var(--tier);font-size:1.55rem;margin:2px 0 0}.acct-tier-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:#667085}.acct-loyal-spend{text-align:right}.acct-loyal-spend b,.acct-loyal-spend span{display:block}.acct-loyal-spend span{font-size:.78rem;color:#667085;margin-top:3px}
.acct-progress{height:9px;background:#e8edf3;border-radius:999px;overflow:hidden;margin:16px 0 7px}.acct-progress i{display:block;height:100%;background:var(--tier);border-radius:inherit}.acct-loyal-card ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 24px;margin:14px 0;padding:0;list-style:none}.acct-loyal-card li:before{content:"✓";color:var(--tier);font-weight:800;margin-right:8px}.acct-loyal-action{margin:14px 0 0;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--tier) 22%,#e5e7eb)}
.acct-loyal-orders{margin-top:12px;font-size:.86rem}.acct-loyal-orders summary{cursor:pointer;color:#475467}.acct-loyal-orders ul{display:block;margin:8px 0 0}.acct-loyal-orders li{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid #e7ebf0}.acct-loyal-orders li:before{content:none}
@media(max-width:640px){.acct-loyal-top{display:block}.acct-loyal-spend{text-align:left;margin-top:12px}.acct-loyal-card ul{grid-template-columns:1fr}}
.acct { padding: 22px 0 60px; }
.acct-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 12px; align-content: start; }
.acct > .acct-card { max-width: 440px; margin: 10px auto; }
.acct-card h1 { margin: 0; font-size: 1.4rem; }
.acct-card h2 { margin: 6px 0 0; font-size: 1rem; }
.acct-form { display: grid; gap: 12px; }
.acct-form label:not(.consent) { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; }
.acct-form input:not([type=checkbox]) { height: 48px; border: 1px solid var(--line); border-radius: 11px; padding: 0 14px; font-size: 16px; }
.otp-input { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-weight: 800; }
.acct-benefits { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: .84rem; line-height: 1.7; }
.acct-links { display: flex; justify-content: space-between; }
.acct-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.acct-head h1 { margin: 0; font-size: 1.5rem; }
.acct-head p { margin: 2px 0 0; }
.acct-loyal { padding: 12px 14px; border-radius: 12px; background: #f4f6f9; font-size: .88rem; margin: 0 0 14px; }
.acct-loyal.on { background: var(--cream); border: 1px solid var(--orange-soft); }
.acct-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.acct-grid > * { min-width: 0; }
.acct-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; color: inherit; font-size: .84rem; }
.acct-row span:first-child { display: grid; }
.acct-row small { color: var(--muted); }
@media (max-width: 760px) { .acct-grid { grid-template-columns: 1fr; } .acct-row { grid-template-columns: 1fr auto; } .acct-row > b { grid-column: 2; } }
.acct-form input:not([type=checkbox]) { width: 100%; box-sizing: border-box; min-width: 0; }
.acct-card { min-width: 0; }
.acct-links { flex-wrap: wrap; gap: 8px; }
@media (max-width: 390px) { .otp-input { letter-spacing: .3em; font-size: 1.4rem !important; } }
.acct-tabs { display: flex; gap: 4px; padding: 4px; background: #f4f6f9; border-radius: 12px; }
.acct-tabs a { flex: 1; text-align: center; padding: 9px 6px; border-radius: 9px; font-size: .84rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.acct-tabs a[aria-current] { background: #fff; color: var(--orange); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 700; height: 48px; border-radius: 11px; }
.google-btn:hover { background: #f8f9fa; }
.google-form .consent { font-size: .8rem; }
.acct-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; margin: 0; }
.acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acct-methods { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .86rem; }
.acct-methods li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; flex-wrap: wrap; }
.acct-methods .ok { color: #1a7f37; font-weight: 700; }
.save-info { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; }
.save-info input { width: 18px; height: 18px; flex: none; accent-color: var(--orange); margin-top: 1px; }
.save-box { border: 1px dashed var(--orange-soft); background: var(--cream); border-radius: 14px; padding: 14px; display: grid; gap: 10px; margin-top: 14px; }
.save-box h2 { margin: 0; font-size: 1rem; }

/* ---------- Tài khoản v2 ---------- */
.button--sm { height: 36px; padding: 0 14px; font-size: .82rem; border-radius: 10px; display: inline-flex; align-items: center; }
.button--danger { background: #c62828; color: #fff; border: 0; }
.link-button--danger { color: #c62828 !important; }
.acct-login { gap: 14px; }
.acct-login-head { text-align: center; display: grid; gap: 6px; justify-items: center; }
.acct-login-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; background: var(--cream); color: var(--orange); }
.acct-notice { background: #fff8e1; border: 1px solid #ffe08a; border-radius: 12px; padding: 12px 14px; font-size: .88rem; margin: 0; }
.acct-perks { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.acct-perks li { display: grid; gap: 2px; font-size: .86rem; }
.acct-perks span { color: var(--muted); font-size: .8rem; }
.acct-foot { text-align: center; margin: 0; }
.acct2 { display: grid; gap: 14px; }
.acct-hero { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--navy, #14213d), #24407a); color: #fff; border-radius: 18px; padding: 18px; }
.acct-hero-text { flex: 1; min-width: 0; }
.acct-hero h1 { margin: 0; font-size: 1.3rem; }
.acct-hero p { margin: 2px 0 0; opacity: .9; font-size: .86rem; overflow-wrap: anywhere; }
.acct-hero .button--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.acct-avatar { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-weight: 800; font-size: 1.4rem; }
.acct-verified { color: #9be7a5; font-size: .78rem; }
.acct-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--cream); color: var(--orange); font-size: .74rem; font-weight: 700; }
.acct-hero .acct-badge { background: rgba(255,255,255,.16); color: #fff; }
.acct-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.acct-nav::-webkit-scrollbar { display: none; }
.acct-nav a { flex: none; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy, #14213d); text-decoration: none; font-weight: 700; font-size: .86rem; }
.acct-nav a[aria-current] { background: var(--orange); border-color: var(--orange); color: #fff; }
.acct-nav em { font-style: normal; background: #fff; color: var(--orange); border-radius: 999px; padding: 0 6px; font-size: .74rem; margin-left: 2px; }
.acct-nav a:not([aria-current]) em { background: var(--orange); color: #fff; }
.acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acct-stats a { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; text-align: center; text-decoration: none; color: inherit; display: grid; gap: 2px; }
.acct-stats b { font-size: 1.5rem; color: var(--orange); }
.acct-stats span { font-size: .8rem; color: var(--muted); }
.acct-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
.acct-cols > *, .acct-side > * { min-width: 0; }
.acct-side { display: grid; gap: 14px; }
.acct-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.acct-sec-head h2 { margin: 0; }
.acct-sec-head a { font-size: .84rem; }
.acct-empty { text-align: center; color: var(--muted); padding: 18px 0; margin: 0; line-height: 1.8; }
.acct-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acct-quick a { display: grid; gap: 4px; justify-items: center; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; font-size: .8rem; font-weight: 600; text-align: center; }
.acct-quick span { font-size: 1.3rem; }
.ord { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 10px; }
.ord[hidden] { display: none; }
.ord-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ord-head div { display: grid; }
.ord-head small, .ord-name small { color: var(--muted); font-size: .76rem; }
.ord-steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.ord-steps li { position: relative; text-align: center; font-size: .7rem; color: var(--muted); padding-top: 18px; }
.ord-steps li::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--line); z-index: 1; }
.ord-steps li::after { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.ord-steps li:first-child::after { display: none; }
.ord-steps li.is-done { color: var(--navy, #14213d); font-weight: 700; }
.ord-steps li.is-done::before, .ord-steps li.is-done::after { background: var(--orange); }
.ord-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ord-items li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; font-size: .84rem; }
.ord-items img, .ord-noimg, .acct-bought img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: #f4f6f9; display: block; }
.ord-name { display: grid; min-width: 0; }
.ord-name a { color: inherit; }
.ord-more { display: block !important; color: var(--muted); font-size: .8rem; }
.ord-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 10px; font-size: .84rem; }
.ord-actions { display: flex; gap: 6px; }
.acct-filter { display: flex; gap: 6px; overflow-x: auto; }
.acct-filter button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .8rem; cursor: pointer; }
.acct-filter button[aria-pressed="true"] { border-color: var(--orange); color: var(--orange); font-weight: 700; }
.svc-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.svc-date { display: grid; place-items: center; background: var(--cream); color: var(--orange); border-radius: 10px; padding: 6px 0; }
.svc-date b { font-size: 1.2rem; line-height: 1; }
.svc-date small { font-size: .7rem; }
.svc-main { display: grid; gap: 2px; min-width: 0; font-size: .84rem; }
.svc-main small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-side { display: grid; gap: 4px; justify-items: end; font-size: .82rem; }
.acct-bought { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acct-bought li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; font-size: .84rem; }
.acct-bought span { display: grid; min-width: 0; }
.acct-bought small { color: var(--muted); font-size: .76rem; }
.addr-list { display: grid; gap: 10px; }
.addr { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.addr--default { border-color: var(--orange-soft); background: var(--cream); }
.addr p { margin: 4px 0 0; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.addr-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.addr-edit { flex-basis: auto; }
.addr-edit[open] { flex-basis: 100%; }
.addr-edit summary, .addr-new summary { list-style: none; cursor: pointer; }
.addr-edit summary::-webkit-details-marker, .addr-new summary::-webkit-details-marker { display: none; }
.addr-new[open] summary { margin-bottom: 12px; }
.addr-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.addr-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 12px; font-size: .8rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-chip[aria-pressed="true"] { border-color: var(--orange); color: var(--orange); font-weight: 700; background: var(--cream); }
.acct-danger summary { cursor: pointer; color: #c62828; font-weight: 700; font-size: .88rem; }
.acct-danger[open] { display: grid; gap: 8px; }
@media (max-width: 760px) {
  .acct-cols { grid-template-columns: 1fr; }
  .acct-hero { flex-wrap: wrap; }
  .acct-hero form { width: 100%; }
  .acct-hero .button--outline { width: 100%; justify-content: center; }
  .acct-bought li { grid-template-columns: 56px 1fr; }
  .acct-bought li > a { grid-column: 2; justify-self: start; }
}

/* ---------- Lịch nhận hàng (thanh toán) ---------- */
.delivery-when { margin-top: 16px; display: grid; gap: 10px; }
.delivery-when h3 { margin: 0; font-size: .95rem; display: grid; gap: 2px; }
.delivery-when h3 small { font-weight: 400; color: var(--muted); font-size: .78rem; }
.when-days, .when-slots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.when-days::-webkit-scrollbar { display: none; }
.when-chip { position: relative; flex: none; }
.when-chip input { position: absolute; opacity: 0; pointer-events: none; }
.when-chip span { display: grid; justify-items: center; gap: 1px; min-width: 64px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: .82rem; }
.when-chip small { color: var(--muted); font-size: .72rem; }
.when-chip--slot span { min-width: 104px; }
.when-chip input:checked + span { border-color: var(--orange); background: var(--cream); color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.when-chip input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 560px) { .when-slots { display: grid; grid-template-columns: repeat(3, 1fr); } .when-chip--slot span { min-width: 0; } }
.when-chip--other span { min-width: 72px; }
.when-other { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; max-width: 260px; }
.when-other input { height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; font-size: 16px; }
.when-chip.is-past span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.when-fee { font-style: normal; font-size: .68rem; color: #b26a00; font-weight: 700; }
.when-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff8e1; border: 1px solid #ffe08a; font-size: .84rem; }
.pay-list .payment-logo { font-size: .72rem; }
.inst-est { margin-top: 14px; padding: 14px; border: 1px dashed var(--orange-soft); background: var(--cream); border-radius: 14px; display: grid; gap: 10px; }
.inst-est[hidden] { display: none; }
.inst-est h3 { margin: 0; font-size: 1rem; }
.inst-est label small { font-weight: 400; color: var(--muted); }
.inst-est input, .inst-est select { height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; font-size: 16px; width: 100%; box-sizing: border-box; background: #fff; }
.inst-formula summary { cursor: pointer; font-weight: 600; font-size: .86rem; }
.inst-formula p { margin: 8px 0 0; font-size: .82rem; line-height: 1.7; color: var(--muted); }

/* ---------- Voucher (thanh toán) ---------- */
.voucher-list { display: grid; gap: 8px; margin: 10px 0; max-height: 360px; overflow-y: auto; }
.voucher-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.voucher-item input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); }
.voucher-item.is-on { border-style: solid; border-color: var(--orange); background: var(--cream); }
.voucher-item.is-off { opacity: .6; cursor: not-allowed; }
.voucher-body { display: grid; gap: 3px; min-width: 0; font-size: .84rem; }
.voucher-body small { color: var(--muted); font-size: .76rem; }
.voucher-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.vtag { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #f1f4f8; color: #51606f; }
.vtag--private { background: #efe7ff; color: #5b34b8; }
.vtag--stack { background: #e7f6ec; color: #1a7f37; }
.voucher-why { font-style: normal; color: #b26a00; font-size: .76rem; }
.voucher-amount { color: var(--orange); font-size: .86rem; white-space: nowrap; }

/* ---------- Dịch vụ kèm theo ---------- */
.addon-block { display: grid; gap: 6px; }
.addon-detail { margin: 0 0 4px 30px; font-size: .82rem; }
.addon-detail summary { cursor: pointer; font-weight: 600; color: var(--orange); }
.addon-note { margin: 0 0 4px; color: var(--muted); font-size: .8rem; }
.addon-prep b { font-size: .8rem; }
.addon-prep ul { margin: 2px 0 6px; padding-left: 18px; line-height: 1.6; }
.addon-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .78rem; }
.addon-table th, .addon-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.addon-table td:last-child { white-space: nowrap; text-align: right; font-weight: 700; }
.addon-table small { display: block; color: var(--muted); }
.addon-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 2px 0; }
.addon-line small { grid-column: 1 / -1; color: #b26a00; }
.grand-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 12px; padding-top: 8px; border-top: 1px dashed var(--line); }
.grand-total span { display: grid; font-weight: 700; }
.grand-total small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.grand-total strong { color: var(--orange); font-size: 1.15rem; }
.inst-est h3 small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.est-fees { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; font-size: .8rem; }
.est-fees > span { flex-basis: 100%; font-weight: 600; }
.est-fees label { display: grid; gap: 4px; width: 78px; font-size: .76rem; color: var(--muted); }
.est-fees input { height: 38px; }
.est-table { width: 100%; border-collapse: collapse; font-size: .78rem; background: #fff; border-radius: 10px; overflow: hidden; }
.est-table th, .est-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.est-table th { font-size: .72rem; color: var(--muted); font-weight: 600; }
.est-table td.num { text-align: right; white-space: nowrap; }
.est-table td.strong { font-weight: 800; color: var(--orange); }


.est-table td.num { display: table-cell; }
.est-table td.num b { display: block; color: var(--orange); font-size: .9rem; }
.est-table td.num small { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; }
.est-params { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 10px; }
.est-params summary { cursor: pointer; font-weight: 600; font-size: .84rem; color: var(--orange); }
.est-params[open] summary { margin-bottom: 8px; }
.est-formula { margin: 0; font-size: .76rem; color: var(--muted); line-height: 1.6; }
.addon-group { margin-top: 8px; }
.addon-group__title { margin: 0; font-weight: 700; font-size: .82rem; }

.est-down { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; }
.est-down select { width: auto; min-width: 90px; }
.est-down span { color: var(--muted); font-weight: 400; }

/* Hộp hỏi đồng ý cookie thống kê (analytics.js) — hai nút ngang nhau, không dẫn dắt khách bấm Chấp nhận */
.consent-banner { position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 60; max-width: 560px; margin: 0 auto;
  background: #fff; color: #1b2430; border: 1px solid #d9e0e8; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(15, 42, 68, .18); font-size: .9rem; line-height: 1.5; }
.consent-banner p { margin: 0 0 8px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .consent-banner { bottom: 16px; } }
.footer-link-button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; opacity: .85; }

/* Nút liên hệ nổi: Messenger (m.me), Zalo, Gọi — link trực tiếp, không tải mã bên thứ ba, không cookie */
.contact-float { position: fixed; right: 12px; bottom: 88px; z-index: 50; display: grid; gap: 10px; }
.contact-float__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  text-decoration: none; box-shadow: 0 6px 18px rgba(15, 42, 68, .28); position: relative; }
.contact-float__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.contact-float__btn--messenger { background: linear-gradient(135deg, #0a7cff, #a033ff 70%, #ff5280); }
.contact-float__btn--zalo { background: #0068ff; }
.contact-float__btn--zalo b { font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.contact-float__btn--call { background: #f26b21; }
.contact-float__btn:focus-visible { outline: 3px solid #0f2a44; outline-offset: 2px; }
@media (min-width: 900px) { .contact-float { bottom: 24px; right: 20px; } }
body:has(.consent-banner:not([hidden])) .contact-float { display: none; }   /* không che hộp hỏi đồng ý */
.acct-vouchers{margin-top:12px}.acct-vouchers h3{font-size:.95rem;margin:0 0 6px}.acct-vouchers ul{display:block;margin:0}.acct-vouchers li{padding:8px 10px;margin-top:6px;border:1px dashed var(--tier,#c9971c);border-radius:8px;background:#fffdf5}.acct-vouchers li:before{content:none}
/* Ảnh sản phẩm do nhân viên tải lên (thuần sản phẩm, vuông): hiển thị full khung, nền trắng, cân đối cột thông tin */
.pdp__media--clean { background: #fff; padding: 12px; border: 1px solid #e7ebf0; min-height: 0; align-self: start; }
.pdp__media--clean img { width: 100%; height: auto; max-height: none; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: normal; }
.pdp-main-frame { position:relative; width:100%; display:grid; place-items:center; }
.pdp-gallery-nav { position:absolute; z-index:1; top:50%; transform:translateY(-50%); width:36px; height:50px; border:0; border-radius:10px; background:rgba(12,35,64,.78); color:#fff; font-size:2rem; line-height:1; cursor:pointer; opacity:.85; }
.pdp-gallery-nav:hover, .pdp-gallery-nav:focus-visible { opacity:1; }
.pdp-gallery-nav--prev { left:4px; }
.pdp-gallery-nav--next { right:4px; }
.pdp-gallery { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.pdp-gallery-thumb { display:block; width:72px; height:72px; padding:3px; background:#fff; border:2px solid #dfe6ee; border-radius:8px; cursor:pointer; }
.pdp-gallery-thumb.is-active { border-color:#e94618; box-shadow:0 0 0 2px rgba(233,70,24,.16); }
.pdp-gallery img { width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; border-radius:5px; }
.product-reviews { display:grid; gap:10px; }
.product-review { padding:12px 14px; border:1px solid #e5eaf0; border-radius:10px; background:#fff; }
.product-review div { color:#e7a400; letter-spacing:1px; }
.product-review p { margin:6px 0; }
.review-row { padding:14px 0; border-top:1px solid #e8edf2; }
.review-form { display:grid; gap:8px; margin-top:8px; max-width:620px; }
.review-form textarea { min-height:84px; resize:vertical; }
.community-list { display:grid; gap:12px; max-width:900px; }
.community-card, .community-question, .community-answer { padding:16px; border:1px solid #e3e8ef; border-radius:12px; background:#fff; }
.community-card h2 { margin:0 0 8px; font-size:1.05rem; }
.community-card p { margin:0 0 8px; color:#465467; }
.community-question { max-width:900px; margin:18px 0 28px; }
.community-question h1 { margin-top:0; }
.community-body { white-space:pre-line; line-height:1.65; }
.community-answer { max-width:900px; margin:10px 0; }
.community-form { display:grid; gap:14px; max-width:760px; }
.community-form textarea { min-height:140px; resize:vertical; }
.pdp__edit-image { position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 8px; background: rgba(15, 42, 68, .85); color: #fff; font-size: .75rem; font-weight: 700; }
@media (max-width: 760px) { .pdp__media--clean { padding: 6px; } .pdp__media--clean img { max-height: none; } }

/* SEO + AI Search: đoạn trả lời trước + FAQ danh mục */
.answer-first{margin:6px 0 4px;max-width:880px;color:#344054;line-height:1.55}
.listing-faq{margin:28px auto 8px}.listing-faq h2{font-size:1.25rem;margin:0 0 10px}
.listing-faq details{border:1px solid #e4e7ec;border-radius:12px;padding:10px 14px;margin:8px 0;background:#fff}
.listing-faq summary{cursor:pointer;font-weight:700}.listing-faq p{margin:8px 0 0;color:#475467}


/* --- ngx.css --- */
/* SINH TỰ ĐỘNG bởi deploy/gen_ngx_css.py từ CSS của trang mẫu — không sửa tay; sửa ở ngx-site.css. */
.ngx .top-strip{background:#07182d;color:#d9e5f2;font-size:.76rem}
.ngx .top-strip__inner{display:flex;justify-content:space-between;align-items:center;min-height:34px}
.ngx .top-strip__inner div{display:flex;gap:24px}
.ngx .top-strip a{text-decoration:none}
.ngx .site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 6px 20px rgba(12,35,64,.13)}
.ngx .header-main{display:grid;grid-template-columns:auto auto minmax(240px,1fr) auto auto;gap:18px;align-items:center;min-height:82px}
.ngx .brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.ngx .brand__mark{display:grid;place-items:center;width:46px;height:46px;border-radius:13px 13px 13px 3px;background:var(--orange);font-weight:800;font-size:1.05rem;letter-spacing:-.03em}
.ngx .brand>span:last-child{display:flex;flex-direction:column;line-height:1.05}
.ngx .brand strong{font-size:.62rem;letter-spacing:.25em}
.ngx .brand b{font-size:1.05rem;letter-spacing:.03em}
.ngx .location-pill,.ngx .header-action{border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:9px;text-align:left;padding:8px;border-radius:12px}
.ngx .location-pill:hover,.ngx .header-action:hover{background:rgba(255,255,255,.08)}
.ngx .location-pill svg,.ngx .header-action svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.ngx .location-pill svg{fill:currentColor;stroke:none}
.ngx .location-pill span:nth-child(2),.ngx .header-action span{display:flex;flex-direction:column}
.ngx .location-pill small,.ngx .header-action small{font-size:.67rem;color:#b8c9dc}
.ngx .location-pill strong,.ngx .header-action strong{font-size:.78rem}
.ngx .search{height:48px;background:#fff;border-radius:13px;display:flex;overflow:hidden}
.ngx .search input{min-width:0;flex:1;border:0;padding:0 17px;outline:0;color:var(--ink);font-size:.88rem}
.ngx .search button{width:52px;border:0;background:var(--orange);display:grid;place-items:center}
.ngx .search svg{width:22px;fill:none;stroke:#fff;stroke-width:2}
.ngx .cart-count{display:inline-grid;place-items:center}
.ngx .mobile-search{display:none}
.ngx .category-nav{border-top:1px solid rgba(255,255,255,.1);background:#fff;color:var(--ink)}
.ngx .category-nav__inner{display:flex;align-items:stretch;overflow:auto;scrollbar-width:none}
.ngx .category-nav__inner::-webkit-scrollbar{display:none}
.ngx .category-nav button,.ngx .category-nav a{border:0;background:transparent;padding:15px 18px;font-size:.78rem;font-weight:600;white-space:nowrap}
.ngx .category-nav button:hover,.ngx .category-nav a:hover{color:var(--orange)}
.ngx .category-nav__all{background:var(--orange)!important;color:#fff!important;padding-inline:22px!important}
.ngx-home .hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;padding-top:24px}
.ngx-home .hero-card{min-height:382px;border-radius:24px;overflow:hidden;background:linear-gradient(125deg,#102f55 0%,#07182d 74%);color:#fff;display:flex;position:relative;box-shadow:var(--shadow)}
.ngx-home .hero-card:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-50px;top:-70px;box-shadow:0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.018)}
.ngx-home .hero-card__copy{padding:52px 0 46px 48px;width:58%;position:relative;z-index:2}
.ngx-home .eyebrow,.ngx-home .section-heading>div>span{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--orange-2)}
.ngx-home .hero-card h1{font-size:clamp(2.1rem,3.2vw,3.4rem);line-height:1.06;margin:14px 0;letter-spacing:-.05em}
.ngx-home .hero-card h1 em{font-style:normal;color:#ffb18f}
.ngx-home .hero-card p{max-width:460px;color:#d5e2ef;font-size:.92rem}
.ngx-home .button{min-height:44px;border:0;border-radius:11px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:.82rem;text-decoration:none;transition:.2s}
.ngx-home .button:hover{transform:translateY(-1px)}
.ngx-home .button--light{background:#fff;color:var(--navy);margin-top:12px}
.ngx-home .button--primary{background:var(--orange);color:#fff}
.ngx-home .button--outline{background:#fff;color:var(--navy);border:1px solid #d8dde5}
.ngx-home .hero-card__visual{width:42%;position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center}
.ngx-home .hero-card__visual img{width:112%;height:94%;object-fit:contain;filter:drop-shadow(0 20px 18px rgba(0,0,0,.35))}
.ngx-home .price-badge{position:absolute;top:32px;right:20px;background:var(--orange);width:88px;height:88px;border-radius:50%;display:grid;place-content:center;text-align:center;font-size:.6rem;line-height:1.25;transform:rotate(7deg);z-index:2}
.ngx-home .price-badge b{font-size:.9rem}
.ngx-home .side-deals{display:grid;grid-template-rows:1fr 1fr;gap:18px}
.ngx-home .side-deal{border-radius:22px;padding:28px;overflow:hidden;display:flex;justify-content:space-between;position:relative;color:#fff;box-shadow:var(--shadow)}
.ngx-home .side-deal--orange{background:linear-gradient(135deg,#f05a28,#ff8047)}
.ngx-home .side-deal--blue{background:linear-gradient(135deg,#1d5f96,#103c69)}
.ngx-home .side-deal span{font-size:.68rem;font-weight:700;letter-spacing:.12em}
.ngx-home .side-deal h2{margin:8px 0 12px;font-size:1.25rem;line-height:1.2}
.ngx-home .side-deal button,.ngx-home .side-deal a{border:0;background:transparent;color:#fff;padding:0;font-weight:700;font-size:.75rem}
.ngx-home .side-deal__icon{font-size:5rem;opacity:.16;align-self:center;transform:rotate(-9deg)}
.ngx-home .trust-row{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:17px;display:grid;grid-template-columns:repeat(4,1fr);padding:21px 8px}
.ngx-home .trust-row article{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 20px;border-right:1px solid var(--line)}
.ngx-home .trust-row article:last-child{border:0}
.ngx-home .trust-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--cream);color:var(--orange);font-weight:800;font-size:1.2rem}
.ngx-home .trust-row div{display:flex;flex-direction:column}
.ngx-home .trust-row strong{font-size:.8rem}
.ngx-home .trust-row small{font-size:.7rem;color:var(--muted)}
.ngx-home .category-section,.ngx-home .products-section{padding-top:46px}
.ngx-home .section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:19px}
.ngx-home .section-heading h2{font-size:1.65rem;margin:4px 0 0;letter-spacing:-.035em}
.ngx-home .text-link{border:0;background:transparent;color:var(--navy);font-size:.8rem;font-weight:700}
.ngx-home .category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ngx-home .category-grid button,.ngx-home .category-grid a{border:1px solid var(--line);background:#fff;border-radius:16px;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.2s}
.ngx-home .category-grid button:hover,.ngx-home .category-grid a:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 10px 30px rgba(12,35,64,.08)}
.ngx-home .category-grid span{font-size:2rem;color:var(--navy);height:49px}
.ngx-home .category-grid strong{font-size:.83rem}
.ngx-home .category-grid small{font-size:.7rem;color:var(--muted);margin-top:3px}
.ngx-home .filter-tabs{display:flex;gap:6px;background:#e9edf2;padding:4px;border-radius:11px}
.ngx-home .filter-tabs button{border:0;background:transparent;border-radius:8px;padding:8px 13px;font-size:.76rem;font-weight:600}
.ngx-home .filter-tabs button.active{background:#fff;color:var(--orange);box-shadow:0 2px 8px rgba(12,35,64,.08)}
.ngx-home .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ngx-home .product-card{background:#fff;border:1px solid var(--line);border-radius:19px;overflow:hidden;position:relative;transition:.22s}
.ngx-home .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ngx-home .product-card__badges{position:absolute;top:14px;left:14px;z-index:2;display:flex;gap:5px;flex-wrap:wrap}
.ngx-home .product-card__badges span{background:var(--orange);color:#fff;padding:5px 8px;border-radius:6px;font-size:.58rem;font-weight:800}
.ngx-home .product-card__badges .badge-blue{background:var(--navy)}
.ngx-home .wish{position:absolute;right:13px;top:12px;border:0;background:#fff;width:37px;height:37px;border-radius:50%;font-size:1.25rem;z-index:2;box-shadow:0 3px 10px rgba(12,35,64,.1)}
.ngx-home .wish.active{background:#ffe8e0;color:var(--orange)}
.ngx-home .product-card__image{height:260px;background:linear-gradient(145deg,#f8fafc,#edf2f6);display:grid;place-items:center;padding:30px}
.ngx-home .product-card__image img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(12,35,64,.16))}
.ngx-home .product-card__body{padding:19px}
.ngx-home .product-code{font-size:.64rem;color:#7d8797;letter-spacing:.09em;margin:0}
.ngx-home .product-card h3{font-size:.94rem;line-height:1.4;margin:7px 0;min-height:42px}
.ngx-home .rating{font-size:.7rem}
.ngx-home .rating span{color:#f3a612;letter-spacing:1px}
.ngx-home .rating small{color:var(--muted)}
.ngx-home .price{display:flex;align-items:baseline;gap:9px;margin:12px 0 8px}
.ngx-home .price strong{font-size:1.22rem;color:var(--orange)}
.ngx-home .price del{font-size:.73rem;color:#98a0ad}
.ngx-home .gift{font-size:.7rem;background:var(--cream);padding:8px;border-radius:8px;margin:0 0 10px}
.ngx-home .availability{font-size:.67rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.ngx-home .availability span{width:7px;height:7px;background:var(--green);border-radius:50%}
.ngx-home .product-card__actions{display:grid;grid-template-columns:.75fr 1.25fr;gap:7px;margin-top:14px}
.ngx-home .no-results{text-align:center;background:#fff;border-radius:16px;padding:40px;color:var(--muted)}
.ngx-home .service-banner{margin-top:48px;margin-bottom:55px;padding:35px 40px;border-radius:24px;background:var(--navy);color:#fff;display:grid;grid-template-columns:1.1fr 1.3fr;align-items:center;gap:30px}
.ngx-home .service-banner h2{font-size:1.65rem;line-height:1.27;margin:8px 0}
.ngx-home .service-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ngx-home .service-steps span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);padding:13px;border-radius:11px;font-size:.75rem}
.ngx-home .service-steps b{color:var(--orange-2);margin-right:7px}
.ngx footer{background:#07182d;color:#fff;padding:42px 0 110px}
.ngx .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px}
.ngx .brand--footer{display:inline-flex}
.ngx .footer-grid p{font-size:.76rem;color:#9eb2c9;max-width:310px}
.ngx .footer-grid h3{font-size:.78rem;margin:5px 0 12px}
.ngx .footer-grid>div{display:flex;flex-direction:column;gap:8px}
.ngx .footer-grid>div>a:not(.brand){font-size:.72rem;color:#aebed0;text-decoration:none}
.ngx .footer-grid .hotline{font-size:1.25rem!important;color:#fff!important;font-weight:800}
.ngx .footer-grid small{color:#7f96ad;font-size:.68rem}
.ngx .mobile-bottom-nav{display:none}
@media(max-width:1000px){
.ngx .header-main{grid-template-columns:auto auto 1fr auto}
.ngx .account-action{display:none}
.ngx-home .category-grid{grid-template-columns:repeat(3,1fr)}
.ngx-home .product-card__image{height:220px}
.ngx-home .hero-card__copy{width:64%}
.ngx-home .hero-card__visual{width:36%}
.ngx-home .trust-row article{padding-inline:12px}
.ngx-home .service-banner{grid-template-columns:1fr}
}
@media(max-width:760px){
.ngx .top-strip{display:none}
.ngx .site-header{position:sticky}
.ngx .header-main{min-height:61px;grid-template-columns:auto 1fr auto;gap:8px}
.ngx .brand__mark{width:36px;height:36px;border-radius:10px 10px 10px 3px;font-size:.8rem}
.ngx .brand strong{font-size:.5rem}
.ngx .brand b{font-size:.78rem}
.ngx .location-pill{justify-self:end}
.ngx .location-pill svg{width:19px}
.ngx .location-pill span:nth-child(2){max-width:112px}
.ngx .location-pill strong{font-size:.67rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ngx .location-pill>span:last-child{display:none}
.ngx .header-main>.search,.ngx .account-action,.ngx .cart-action{display:none}
.ngx .mobile-search{display:flex;gap:9px;padding-bottom:11px}
.ngx .mobile-search .search{flex:1;height:43px}
.ngx .mobile-cart{position:relative;width:44px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);border-radius:11px;color:#fff}
.ngx .mobile-cart svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.ngx .mobile-cart .cart-count{position:absolute;right:-4px;top:-5px;width:19px;height:19px;border-radius:50%;background:var(--orange);font-size:.6rem}
.ngx .category-nav{display:none}
.ngx-home .hero-grid{display:block;padding-top:13px}
.ngx-home .hero-card{min-height:336px;border-radius:19px}
.ngx-home .hero-card__copy{padding:27px 20px;width:67%}
.ngx-home .hero-card h1{font-size:2rem;margin:10px 0}
.ngx-home .hero-card p{font-size:.75rem}
.ngx-home .hero-card__visual{width:40%;position:absolute;right:-5px;bottom:0;height:75%}
.ngx-home .price-badge{width:65px;height:65px;top:18px;right:7px;font-size:.48rem}
.ngx-home .price-badge b{font-size:.68rem}
.ngx-home .side-deals{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:9px;margin-top:9px}
.ngx-home .side-deal{padding:16px 14px;border-radius:14px;min-height:124px}
.ngx-home .side-deal h2{font-size:.9rem}
.ngx-home .side-deal__icon{font-size:2.5rem}
.ngx-home .trust-row{grid-template-columns:repeat(2,1fr);padding:7px;margin-top:11px}
.ngx-home .trust-row article{justify-content:flex-start;padding:10px 8px;border-right:0}
.ngx-home .trust-icon{width:34px;height:34px}
.ngx-home .trust-row strong{font-size:.68rem}
.ngx-home .trust-row small{font-size:.6rem}
.ngx-home .category-section,.ngx-home .products-section{padding-top:32px}
.ngx-home .section-heading{align-items:center}
.ngx-home .section-heading h2{font-size:1.3rem}
.ngx-home .category-grid{display:flex;overflow-x:auto;margin-inline:-12px;padding:0 12px 9px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ngx-home .category-grid button,.ngx-home .category-grid a{min-width:116px;min-height:116px;scroll-snap-align:start}
.ngx-home .products-heading{display:block}
.ngx-home .filter-tabs{margin-top:13px;overflow:auto;width:100%}
.ngx-home .product-grid{display:flex;overflow-x:auto;margin-inline:-12px;padding:0 12px 15px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ngx-home .product-card{min-width:82vw;scroll-snap-align:center}
.ngx-home .product-card__image{height:235px}
.ngx-home .service-banner{margin-top:28px;margin-bottom:28px;padding:25px 20px;border-radius:18px}
.ngx-home .service-banner h2{font-size:1.28rem}
.ngx-home .service-steps{grid-template-columns:1fr}
.ngx .footer-grid{grid-template-columns:1fr 1fr}
.ngx .footer-grid>div:first-child{grid-column:span 2}
.ngx .mobile-bottom-nav{position:fixed;z-index:60;bottom:0;left:0;right:0;height:67px;padding-bottom:env(safe-area-inset-bottom);background:#fff;box-shadow:0 -5px 25px rgba(12,35,64,.12);display:grid;grid-template-columns:repeat(5,1fr)}
.ngx .mobile-bottom-nav a,.ngx .mobile-bottom-nav button{border:0;background:transparent;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.58rem;color:#697586}
.ngx .mobile-bottom-nav span{font-size:1.18rem;line-height:1}
.ngx .mobile-bottom-nav .active{color:var(--orange)}
}
@media(max-width:390px){
.ngx-home .hero-card__copy{width:74%}
.ngx-home .hero-card__visual{opacity:.76}
.ngx-home .hero-card h1{font-size:1.75rem}
.ngx-home .side-deal__icon{display:none}
.ngx-home .product-card{min-width:88vw}
.ngx .footer-grid{grid-template-columns:1fr}
.ngx .footer-grid>div:first-child{grid-column:auto}
}
.ngx .mobile-quickbar{display:none}
@media(max-width:760px){
.ngx .mobile-search{padding-bottom:9px}
.ngx .mobile-quickbar{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.ngx .mobile-quickbar::-webkit-scrollbar{display:none}
.ngx .mobile-quickbar button,.ngx .mobile-quickbar a{flex:0 0 auto;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#eef5fc;border-radius:999px;padding:7px 11px;font-size:.75rem;font-weight:600}
.ngx .mobile-quickbar span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:4px;border-radius:50%;background:var(--orange);color:#fff;font-size:.55rem;font-weight:800}
.ngx-home .hero-card{min-height:286px}
.ngx-home .hero-card__copy{padding:24px 18px;width:70%}
.ngx-home .hero-card h1{font-size:1.72rem;margin:9px 0}
.ngx-home .hero-card p{font-size:.72rem;line-height:1.45}
.ngx-home .hero-card .button{min-height:41px;padding-inline:13px}
.ngx-home .hero-card__visual{width:41%;right:-7px;height:78%}
.ngx-home .price-badge{width:60px;height:60px;top:15px;right:5px;font-size:.45rem}
.ngx-home .price-badge b{font-size:.64rem}
.ngx-home .category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0}
.ngx-home .category-grid button,.ngx-home .category-grid a{min-width:0;min-height:104px;border-radius:13px}
.ngx-home .category-grid span{font-size:1.7rem;height:42px}
.ngx-home .category-grid strong{font-size:.8rem}
.ngx-home .category-grid small{font-size:.7rem}
.ngx-home .product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0;padding:0 0 15px;overflow:visible}
.ngx-home .product-card{min-width:0;border-radius:14px}
.ngx-home .product-card:hover{transform:none;box-shadow:none}
.ngx-home .product-card__image{height:164px;padding:19px}
.ngx-home .product-card__badges{top:8px;left:8px;right:42px}
.ngx-home .product-card__badges span{font-size:.65rem;padding:4px 6px}
.ngx-home .wish{width:31px;height:31px;right:8px;top:7px;font-size:1rem}
.ngx-home .product-card__body{padding:11px}
.ngx-home .product-code{font-size:.7rem}
.ngx-home .product-card h3{font-size:.875rem;line-height:1.4;min-height:58px;margin:5px 0}
.ngx-home .rating{font-size:.75rem}
.ngx-home .rating small{display:none}
.ngx-home .price{display:block;margin:8px 0 6px}
.ngx-home .price strong{display:block;font-size:1rem}
.ngx-home .price del{font-size:.75rem}
.ngx-home .gift{font-size:.72rem;padding:6px;min-height:54px}
.ngx-home .availability{font-size:.72rem}
.ngx-home .product-card__actions{display:block;margin-top:10px}
.ngx-home .product-card__actions .quick-view{display:none}
.ngx-home .product-card__actions .add-cart{width:100%;min-height:44px;padding:0 8px;font-size:.78rem}
.ngx .mobile-bottom-nav a,.ngx .mobile-bottom-nav button{font-size:.75rem}
}
@media(max-width:390px){
.ngx-home .hero-card__copy{width:74%}
.ngx-home .hero-card__visual{opacity:.72}
.ngx-home .hero-card h1{font-size:1.58rem}
.ngx-home .product-card__image{height:145px}
.ngx-home .product-card h3{font-size:.82rem}
.ngx-home .price strong{font-size:.92rem}
}
.ngx .preview-link{border:0;background:transparent;color:#fff;padding:0;font-size:.76rem;cursor:pointer}
.ngx .preview-link:hover{color:#ffb18f}
@media(max-width:760px){
.ngx .header-main>.location-pill{display:none}
.ngx .header-main{grid-template-columns:1fr;min-height:58px}
}
.ngx .header-main{grid-template-columns:auto minmax(240px,1fr) auto auto}
@media(max-width:1000px){
.ngx .header-main{grid-template-columns:auto 1fr auto}
}
@media(max-width:760px){
.ngx .header-main{grid-template-columns:1fr;min-height:58px}
}
.ngx .brand__logo{width:48px;height:48px;display:block;filter:drop-shadow(0 5px 11px rgba(0,0,0,.16))}
.ngx-home .market-promises{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(12,35,64,.05)}
.ngx-home .market-promises__grid{display:grid;grid-template-columns:1.18fr 1fr 1fr 1fr;gap:0}
.ngx-home .promise-card{min-height:82px;display:flex;align-items:center;gap:11px;padding:14px 18px;border-right:1px solid var(--line);position:relative}
.ngx-home .promise-card:last-child{border-right:0}
.ngx-home .promise-card__icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:#edf3fa;color:var(--navy);font-size:.9rem;font-weight:800}
.ngx-home .promise-card>div{display:flex;flex-direction:column;min-width:0}
.ngx-home .promise-card strong{font-size:.79rem}
.ngx-home .promise-card small{font-size:.67rem;color:var(--muted);line-height:1.35;margin-top:2px}
.ngx-home .promise-card--price{background:linear-gradient(135deg,#fff4ed,#fff)}
.ngx-home .promise-card--price .promise-card__icon{background:var(--orange);color:#fff}
.ngx-home .promise-card--price>div{padding-right:64px}
.ngx-home .promise-card--price>b{position:absolute;right:10px;top:10px;background:var(--orange);color:#fff;border-radius:6px;padding:4px 6px;font-size:.52rem;letter-spacing:.06em}
@media(max-width:1000px){
.ngx-home .market-promises__grid{grid-template-columns:repeat(2,1fr)}
.ngx-home .promise-card:nth-child(2){border-right:0}
.ngx-home .promise-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:760px){
.ngx .brand__logo{width:38px;height:38px}
.ngx-home .market-promises__grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.ngx-home .promise-card{min-height:92px;padding:11px 9px;gap:8px}
.ngx-home .promise-card__icon{width:35px;height:35px;border-radius:10px;font-size:.74rem}
.ngx-home .promise-card strong{font-size:.73rem}
.ngx-home .promise-card small{font-size:.65rem}
.ngx-home .promise-card--price>div{padding-right:0}
.ngx-home .promise-card--price>b{display:none}
}
.ngx .category-nav__flash{color:#e44013!important;background:#fff0e9!important}
.ngx-home .flash-sale{margin-top:22px;background:linear-gradient(145deg,#d93b12 0%,#f05a28 48%,#ff7137 100%);border-radius:23px;padding:20px;box-shadow:0 18px 38px rgba(217,59,18,.2);color:#fff;position:relative;overflow:hidden}
.ngx-home .flash-sale:before{content:"";position:absolute;right:-100px;top:-140px;width:340px;height:340px;border-radius:50%;border:60px solid rgba(255,255,255,.05)}
.ngx-home .flash-sale__header{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:28px;position:relative;z-index:1}
.ngx-home .flash-title{display:flex;align-items:center;gap:10px}
.ngx-home .flash-title small{font-size:.62rem;letter-spacing:.13em;font-weight:700}
.ngx-home .flash-title h2{font-size:2rem;line-height:1;margin:3px 0;font-style:italic;letter-spacing:-.05em}
.ngx-home .countdown-wrap{display:flex;align-items:center;gap:10px}
.ngx-home .countdown-wrap>span{font-size:.7rem}
.ngx-home .countdown{display:flex;align-items:center;gap:4px}
.ngx-home .countdown b{display:grid;place-items:center;width:40px;height:38px;background:#fff;color:#c8320d;border-radius:8px;font-size:.96rem}
.ngx-home .countdown i{font-style:normal;font-weight:800}
.ngx-home .flash-slots{justify-self:end;display:flex;gap:5px;background:rgba(107,24,3,.28);padding:4px;border-radius:10px}
.ngx-home .flash-slots button{border:0;background:transparent;color:#ffe6dd;border-radius:7px;padding:8px 10px;font-size:.68rem;font-weight:700}
.ngx-home .flash-slots button.active{background:#fff;color:#d93b12}
.ngx-home .flash-sale__notice{position:relative;z-index:1;display:flex;gap:13px;align-items:center;margin:13px 0;padding:9px 12px;background:rgba(105,22,0,.23);border-radius:9px;font-size:.68rem}
.ngx-home .flash-sale__notice span{color:#ffe4d8}
.ngx-home .flash-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.ngx-home .flash-product{background:#fff;color:var(--ink);border-radius:15px;display:grid;grid-template-columns:42% 58%;position:relative;overflow:hidden}
.ngx-home .flash-discount{position:absolute;z-index:2;top:10px;left:10px;background:#d62800;color:#fff;border-radius:6px;padding:5px 7px;font-size:.65rem;font-weight:800}
.ngx-home .flash-product__image{min-height:190px;background:linear-gradient(145deg,#fff,#eef2f6);display:grid;place-items:center;padding:25px 14px}
.ngx-home .flash-product__image img{width:100%;height:155px;object-fit:contain}
.ngx-home .flash-product__body{padding:16px 15px 15px 5px;display:flex;flex-direction:column}
.ngx-home .flash-code{font-size:.58rem;letter-spacing:.07em;color:#a34b35;margin:0}
.ngx-home .flash-product h3{font-size:.76rem;line-height:1.4;margin:6px 0;min-height:43px}
.ngx-home .flash-price strong{display:block;color:#e13e17;font-size:1.03rem}
.ngx-home .flash-price del{font-size:.68rem;color:#929aa6}
.ngx-home .stock-bar{height:24px;border-radius:999px;background:#ffe2d7;margin:9px 0;position:relative;overflow:hidden}
.ngx-home .stock-bar span{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#ff8a4d,#ef3f17);border-radius:999px}
.ngx-home .stock-bar b{position:relative;z-index:1;display:block;text-align:center;font-size:.59rem;line-height:24px;color:#76200c}
.ngx-home .flash-buy{width:100%;min-height:39px;margin-top:auto;background:#ee491f;color:#fff}
.ngx-home .flash-more{position:relative;z-index:1;display:block;margin:15px auto 0;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:9px 15px;font-size:.72rem;font-weight:700}
@media(max-width:1000px){
.ngx-home .flash-sale__header{grid-template-columns:auto auto}
.ngx-home .flash-slots{grid-column:1/-1;justify-self:start}
.ngx-home .flash-grid{grid-template-columns:1fr}
.ngx-home .flash-product{grid-template-columns:180px 1fr}
.ngx-home .flash-product__body{padding-left:15px}
}
@media(max-width:760px){
.ngx-home .flash-sale{width:100%;border-radius:0;margin-top:13px;padding:15px 12px}
.ngx-home .flash-sale__header{grid-template-columns:1fr auto;gap:9px}
.ngx-home .flash-title h2{font-size:1.45rem}
.ngx-home .countdown-wrap>span{display:none}
.ngx-home .countdown b{width:32px;height:32px;font-size:.78rem}
.ngx-home .flash-slots{grid-column:1/-1;max-width:100%;overflow-x:auto}
.ngx-home .flash-slots button{white-space:nowrap;font-size:.72rem}
.ngx-home .flash-sale__notice{display:block;font-size:.72rem}
.ngx-home .flash-sale__notice span{display:block;margin-top:2px}
.ngx-home .flash-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:9px;padding-bottom:7px;scrollbar-width:none}
.ngx-home .flash-grid::-webkit-scrollbar{display:none}
.ngx-home .flash-product{flex:0 0 84vw;grid-template-columns:42% 58%;scroll-snap-align:center}
.ngx-home .flash-product__image{min-height:185px}
.ngx-home .flash-product__body{padding:13px 12px 12px 4px}
.ngx-home .flash-product h3{font-size:.78rem}
.ngx-home .flash-price strong{font-size:1rem}
.ngx-home .flash-code{font-size:.68rem}
.ngx-home .stock-bar b{font-size:.68rem}
.ngx-home .flash-buy{min-height:42px}
.ngx-home .flash-more{font-size:.75rem}
}
@media(max-width:760px){
.ngx .site-header{box-shadow:0 5px 18px rgba(5,21,39,.18)}
.ngx .header-main{min-height:54px}
.ngx .brand{gap:8px}
.ngx .brand__logo{width:36px;height:36px}
.ngx .brand strong{font-size:.56rem;letter-spacing:.2em}
.ngx .brand b{font-size:.86rem}
.ngx .mobile-search{gap:7px;padding-bottom:8px}
.ngx .mobile-search .search{height:42px;border-radius:10px}
.ngx .mobile-search .search input{font-size:.84rem;padding-inline:13px}
.ngx .mobile-search .search button{width:46px}
.ngx .mobile-cart{width:42px;border-radius:10px}
.ngx .mobile-quickbar{gap:6px;padding-bottom:8px}
.ngx .mobile-quickbar button,.ngx .mobile-quickbar a{min-height:36px;padding:6px 10px;font-size:.76rem}
.ngx-home .market-promises{overflow:hidden;box-shadow:0 4px 13px rgba(12,35,64,.05)}
.ngx-home .market-promises__grid{display:flex;width:100%;max-width:none;margin:0;gap:8px;overflow-x:auto;padding:8px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ngx-home .market-promises__grid::-webkit-scrollbar{display:none}
.ngx-home .promise-card{flex:0 0 232px;min-height:70px;padding:9px 10px;border:1px solid var(--line)!important;border-radius:12px;background:#fff;scroll-snap-align:start}
.ngx-home .promise-card--price{background:linear-gradient(135deg,#fff1e9,#fff)}
.ngx-home .promise-card__icon{width:38px;height:38px;font-size:.78rem}
.ngx-home .promise-card strong{font-size:.8rem;line-height:1.25}
.ngx-home .promise-card small{font-size:.72rem;line-height:1.35}
.ngx-home .hero-grid{width:calc(100% - 20px);padding-top:10px}
.ngx-home .hero-card{min-height:232px;border-radius:16px}
.ngx-home .hero-card__copy{width:76%;padding:18px 15px}
.ngx-home .hero-card h1{font-size:1.45rem;line-height:1.12;margin:7px 0}
.ngx-home .hero-card p{max-width:218px;margin:0 0 8px;font-size:.75rem;line-height:1.4}
.ngx-home .hero-card .button{min-height:42px;margin-top:4px;padding-inline:12px;font-size:.78rem}
.ngx-home .hero-card__visual{right:-8px;width:38%;height:72%;opacity:.74}
.ngx-home .price-badge{display:none}
.ngx-home .side-deals{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ngx-home .side-deals::-webkit-scrollbar{display:none}
.ngx-home .side-deal{flex:0 0 76vw;min-height:96px;padding:13px 15px;border-radius:13px;scroll-snap-align:start}
.ngx-home .side-deal h2{margin:5px 0 8px;font-size:.92rem}
.ngx-home .side-deal span,.ngx-home .side-deal button,.ngx-home .side-deal a{font-size:.72rem}
.ngx-home .side-deal__icon{font-size:2.25rem}
.ngx-home .flash-sale{width:calc(100% - 20px);margin:12px auto 0;padding:14px 10px;border-radius:16px}
.ngx-home .flash-sale__header{gap:8px}
.ngx-home .flash-title{gap:6px}
.ngx-home .flash-title h2{font-size:1.32rem}
.ngx-home .countdown{gap:3px}
.ngx-home .countdown b{width:30px;height:30px;border-radius:7px;font-size:.78rem}
.ngx-home .flash-slots button{min-height:40px;padding:7px 10px;font-size:.75rem}
.ngx-home .flash-sale__notice{margin:10px 0;padding:8px 9px;font-size:.75rem}
.ngx-home .flash-product{flex:0 0 88vw;grid-template-columns:40% 60%}
.ngx-home .flash-product__image{min-height:176px;padding:20px 8px}
.ngx-home .flash-product__image img{height:138px}
.ngx-home .flash-product__body{padding:11px 10px 10px 3px}
.ngx-home .flash-product h3{min-height:40px;font-size:.8rem}
.ngx-home .flash-price strong{font-size:1.02rem}
.ngx-home .flash-buy{min-height:44px;font-size:.78rem}
.ngx-home .trust-row{display:flex;width:calc(100% - 20px);gap:8px;margin-top:10px;padding:0;border:0;background:transparent;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ngx-home .trust-row::-webkit-scrollbar{display:none}
.ngx-home .trust-row article{flex:0 0 214px;min-height:64px;justify-content:flex-start;padding:9px 10px;border:1px solid var(--line)!important;border-radius:12px;background:#fff;scroll-snap-align:start}
.ngx-home .trust-icon{width:38px;height:38px;flex:none}
.ngx-home .trust-row strong{font-size:.78rem}
.ngx-home .trust-row small{font-size:.7rem}
.ngx-home .category-section,.ngx-home .products-section{padding-top:27px}
.ngx-home .section-heading{align-items:center;margin-bottom:13px}
.ngx-home .section-heading h2{font-size:1.22rem;line-height:1.25}
.ngx-home .section-heading>div>span{font-size:.68rem}
.ngx-home .text-link{min-height:40px;padding-inline:6px;font-size:.76rem}
.ngx-home .category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ngx-home .category-grid button,.ngx-home .category-grid a{min-height:88px;padding:7px 2px;border-radius:12px}
.ngx-home .category-grid span{height:33px;font-size:1.45rem}
.ngx-home .category-grid strong{font-size:.7rem;line-height:1.2}
.ngx-home .category-grid small{display:none}
.ngx-home .products-heading{display:block}
.ngx-home .filter-tabs{gap:4px;margin-top:10px;padding:3px;scrollbar-width:none}
.ngx-home .filter-tabs button{min-height:40px;white-space:nowrap;padding:7px 11px;font-size:.75rem}
.ngx-home .product-grid{display:grid;grid-template-columns:1fr;gap:9px;margin:0;padding:0 0 12px;overflow:visible}
.ngx-home .product-card{display:grid;grid-template-columns:38% 62%;min-width:0;border-radius:14px}
.ngx-home .product-card__image{height:auto;min-height:218px;padding:24px 8px}
.ngx-home .product-card__badges{top:7px;left:7px;right:auto;max-width:calc(38% - 12px)}
.ngx-home .product-card__badges span{padding:4px 5px;font-size:.6rem}
.ngx-home .wish{right:7px;top:7px;width:34px;height:34px}
.ngx-home .product-card__body{min-width:0;padding:12px 11px}
.ngx-home .product-code{display:none}
.ngx-home .product-card h3{min-height:0;margin:1px 32px 5px 0;font-size:.87rem;line-height:1.35}
.ngx-home .rating{font-size:.72rem}
.ngx-home .price{display:flex;flex-wrap:wrap;gap:3px 7px;margin:7px 0 5px}
.ngx-home .price strong{font-size:1rem;line-height:1.2}
.ngx-home .price del{font-size:.72rem}
.ngx-home .gift{min-height:0;margin-bottom:7px;padding:6px;font-size:.7rem;line-height:1.35}
.ngx-home .availability{font-size:.7rem}
.ngx-home .product-card__actions{margin-top:8px}
.ngx-home .product-card__actions .add-cart{min-height:44px;font-size:.76rem}
.ngx-home .service-banner{margin:26px auto;padding:21px 16px;border-radius:16px;gap:15px}
.ngx-home .service-banner h2{font-size:1.2rem}
.ngx-home .service-steps{gap:7px}
.ngx-home .service-steps span{min-height:44px;padding:11px;font-size:.75rem}
.ngx footer{padding-top:30px}
.ngx .footer-grid{grid-template-columns:1fr;gap:22px}
.ngx .footer-grid>div:first-child{grid-column:auto}
.ngx .mobile-bottom-nav{height:68px}
.ngx .mobile-bottom-nav a,.ngx .mobile-bottom-nav button{min-height:48px;font-size:.68rem}
.ngx .mobile-bottom-nav span{font-size:1.1rem}
}
@media(max-width:380px){
.ngx-home .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ngx-home .hero-card__copy{width:78%}
.ngx-home .hero-card h1{font-size:1.34rem}
.ngx-home .flash-product{flex-basis:91vw}
.ngx-home .product-card{grid-template-columns:36% 64%}
.ngx-home .product-card__image{min-height:224px}
.ngx-home .product-card__badges{max-width:calc(36% - 10px)}
}
.ngx .mobile-hotline{display:none}
@media(max-width:760px){
.ngx-home{display:flex;flex-direction:column}
.ngx-home .hero-grid{order:1}
.ngx-home .category-section{order:2}
.ngx-home .flash-sale{order:3}
.ngx-home .market-promises{order:4}
.ngx-home .products-section{order:5}
.ngx-home .trust-row{order:6}
.ngx-home .service-banner{order:7}
.ngx .header-main{grid-template-columns:1fr auto;min-height:56px}
.ngx .mobile-hotline{display:flex;align-items:center;gap:7px;text-decoration:none;color:#fff}
.ngx .mobile-hotline>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--orange);font-size:.9rem}
.ngx .mobile-hotline>div{display:flex;flex-direction:column;line-height:1.15}
.ngx .mobile-hotline small{font-size:.68rem;color:#c9d7e6}
.ngx .mobile-hotline strong{font-size:.75rem}
.ngx .mobile-quickbar{display:none}
.ngx .mobile-search{padding-bottom:10px}
.ngx .mobile-search .search{box-shadow:0 3px 10px rgba(0,0,0,.12)}
.ngx-home .hero-grid{padding-top:9px}
.ngx-home .hero-card{min-height:194px;border-radius:13px}
.ngx-home .hero-card__copy{width:73%;padding:15px 13px}
.ngx-home .hero-card .eyebrow{font-size:.62rem;letter-spacing:.1em}
.ngx-home .hero-card h1{font-size:1.3rem;line-height:1.12;margin:6px 0}
.ngx-home .hero-card p{max-width:205px;margin-bottom:5px;font-size:.72rem;line-height:1.38}
.ngx-home .hero-card .button{min-height:38px;padding-inline:10px;font-size:.72rem}
.ngx-home .hero-card__visual{right:-10px;width:40%;height:77%;opacity:.72}
.ngx-home .side-deals{gap:7px;margin-top:7px}
.ngx-home .side-deal{flex-basis:72vw;min-height:86px;padding:11px 13px}
.ngx-home .side-deal h2{font-size:.84rem}
.ngx-home .category-section{padding-top:18px}
.ngx-home .category-section .section-heading{margin-bottom:10px}
.ngx-home .category-section .section-heading>div>span{display:none}
.ngx-home .category-section .section-heading h2{font-size:1.1rem}
.ngx-home .category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ngx-home .category-grid button,.ngx-home .category-grid a{min-height:82px;background:#fff;padding:6px 2px;border-radius:11px;box-shadow:0 2px 8px rgba(12,35,64,.04)}
.ngx-home .category-grid span{height:31px;font-size:1.38rem;color:#154773}
.ngx-home .category-grid strong{font-size:.7rem;line-height:1.2}
.ngx-home .flash-sale{margin-top:18px;padding:13px 10px 12px}
.ngx-home .flash-title h2{font-size:1.25rem}
.ngx-home .flash-sale__notice{border-radius:8px}
.ngx-home .flash-grid{align-items:stretch}
.ngx-home .flash-product{display:block;flex:0 0 68vw;border-radius:12px}
.ngx-home .flash-product__image{height:148px;min-height:148px;padding:19px 12px 8px}
.ngx-home .flash-product__image img{height:122px}
.ngx-home .flash-product__body{min-height:190px;padding:10px;display:flex}
.ngx-home .flash-product h3{min-height:42px;margin:5px 0;font-size:.8rem}
.ngx-home .flash-price strong{font-size:1.02rem}
.ngx-home .flash-buy{min-height:42px}
.ngx-home .flash-more{min-height:42px;margin-top:10px}
.ngx-home .market-promises{margin-top:12px;border:0;background:transparent;box-shadow:none}
.ngx-home .market-promises__grid{padding-block:0}
.ngx-home .promise-card{flex-basis:218px;min-height:65px;box-shadow:0 2px 8px rgba(12,35,64,.04)}
.ngx-home .products-section{padding-top:24px}
.ngx-home .products-heading h2{font-size:1.15rem}
.ngx-home .filter-tabs{margin-top:9px;background:#e5e9ef}
.ngx-home .filter-tabs button{min-height:38px}
.ngx-home .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ngx-home .product-card{display:block;min-width:0;border-radius:12px}
.ngx-home .product-card__image{height:154px;min-height:0;padding:22px 12px 10px}
.ngx-home .product-card__badges{top:7px;left:6px;right:38px;max-width:none;gap:3px}
.ngx-home .product-card__badges span{padding:3px 4px;border-radius:4px;font-size:.58rem}
.ngx-home .wish{right:6px;top:6px;width:31px;height:31px;font-size:1rem}
.ngx-home .product-card__body{padding:9px}
.ngx-home .product-card h3{display:-webkit-box;min-height:38px;margin:0 0 4px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.82rem;line-height:1.4}
.ngx-home .rating{font-size:.7rem}
.ngx-home .price{display:block;margin:6px 0 5px}
.ngx-home .price strong{display:block;font-size:.95rem}
.ngx-home .price del{display:block;font-size:.7rem}
.ngx-home .gift{display:-webkit-box;min-height:43px;margin-bottom:6px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.68rem;line-height:1.35}
.ngx-home .availability{min-height:30px;align-items:flex-start;font-size:.67rem;line-height:1.3}
.ngx-home .availability span{margin-top:4px;flex:none}
.ngx-home .product-card__actions{margin-top:6px}
.ngx-home .product-card__actions .add-cart{min-height:42px;border-radius:8px;font-size:.72rem}
.ngx-home .trust-row{margin-top:20px}
.ngx-home .service-banner{margin-top:20px}
.ngx .mobile-nav-cart{position:relative}
.ngx .mobile-nav-cart .cart-count{position:absolute;top:5px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--orange);color:#fff;font-size:.6rem;line-height:17px}
}
@media(max-width:360px){
.ngx .mobile-hotline strong{font-size:.7rem}
.ngx-home .category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.ngx-home .category-grid button,.ngx-home .category-grid a{min-height:78px}
.ngx-home .category-grid strong{font-size:.66rem}
.ngx-home .flash-product{flex-basis:74vw}
.ngx-home .product-grid{gap:6px}
.ngx-home .product-card__image{height:142px}
.ngx-home .product-card__body{padding:8px}
.ngx-home .product-card h3{font-size:.78rem}
.ngx-home .price strong{font-size:.88rem}
}
@media(min-width:1001px){
.ngx-home .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:761px) and (max-width:1000px){
.ngx-home .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.ngx .header-main{min-height:54px}
.ngx .brand__logo{width:34px;height:34px}
.ngx .brand b{font-size:.82rem}
.ngx .mobile-hotline>span{width:30px;height:30px}
.ngx .mobile-search{padding-bottom:9px}
.ngx-home .hero-card{min-height:184px}
.ngx-home .hero-card__copy{width:68%;padding:14px 13px}
.ngx-home .hero-card h1{font-size:1.2rem;line-height:1.14}
.ngx-home .hero-card p{max-width:190px;font-size:.71rem}
.ngx-home .hero-card__visual{right:-2px;width:34%;height:72%;opacity:.8}
.ngx-home .side-deals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:visible}
.ngx-home .side-deal{min-width:0;min-height:94px;padding:10px 11px}
.ngx-home .side-deal h2{margin:4px 0 5px;font-size:.79rem;line-height:1.25}
.ngx-home .side-deal span,.ngx-home .side-deal button,.ngx-home .side-deal a{font-size:.68rem}
.ngx-home .side-deal__icon{display:none}
.ngx-home .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ngx-home .category-grid button,.ngx-home .category-grid a{min-height:0;aspect-ratio:1.25/1;padding:7px 3px}
.ngx-home .category-grid span{height:32px;font-size:1.4rem}
.ngx-home .category-grid strong{font-size:.74rem}
.ngx-home .flash-product{display:flex;flex:0 0 64vw;flex-direction:column}
.ngx-home .flash-product__image{height:auto;min-height:0;aspect-ratio:1.55/1;padding:16px 10px 6px}
.ngx-home .flash-product__image img{height:100%;max-height:120px}
.ngx-home .flash-product__body{flex:1;min-height:178px;padding:9px 10px 10px}
.ngx-home .flash-product h3{min-height:39px}
.ngx-home .stock-bar{margin:7px 0}
.ngx-home .promise-card{flex-basis:216px}
.ngx-home .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
.ngx-home .product-card{display:flex;height:100%;flex-direction:column}
.ngx-home .product-card__image{width:100%;height:auto;min-height:0;aspect-ratio:1.15/1;padding:20px 11px 9px}
.ngx-home .product-card__body{display:flex;flex:1;flex-direction:column;padding:9px}
.ngx-home .product-card h3{min-height:38px;font-size:.82rem}
.ngx-home .rating{min-height:18px}
.ngx-home .price{min-height:37px;margin:5px 0}
.ngx-home .price strong{font-size:.95rem}
.ngx-home .gift{min-height:40px;margin-bottom:6px}
.ngx-home .availability{display:none}
.ngx-home .product-card__actions{margin-top:auto;padding-top:4px}
.ngx-home .product-card__actions .add-cart{min-height:42px;font-size:.76rem}
.ngx-home .trust-row article{flex-basis:210px;min-height:62px}
.ngx-home .service-banner{margin-bottom:24px}
}
@media(max-width:360px){
.ngx-home .hero-card{min-height:176px}
.ngx-home .hero-card__copy{width:70%;padding-inline:11px}
.ngx-home .hero-card h1{font-size:1.12rem}
.ngx-home .hero-card p{font-size:.68rem}
.ngx-home .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ngx-home .category-grid button,.ngx-home .category-grid a{aspect-ratio:1.2/1}
.ngx-home .flash-product{flex-basis:69vw}
.ngx-home .product-grid{gap:6px}
.ngx-home .product-card__image{height:auto;aspect-ratio:1.1/1}
.ngx-home .product-card__body{padding:8px}
.ngx-home .product-card h3{font-size:.78rem}
.ngx-home .price strong{font-size:.88rem}
}
.ngx-home .flash-list-heading{display:none}
@media(max-width:760px){
.ngx-home .flash-sale{padding:12px 10px 13px;border-radius:16px;background:linear-gradient(145deg,#c92f0c 0%,#ee4b20 52%,#ff7340 100%);box-shadow:0 12px 28px rgba(217,59,18,.2)}
.ngx-home .flash-sale__header{grid-template-areas:"title timer" "slots slots";grid-template-columns:1fr auto;gap:9px 8px;align-items:center}
.ngx-home .flash-title{grid-area:title;gap:6px}
.ngx-home .flash-title small{font-size:.62rem;letter-spacing:.1em}
.ngx-home .flash-title h2{margin-top:2px;font-size:1.2rem;letter-spacing:-.03em}
.ngx-home .countdown-wrap{grid-area:timer}
.ngx-home .countdown{gap:3px}
.ngx-home .countdown b{width:30px;height:30px;border-radius:7px;font-size:.78rem;box-shadow:0 2px 6px rgba(102,22,2,.16)}
.ngx-home .flash-slots{grid-area:slots;display:grid;grid-auto-columns:max-content;grid-auto-flow:column;justify-self:stretch;width:100%;gap:4px;padding:3px;overflow-x:auto;scrollbar-width:none}
.ngx-home .flash-slots::-webkit-scrollbar{display:none}
.ngx-home .flash-slots button{min-height:38px;padding:6px 11px;font-size:.72rem}
.ngx-home .flash-slots button.active{box-shadow:0 2px 7px rgba(104,23,3,.18)}
.ngx-home .flash-sale__notice{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0 7px;padding:8px 9px;font-size:.7rem;line-height:1.3}
.ngx-home .flash-sale__notice strong{white-space:nowrap}
.ngx-home .flash-sale__notice span{margin:0;text-align:right;color:#ffe9e1}
.ngx-home .flash-list-heading{display:flex;align-items:center;justify-content:space-between;margin:0 2px 7px;font-size:.72rem}
.ngx-home .flash-list-heading span{color:#ffe3d9;font-size:.68rem}
.ngx-home .flash-grid{align-items:stretch;gap:8px;margin-right:-10px;padding:0 22px 5px 0;scroll-padding-left:1px}
.ngx-home .flash-product{flex:0 0 clamp(222px,68vw,260px);min-width:0;max-width:none;border:1px solid rgba(115,25,4,.12);border-radius:12px;box-shadow:0 5px 14px rgba(106,22,2,.14);scroll-snap-align:start}
.ngx-home .flash-discount{top:8px;left:8px;padding:4px 7px;border-radius:999px;font-size:.68rem}
.ngx-home .flash-product__image{width:100%;height:auto;min-height:0;aspect-ratio:1.55/1;padding:17px 12px 7px}
.ngx-home .flash-product__image img{width:100%;height:100%;max-height:122px}
.ngx-home .flash-product__body{display:grid;grid-template-rows:auto 40px 38px 22px 42px;gap:4px;min-height:0;padding:9px 10px 10px}
.ngx-home .flash-code{align-self:end;font-size:.66rem}
.ngx-home .flash-product h3{align-self:start;min-height:0;margin:0;font-size:.8rem;line-height:1.35}
.ngx-home .flash-price{align-self:center}
.ngx-home .flash-price strong{font-size:1.05rem;line-height:1.15}
.ngx-home .flash-price del{font-size:.7rem}
.ngx-home .stock-bar{height:22px;margin:0;align-self:center}
.ngx-home .stock-bar b{font-size:.66rem;line-height:22px}
.ngx-home .flash-buy{align-self:end;min-height:42px;margin:0;border-radius:8px;font-size:.78rem}
.ngx-home .flash-more{width:100%;min-height:42px;margin-top:9px;border:0;background:#fff;color:#c8320d;box-shadow:0 3px 9px rgba(104,23,3,.15)}
}
@media(max-width:360px){
.ngx-home .flash-sale__notice span{display:none}
.ngx-home .flash-sale__notice{justify-content:flex-start}
.ngx-home .flash-product{flex-basis:clamp(218px,70vw,242px)}
}
@media(min-width:1001px){
.ngx-home .flash-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ngx-home .flash-product{grid-template-columns:40% 60%}
}
@media(min-width:761px) and (max-width:1000px){
.ngx-home .flash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.ngx-home .flash-list-heading span{color:#ffe7de}
.ngx-home .flash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
.ngx-home .flash-product{display:flex;width:auto;min-width:0;max-width:none;height:100%;flex:none;flex-direction:column;border-radius:11px}
.ngx-home .flash-product__image{width:100%;height:auto;min-height:0;aspect-ratio:1.18/1;padding:17px 9px 7px}
.ngx-home .flash-product__image img{width:100%;height:100%;max-height:none}
.ngx-home .flash-product__body{display:flex;min-height:0;flex:1;flex-direction:column;gap:0;padding:8px}
.ngx-home .flash-code{min-height:17px;font-size:.6rem}
.ngx-home .flash-product h3{display:-webkit-box;min-height:39px;margin:1px 0 4px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.74rem;line-height:1.32}
.ngx-home .flash-price{min-height:38px;margin-bottom:3px}
.ngx-home .flash-price strong{font-size:.9rem;line-height:1.2;white-space:nowrap}
.ngx-home .flash-price del{display:block;font-size:.66rem}
.ngx-home .stock-bar{width:100%;height:21px;margin:3px 0 7px}
.ngx-home .stock-bar b{font-size:.6rem;line-height:21px;white-space:nowrap}
.ngx-home .flash-buy{width:100%;min-height:40px;margin-top:auto;padding-inline:5px;font-size:.7rem}
.ngx-home .flash-more{margin-top:10px}
}
@media(max-width:360px){
.ngx-home .flash-grid{gap:6px}
.ngx-home .flash-product__image{aspect-ratio:1.12/1;padding-inline:7px}
.ngx-home .flash-product__body{padding:7px}
.ngx-home .flash-product h3{font-size:.7rem}
.ngx-home .flash-price strong{font-size:.83rem}
.ngx-home .stock-bar b{font-size:.56rem}
.ngx-home .flash-buy{font-size:.66rem}
}
.ngx-home .section-heading__title{display:flex;align-items:center;gap:12px;min-width:0}
.ngx-home .section-heading__title>div{display:flex;flex-direction:column;min-width:0}
.ngx-home .section-heading__title span{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--orange-2)}
.ngx-home .service-banner__title{display:flex;align-items:flex-start;gap:14px}
.ngx-home .service-banner__title h2{margin-top:6px}
.ngx .category-nav a{display:flex;align-items:center;padding:15px 18px;font-size:.78rem;font-weight:600;text-decoration:none;white-space:nowrap}
.ngx .category-nav a:hover,.ngx .category-nav a.active{color:var(--orange)}
.ngx .category-nav__news{margin-left:auto;background:var(--cream);color:var(--orange)!important}
.ngx-home .button--primary,.ngx-home .flash-buy{background:linear-gradient(135deg,var(--orange),var(--orange-2))}
.ngx-home .category-grid button:hover,.ngx-home .category-grid a:hover{border-color:var(--orange-2)}
.ngx-home .home-news{padding-top:46px;padding-bottom:2px}
.ngx-home .home-news__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ngx-home .home-news__card{min-height:165px;display:grid;grid-template-columns:40% 60%;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:#fff;text-decoration:none;transition:.2s}
.ngx-home .home-news__card:hover{transform:translateY(-3px);border-color:#ffc4af;box-shadow:var(--shadow)}
.ngx-home .home-news__card>img{width:100%;height:100%;min-height:165px;object-fit:contain;padding:18px;background:linear-gradient(145deg,#fff8f4,#edf3f8)}
.ngx-home .home-news__card>div{display:flex;flex-direction:column;justify-content:center;padding:15px}
.ngx-home .home-news__card small{color:var(--orange);font-size:.65rem;font-weight:800;letter-spacing:.09em}
.ngx-home .home-news__card strong{margin:7px 0;font-size:.82rem;line-height:1.45}
.ngx-home .home-news__card span{font-size:.72rem;font-weight:700;color:var(--navy)}
.ngx .category-nav button,.ngx .category-nav a{display:flex;align-items:center;gap:7px}
.ngx .category-nav button>svg,.ngx .category-nav a>svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ngx .category-nav__all>svg,.ngx .category-nav__flash>svg{fill:currentColor!important;stroke:none!important}
.ngx-home .heading-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,var(--orange),var(--orange-2));color:#fff;box-shadow:0 7px 16px rgba(233,70,24,.22)}
.ngx-home .heading-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ngx-home .heading-icon--flash{background:var(--yellow);color:#982d0c;box-shadow:0 6px 13px rgba(96,20,2,.25)}
.ngx-home .heading-icon--flash svg{fill:currentColor;stroke:none}
.ngx-home .heading-icon--dark{background:rgba(255,255,255,.12);color:var(--yellow);border:1px solid rgba(255,255,255,.2);box-shadow:none}
.ngx-home .section-heading__title .heading-icon{color:#fff;letter-spacing:normal}
.ngx-home .section-heading__title .heading-icon--dark{color:var(--yellow)}
.ngx-home .category-grid .category-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:#edf3fa;color:var(--navy)}
.ngx-home .category-grid .category-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ngx-home .category-grid button:hover .category-icon,.ngx-home .category-grid a:hover .category-icon{background:var(--cream);color:var(--orange)}
@media(max-width:1000px){
.ngx-home .home-news__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.ngx-home .heading-icon{width:36px;height:36px;border-radius:10px}
.ngx-home .heading-icon svg{width:20px;height:20px}
.ngx-home .category-grid .category-icon{width:34px;height:34px;border-radius:10px}
.ngx-home .category-grid .category-icon svg{width:21px;height:21px}
.ngx-home .section-heading__title{gap:9px}
.ngx-home .section-heading__title span{font-size:.62rem;letter-spacing:.11em}
.ngx-home .service-banner__title{gap:10px}
.ngx-home .home-news{order:6;padding-top:24px}
.ngx-home .trust-row{order:7}
.ngx-home .service-banner{order:8}
.ngx-home .home-news__grid{display:flex;gap:8px;margin-inline:-10px;padding:0 10px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ngx-home .home-news__grid::-webkit-scrollbar{display:none}
.ngx-home .home-news__card{flex:0 0 82vw;min-height:132px;grid-template-columns:36% 64%;border-radius:13px;scroll-snap-align:center}
.ngx-home .home-news__card>img{min-height:132px;padding:14px}
.ngx-home .home-news__card>div{padding:12px}
.ngx-home .home-news__card strong{font-size:.78rem}
}
/* Flash Sale trang chủ: mỗi trang 2 hàng × 4 ô, trượt ngang (thanh trượt + nút mũi tên) tới khi hết sản phẩm */
.ngx-home .flash-rail{position:relative;z-index:1}
.ngx-home .flash-pages{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#fff rgba(255,255,255,.28)}
.ngx-home .flash-pages::-webkit-scrollbar{display:block;height:8px}
.ngx-home .flash-pages::-webkit-scrollbar-track{background:rgba(255,255,255,.28);border-radius:99px}
.ngx-home .flash-pages::-webkit-scrollbar-thumb{background:#fff;border-radius:99px}
.ngx-home .flash-pages .flash-grid{flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;grid-auto-flow:row;gap:11px;margin:0;padding:0;overflow:visible;scroll-snap-align:start}
.ngx-home .flash-pages .flash-product{scroll-snap-align:start;min-width:0;width:auto;flex:none}
.ngx-home .flash-nav{position:absolute;z-index:3;top:calc(50% - 26px);width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#d93b12;font-size:1.5rem;line-height:1;box-shadow:0 3px 10px rgba(104,23,3,.25);cursor:pointer}
.ngx-home .flash-nav--prev{left:-10px}.ngx-home .flash-nav--next{right:-10px}
.ngx-home .flash-nav[disabled]{opacity:.35;cursor:default}
@media(max-width:1000px){
/* máy tính bảng / điện thoại: trang 4 cột rộng gấp đôi màn hình → thấy 2 cột × 2 hàng, trượt từng cột */
.ngx-home .flash-pages .flash-grid{flex-basis:calc(200% + 11px);scroll-snap-align:none}
.ngx-home .flash-pages .flash-grid:has(> :nth-child(1):last-child), .ngx-home .flash-pages .flash-grid:has(> :nth-child(2):last-child){flex-basis:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
.ngx-home .flash-product{display:flex;flex-direction:column}
.ngx-home .flash-product__image{width:100%;min-height:0;aspect-ratio:1.18/1;height:auto;padding:17px 9px 7px}
.ngx-home .flash-product__image img{height:100%;max-height:none}
.ngx-home .flash-nav{display:none}
}
@media(max-width:760px){
.ngx-home .flash-pages{gap:8px;padding-bottom:9px}
.ngx-home .flash-pages .flash-grid{gap:8px;flex-basis:calc(200% + 8px)}
}
.ngx-home .flash-pages{scrollbar-width:none}
.ngx-home .flash-pages::-webkit-scrollbar{display:none}
.ngx-home .flash-progress{position:relative;height:6px;margin:4px 2px 0;background:rgba(255,255,255,.3);border-radius:99px;overflow:hidden}
.ngx-home .flash-progress i{position:absolute;top:0;bottom:0;background:#fff;border-radius:99px;transition:left .12s linear}
.ngx-home .flash-pages .flash-product h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.8em;min-height:2.8em}
/* Mọi màn hình: đủ 8 ô (2 hàng × 4 cột) mỗi trang — điện thoại / máy tính bảng dùng thẻ thu gọn */
@media(max-width:1000px){
.ngx-home .flash-pages .flash-grid,.ngx-home .flash-pages .flash-grid:has(> :nth-child(1):last-child),.ngx-home .flash-pages .flash-grid:has(> :nth-child(2):last-child){flex-basis:100%;grid-template-columns:repeat(4,minmax(0,1fr));scroll-snap-align:start}
.ngx-home .flash-pages .flash-product{scroll-snap-align:none}
}
@media(max-width:760px){
.ngx-home .flash-pages{gap:6px}
.ngx-home .flash-pages .flash-grid{gap:5px}
.ngx-home .flash-pages .flash-product{border-radius:8px}
.ngx-home .flash-pages .flash-discount{top:3px;left:3px;padding:2px 4px;font-size:.52rem}
.ngx-home .flash-pages .flash-product__image{aspect-ratio:1/1;padding:14px 4px 2px}
.ngx-home .flash-pages .flash-product__body{padding:4px 4px 5px}
.ngx-home .flash-pages .flash-code{display:none}
.ngx-home .flash-pages .flash-product h3{font-size:.56rem;line-height:1.3;min-height:2.6em;max-height:2.6em;margin:0 0 2px}
.ngx-home .flash-pages .flash-price{min-height:0;margin-bottom:2px}
.ngx-home .flash-pages .flash-price strong{font-size:.66rem;white-space:nowrap}
.ngx-home .flash-pages .flash-price del{font-size:.5rem}
.ngx-home .flash-pages .stock-bar{height:auto;min-height:14px;margin:0 0 3px}
.ngx-home .flash-pages .stock-bar b{font-size:.5rem;white-space:nowrap}
.ngx-home .flash-pages .flash-buy{min-height:26px;padding:0 2px;font-size:.56rem;border-radius:6px}
}
@media(min-width:761px) and (max-width:1000px){
.ngx-home .flash-pages .flash-code{display:none}
.ngx-home .flash-pages .flash-product h3{font-size:.7rem}
.ngx-home .flash-pages .flash-price strong{font-size:.85rem}
.ngx-home .flash-pages .flash-buy{min-height:34px;font-size:.7rem}
}


/* --- ngx-site.css --- */
/* Bổ sung cho giao diện theo mẫu: phần web thật có mà mẫu không có (menu tất cả danh mục,
   thông tin pháp lý chân trang, ảnh sản phẩm nền trắng, link thay cho nút). Nạp SAU ngx.css. */
.ngx .category-nav a { text-decoration: none; }
.ngx .category-nav a[aria-current="page"] { color: var(--orange); }
.ngx .mobile-quickbar a { text-decoration: none; }
.ngx .all-cats { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 18px 40px rgba(12, 35, 64, .12); position: absolute; left: 0; right: 0; z-index: 60; }
.ngx .category-nav { position: relative; }
.ngx .all-cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 14px; padding-bottom: 16px; }
.ngx .all-cats__grid a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.ngx .all-cats__grid a:hover { border-color: var(--orange); }
.ngx .all-cats__grid svg { width: 22px; height: 22px; flex: none; }
.ngx .all-cats__grid span { display: grid; }
.ngx .all-cats__grid small { color: var(--muted); font-size: .74rem; }
.ngx .footer-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 18px; padding-top: 14px; padding-bottom: 18px; font-size: .76rem; color: #9fb0c6; }
.ngx .footer-legal p { margin: 2px 0; }
.ngx .footer-legal a { color: #cfe0f2; }
.ngx .search--suggest { position: relative; overflow: visible; }
.ngx-home .side-deal a { text-decoration: none; }
.ngx-home .category-grid a { text-decoration: none; color: inherit; }
.ngx-home .product-card h3 a, .ngx-home .flash-product h3 a, .ngx-home .home-news__card { color: inherit; text-decoration: none; }
.ngx-home .product-card__image { display: block; }
.ngx-home .flash-product__image { display: flex; }
.ngx-home a.flash-buy { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; }
.ngx-home .trust-row small a { color: inherit; }
@media (max-width: 1000px) { .ngx .all-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ngx .all-cats { position: fixed; top: auto; bottom: 64px; max-height: 70vh; overflow-y: auto; border-radius: 18px 18px 0 0; }
}
/* Ảnh sản phẩm thật có nền trắng (ảnh mẫu trong suốt): đổi khung ảnh sang nền trắng cho liền,
   bỏ khung trắng bo góc mà styles.css cũ đặt cho ảnh hero. */
.ngx-home .product-card__image, .ngx-home .flash-product__image { background: #fff; }
.ngx-home .hero-card__visual { padding: 0; }
.ngx-home .hero-card__visual img { background: none; border-radius: 0; padding: 0; max-height: none; }
.ngx-home .gift { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* styles.css cũ đổi tiêu đề mục thành cột trên điện thoại — giữ một hàng như mẫu */
.ngx-home .section-heading { flex-direction: row; text-align: left; gap: 12px; }
.ngx-home .category-section, .ngx-home .products-section { text-align: left; }
.ngx-home .service-steps a { color: #fff; text-decoration: none; background: var(--orange); border-radius: 11px; padding: 13px; font-size: .75rem; font-weight: 700; }
.ngx-home .service-steps a b { color: #fff; margin-right: 4px; }
/* Dải dịch vụ tận nhà trên trang chủ — một hàng, thấp, không tranh chỗ với sản phẩm */
.ngx-home .svc-strip { display: flex; align-items: center; gap: 16px; margin-top: 26px; background: #fff; border: 1px solid var(--line); border-radius: 17px; padding: 12px 14px; }
.ngx-home .svc-strip__title { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.ngx-home .svc-strip__title small { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: var(--orange-2); }
.ngx-home .svc-strip__title b { font-size: .92rem; }
.ngx-home .svc-strip__links { display: flex; gap: 8px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.ngx-home .svc-strip__links::-webkit-scrollbar { display: none; }
.ngx-home .svc-strip__links a { flex: none; padding: 8px 12px; border-radius: 999px; background: #f4f6f9; font-size: .76rem; font-weight: 600; text-decoration: none; color: var(--navy); white-space: nowrap; }
.ngx-home .svc-strip__links a:hover { background: var(--cream); color: var(--orange); }
.ngx-home .svc-strip__cta { flex: none; padding: 10px 16px; border-radius: 11px; background: var(--orange); color: #fff; font-weight: 700; font-size: .8rem; text-decoration: none; }
@media (max-width: 760px) {
  .ngx-home .svc-strip { order: 6; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; border-radius: 14px; }
  .ngx-home .svc-strip__links { order: 3; flex-basis: 100%; }
  .ngx-home .svc-strip__cta { margin-left: auto; padding: 8px 12px; }
}
/* Khối chọn nhanh dịch vụ tận nhà (trang chủ) */
.ngx-home .svc-home { margin-top: 28px; background: #fff; border: 1px solid var(--line); border-radius: 19px; padding: 18px 20px; }
.ngx-home .svc-home__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.ngx-home .svc-home__head h2 { font-size: 1.3rem; margin: 4px 0 0; letter-spacing: -.03em; }
.ngx-home .svc-home__head span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--orange-2); }
.ngx-home .svc-home__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ngx-home .svc-home__col { display: grid; gap: 7px; align-content: start; }
.ngx-home .svc-home__col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: .92rem; }
.ngx-home .svc-home__col h3 svg { width: 22px; height: 22px; fill: none; stroke: var(--orange); stroke-width: 1.8; }
.ngx-home .svc-home__pick { display: grid; grid-template-columns: 1fr auto 30px; gap: 8px; align-items: center; min-height: 46px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; color: var(--ink); font-size: .82rem; font-weight: 600; }
.ngx-home .svc-home__pick:hover { border-color: var(--orange); background: #fff8f3; }
.ngx-home .svc-home__pick b { color: var(--orange); font-size: .8rem; white-space: nowrap; }
.ngx-home .svc-home__pick i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--orange); color: #fff; font-weight: 800; }
.ngx-home .svc-home__note { margin: 12px 0 0; font-size: .76rem; color: var(--muted); }
@media (max-width: 1000px) { .ngx-home .svc-home__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .ngx-home .svc-home { order: 6; margin: 18px 0 0; padding: 14px 12px; border-radius: 14px; }
  .ngx-home .svc-home__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none; }
  .ngx-home .svc-home__grid::-webkit-scrollbar { display: none; }
  .ngx-home .svc-home__col { flex: 0 0 82%; scroll-snap-align: start; }
  .ngx-home .svc-home__head h2 { font-size: 1.1rem; }
}