:root {
  color-scheme: dark;
  --navy-950: #030410;
  --navy-900: #08091b;
  --navy-850: #10102a;
  --navy-800: #17143a;
  --cyan: #2cf7ff;
  --cyan-soft: #91fbff;
  --yellow: #ff46d7;
  --coral: #ff577f;
  --text: #f8f7ff;
  --muted: #aaa7c7;
  --border: #235d83;
  --border-warm: #8b237f;
  --focus: #fff38d;
  --radius: 16px;
  --space: clamp(12px, 1.6vw, 24px);
  font-family: var(--font-ui);
}

* { box-sizing: border-box; scrollbar-color: var(--cyan) var(--navy-900); scrollbar-width: auto; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--navy-900); }
*::-webkit-scrollbar-thumb { border: 2px solid var(--navy-900); border-radius: 10px; background: var(--cyan); }
*::-webkit-scrollbar-thumb:hover { background: var(--yellow); }
.catalog-bands { scrollbar-width: thin; }
.catalog-bands::-webkit-scrollbar { width: 6px; height: 6px; }

html { background: var(--navy-950); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 18% 8%, rgb(44 247 255 / .14), transparent 34rem),
    radial-gradient(circle at 88% 18%, rgb(255 70 215 / .14), transparent 30rem),
    linear-gradient(180deg, var(--navy-950), #0b071b 55%, #050915);
  color: var(--text);
}
body.viewer-open { overflow: hidden; }
body.announcement-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.shop-home, .account-detail, .shop-footer {
  width: min(100% - 32px, 1740px);
  margin-inline: auto;
}
.shop-header {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(255 196 50 / .22);
}
.shop-logo { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(20px, 2vw, 30px); font-weight: 800; letter-spacing: -.05em; }
.shop-logo span {
  display: grid;
  width: 50px;
  height: 50px;
  align-content: center;
  gap: 1px;
  place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
  background: var(--cyan);
  color: #03121d;
  font-size: 16px;
  letter-spacing: -.04em;
}
.shop-logo span b { font-size: 1em; line-height: .95; }
.shop-logo span small { font-size: .7em; font-weight: 900; letter-spacing: .04em; line-height: 1; }
.shop-logo strong { color: var(--cyan); font-size: clamp(12px, 1.5vw, 22px); white-space: nowrap; }
.shop-logo em { color: var(--text); font-style: normal; }
.shop-hotline {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  padding: 0 22px;
  border: 1px solid var(--border-warm);
  border-radius: 14px;
  color: var(--yellow);
  font-weight: 800;
  white-space: nowrap;
}

.shop-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  min-height: 220px;
  margin: 32px 0 28px;
  padding: clamp(28px, 3vw, 48px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(110deg, rgb(20 83 105 / .52), rgb(8 28 49 / .94) 48%, rgb(28 46 41 / .65)),
    var(--navy-850);
  box-shadow: inset 0 1px 0 rgb(130 230 244 / .12);
}
.eyebrow { margin: 0 0 8px; color: var(--cyan-soft); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.shop-intro h1 { margin: 0; color: var(--cyan); font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -.06em; }
.shop-intro h1 em { color: var(--text); font-style: normal; }
.shop-intro-copy > p:last-child { margin: 14px 0 0; color: #b8c9d7; line-height: 1.55; }
.shop-intro-copy b { color: var(--yellow); }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-actions a {
  display: grid;
  min-height: 56px;
  place-items: center;
  padding: 10px 16px;
  border: 1px solid #1c73e8;
  border-radius: 14px;
  background: #1f6fe8;
  color: white;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.contact-actions a:first-child { grid-column: 1 / -1; border-color: var(--cyan); background: var(--cyan); color: #03131f; }
.contact-actions a:last-child { border-color: var(--yellow); background: var(--yellow); color: #151100; }

.catalog-search { position: relative; margin-bottom: 22px; }
.catalog-search input[type='search'] {
  width: 100%;
  min-height: 62px;
  padding: 0 78px 0 24px;
  border: 2px solid #d5e5ec;
  border-radius: var(--radius);
  background: #eef3f6;
  color: #102135;
}
.catalog-search input::placeholder { color: #71879a; opacity: 1; }
.catalog-search button {
  position: absolute;
  top: 6px;
  right: 7px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--cyan);
  color: #00131e;
  font-size: 25px;
  cursor: pointer;
}
.catalog-search button svg, .detail-back svg, .image-viewer button svg { width: 20px; height: 20px; }
.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'heading filter';
  gap: 14px;
  align-items: center;
}
.catalog-heading { grid-area: heading; }
.catalog-filter { position: relative; grid-area: filter; justify-self: end; }
.catalog-filter summary { list-style: none; }
.catalog-filter summary::-webkit-details-marker { display: none; }
.catalog-filter-trigger, .catalog-filter-group a, .catalog-bands a, .catalog-pagination a {
  display: grid;
  min-height: 46px;
  place-items: center;
  padding: 8px 20px;
  border: 1px solid var(--border-warm);
  border-radius: 12px;
  color: #d9eafb;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.catalog-filter-trigger { cursor: pointer; }
.catalog-filter-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 24px)); }
.catalog-filter-group a[aria-current='page'] { background: var(--yellow); color: #131000; }
.catalog-heading { display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.catalog-heading h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 25px; }
.catalog-heading h2::before { content: ''; width: 28px; height: 28px; border-radius: 5px; background: conic-gradient(var(--cyan) 0 25%, transparent 0 50%, var(--cyan) 0 75%, transparent 0); }
.catalog-heading h2 span { padding: 5px 10px; border-radius: 99px; background: var(--cyan); color: #00131d; font-size: 12px; }
.catalog-status { color: var(--muted); font-size: 12px; opacity: 0; }
.catalog-bands { display: flex; gap: 10px; margin: 22px 0 20px; padding: 14px 0 8px; overflow-x: auto; border-top: 1px solid rgb(255 196 50 / .22); }
.catalog-bands a[aria-current='page'] { border-color: var(--cyan); background: var(--cyan); color: #00131d; }

.account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.account-card {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--cyan);
  border-radius: var(--radius);
  background: rgb(4 20 36 / .94);
}
.account-cover-link { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, #d7e7eb, #f5f9fa 50%, #cfe1e6); }
.account-cover { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.account-cover-link > span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgb(2 11 23 / .88);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.account-card-info {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px 14px;
  padding: 16px;
}
.account-card-info h2 { grid-column: 1; margin: 0; font-size: 18px; }
.account-card-info p { margin: 0; color: var(--muted); font-size: 12px; }
.account-card-info p strong { color: var(--text); }
.account-state { grid-column: 2; grid-row: 1; text-align: right; }
.account-price { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgb(255 196 50 / .2); }
.account-price strong { margin-left: 10px; color: var(--coral) !important; font-size: 23px; }
.account-rental { grid-column: 1; }
.account-date { grid-column: 1; align-self: end; }
.account-detail-link { grid-column: 2; grid-row: 3 / 6; align-self: end; min-width: 80px; padding: 9px 12px; border: 1px solid var(--border-warm); border-radius: 10px; color: var(--yellow); font-size: 11px; font-weight: 800; text-align: center; text-transform: uppercase; }
.catalog-pagination { display: flex; justify-content: center; gap: 8px; margin: 28px 0; }
.catalog-pagination a[aria-current='page'] { background: var(--cyan); color: #00131d; }
.catalog-empty { padding: 60px 24px; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }

.account-detail .shop-header { margin-bottom: 30px; }
.detail-back { margin: 0 0 22px; }
.detail-back a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; color: #cde9ff; font-size: 13px; font-weight: 700; }
.account-detail-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(340px, .95fr); gap: 28px; }
.account-image-viewer-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cyan);
  border-radius: var(--radius);
  background: #020913;
  cursor: zoom-in;
}
.account-detail-image { display: block; width: 100%; height: 100%; max-height: 860px; object-fit: contain; }
.account-image-viewer-trigger > span { position: absolute; bottom: 14px; left: 50%; padding: 8px 12px; transform: translateX(-50%); border-radius: 9px; background: rgb(2 11 23 / .88); color: #dff9ff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.account-detail-panel { padding: clamp(24px, 2.4vw, 38px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--navy-850); }
.detail-status { display: inline-block; margin: 0 0 22px; padding: 8px 12px; border: 1px solid #168a78; border-radius: 10px; background: rgb(17 130 111 / .17); color: #61e7c5; font-size: 12px; font-weight: 800; }
.account-detail-panel h1 { margin: 0 0 24px; font-size: clamp(34px, 4vw, 48px); letter-spacing: -.05em; }
.detail-price { display: grid; gap: 7px; margin: 0 0 20px; padding: 24px; border: 1px solid var(--border-warm); border-radius: 15px; background: rgb(255 196 50 / .05); }
.detail-price span, .detail-price small { color: var(--muted); }
.detail-price strong { color: var(--coral); font-size: clamp(36px, 4vw, 52px); line-height: 1; }
.detail-facts { margin: 0 0 20px; }
.detail-facts div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px dashed rgb(143 169 191 / .22); }
.detail-facts dt { color: var(--muted); }
.detail-facts dd { margin: 0; font-weight: 800; text-align: right; }
.detail-note { margin: 18px 0 0; padding: 15px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 11px; }

.shop-footer { display: flex; min-height: 116px; align-items: center; gap: 28px; margin-top: 30px; border-top: 1px solid rgb(255 196 50 / .22); color: var(--muted); }
.shop-logo--footer { font-size: 18px; }
.shop-logo--footer span { width: 42px; height: 42px; font-size: 12px; }
.shop-footer small { margin-left: auto; }

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgb(0 7 15 / .9);
}
.image-viewer[hidden] { display: none; }
.image-viewer-dialog { display: grid; width: min(100%, 1680px); height: min(100%, 1120px); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--cyan); border-radius: var(--radius); background: var(--navy-900); box-shadow: 0 24px 90px rgb(0 8 18 / .7); }
.image-viewer-header, .image-viewer-footer { display: flex; min-height: 72px; align-items: center; gap: 16px; padding: 12px 26px; }
.image-viewer-header { border-bottom: 1px solid rgb(143 169 191 / .2); }
.image-viewer-header > div { display: flex; align-items: center; gap: 16px; }
.image-viewer-header strong { font-size: 22px; }
.image-viewer-header span { color: var(--muted); font-size: 11px; }
.image-viewer-close {
  display: grid;
  min-width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--navy-850);
  color: var(--text);
  cursor: pointer;
}
.image-viewer-close { margin-left: auto; }
.image-viewer-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; background: #010812; }
.image-viewer-image { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; user-select: none; }
.image-viewer-footer { justify-content: space-between; border-top: 1px solid rgb(143 169 191 / .2); }
.image-viewer-price { color: var(--muted); }
.image-viewer-price strong { margin-left: 12px; color: var(--coral); font-size: 22px; }
.image-viewer-detail { display: grid; min-height: 44px; place-items: center; padding: 0 20px; border: 1px solid var(--border-warm); border-radius: 10px; color: var(--yellow); font-size: 12px; font-weight: 800; text-transform: uppercase; }

@media (hover: hover) and (pointer: fine) {
  .account-card { transition: border-color .2s ease, transform .2s ease; }
  .account-card:hover { border-color: var(--yellow); transform: translateY(-4px); }
  .account-card:hover .account-cover { transform: scale(1.035); }
  .shop-hotline:hover, .catalog-filter-group a:not([aria-current='page']):hover, .catalog-bands a:hover, .account-detail-link:hover { border-color: var(--yellow); color: var(--yellow); }
  .catalog-filter-trigger:hover, .catalog-filter-group a[aria-current='page']:hover { border-color: #fff0b3; color: #171000; }
}

@media (max-width: 1023px) {
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-intro { grid-template-columns: 1fr; }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'heading filter'; }
  .account-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .shop-home, .account-detail, .shop-footer { width: min(100% - 24px, 680px); }
  .shop-header { min-height: 54px; }
  .shop-logo { gap: 9px; font-size: 17px; }
  .shop-logo span { width: 33px; height: 33px; font-size: 10px; }
  .shop-hotline { min-height: 38px; padding: 0 10px; border-radius: 10px; font-size: 10px; }
  .shop-intro { gap: 16px; min-height: 0; margin: 13px 0 11px; padding: 13px; }
  .shop-intro h1 { font-size: 25px; }
  .shop-intro-copy > p:last-child { margin-top: 8px; font-size: 10px; line-height: 1.25; }
  .eyebrow { margin-bottom: 4px; font-size: 8px; }
  .contact-actions { gap: 6px; }
  .contact-actions a { min-height: 38px; padding: 6px; border-radius: 9px; font-size: 9px; }
  .catalog-search { margin-bottom: 14px; }
  .catalog-search input[type='search'] { min-height: 48px; padding: 0 60px 0 13px; border-width: 1px; border-radius: 12px; font-size: 10px; }
  .catalog-search button { top: 2px; right: 2px; width: 44px; height: 44px; border-radius: 9px; }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'heading filter'; gap: 9px; }
  .catalog-filter-trigger, .catalog-filter-group a, .catalog-bands a { min-height: 36px; padding: 6px 12px; border-radius: 9px; font-size: 9px; }
  .catalog-heading h2 { font-size: 17px; }
  .catalog-heading h2::before { width: 16px; height: 16px; }
  .catalog-heading h2 span { padding: 4px 7px; font-size: 8px; }
  .catalog-status { display: none; }
  .catalog-bands { margin: 8px 0 10px; padding: 0 0 5px; border-top: 0; }
  .account-grid { grid-template-columns: 1fr; gap: 14px; }
  .account-card-info { padding: 11px; }
  .account-price strong { font-size: 20px; }
  .account-rental { min-height: 15px; }
  .account-detail .shop-header { margin-bottom: 14px; }
  .detail-back { margin-bottom: 8px; }
  .detail-back a { min-height: 44px; padding: 0 8px; font-size: 9px; }
  .account-detail-grid { gap: 10px; }
  .account-image-viewer-trigger { aspect-ratio: 4 / 3; }
  .account-detail-image { height: 100%; object-fit: contain; }
  .account-image-viewer-trigger > span { bottom: 8px; padding: 5px 7px; font-size: 7px; }
  .account-detail-panel { padding: 14px; }
  .detail-status { margin-bottom: 12px; padding: 6px 8px; font-size: 8px; }
  .account-detail-panel h1 { margin-bottom: 14px; font-size: 26px; }
  .detail-price { margin-bottom: 8px; padding: 13px; }
  .detail-price strong { font-size: 31px; }
  .detail-price span, .detail-price small, .detail-facts { font-size: 9px; }
  .detail-facts div { padding: 9px 0; }
  .detail-note { margin-top: 8px; padding: 10px; font-size: 7px; }
  .shop-footer { display: none; }
  .image-viewer { padding: 10px; }
  .image-viewer-dialog { height: 100%; }
  .image-viewer-header { min-height: 52px; padding: 8px 13px; }
  .image-viewer-header strong { font-size: 16px; }
  .image-viewer-header > div { display: block; }
  .image-viewer-header span { display: block; font-size: 8px; }
  .image-viewer-footer { min-height: 60px; gap: 8px; padding: 8px 12px; }
  .image-viewer-price strong { font-size: 19px; }
  .image-viewer-detail { padding: 0 10px; font-size: 8px; }
}

/* Catalog redesign: dense game-store framing with a restrained cyan/gold system. */
:root {
  --catalog-bg: #020b17;
  --catalog-panel: #071a2b;
  --catalog-panel-2: #0a2236;
  --catalog-line: rgb(56 134 166 / .36);
  --catalog-cyan: #1fc9e6;
  --catalog-gold: #ffc12d;
  --catalog-orange: #ff644b;
}
html { scroll-behavior: smooth; }
body {
  background: radial-gradient(circle at 50% -10%, rgb(25 112 145 / .23), transparent 32rem), var(--catalog-bg);
}
.shop-home, .account-detail, .shop-footer { width: min(100% - 40px, 1360px); }
.shop-header {
  min-height: 70px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  border-bottom-color: rgb(49 125 153 / .25);
}
.shop-logo { gap: 11px; font-size: 22px; }
.shop-logo span { width: 42px; height: 42px; background: linear-gradient(145deg, #1fc9e6 0 58%, #ffc12d 59%); }
.shop-nav { display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 38px); align-self: stretch; }
.shop-nav a { position: relative; display: inline-flex; min-height: 44px; align-items: center; color: #d5e2e9; font-size: 12px; font-weight: 700; white-space: nowrap; }
.shop-nav a::after { position: absolute; right: 10%; bottom: 0; left: 10%; height: 2px; transform: scaleX(0); transform-origin: center; background: var(--catalog-cyan); content: ''; transition: transform .2s ease; }
.shop-nav a:hover, .shop-nav a[aria-current='page'] { color: var(--catalog-cyan); }
.shop-nav a:hover::after, .shop-nav a[aria-current='page']::after { transform: scaleX(1); }
.shop-header-actions { display: flex; gap: 10px; }
.shop-hotline, .shop-zalo-button, .shop-box-zalo-button, .shop-facebook-button, .shop-telegram-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.shop-hotline { padding: 0 15px; border-color: rgb(255 193 45 / .45); background: rgb(9 31 49 / .8); color: #eef8fb; }
.shop-zalo-button { padding: 0 16px; border: 1px solid rgb(90 226 239 / .55); background: linear-gradient(180deg, #22cee7, #149fc4); color: #03121c; }
.shop-box-zalo-button { padding: 0 13px; border: 1px solid rgb(255 219 116 / .72); background: linear-gradient(180deg, #ffd76d, #e7a92f); color: #211700; }
.shop-facebook-button { padding: 0 13px; border: 1px solid rgb(24 119 242 / .78); background: linear-gradient(180deg, #1877f2, #0d65d9); color: #fff; }
.shop-telegram-button { padding: 0 13px; border: 1px solid rgb(125 201 255 / .7); background: linear-gradient(180deg, #38a9f4, #1684cc); color: #fff; }
.shop-hotline svg, .shop-zalo-button svg, .shop-facebook-button svg, .shop-telegram-button svg { width: 15px; height: 15px; fill: currentColor; }
.box-zalo-icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; object-fit: contain; }
.shop-hero {
  position: relative;
  display: grid;
  min-height: 300px;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr) minmax(190px, .44fr);
  align-items: stretch;
  gap: 14px;
  margin: 18px 0 14px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid var(--catalog-line);
  border-radius: 14px;
  background: linear-gradient(110deg, #0a263b, rgb(5 22 37 / .92) 56%, #0b2631);
  box-shadow: inset 0 1px rgb(118 231 245 / .15), 0 18px 45px rgb(0 0 0 / .22);
}
.hero-copy { position: relative; z-index: 2; align-self: center; max-width: 590px; }
.hero-kicker, .catalog-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 11px; color: var(--catalog-cyan); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.hero-kicker span, .catalog-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--catalog-gold); box-shadow: 0 0 12px var(--catalog-gold); }
.shop-hero h1 { max-width: 600px; margin: 0; color: #f3f8fb; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.03; letter-spacing: -.055em; }
.shop-hero h1 em { display: block; color: var(--catalog-cyan); font-style: normal; }
.hero-visual { position: relative; z-index: 1; min-width: 0; overflow: hidden; border-radius: 11px; opacity: .9; }
.hero-visual img { display: block; width: 100%; height: 100%; min-height: 245px; object-fit: cover; object-position: center; filter: saturate(1.08) contrast(1.04); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 84%, transparent 100%); }
.hero-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, #0a263b 0%, transparent 20%, transparent 74%, #0b2631 100%), linear-gradient(0deg, rgb(3 15 26 / .35), transparent 55%); content: ''; }
.hero-visual-glow { position: absolute; z-index: 2; right: 18%; bottom: 5%; width: 100px; height: 50px; border-radius: 50%; background: rgb(31 201 230 / .65); filter: blur(30px); }
.trust-strip, .benefit-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgb(48 122 153 / .34); background: linear-gradient(180deg, rgb(8 29 47 / .95), rgb(5 20 34 / .95)); }
.trust-strip { margin: 18px 0; border-radius: 11px; }
.trust-strip > div, .benefit-strip > div { display: flex; min-height: 62px; align-items: center; gap: 12px; padding: 12px 17px; border-right: 1px solid rgb(67 139 160 / .18); }
.trust-strip > div:last-child, .benefit-strip > div:last-child { border-right: 0; }
.trust-strip svg, .benefit-strip svg { width: 29px; height: 29px; flex: 0 0 auto; color: var(--catalog-cyan); }
.trust-strip span, .benefit-strip span { display: grid; gap: 2px; }
.trust-strip b, .benefit-strip b { color: #e1edf2; font-size: 11px; }
.trust-strip small, .benefit-strip small { color: #8da8b8; font-size: 9px; }
.catalog-section { scroll-margin-top: 18px; }
.catalog-search--wide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 54px; margin: 0 0 20px; padding: 0 11px 0 17px; border: 1px solid rgb(66 132 155 / .32); border-radius: 11px; background: rgb(5 21 35 / .86); }
.catalog-search--wide > svg { width: 19px; height: 19px; color: #7fa6b7; }
.catalog-search--wide input[type='search'] { min-height: 44px; padding: 0; border: 0; outline: 0; background: transparent; color: #eaf7fb; font-size: 12px; }
.catalog-search--wide button { position: static; display: inline-flex; width: auto; min-height: 40px; align-items: center; gap: 8px; padding: 0 24px; border-radius: 9px; background: linear-gradient(180deg, #26cce4, #119dbd); color: #03131d; font-size: 11px; box-shadow: inset 0 1px rgb(255 255 255 / .3); }
.catalog-search--wide button svg { width: 15px; height: 15px; }
.catalog-search--wide .live-search-status { right: 130px; bottom: -17px; }
.catalog-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-top: 2px; }
.catalog-heading { display: block; }
.catalog-kicker { margin-bottom: 4px; color: #8daabd; font-size: 9px; letter-spacing: .12em; }
.catalog-heading h2 { gap: 8px; font-size: 22px; }
.catalog-heading h2::before { display: none; }
.catalog-heading h2 span { background: var(--catalog-cyan); }
.catalog-filter-trigger { min-height: 44px; border-color: rgb(255 193 45 / .55); background: transparent; color: var(--catalog-gold); }
.catalog-filter-menu { border-color: rgb(80 165 191 / .5); }
.catalog-bands { gap: 8px; margin: 13px 0 19px; padding: 0 0 7px; border-top: 0; }
.catalog-bands a { min-height: 38px; padding-inline: 16px; border-color: rgb(79 138 158 / .3); border-radius: 9px; background: rgb(8 27 44 / .72); }
.catalog-bands a[aria-current='page'] { border-color: var(--catalog-cyan); background: linear-gradient(180deg, #27cce5, #149fbe); color: #02151f; }
.catalog-bands a small { margin-left: 2px; opacity: .72; }
.catalog-hot-band { color: var(--catalog-gold) !important; }
.catalog-hot-band svg { width: 14px; height: 14px; }
.catalog-hot-band.is-active { border-color: #ff9d30 !important; background: linear-gradient(180deg, #ffbe42, #ec8d17) !important; color: #201500 !important; }
.catalog-highlight-band { border-style: solid !important; }
.account-grid { gap: 15px; }
.account-card { border-color: rgb(42 144 176 / .75); border-radius: 15px; background: linear-gradient(180deg, rgb(7 27 44 / .96), rgb(3 17 30 / .98)); box-shadow: 0 11px 25px rgb(0 0 0 / .14); }
.account-card.is-hot { border-color: rgb(255 162 43 / .82); }
.account-cover-link { aspect-ratio: 16 / 9; }
.account-cover-link::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(2 13 23 / .66)); content: ''; pointer-events: none; }
.account-cover-link > .account-image-hint { right: 10px; bottom: 9px; z-index: 2; padding: 5px 8px; background: rgb(2 11 23 / .85); font-size: 8px; text-transform: none; }
.account-badge { position: absolute; z-index: 3; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: 7px; color: #fff; font-size: 10px; font-weight: 900; }
.account-badge svg { width: 13px; height: 13px; }
.account-badge--hot { background: linear-gradient(180deg, #ff8632, #e34e1c); }
.account-badge--new { background: linear-gradient(180deg, #2d9af2, #2370d7); }
.account-card-info { gap: 12px; padding: 14px 15px 14px; }
.account-card-title { display: flex; align-items: start; justify-content: space-between; gap: 9px; }
.account-card-info h2 { font-size: 17px; }
.account-date { display: flex; align-items: center; gap: 5px; margin-top: 5px !important; font-size: 9px !important; }
.account-date svg { width: 12px; height: 12px; color: #7c9daf; }
.account-state { display: inline-flex; min-height: 25px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgb(39 207 139 / .42); border-radius: 8px; color: #5ce09b !important; font-size: 9px !important; white-space: nowrap; }
.account-state i { width: 7px; height: 7px; border-radius: 50%; background: #25d27e; box-shadow: 0 0 7px #25d27e; }
.account-state.is-rented { border-color: rgb(255 181 48 / .5); color: #ffc451 !important; }
.account-state.is-rented i { background: #ffc451; box-shadow: 0 0 7px #ffc451; }
.account-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid rgb(105 150 166 / .16); }
.account-prices p { margin: 0; color: #93abb9; font-size: 10px; }
.account-prices p:last-child { text-align: right; }
.account-prices strong { display: block; margin-top: 4px; color: var(--catalog-orange); font-size: 20px; }
.account-prices p:last-child strong { color: var(--catalog-gold); font-size: 15px; }
.account-detail-link { min-height: 38px; justify-self: end; padding: 0 14px; border-color: rgb(255 193 45 / .65); border-radius: 10px; background: rgb(255 193 45 / .05); color: var(--catalog-gold); font-size: 10px; }
.account-detail-link svg { width: 14px; height: 14px; }
.benefit-strip { margin: 19px 0 24px; border-radius: 11px; }
.benefit-strip {
  min-height: 104px;
  margin-inline: auto;
  border-color: rgb(54 129 160 / .5);
  border-radius: 15px;
  background: linear-gradient(180deg, rgb(7 29 47 / .98), rgb(5 20 34 / .98));
  box-shadow: inset 0 1px rgb(129 222 244 / .08), 0 12px 28px rgb(0 8 18 / .14);
}
.benefit-strip > div {
  min-height: 102px;
  gap: 17px;
  padding: 17px 25px;
  border-right-color: rgb(73 143 166 / .26);
}
.benefit-strip > div > svg { width: 54px; height: 54px; color: #28c7df; }
.benefit-strip > div:nth-child(2) > svg { color: #e7b23f; }
.benefit-strip > div:nth-child(3) > svg, .benefit-strip > div:nth-child(4) > svg { color: #28c7df; }
.benefit-strip span { gap: 4px; }
.benefit-strip b { color: #e6f1f5; font-size: 13px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }
.benefit-strip small { color: #91aebb; font-size: 11px; line-height: 1.35; }
.shop-footer { min-height: 94px; margin-top: 20px; }

@media (max-width: 1023px) {
  .shop-header { grid-template-columns: auto 1fr auto; gap: 14px; }
  .shop-nav { order: 4; grid-column: 1 / -1; min-height: 40px; overflow-x: auto; justify-content: flex-start; }
  .shop-hero { grid-template-columns: minmax(0, 1.1fr) minmax(190px, .8fr); }
  .trust-strip > div, .benefit-strip > div { padding-inline: 12px; }
  .benefit-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-strip > div:nth-child(2), .benefit-strip > div:nth-child(4) { border-right: 0; }
  .benefit-strip > div:nth-child(-n + 2) { border-bottom: 1px solid rgb(67 139 160 / .18); }
}
@media (max-width: 767px) {
  .shop-home, .account-detail, .shop-footer { width: min(100% - 24px, 680px); }
  .shop-header { min-height: 57px; grid-template-columns: auto 1fr auto; gap: 8px; padding: 7px 0 0; }
  .shop-logo { font-size: 16px; }
  .shop-logo span { width: 34px; height: 34px; }
  .shop-header-actions { gap: 5px; }
  .shop-hotline, .shop-zalo-button, .shop-box-zalo-button, .shop-facebook-button, .shop-telegram-button { width: 40px; min-height: 40px; padding: 0; }
  .shop-hotline span, .shop-zalo-button span, .shop-box-zalo-button span, .shop-facebook-button span, .shop-telegram-button span { display: none; }
  .shop-nav { gap: 4px; margin-inline: -2px; padding: 0 0 3px; }
  .shop-nav a { min-height: 38px; padding-inline: 11px; font-size: 10px; }
  .shop-hero { display: block; min-height: 0; margin: 11px 0 10px; padding: 18px 16px 15px; border-radius: 14px; }
  .hero-copy { position: relative; z-index: 3; }
  .hero-kicker { font-size: 8px; }
  .shop-hero h1 { font-size: 27px; }
  .hero-visual { position: absolute; right: -20px; bottom: 88px; width: 64%; height: 150px; opacity: .38; }
  .hero-visual img { min-height: 150px; mask-image: linear-gradient(90deg, transparent, #000 32%, #000 82%, transparent); }
  .trust-strip, .benefit-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { margin-bottom: 11px; }
  .trust-strip > div, .benefit-strip > div { min-height: 52px; gap: 7px; padding: 8px 9px; }
  .trust-strip > div:nth-child(2), .trust-strip > div:nth-child(4), .benefit-strip > div:nth-child(2), .benefit-strip > div:nth-child(4) { border-right: 0; }
  .trust-strip > div:nth-child(-n + 2), .benefit-strip > div:nth-child(-n + 2) { border-bottom: 1px solid rgb(67 139 160 / .18); }
  .trust-strip svg, .benefit-strip svg { width: 21px; height: 21px; }
  .trust-strip b, .benefit-strip b { font-size: 8px; }
  .trust-strip small, .benefit-strip small { font-size: 7px; line-height: 1.25; }
  .catalog-search--wide { min-height: 48px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; margin-bottom: 14px; padding-left: 11px; }
  .catalog-search--wide > svg { width: 16px; height: 16px; }
  .catalog-search--wide input[type='search'] { min-height: 38px; font-size: 10px; }
  .catalog-search--wide button { min-height: 38px; padding: 0 11px; font-size: 9px; }
  .catalog-search--wide button span { display: none; }
  .catalog-toolbar { gap: 7px; }
  .catalog-kicker { font-size: 7px; }
  .catalog-heading h2 { font-size: 17px; }
  .catalog-filter-trigger { min-width: 45px; min-height: 42px; padding: 0 10px; }
  .catalog-filter-trigger span, .catalog-filter-trigger small { display: none; }
  .catalog-bands { margin: 9px 0 12px; gap: 6px; }
  .catalog-bands a { min-height: 38px; padding-inline: 12px; font-size: 8px; }
  .account-grid { gap: 12px; }
  .account-card-info { padding: 11px; }
  .account-card-info h2 { font-size: 15px; }
  .account-prices strong { font-size: 18px; }
  .account-detail-link { min-height: 42px; }
  .benefit-strip { margin: 13px 0 0; }
  .benefit-strip { min-height: 0; border-radius: 12px; }
  .benefit-strip > div { min-height: 76px; gap: 10px; padding: 12px 11px; }
  .benefit-strip > div > svg { width: 31px; height: 31px; }
  .benefit-strip b { font-size: 10px; white-space: normal; }
  .benefit-strip small { font-size: 8px; line-height: 1.3; }
  .shop-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .account-cover, .account-card { transition: none !important; transform: none !important; }
}

/* Approved compact Vũ Tiến Đạt interface */
:root {
  --navy-950: #03111d;
  --navy-900: #071827;
  --navy-850: #0b2132;
  --navy-800: #10283a;
  --cyan: #25c7df;
  --yellow: #ffc43d;
  --coral: #ff6555;
  --border: #17627a;
  --border-warm: #66551f;
  --radius: 18px;
}

body { font-family: var(--font-ui); text-rendering: optimizeLegibility; }
.shop-home, .account-detail, .shop-footer { width: min(100% - 40px, 1560px); }
.shop-header {
  display: grid;
  min-height: 82px;
  grid-template-columns: auto 1fr;
  gap: 28px;
  border-bottom-color: rgb(37 199 223 / .18);
}
.shop-logo { gap: 12px; font-size: 22px; }
.shop-logo span { width: 44px; height: 44px; font-size: 13px; }
.shop-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.shop-hotline {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 1px rgb(255 255 255 / .12), 0 9px 22px rgb(0 0 0 / .14);
}
.shop-hotline { border: 1px solid rgb(92 174 197 / .28); background: linear-gradient(180deg, rgb(16 45 63 / .9), rgb(6 25 39 / .97)); color: #d8e8ee; }
.shop-hotline svg, .contact-actions svg, .catalog-sorts svg, .account-detail-link svg { width: 15px; height: 15px; flex: 0 0 auto; }

.shop-intro {
  min-height: 170px;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  gap: 50px;
  margin: 24px 0 18px;
  padding: 28px 30px;
  border-radius: 22px;
  background: linear-gradient(105deg, rgb(14 63 83 / .88), rgb(7 29 45 / .95) 64%, rgb(13 42 52 / .82));
  box-shadow: inset 0 1px rgb(142 234 245 / .12), 0 24px 60px rgb(0 0 0 / .13);
}
.eyebrow { margin-bottom: 7px; font-size: 10px; letter-spacing: .12em; }
.shop-intro h1 { max-width: 720px; color: var(--text); font-size: clamp(30px, 3.3vw, 42px); font-weight: 900; line-height: 1.05; }
.shop-intro h1 em { color: var(--cyan); }
.shop-intro-copy > p:last-child { margin-top: 10px; font-size: 12px; line-height: 1.5; }
.contact-actions { gap: 9px; }
.contact-actions a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-size: 12px;
  box-shadow: inset 0 1px rgb(255 255 255 / .2), 0 10px 22px rgb(0 0 0 / .13);
}
.contact-actions a:first-child { background: linear-gradient(180deg, #43d8e8, #18bad3); border-color: #57e0ed; }
.contact-actions a:nth-child(2) { background: linear-gradient(180deg, #438cf5, #276bd9); border-color: #5598f7; }
.contact-actions a:last-child { background: linear-gradient(180deg, #ffd76d, #ffba26); border-color: #ffe08c; }

.catalog-search { margin-bottom: 15px; }
.catalog-search input[type='search'] { min-height: 50px; padding: 0 66px 0 16px; border-width: 1px; border-radius: 13px; font-size: 12px; box-shadow: inset 0 1px 2px rgb(5 33 48 / .06); }
.catalog-search button { top: 4px; right: 4px; width: 42px; height: 42px; border: 1px solid #68e0ed; border-radius: 10px; background: linear-gradient(180deg, #43d8e8, #18bad3); box-shadow: inset 0 1px rgb(255 255 255 / .4), 0 7px 16px rgb(37 199 223 / .2); }
.live-search-status { position: absolute; right: 58px; bottom: -17px; min-height: 15px; margin: 0; color: var(--muted); font-size: 9px; }
.catalog-search.is-loading input { border-color: var(--cyan); }
[data-catalog-results] { transition: opacity .16s ease; }
.catalog-search.is-loading + [data-catalog-results] { opacity: .58; }
.catalog-toolbar { position: relative; z-index: 20; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'heading filter'; gap: 9px; }
.catalog-heading h2 { gap: 9px; font-size: 21px; font-weight: 900; letter-spacing: -.035em; }
.catalog-heading h2::before { width: 20px; height: 20px; border-radius: 4px; }
.catalog-heading h2 span { padding: 4px 8px; font-size: 9px; }
.catalog-filter { min-width: 0; }
.catalog-filter-trigger {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #ffe08c;
  border-radius: 11px;
  background: linear-gradient(180deg, #ffd76d, #ffba26);
  color: #171000;
  box-shadow: inset 0 1px rgb(255 255 255 / .4), 0 8px 18px rgb(255 184 30 / .14);
  font-size: 12px;
  font-weight: 900;
  user-select: none;
}
.catalog-filter-trigger > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.catalog-filter-trigger small { max-width: 170px; overflow: hidden; color: rgb(23 16 0 / .66); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.catalog-filter-trigger .catalog-filter-chevron { width: 13px; height: 13px; margin-left: 2px; transition: transform .2s ease; }
.catalog-filter[open] .catalog-filter-chevron { transform: rotate(180deg); }
.catalog-filter-menu {
  padding: 10px;
  border: 1px solid rgb(65 145 169 / .45);
  border-radius: 14px;
  background: linear-gradient(180deg, #0b293a, #051823);
  box-shadow: 0 22px 50px rgb(0 0 0 / .38), inset 0 1px rgb(255 255 255 / .06);
  transform-origin: top right;
}
.catalog-filter-group + .catalog-filter-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgb(104 184 204 / .16); }
.catalog-filter-group > p { margin: 0 0 7px; color: #9bbdca; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.catalog-filter-group nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.catalog-filter-group:last-child nav { grid-template-columns: 1fr; }
.catalog-filter-group a, .catalog-bands a, .catalog-pagination a {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  border-color: rgb(101 163 183 / .28);
  border-radius: 11px;
  background: linear-gradient(180deg, rgb(13 42 59 / .82), rgb(4 21 34 / .96));
  color: #d8e7ed;
  font-size: 10px;
  box-shadow: inset 0 1px rgb(255 255 255 / .05);
}
.catalog-filter-group a { justify-content: space-between; padding-inline: 11px; font-size: 11px; }
.catalog-filter-group a svg { width: 13px; height: 13px; opacity: 0; }
.catalog-filter-group a[aria-current='page'] { border-color: #ffe08c; background: linear-gradient(180deg, #ffd76d, #ffba26); color: #171000; box-shadow: inset 0 1px rgb(255 255 255 / .4), 0 8px 18px rgb(255 184 30 / .14); }
.catalog-filter-group a[aria-current='page'] svg { opacity: 1; }
.catalog-bands { gap: 7px; margin: 10px 0 14px; padding: 0 0 6px; border-top: 0; }
.catalog-bands a { min-height: 34px; padding-inline: 13px; }
.catalog-bands a[aria-current='page'] { border-color: #69e2ee; background: linear-gradient(180deg, #43d8e8, #1ebbd2); box-shadow: inset 0 1px rgb(255 255 255 / .35), 0 7px 16px rgb(37 199 223 / .14); }

.account-grid { gap: 14px; }
.account-card { border-color: rgb(37 199 223 / .74); border-radius: 15px; background: rgb(3 17 29 / .95); }
.account-cover-link { aspect-ratio: 16 / 9; }
.account-cover-link > span { right: 9px; bottom: 8px; padding: 5px 8px; border-radius: 7px; font-size: 8px; text-transform: none; }
.account-card-info { grid-template-rows: auto auto auto auto; gap: 6px 10px; padding: 11px 12px 12px; }
.account-card-info h2 { font-size: 14px; letter-spacing: -.02em; }
.account-card-info p { font-size: 9px; }
.account-state { align-self: center; color: #76a6b8 !important; }
.account-price { padding-top: 7px; border-top-color: rgb(255 196 61 / .14); }
.account-price strong { margin-left: 6px; font-size: 19px; }
.account-rental { min-height: 14px; }
.account-detail-link { min-width: 91px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border-color: rgb(255 196 61 / .55); border-radius: 9px; background: linear-gradient(180deg, rgb(255 196 61 / .09), rgb(255 196 61 / .025)); font-size: 8px; }
.account-detail-link svg { width: 11px; height: 11px; }
.catalog-empty { padding: 46px 20px; }

.account-detail-grid { grid-template-columns: minmax(0, 1.7fr) minmax(330px, .8fr); }
.account-detail-panel h1 { font-weight: 900; overflow-wrap: anywhere; }
.account-description { margin: 0 0 12px; padding: 13px 14px; border: 1px solid rgb(37 199 223 / .18); border-radius: 12px; background: rgb(37 199 223 / .045); }
.account-description h2 { margin: 0 0 6px; color: #8adce6; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-description p { margin: 0; color: #c6d8e1; font-size: 11px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.detail-back a, .image-viewer-detail, .image-viewer-close { box-shadow: inset 0 1px rgb(255 255 255 / .06); }

@media (min-width: 1024px) {
  body:has(.account-detail) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  body:has(.account-detail) > main { flex: 1; }
  .account-detail .shop-header { margin-bottom: 16px; }
  .detail-back { margin-bottom: 14px; }
  .detail-back a { min-height: 40px; font-size: 11px; }
  .account-detail-grid { align-items: start; gap: 22px; }
  .account-image-viewer-trigger { height: clamp(500px, calc(100vh - 260px), 600px); }
  .account-detail-image { max-height: none; }
  .account-image-viewer-trigger > span { bottom: 10px; padding: 6px 9px; font-size: 9px; }
  .account-detail-panel { padding: 20px; }
  .detail-status { margin-bottom: 12px; padding: 6px 10px; font-size: 10px; }
  .account-detail-panel .eyebrow { margin-bottom: 5px; font-size: 9px; }
  .account-detail-panel h1 { margin-bottom: 13px; font-size: 34px; }
  .detail-price { gap: 4px; margin-bottom: 12px; padding: 14px; border-radius: 12px; }
  .detail-price span { font-size: 11px; }
  .detail-price strong { font-size: 36px; line-height: 1.05; }
  .detail-price small { font-size: 9px; }
  .detail-facts { margin-bottom: 12px; font-size: 11px; }
  .detail-facts div { gap: 14px; padding: 9px 0; }
  .account-detail-panel .contact-actions { gap: 7px; }
  .account-detail-panel .contact-actions a { min-height: 40px; font-size: 10px; }
  .detail-note { margin-top: 10px; padding: 10px 12px; font-size: 9px; }
  body:has(.account-detail) .shop-footer { min-height: 94px; margin-top: 20px; }
}

.shop-footer { display: grid; min-height: 128px; grid-template-columns: 1fr auto; gap: 36px; }
.shop-footer > div p { margin: 7px 0 0; font-size: 10px; }
.shop-footer small { margin-left: 0; }

/* Keep the Zalo promo visible without taking space from the catalog layout. */
.floating-zalo-banner {
  position: fixed;
  z-index: 1100;
  top: auto;
  right: 12px;
  bottom: 12px;
  display: block;
  width: 200px;
  min-width: 0;
  transform: none;
  border-radius: 0;
  filter: drop-shadow(0 16px 28px rgb(0 0 0 / .42));
  transition: transform .22s ease, filter .22s ease;
}
.floating-zalo-banner img { display: block; width: 100%; height: auto; }
.floating-zalo-banner:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }

.mobile-contact-bar { display: none; }

.shop-announcement {
  width: min(460px, calc(100% - 32px));
  max-width: 460px;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(37 199 223 / .34);
  border-radius: 28px;
  background: transparent;
  color: var(--text);
  box-shadow: 0 30px 100px rgb(0 0 0 / .55);
}
.shop-announcement::backdrop {
  background: rgb(0 7 15 / .76);
  backdrop-filter: blur(4px);
}
.shop-announcement-card {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 34px 32px 26px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 15% 0%, rgb(37 199 223 / .13), transparent 45%),
    linear-gradient(155deg, #0a1d32, #050d1a 72%);
  text-align: center;
}
.shop-announcement-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgb(161 184 205 / .28);
  border-radius: 50%;
  background: rgb(4 17 31 / .72);
  color: #c4d4e2;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.shop-announcement-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.shop-announcement-close:hover { transform: rotate(90deg); background: rgb(32 54 76 / .9); color: #fff; }
.shop-announcement-kicker {
  margin: 0 0 8px;
  color: var(--cyan-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.shop-announcement-card h2 {
  margin: 0;
  color: #f7fbff;
  font-size: clamp(27px, 5vw, 34px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.shop-announcement-callout {
  margin: 14px 0 8px;
  padding: 8px 15px;
  border: 1px solid rgb(255 196 50 / .45);
  border-radius: 999px;
  background: rgb(255 196 50 / .12);
  color: #ffd866;
  font-size: 15px;
  font-weight: 900;
}
.shop-announcement-description {
  margin: 0 0 18px;
  color: #a8bbca;
  font-size: 13px;
  font-weight: 700;
}
.shop-announcement-description span { margin-inline: 5px; color: var(--cyan); }
.shop-announcement-zalo-actions {
  display: grid;
  width: min(100%, 360px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.shop-announcement-zalo,
.shop-announcement-facebook,
.shop-announcement-telegram,
.shop-announcement-dismiss {
  width: min(100%, 220px);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.shop-announcement-zalo,
.shop-announcement-facebook { min-width: 0; padding-inline: 14px; }
.shop-announcement-zalo {
  width: 100%;
  border: 1px solid #4e9bff;
  background: linear-gradient(180deg, #278bfa, #1264d6);
  color: #fff;
  box-shadow: 0 12px 24px rgb(17 108 229 / .25), inset 0 1px rgb(255 255 255 / .3);
}
.shop-announcement-zalo .zalo-brand-icon { width: 25px; height: 25px; object-fit: contain; }
.shop-announcement-facebook {
  width: 100%;
  border: 1px solid rgb(24 119 242 / .8);
  background: linear-gradient(180deg, #1877f2, #0d65d9);
  color: #fff;
  box-shadow: 0 12px 24px rgb(24 119 242 / .24), inset 0 1px rgb(255 255 255 / .28);
}
.shop-announcement-facebook svg { width: 22px; height: 22px; fill: currentColor; }
.shop-announcement-telegram {
  grid-column: 1 / -1;
  border: 1px solid rgb(125 201 255 / .7);
  background: linear-gradient(180deg, #38a9f4, #1684cc);
  color: #fff;
  box-shadow: 0 12px 24px rgb(22 132 204 / .25), inset 0 1px rgb(255 255 255 / .3);
}
.shop-announcement-telegram svg { width: 25px; height: 25px; fill: currentColor; }
.shop-announcement-dismiss {
  margin-top: 10px;
  border: 1px solid rgb(153 169 193 / .28);
  background: #536073;
  color: #f3f7fb;
  cursor: pointer;
  box-shadow: inset 0 1px rgb(255 255 255 / .14);
}
.shop-announcement-dismiss svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .shop-announcement-zalo:hover,
  .shop-announcement-facebook:hover,
  .shop-announcement-telegram:hover,
  .shop-announcement-dismiss:hover { transform: translateY(-2px); filter: brightness(1.08); }
}

@media (hover: hover) and (pointer: fine) {
  .floating-zalo-banner:hover { transform: scale(1.045); filter: drop-shadow(0 18px 34px rgb(0 0 0 / .56)); }
}

@media (hover: hover) and (pointer: fine) {
  .shop-hotline:hover, .shop-zalo-button:hover, .shop-box-zalo-button:hover, .shop-facebook-button:hover, .shop-telegram-button:hover, .contact-actions a:hover, .catalog-filter-trigger:hover, .catalog-filter-group a:hover, .catalog-bands a:hover, .account-detail-link:hover { transform: translateY(-2px); }
}

@media (max-width: 1023px) {
  .shop-header { grid-template-columns: auto 1fr; gap: 10px 18px; padding-block: 10px; }
  .shop-header-actions { grid-column: 2; grid-row: 1; }
  .shop-intro { grid-template-columns: 1fr; gap: 18px; }
  .contact-actions { max-width: 520px; }
  .account-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .shop-home, .account-detail, .shop-footer { width: min(100% - 24px, 680px); }
  .shop-header { min-height: 0; grid-template-columns: auto 1fr; gap: 8px 10px; padding: 9px 0 7px; }
  .shop-logo { gap: 8px; font-size: 16px; }
  .shop-logo span { width: 34px; height: 34px; font-size: 9px; }
  .shop-logo strong { font-size: 11px; }
  .shop-header-actions { gap: 6px; }
  .shop-hotline { min-height: 38px; padding: 0 10px; border-radius: 10px; font-size: 8px; }
  .shop-hotline { width: 38px; padding: 0; }
  .shop-hotline span { display: none; }
  .shop-intro { margin: 11px 0 10px; padding: 16px; border-radius: 15px; }
  .shop-intro h1 { font-size: 27px; }
  .shop-intro-copy > p:last-child { font-size: 9px; line-height: 1.42; }
  .contact-actions a { min-height: 40px; font-size: 8px; }
  .catalog-search { margin-bottom: 12px; }
  .catalog-search input[type='search'] { min-height: 46px; font-size: 10px; }
  .catalog-search button { top: 3px; width: 40px; height: 40px; }
  .live-search-status { right: 0; bottom: -15px; font-size: 7px; }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'heading filter'; gap: 7px; }
  .catalog-heading h2 { font-size: 16px; }
  .catalog-filter-trigger { min-width: 44px; min-height: 44px; padding: 0 11px; font-size: 10px; }
  .catalog-filter-trigger small { display: none; }
  .catalog-filter-trigger .catalog-filter-chevron { margin-left: 0; }
  .catalog-filter-menu { width: min(300px, calc(100vw - 24px)); }
  .catalog-filter-group a { min-height: 42px; font-size: 10px; }
  .catalog-bands a { min-height: 40px; font-size: 8px; }
  .catalog-bands { margin-top: 8px; }
  .account-grid { grid-template-columns: 1fr; gap: 12px; }
  .account-card-info { padding: 10px 11px 11px; }
  .account-price strong { font-size: 18px; }
  .shop-footer { display: none; }
  .image-viewer { padding: 8px; }
  .floating-zalo-banner { display: none; }

  .shop-announcement { width: calc(100% - 24px); border-radius: 24px; }
  .shop-announcement-card { padding: 26px 18px 20px; }
  .shop-announcement-close { top: 10px; right: 10px; width: 34px; height: 34px; }
  .shop-announcement-kicker { margin-bottom: 10px; font-size: 9px; }
  .shop-announcement-card h2 { font-size: 28px; }
  .shop-announcement-callout { margin-top: 13px; font-size: 13px; }
  .shop-announcement-description { margin-bottom: 16px; font-size: 11px; }
  .shop-announcement-zalo, .shop-announcement-facebook, .shop-announcement-telegram, .shop-announcement-dismiss { min-height: 48px; font-size: 13px; }

  .shop-hotline, .contact-actions a,
  .catalog-filter-trigger, .catalog-filter-group a, .catalog-bands a,
  .account-detail-link, .catalog-pagination a { min-height: 44px; }
  .shop-hotline { width: 44px; }
  .catalog-search button { width: 44px; height: 44px; }
}

@media (max-width: 380px) {
  .shop-announcement-zalo-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
  .mobile-contact-bar {
    position: fixed;
    z-index: 1100;
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: calc(50% + 2px);
    display: grid;
    width: min(calc(100% - 20px), 410px);
    height: 70px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2px;
    padding: 5px;
    transform: translateX(-50%);
    border: 1px solid rgb(130 177 208 / .24);
    border-radius: 24px;
    background: rgb(3 14 25 / .92);
    box-shadow: 0 14px 38px rgb(0 0 0 / .5), inset 0 1px rgb(255 255 255 / .08);
    backdrop-filter: blur(16px);
  }
  .mobile-contact-track {
    display: flex;
    min-width: 0;
    height: 60px;
    gap: 4px;
    overflow-x: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-contact-track::-webkit-scrollbar { display: none; }
  .mobile-contact-item {
    display: grid;
    min-width: 0;
    height: 58px;
    flex: 1 1 0;
    grid-template-rows: 38px auto;
    place-items: center;
    padding: 3px 4px 4px;
    border-radius: 16px;
    color: #dcecf7;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    scroll-snap-align: start;
    touch-action: manipulation;
    transition: color .2s ease, transform .2s ease;
  }
  .mobile-contact-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: transparent;
    color: #dcecf7;
  }
  .mobile-contact-icon svg { width: 26px; height: 26px; fill: currentColor; }
  .mobile-contact-icon img { display: block; width: 27px; height: 27px; object-fit: contain; }
  .mobile-contact-item--home .mobile-contact-icon { color: #2bd7e7; }
  .mobile-contact-item--phone .mobile-contact-icon { color: #34d058; }
  .mobile-contact-item--telegram .mobile-contact-icon { color: #29a9ea; }
  .mobile-contact-arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 1px solid rgb(150 188 214 / .2);
    border-radius: 50%;
    background: rgb(11 31 48 / .94);
    color: #e7f5ff;
    cursor: pointer;
    touch-action: manipulation;
    transform: translateY(-50%);
  }
  .mobile-contact-arrow--previous { left: 5px; }
  .mobile-contact-arrow--next { right: 5px; }
  .mobile-contact-arrow svg { width: 14px; height: 14px; }
  .mobile-contact-arrow:disabled { cursor: default; opacity: .28; }
  .mobile-contact-item:focus-visible,
  .mobile-contact-arrow:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
}

@media (max-width: 767px) {
  .mobile-contact-bar.is-scrollable { grid-template-columns: minmax(0, 1fr); }
  .mobile-contact-bar.is-scrollable .mobile-contact-track {
    display: grid;
    grid-auto-columns: calc((100% - 16px) / 5);
    grid-auto-flow: column;
    overflow-x: auto;
  }
  .mobile-contact-bar.is-scrollable .mobile-contact-item {
    width: auto;
    min-width: 0;
    padding-inline: 2px;
    font-size: clamp(8px, 2.5vw, 10px);
  }
  .mobile-contact-bar.has-previous .mobile-contact-arrow--previous,
  .mobile-contact-bar.has-next .mobile-contact-arrow--next { display: grid; }
}

@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .mobile-contact-item:hover { color: #fff; transform: translateY(-2px); }
  .mobile-contact-arrow:not(:disabled):hover { background: #173d5b; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-contact-track { scroll-behavior: auto; }
}

/* Full-width brand banner, matching the bacsipubgshop layout. */
.shop-hero {
  display: block;
  min-height: 0;
  margin: 18px 0 14px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}
.hero-banner-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1983 / 793;
  overflow: hidden;
}
.hero-banner-artboard {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 767px) {
  .shop-hero { margin: 11px 0 10px; border: 0; border-radius: 12px; background: #050716; }
  .shop-nav { display: none; }
  .hero-banner-frame { aspect-ratio: 1983 / 793; }
  .hero-banner-image { display: block; object-fit: contain; }
}

/* The supplied VTD artwork is portrait-oriented, so keep the full image visible. */
.shop-home--vtd .shop-hero { min-height: 430px; }
.shop-home--vtd .hero-visual { inset: 0 0 0 52%; background: #020d19; }
.shop-home--vtd .hero-scene { min-height: 430px; }
.shop-home--vtd .hero-visual .hero-banner-image {
  object-fit: contain;
  object-position: center;
  filter: saturate(1.02) contrast(1.02) brightness(.92);
}
.shop-home--vtd .hero-banner-shade {
  background: linear-gradient(90deg, #020d19 0%, rgb(2 13 25 / .94) 12%, rgb(2 13 25 / .35) 30%, transparent 48%);
}

@media (max-width: 1023px) {
  .shop-home--vtd .shop-hero { min-height: 380px; }
  .shop-home--vtd .hero-visual { left: 48%; }
  .shop-home--vtd .hero-scene { min-height: 380px; }
}

@media (max-width: 767px) {
  .shop-home--vtd .shop-hero {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 0;
  }
  .shop-home--vtd .hero-visual {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 1967 / 799;
    opacity: 1;
  }
  .shop-home--vtd .hero-scene { min-height: 0; aspect-ratio: 1967 / 799; }
  .shop-home--vtd .hero-visual .hero-banner-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: none;
  }
  .shop-home--vtd .hero-banner-shade { display: none; }
  .shop-home--vtd .hero-copy { padding: 20px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta-row a { transition: none; }
  .hero-cta-row a:hover { transform: none; }
  .hero-cta-row a::after { animation: none; }
}

/* The VTD artwork is a complete wide banner, so it fills the hero without extra controls. */
.shop-home--vtd .shop-hero {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.shop-home--vtd .hero-visual {
  position: relative;
  inset: auto;
  order: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1967 / 799;
  opacity: 1;
  border-radius: 0;
}
.shop-home--vtd .hero-scene {
  min-height: 0;
  height: 100%;
  aspect-ratio: 1967 / 799;
}
.shop-home--vtd .hero-visual .hero-banner-image {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--vtd-bg);
  filter: none;
}
.shop-home--vtd .hero-banner-shade { display: none; }

@media (max-width: 767px) {
  .shop-home--vtd .hero-visual { aspect-ratio: 1967 / 799; }
}

/* Keep every catalog tile the same size when a label wraps differently. */
.account-card-info { min-height: 158px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .account-card { height: 376px; }
}
@media (max-width: 767px) {
  .account-card { height: 368px; }
  .account-card-info { height: 158px; min-height: 158px; }
}

@media (max-width: 767px) {
  .catalog-heading .catalog-kicker { margin-bottom: 8px; }
}

.zalo-inline-icon {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 .18em;
  color: #25c7df;
  vertical-align: -.15em;
}
.zalo-brand-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}
.hero-contact .zalo-brand-icon { width: 23px; height: 23px; }

/* Header alignment matches the approved single-row desktop reference. */
@media (min-width: 1024px) {
  .shop-header {
    display: grid;
    min-height: 72px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 3vw, 52px);
    padding-inline: 0;
  }
  .shop-nav {
    min-width: 0;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.5vw, 42px);
    overflow: visible;
  }
  .shop-nav a { min-height: 72px; font-size: 13px; }
  .shop-header-actions {
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  .shop-hotline, .shop-zalo-button, .shop-box-zalo-button, .shop-facebook-button { min-height: 42px; }
  .shop-hotline { padding-inline: 15px; }
  .shop-zalo-button { padding-inline: 16px; }
  .shop-box-zalo-button { padding-inline: 13px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .shop-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-block: 6px;
  }
  .shop-nav {
    order: initial;
    grid-column: auto;
    min-height: 44px;
    overflow-x: auto;
    justify-content: center;
  }
  .shop-nav a { min-height: 44px; padding-inline: 6px; font-size: 10px; }
  .shop-header-actions { grid-column: 3; grid-row: 1; }
}

/* Catalog controls mirror the compact two-row reference layout. */
.catalog-filter-bar {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 166px 166px 142px 178px;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid rgb(66 132 155 / .32);
  border-radius: 11px;
  background: rgb(5 21 35 / .86);
}
.catalog-filter-bar:has(.catalog-filter[open]) { z-index: 1201; }
.catalog-search-field {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid rgb(66 132 155 / .28);
  border-radius: 9px;
  background: rgb(3 17 30 / .62);
}
.catalog-search-field > svg { width: 18px; height: 18px; flex: 0 0 auto; color: #7fa6b7; }
.catalog-search-field input[type='search'] { width: 100%; min-height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: #eaf7fb; font-size: 12px; }
.catalog-search-field input::placeholder { color: #7892a4; opacity: 1; }
.catalog-inline-dropdown, .catalog-sort-dropdown { position: relative; min-width: 0; }
.catalog-inline-dropdown > summary, .catalog-sort-dropdown > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgb(80 155 178 / .3);
  border-radius: 9px;
  background: rgb(6 28 45 / .86);
  color: #c8dce4;
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}
.catalog-inline-dropdown > summary::-webkit-details-marker, .catalog-sort-dropdown > summary::-webkit-details-marker { display: none; }
.catalog-inline-dropdown > summary svg, .catalog-sort-dropdown > summary svg { width: 15px; height: 15px; flex: 0 0 auto; color: #8eacba; transition: transform .2s ease; }
.catalog-inline-dropdown[open] > summary svg, .catalog-sort-dropdown[open] > summary svg { transform: rotate(180deg); }
.catalog-inline-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  display: grid;
  gap: 5px;
  min-width: 190px;
  padding: 8px;
  border: 1px solid rgb(80 165 191 / .5);
  border-radius: 11px;
  background: linear-gradient(180deg, #0b293a, #051823);
  box-shadow: 0 18px 38px rgb(0 0 0 / .35);
}
.catalog-inline-menu a { display: flex; min-height: 34px; align-items: center; padding: 0 10px; border-radius: 7px; color: #d6e7ed; font-size: 10px; }
.catalog-inline-menu a:hover, .catalog-inline-menu a[aria-current='page'] { background: linear-gradient(180deg, #2acde4, #159fbd); color: #03141f; }
.catalog-search-submit {
  position: static;
  display: inline-flex;
  width: 100%;
  height: auto;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18px;
  border: 1px solid #54d9e8;
  border-radius: 9px;
  background: linear-gradient(180deg, #29cce3, #129fbd);
  color: #03131d;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px rgb(255 255 255 / .3);
}
.catalog-filter-bar > button.catalog-search-submit { position: static; top: auto; right: auto; display: inline-flex; width: 100%; height: 42px; min-height: 42px; max-height: 42px; align-self: center; font-size: 11px; }
.catalog-search-submit svg { width: 15px; height: 15px; }
.catalog-filter--inline { min-width: 0; grid-area: auto; justify-self: stretch; }
.catalog-filter--inline .catalog-filter-trigger { width: 100%; min-height: 42px; justify-content: center; padding: 0 12px; border-color: #ffe08c; border-radius: 999px; background: linear-gradient(180deg, #ffd76d, #ffba26); color: #171000; font-size: 11px; box-shadow: inset 0 1px rgb(255 255 255 / .4), 0 8px 18px rgb(255 184 30 / .14); }
.catalog-filter--inline .catalog-filter-menu { top: calc(100% + 7px); }
.catalog-price-menu {
  width: min(580px, calc(100vw - 24px));
  zoom: .9;
  padding: 12px;
  border-color: rgb(31 201 230 / .42);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(145deg, #081d31 0%, #041321 62%, #061a2b 100%);
  box-shadow: 0 24px 70px rgb(0 0 0 / .48), inset 0 1px rgb(129 222 244 / .1);
}
.catalog-price-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.catalog-price-heading { display: flex; min-width: 0; align-items: center; gap: 10px; }
.catalog-price-heading-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(255 193 45 / .48); border-radius: 11px; background: linear-gradient(145deg, rgb(31 201 230 / .2), rgb(255 193 45 / .16)); color: var(--catalog-cyan); box-shadow: inset 0 1px rgb(255 255 255 / .08), 0 12px 24px rgb(0 0 0 / .18); }
.catalog-price-heading-icon svg { width: 22px; height: 22px; }
.catalog-price-heading h2 { margin: 0; color: #f2f7fb; font-size: clamp(15px, 1.55vw, 19px); font-weight: 900; letter-spacing: .02em; }
.catalog-price-heading p { margin: 3px 0 0; color: #9bb6c8; font-size: 10px; line-height: 1.4; }
.catalog-price-close { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(31 201 230 / .3); border-radius: 9px; background: rgb(4 19 33 / .8); color: #b9d7e2; cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease; }
.catalog-filter-bar .catalog-price-close { position: static; inset: auto; width: 34px; height: 34px; }
.catalog-price-close svg { width: 16px; height: 16px; }
.catalog-price-close:hover { transform: translateY(-1px); border-color: var(--catalog-cyan); background: rgb(31 201 230 / .12); color: #fff; }
.catalog-price-panel { padding: 10px; border: 1px solid rgb(56 134 166 / .26); border-radius: 11px; background: linear-gradient(145deg, rgb(9 31 50 / .82), rgb(5 21 36 / .76)); box-shadow: inset 0 1px rgb(255 255 255 / .03); }
.catalog-price-panel + .catalog-price-panel { margin-top: 8px; }
.catalog-price-panel h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: #eaf6fa; font-size: 12px; font-weight: 900; letter-spacing: .03em; }
.catalog-price-panel h3 > svg { width: 17px; height: 17px; color: var(--catalog-cyan); }
.catalog-price-fields { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 10px; align-items: end; }
.catalog-price-field { display: grid; gap: 5px; min-width: 0; color: #f1f7fa; font-size: 11px; font-weight: 900; }
.catalog-price-label { padding-inline: 2px; }
.catalog-price-field--min .catalog-price-label { color: var(--catalog-cyan); }
.catalog-price-field--max .catalog-price-label { color: var(--catalog-gold); }
.catalog-price-input { display: flex; min-height: 44px; align-items: center; gap: 6px; padding: 0 7px; border: 1px solid rgb(31 201 230 / .8); border-radius: 10px; background: rgb(2 12 24 / .72); color: #8fbdcc; box-shadow: inset 0 1px rgb(255 255 255 / .04); transition: border-color .2s ease, box-shadow .2s ease; }
.catalog-price-field--max .catalog-price-input { border-color: rgb(255 193 45 / .82); }
.catalog-price-input:focus-within { border-color: var(--catalog-cyan); box-shadow: 0 0 0 3px rgb(31 201 230 / .14), inset 0 1px rgb(255 255 255 / .04); }
.catalog-price-field--max .catalog-price-input:focus-within { border-color: var(--catalog-gold); box-shadow: 0 0 0 3px rgb(255 193 45 / .13), inset 0 1px rgb(255 255 255 / .04); }
.catalog-price-input input { width: 100%; min-width: 0; min-height: 36px; padding: 0; border: 0; outline: 0; background: transparent; color: #f4fbff; font-size: 16px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.catalog-price-input input::placeholder { color: #607e8e; opacity: 1; }
.catalog-price-step { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(31 201 230 / .13); border-radius: 8px; background: rgb(31 201 230 / .1); color: var(--catalog-cyan); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.catalog-filter-bar .catalog-price-step { position: static; inset: auto; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; padding: 0; line-height: 0; }
.catalog-price-field--max .catalog-price-step { border-color: rgb(255 193 45 / .14); background: rgb(255 193 45 / .1); color: var(--catalog-gold); }
.catalog-price-step svg { display: block; width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; }
.catalog-price-step:hover { transform: translateY(-1px); background: rgb(31 201 230 / .22); color: #fff; }
.catalog-price-field--max .catalog-price-step:hover { background: rgb(255 193 45 / .22); color: #fff7cf; }
.catalog-price-field small { color: #8ba8b8; font-size: 10px; font-weight: 700; text-align: center; }
.catalog-price-arrow { display: grid; width: 36px; height: 36px; align-self: center; place-items: center; border: 1px solid rgb(31 201 230 / .45); border-radius: 50%; background: rgb(31 201 230 / .08); color: var(--catalog-cyan); }
.catalog-price-arrow svg { width: 19px; height: 19px; fill: currentColor; }
.catalog-price-spark { color: var(--catalog-gold); font-size: 21px; line-height: 1; }
.catalog-price-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.catalog-price-presets a { position: relative; display: flex; min-height: 46px; align-items: center; justify-content: center; padding: 7px 16px 7px 7px; border: 1px solid rgb(56 134 166 / .3); border-radius: 9px; background: rgb(4 20 34 / .68); color: #d7e9ef; font-size: 10px; font-weight: 800; text-align: center; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.catalog-price-presets a:hover { transform: translateY(-2px); border-color: var(--catalog-cyan); background: rgb(31 201 230 / .11); color: #fff; }
.catalog-price-presets a[aria-current='page'] { border-color: var(--catalog-cyan); background: linear-gradient(145deg, #18bad8, #1575c9 68%, #0e4b96); color: #f7feff; box-shadow: 0 10px 22px rgb(31 201 230 / .18), inset 0 1px rgb(255 255 255 / .25); }
.catalog-price-presets a svg { position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; opacity: 0; }
.catalog-price-presets a[aria-current='page'] svg { opacity: 1; }
.catalog-price-summary { display: flex; min-height: 42px; align-items: center; gap: 8px; margin: 7px 0 0; padding: 0 10px; border: 1px solid rgb(56 134 166 / .24); border-radius: 9px; background: rgb(5 22 37 / .7); color: #a9c1cd; font-size: 10px; line-height: 1.45; }
.catalog-price-summary > svg { width: 18px; height: 18px; flex: 0 0 auto; fill: var(--catalog-cyan); }
.catalog-price-summary strong { color: #eaf8fb; font-weight: 900; }
.catalog-price-summary strong:last-child { color: var(--catalog-gold); }
.catalog-price-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.catalog-price-actions button, .catalog-price-actions a { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; font-size: 10px; font-weight: 900; letter-spacing: .02em; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.catalog-price-actions button svg, .catalog-price-actions a svg { width: 16px; height: 16px; }
.catalog-price-actions button { position: static; width: 100%; height: auto; border: 1px solid #53dff0; background: linear-gradient(145deg, #27cee5, #138fb9); color: #02151f; cursor: pointer; box-shadow: inset 0 1px rgb(255 255 255 / .35), 0 10px 22px rgb(31 201 230 / .15); }
.catalog-price-actions a { border: 1px solid rgb(88 125 144 / .45); background: rgb(3 16 29 / .52); color: #d8e7ed; }
.catalog-price-actions button:hover, .catalog-price-actions a:hover { transform: translateY(-2px); }
.catalog-price-actions a:hover { border-color: var(--catalog-gold); color: var(--catalog-gold); background: rgb(255 193 45 / .08); }
.catalog-filter-bar .live-search-status { right: 12px; bottom: -18px; }
.catalog-bands-row { position: relative; z-index: 40; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.catalog-bands-row .catalog-bands {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 3px 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  border: 0;
}
.catalog-bands-row .catalog-bands a { flex: 0 0 auto; white-space: nowrap; }
.catalog-sort-dropdown { flex: 0 0 190px; }
.catalog-sort-dropdown > summary { min-height: 38px; background: rgb(7 28 45 / .84); font-size: 10px; }
.catalog-sort-dropdown > summary b { color: #e6f3f7; }
.catalog-sort-dropdown .catalog-inline-menu { left: auto; width: 190px; }
.catalog-toolbar { margin-top: 4px; }
.trust-strip > div > svg { fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (max-width: 1100px) {
  .catalog-filter-bar { grid-template-columns: minmax(220px, 1fr) repeat(2, 145px); gap: 7px; }
  .catalog-filter-bar > .catalog-inline-dropdown:nth-of-type(2) .catalog-inline-menu { right: 0; left: auto; }
  .catalog-sort-dropdown { flex-basis: 165px; }
}
@media (max-width: 767px) {
  .catalog-filter-bar { grid-template-columns: 1fr 1fr; gap: 7px; min-height: 0; padding: 8px; }
  .catalog-search-field { grid-column: 1 / -1; }
  .catalog-search-submit { min-height: 40px; }
  .catalog-filter--inline .catalog-filter-trigger { min-height: 40px; }
  .catalog-filter--inline .catalog-filter-trigger span { display: inline; }
  .catalog-price-menu { width: min(420px, calc(100vw - 32px)); zoom: 1; padding: 14px; border-radius: 15px; }
  .catalog-price-header { gap: 10px; margin-bottom: 13px; }
  .catalog-price-heading { gap: 10px; align-items: flex-start; }
  .catalog-price-heading-icon { width: 46px; height: 46px; border-radius: 12px; }
  .catalog-price-heading-icon svg { width: 24px; height: 24px; }
  .catalog-price-heading h2 { max-width: 205px; font-size: 16px; line-height: 1.2; }
  .catalog-price-heading p { max-width: 220px; margin-top: 4px; font-size: 10px; }
  .catalog-price-close { width: 38px; height: 38px; border-radius: 10px; }
  .catalog-filter-bar .catalog-price-close { width: 38px; height: 38px; }
  .catalog-price-close svg { width: 19px; height: 19px; }
  .catalog-price-panel { padding: 13px; border-radius: 13px; }
  .catalog-price-panel h3 { margin-bottom: 12px; font-size: 11px; }
  .catalog-price-panel h3 > svg { width: 18px; height: 18px; }
  .catalog-price-fields { grid-template-columns: 1fr; gap: 8px; }
  .catalog-price-field { gap: 5px; font-size: 10px; }
  .catalog-price-input { min-height: 48px; padding-inline: 8px; border-radius: 11px; }
  .catalog-price-input input { min-height: 40px; font-size: 17px; }
  .catalog-price-step { width: 30px; height: 30px; border-radius: 8px; }
  .catalog-filter-bar .catalog-price-step { width: 30px; height: 30px; }
  .catalog-price-step svg { width: 16px; height: 16px; }
  .catalog-price-field small { font-size: 9px; }
  .catalog-price-arrow { width: 34px; height: 34px; margin: 0 auto; transform: rotate(90deg); }
  .catalog-price-arrow svg { width: 18px; height: 18px; }
  .catalog-price-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .catalog-price-presets a { min-height: 49px; padding: 8px 15px 8px 8px; border-radius: 9px; font-size: 9px; }
  .catalog-price-presets a svg { right: 5px; bottom: 5px; width: 13px; height: 13px; }
  .catalog-price-summary { min-height: 50px; gap: 8px; margin-top: 9px; padding: 0 11px; font-size: 10px; }
  .catalog-price-summary > svg { width: 18px; height: 18px; }
  .catalog-price-actions { grid-template-columns: 1fr; gap: 8px; margin-top: 9px; }
  .catalog-price-actions button, .catalog-price-actions a { min-height: 45px; border-radius: 10px; font-size: 11px; }
  .catalog-price-actions button svg, .catalog-price-actions a svg { width: 16px; height: 16px; }
  .catalog-bands-row { display: block; }
  .catalog-sort-dropdown { width: 100%; margin-top: 8px; }
  .catalog-sort-dropdown .catalog-inline-menu { width: 100%; }
  .catalog-bands-row .catalog-bands {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding-block: 3px 6px;
    margin-block: 0;
  }
  .catalog-bands-row .catalog-bands a {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    padding-inline: 6px;
    white-space: normal;
    text-align: center;
  }
}

/* Compact catalog cards match the approved product reference. */
.account-card {
  height: auto;
  min-height: 0;
  grid-template-rows: auto 1fr;
}
.account-cover-link {
  height: clamp(230px, 16vw, 280px);
  aspect-ratio: auto;
}
.account-image-hint { display: none !important; }
.account-cover-link > .account-badge {
  right: auto;
  bottom: auto;
  height: auto;
  padding: 0 10px;
  text-transform: uppercase;
}
.account-cover-link > .account-badge--hot { background: linear-gradient(180deg, #ff8632, #e34e1c); }
.account-cover-link > .account-badge--new { background: linear-gradient(180deg, #2d9af2, #2370d7); }
.account-cover-link > .account-status-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgb(37 210 126 / .5);
  border-radius: 8px;
  background: rgb(3 35 31 / .88);
  color: #71efaa;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.account-cover-link > .account-status-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d27e;
  box-shadow: 0 0 7px #25d27e;
}
.account-cover-link > .account-status-badge.is-rented {
  border-color: rgb(255 181 48 / .52);
  background: rgb(54 34 3 / .88);
  color: #ffc451;
}
.account-cover-link > .account-status-badge.is-rented i {
  background: #ffc451;
  box-shadow: 0 0 7px #ffc451;
}
.account-cover-link > .account-badge--rented {
  border: 1px solid rgb(255 213 96 / .62);
  background: linear-gradient(180deg, #ffc944, #df9713);
  color: #231900;
}
.account-card-info {
  min-height: 0;
  height: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  gap: 0;
  padding: 12px 15px 14px;
}
.account-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.account-card-title h2 {
  min-width: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.account-card-title h2 a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.account-highlights { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.account-highlights li { display: inline-flex; min-height: 24px; align-items: center; padding: 4px 8px; border: 1px solid rgb(240 185 35 / .38); border-radius: 999px; background: rgb(240 185 35 / .1); color: #f5d776; font-size: 9px; font-weight: 800; line-height: 1; }
.account-highlight-section { margin: 0 0 12px; padding: 13px 14px; border: 1px solid rgb(37 199 223 / .2); border-radius: 12px; background: rgb(37 199 223 / .05); }
.account-highlight-section h2 { margin: 0; color: #8adce6; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-highlight-section .account-highlights { margin-top: 10px; }
.account-favorite {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: #a7c0cc;
}
.account-favorite svg { width: 22px; height: 22px; }
.account-date {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px !important;
  color: #93afbd !important;
  font-size: 10px !important;
}
.account-date svg { width: 13px; height: 13px; color: #6d97aa; }
.account-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgb(105 150 166 / .2);
}
.account-prices p {
  margin: 0;
  color: #92a9b7;
  font-size: 10px !important;
}
.account-prices p:last-child { text-align: right; }
.account-prices strong {
  display: block;
  margin-top: 4px;
  color: #ff5d4f !important;
  font-size: 20px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.account-prices p:last-child strong { color: var(--catalog-gold) !important; font-size: 16px; }
.account-detail-link {
  grid-column: auto;
  grid-row: auto;
  justify-self: end;
  min-width: 112px;
  min-height: 38px;
  margin-top: 12px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 10px;
}

@media (max-width: 767px) {
  .account-cover-link { height: auto; aspect-ratio: auto; }
  .account-cover { height: auto; object-fit: contain; }
  .account-card-info { padding: 11px 12px 13px; }
  .account-card-title h2 { font-size: 15px; }
  .account-highlights { gap: 5px; margin-top: 7px; }
  .account-highlights li { min-height: 22px; padding: 4px 7px; font-size: 8px; }
  .account-cover-link > .account-status-badge, .account-badge { top: 8px; min-height: 24px; padding-inline: 8px; font-size: 9px; }
  .account-cover-link > .account-status-badge { right: 8px; }
  .account-prices strong { font-size: 18px; }
  .account-prices p:last-child strong { font-size: 14px; }
  .account-detail-link { min-width: 104px; min-height: 36px; margin-top: 10px; font-size: 9px; }
}

.catalog-pagination { align-items: center; flex-wrap: wrap; }
.catalog-pagination .catalog-pagination-page {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-color: rgb(91 171 194 / .28);
  border-radius: 10px;
  background: rgb(5 25 39 / .78);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px rgb(255 255 255 / .04);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.catalog-pagination .catalog-pagination-page:hover { border-color: rgb(40 211 230 / .7); color: #fff; transform: translateY(-1px); }
.catalog-pagination .catalog-pagination-page[aria-current='page'] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #00131d;
  box-shadow: 0 7px 18px rgb(40 211 230 / .2);
}
.catalog-pagination-ellipsis {
  width: 18px;
  color: #6f9cac;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  user-select: none;
}
.catalog-pagination .catalog-pagination-control {
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: rgb(91 171 194 / .36);
  border-radius: 11px;
  background: linear-gradient(180deg, rgb(13 42 59 / .9), rgb(4 21 34 / .98));
  color: #bce8ef;
  box-shadow: inset 0 1px rgb(255 255 255 / .06);
}
.catalog-pagination .catalog-pagination-control svg { width: 17px; height: 17px; transition: transform .2s ease; }
.catalog-pagination .catalog-pagination-control--previous:hover svg { transform: translateX(-2px); }
.catalog-pagination .catalog-pagination-control--next:hover svg { transform: translateX(2px); }
.catalog-pagination .catalog-pagination-control.is-disabled { opacity: .34; cursor: not-allowed; }
.catalog-pagination .catalog-pagination-control:focus-visible { outline: 3px solid rgb(40 211 230 / .55); outline-offset: 3px; }
@media (max-width: 767px) {
  .catalog-pagination { gap: 5px; margin: 22px 0; }
  .catalog-pagination .catalog-pagination-page.is-mobile-extra { display: none; }
  .catalog-pagination .catalog-pagination-page { width: 44px; min-width: 44px; min-height: 44px; }
  .catalog-pagination-ellipsis { width: 14px; }
  .catalog-pagination .catalog-pagination-control { width: 44px; min-width: 44px; min-height: 44px; }
  .catalog-pagination .catalog-pagination-control svg { width: 16px; height: 16px; }
}

/* Keep the HOT badge clearly red while restoring the original page palette. */
body:has(.shop-home) .account-badge--hot { background: linear-gradient(180deg, #ff6b5f, #d83a2f); color: #fff; }

/* Installment calculator stays compact until the visitor opens it. */
.installment-calculator {
  margin: 0 0 20px;
  overflow: visible;
  border: 1px solid #c9e2e7;
  border-radius: 14px;
  background: #f7fbfc;
  box-shadow: 0 12px 26px rgb(35 83 98 / .08);
  scroll-margin-top: 18px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.installment-calculator--wide { grid-column: 1 / -1; }
.installment-calculator.is-expanded { border-color: #8bcfdc; box-shadow: 0 18px 34px rgb(35 83 98 / .13); }
.installment-toggle {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 15px;
  border: 0;
  background: transparent;
  color: #123b4b;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
  transition: background-color .22s ease, color .22s ease;
}
.installment-toggle:hover { background: linear-gradient(90deg, #edf8fa, #f7fbfc); color: #087e97; }
.installment-toggle:focus-visible,
.installment-calculate:focus-visible,
.installment-zalo:focus-visible,
.installment-message button:focus-visible { outline: 3px solid #f0b923; outline-offset: 2px; }
.installment-toggle-label { display: inline-flex; align-items: center; gap: 9px; }
.installment-toggle-label svg { width: 25px; height: 25px; color: #0a9db6; }
.installment-toggle-chevron { width: 19px; height: 19px; color: #557984; transition: transform .2s ease; }
.installment-panel { padding: 25px 24px 22px; }
.installment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.installment-field { display: grid; align-content: start; gap: 6px; min-width: 0; color: #244653; font-size: 12px; font-weight: 800; }
.installment-field > span { display: flex; min-height: 17px; align-items: flex-start; line-height: 1.35; }
.installment-field input,
.installment-field select,
.installment-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #c8dfe5;
  border-radius: 10px;
  background: #fff;
  color: #163642;
  font: inherit;
  font-weight: 700;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.installment-field input,
.installment-field select { height: 44px; }
.installment-field select {
  appearance: none;
  padding-right: 36px;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, #087e97 50%), linear-gradient(135deg, #087e97 50%, transparent 50%);
  background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  cursor: pointer;
}
.installment-select { position: relative; width: 100%; }
.installment-field:has(.installment-select.is-open) { position: relative; z-index: 70; }
.installment-select.is-open { z-index: 80; }
.installment-select-native { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.installment-select-trigger {
  position: relative;
  display: flex;
  width: 100%;
  height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 42px 10px 14px;
  border: 1px solid #b9dce4;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f4fbfc);
  color: #163642;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 4px 12px rgb(33 79 94 / .06);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}
.installment-select-trigger::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #087e97;
  border-bottom: 2px solid #087e97;
  content: '';
  transform: translateY(-65%) rotate(45deg);
  transition: transform .2s ease;
}
.installment-select.is-open .installment-select-trigger { border-color: #0aa3bb; background: #fff; box-shadow: 0 0 0 3px rgb(10 157 182 / .14), 0 8px 18px rgb(33 79 94 / .1); }
.installment-select.is-open .installment-select-trigger::after { transform: translateY(-30%) rotate(225deg); }
.installment-select-trigger:focus-visible { border-color: #0aa3bb; outline: 0; box-shadow: 0 0 0 3px rgb(10 157 182 / .18); }
.installment-select-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  gap: 5px;
  max-height: 240px;
  overflow: auto;
  padding: 7px;
  border: 1px solid #b9dce4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 30px rgb(33 79 94 / .18), 0 2px 5px rgb(33 79 94 / .08);
  transform-origin: top center;
}
.installment-select-menu[hidden] { display: none; }
.installment-select-option {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #31515f;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.installment-select-option:hover,
.installment-select-option:focus-visible,
.installment-select-option.is-selected { background: #e8f8fa; color: #087e97; outline: 0; }
.installment-select-option.is-selected { font-weight: 900; }
.installment-field textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.installment-field input:focus-visible,
.installment-field select:focus-visible,
.installment-field textarea:focus-visible { border-color: #0a9db6; outline: 0; box-shadow: 0 0 0 3px rgb(10 157 182 / .18); }
.installment-field input[readonly] { background: #edf5f7; color: #38616d; }
.installment-field small { min-height: 15px; color: #718993; font-size: 10px; font-weight: 600; line-height: 1.35; }
.installment-field--request { margin-top: 12px; }
.installment-calculate,
.installment-zalo,
.installment-message button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #0aa3bb;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.installment-calculate { margin-top: 14px; background: #0aa3bb; color: #fff; }
.installment-calculate:hover { background: #078ba2; }
.installment-calculate svg { width: 17px; height: 17px; }
.installment-error { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #efb4b4; border-radius: 9px; background: #fff1f1; color: #a32b2b; font-size: 11px; font-weight: 800; line-height: 1.4; }
.installment-result { margin-top: 16px; padding-top: 15px; border-top: 1px dashed #c5dce1; scroll-margin-top: 24px; }
.installment-result h2 { margin: 0 0 11px; color: #163b49; font-size: 14px; }
.installment-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.installment-summary div { display: flex; min-height: 52px; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 10px; border: 1px solid #d5e6ea; border-radius: 9px; background: #fff; }
.installment-summary dt { color: #6b838d; font-size: 10px; font-weight: 700; }
.installment-summary dd { margin: 0; color: #097d93; font-size: 14px; font-weight: 900; }
.installment-schedule { display: grid; gap: 8px; margin-top: 15px; }
.installment-schedule h3 { margin: 0 0 2px; color: #244653; font-size: 12px; }
.installment-paid-message { margin: 0; padding: 10px 12px; border: 1px solid #b8dfd1; border-radius: 9px; background: #effaf6; color: #147d5f; font-size: 11px; font-weight: 800; }
.installment-schedule-row { display: grid; grid-template-columns: 1.05fr repeat(4, 1fr); align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #d6e6e9; border-radius: 9px; background: #fff; }
.installment-schedule-row h4 { margin: 0; color: #163b49; font-size: 11px; }
.installment-schedule-row div { display: grid; gap: 2px; }
.installment-schedule-row span { color: #718993; font-size: 9px; }
.installment-schedule-row strong { color: #244653; font-size: 11px; }
.installment-zalo { width: 100%; margin-top: 14px; background: #25c7df; color: #062631; }
.installment-zalo:hover { background: #16b1ca; }
.installment-zalo img { width: 20px; height: 20px; object-fit: contain; }
.installment-message { display: grid; gap: 7px; margin-top: 12px; padding: 11px; border: 1px solid #d5e6ea; border-radius: 10px; background: #f8fcfd; }
.installment-message label { color: #55717c; font-size: 10px; font-weight: 800; }
.installment-message textarea { width: 100%; min-height: 130px; padding: 9px; border: 1px solid #c8dfe5; border-radius: 8px; background: #fff; color: #244653; font: inherit; font-size: 11px; line-height: 1.45; resize: vertical; }
.installment-message button { justify-self: start; background: #fff; color: #087e97; }
.installment-message button:hover { background: #e9f8fa; }
.installment-message button svg { width: 16px; height: 16px; }
.installment-copy-status { min-height: 16px; margin: 0; color: #087e97; font-size: 10px; font-weight: 700; line-height: 1.4; }

/* The calculator trigger shares the contact-action grid with Zalo. */
.contact-actions.has-installment-action > a:first-child { grid-column: auto; }
.contact-actions.has-installment-action > .installment-contact-toggle {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #ead38f;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff2b9, #ffd76d);
  color: #805d00;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 1px rgb(255 255 255 / .45), 0 10px 22px rgb(158 112 0 / .13);
}
.contact-actions.has-installment-action > .installment-contact-toggle .installment-toggle-chevron { display: none; }
.contact-actions.has-installment-action > a:nth-child(3) { border-color: #5598f7; background: linear-gradient(180deg, #438cf5, #276bd9); }
.contact-actions.has-installment-action > .installment-contact-toggle[aria-expanded='true'] { border-color: #0aa3bb; background: linear-gradient(180deg, #43d8e8, #18bad3); color: #05313b; }

@media (hover: hover) and (pointer: fine) {
  .contact-actions.has-installment-action > .installment-contact-toggle:hover { border-color: #d4a51d; background: linear-gradient(180deg, #ffe99a, #ffc84a); transform: translateY(-2px); }
}

@media (min-width: 1024px) {
  .account-detail-grid { grid-template-columns: minmax(0, 1.55fr) minmax(400px, .95fr); }
  .installment-panel { padding: 28px 30px 26px; }
  .installment-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .installment-fields > .installment-field > span { min-height: 30px; }
  .installment-field--request { margin-top: 16px; }
  .installment-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .installment-summary div { min-height: 64px; padding: 10px 12px; }
  .installment-summary dd { font-size: 16px; }
  .installment-schedule { gap: 10px; }
  .installment-schedule-row { grid-template-columns: 76px repeat(4, minmax(0, 1fr)); gap: 10px; padding: 11px 12px; }
  .installment-schedule-row h4 { font-size: 12px; }
  .installment-schedule-row span { font-size: 10px; }
  .installment-schedule-row strong { font-size: 13px; }
  .installment-calculate { min-width: 170px; }
}

@media (max-width: 700px) {
  .installment-calculator--wide { grid-column: auto; }
  .contact-actions.has-installment-action > .installment-contact-toggle { min-height: 40px; padding: 6px; border-radius: 9px; font-size: 8px; }
  .installment-fields { grid-template-columns: 1fr; gap: 10px; }
  .installment-panel { padding: 21px 16px 20px; }
  .installment-field > span { min-height: 20px; }
  .installment-toggle { padding-inline: 12px; }
  .installment-calculator { scroll-margin-top: 12px; }
  .installment-result { scroll-margin-top: 14px; }
  .installment-schedule-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .installment-schedule-row h4 { grid-column: 1 / -1; padding-bottom: 3px; border-bottom: 1px dashed #d6e6e9; }
}

@media (prefers-reduced-motion: reduce) {
  .installment-toggle-chevron { transition: none; }
}

/* Home cards share one installment dialog to keep the catalog lightweight. */
.account-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.account-card-actions .account-detail-link,
.account-installment-link {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin-top: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}
.account-card-actions .account-detail-link > *,
.account-card-actions .account-installment-link > * { position: relative; z-index: 1; }
.account-card-actions .account-detail-link::after,
.account-card-actions .account-installment-link::after {
  position: absolute;
  z-index: 0;
  top: -50%;
  left: -60%;
  width: 32%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .48), transparent);
  content: '';
  pointer-events: none;
  transform: translateX(-100%) skewX(-20deg);
  animation: account-action-shine 5.5s ease-in-out infinite;
}
.account-card-actions .account-detail-link::after { animation-delay: .35s; }
.account-installment-link {
  border: 1px solid rgb(10 163 187 / .45);
  background: linear-gradient(180deg, rgb(31 195 212 / .18), rgb(10 137 165 / .08));
  color: #087e97;
  cursor: pointer;
  font: inherit;
}
.account-installment-link svg,
.account-card-actions .account-detail-link svg { width: 14px; height: 14px; flex: 0 0 auto; }
.account-installment-link:hover,
.account-installment-link:focus-visible { border-color: #0aa3bb; background: linear-gradient(180deg, #e8fbfd, #d9f4f7); color: #05657a; transform: translateY(-2px); }
.account-card-actions .account-detail-link:hover,
.account-card-actions .account-detail-link:focus-visible { transform: translateY(-2px); }
.account-installment-link:focus-visible,
.account-card-actions .account-detail-link:focus-visible { outline: 3px solid #f0b923; outline-offset: 2px; }

@keyframes account-action-shine {
  0%, 72% { transform: translateX(-100%) skewX(-20deg); }
  92%, 100% { transform: translateX(500%) skewX(-20deg); }
}

.installment-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 20px;
  border: 0;
  background: transparent;
  overflow: hidden;
  overscroll-behavior: contain;
}
.installment-modal::backdrop { background: rgb(3 17 29 / .68); backdrop-filter: blur(5px); }
.installment-modal.installment-modal-fallback {
  position: fixed;
  z-index: 5000;
  inset: 0;
  background: rgb(3 17 29 / .68);
  backdrop-filter: blur(5px);
}
.installment-modal-card {
  display: flex;
  flex-direction: column;
  width: min(780px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #0aa3bb #e8f5f7;
  border: 1px solid #b9dce4;
  border-radius: 20px;
  background: #f7fbfc;
  box-shadow: 0 24px 70px rgb(3 31 43 / .28);
}
.installment-modal-header {
  display: flex;
  position: sticky;
  z-index: 2;
  top: 0;
  flex: 0 0 auto;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid #d5e7eb;
  background: linear-gradient(135deg, #ffffff, #edf9fb);
}
.installment-modal-kicker { margin: 0 0 4px; color: #0a9db6; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.installment-modal-header h2 { margin: 0; color: #163b49; font-size: clamp(18px, 3vw, 24px); line-height: 1.2; }
.installment-modal-close {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8dfe5;
  border-radius: 12px;
  background: #fff;
  color: #557984;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.installment-modal-close svg { width: 18px; height: 18px; }
.installment-modal-close:hover,
.installment-modal-close:focus-visible { border-color: #ef8c8c; background: #fff3f3; color: #c64949; transform: rotate(4deg); outline: 0; }
.installment-modal-calculator { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.installment-modal-calculator > .installment-toggle { display: none; }
.installment-modal-calculator .installment-panel { display: block; }
.installment-select-menu--portal { position: fixed; z-index: 20; right: auto; left: 0; top: 0; width: auto; }
body.installment-modal-open { overflow: hidden; }

@media (max-width: 767px) {
  .account-card-actions { gap: 7px; margin-top: 10px; }
  .account-card-actions .account-detail-link,
  .account-installment-link { min-height: 36px; padding-inline: 7px; border-radius: 9px; font-size: 9px; }
  .account-installment-link svg,
  .account-card-actions .account-detail-link svg { width: 12px; height: 12px; }
  .installment-modal { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .installment-modal-card {
    width: min(100%, 560px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    border-radius: 16px;
  }
  .installment-modal-header { min-height: 66px; padding: 14px 16px; border-radius: 16px 16px 0 0; }
  .installment-modal-header h2 { font-size: 18px; }
  .installment-modal-kicker { font-size: 9px; }
  .installment-modal-close { width: 34px; height: 34px; border-radius: 10px; }
  .installment-modal-calculator .installment-panel { padding: 18px 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .account-installment-link,
  .account-card-actions .account-detail-link,
  .installment-modal-close { transition: none; }
  .account-card-actions .account-detail-link::after,
  .account-card-actions .account-installment-link::after { animation: none; }
}

/* VTD uses the supplied yellow across the full public interface. */
:root {
  color-scheme: light;
  --text: #17212b;
  --muted: #5f613d;
  --cyan: #1b2d3c;
  --cyan-soft: #30475a;
  --yellow: #e4cd3a;
  --border: #d6c25d;
  --border-warm: #b79a16;
  --focus: #1b2d3c;
  --catalog-cyan: #1b2d3c;
  --catalog-gold: #b79a16;
  --catalog-line: rgb(95 87 28 / .25);
  --vtd-bg: #fffbe6;
  --vtd-panel: #fff6c2;
  --vtd-panel-soft: #fffdf0;
  --vtd-ink: #17212b;
}

html { background: var(--vtd-bg); }
body { background: linear-gradient(180deg, #fffbe6 0%, #fff8d5 52%, #fffdf0 100%); color: var(--vtd-ink); }

* { scrollbar-color: #b79a16 #f1e7ad; }
*::-webkit-scrollbar-track { background: #f1e7ad; }
*::-webkit-scrollbar-thumb { border-color: #f1e7ad; background: #b79a16; }
*::-webkit-scrollbar-thumb:hover { background: #8f7711; }

.shop-header {
  padding-inline: 14px;
  border-bottom-color: rgb(7 24 39 / .3);
  border-radius: 0;
  background: transparent;
}
.shop-logo span { background: linear-gradient(145deg, #fff4a8 0 58%, #e4cf29 59%); }
.shop-logo strong,
.shop-nav a { color: var(--vtd-ink); }
.shop-nav a:hover,
.shop-nav a[aria-current='page'] { color: #394200; }
.shop-nav a::after { background: var(--vtd-ink); }
.shop-hotline { border-color: rgb(95 87 28 / .42); background: var(--vtd-panel-soft); color: var(--vtd-ink); box-shadow: 0 8px 22px rgb(146 122 0 / .1); }
.shop-box-zalo-button { border-color: rgb(95 87 28 / .46); background: linear-gradient(180deg, #fff4a8, #e8d66a); color: var(--vtd-ink); }

.shop-hero { border-color: rgb(95 87 28 / .42); background: var(--vtd-bg); box-shadow: 0 18px 45px rgb(146 122 0 / .13); }
.shop-home--vtd .hero-visual { background: var(--vtd-bg); }
.shop-home--vtd .hero-banner-shade { background: transparent; }
.shop-hero h1,
.shop-hero h1 em { color: var(--vtd-ink); text-shadow: none; }
.hero-cta-primary { border-color: rgb(95 87 28 / .45); background: linear-gradient(180deg, #fff4a8, #e8d66a); color: var(--vtd-ink); box-shadow: inset 0 1px rgb(255 255 255 / .52), 0 9px 24px rgb(146 122 0 / .15); }
.hero-cta-row .hero-cta-zalo { border-color: rgb(95 87 28 / .42); background: rgb(255 253 240 / .82); color: var(--vtd-ink); box-shadow: inset 0 1px rgb(255 255 255 / .62); }
.hero-cta-row .hero-cta-zalo:hover { border-color: var(--vtd-ink); background: #fff; color: var(--vtd-ink); }

.trust-strip,
.benefit-strip { border-color: rgb(95 87 28 / .34); background: var(--vtd-panel); box-shadow: 0 14px 34px rgb(146 122 0 / .11); }
.trust-strip > div,
.benefit-strip > div { border-right-color: rgb(7 24 39 / .25); }
.trust-strip b,
.benefit-strip b { color: var(--vtd-ink); }
.trust-strip small,
.benefit-strip small { color: var(--muted); }
.benefit-strip > div > svg,
.benefit-strip > div:nth-child(2) > svg,
.benefit-strip > div:nth-child(3) > svg,
.benefit-strip > div:nth-child(4) > svg { color: var(--vtd-ink); }

.catalog-section { padding: 0; border: 0; background: transparent; }
.catalog-filter-bar { border-color: rgb(95 87 28 / .34); background: var(--vtd-panel); box-shadow: 0 14px 34px rgb(146 122 0 / .11); }
.catalog-search-field { border-color: rgb(95 87 28 / .32); background: var(--vtd-panel-soft); }
.catalog-search-field input[type='search'],
.catalog-search-field input::placeholder { color: var(--vtd-ink); }
.catalog-inline-dropdown > summary,
.catalog-sort-dropdown > summary { border-color: rgb(95 87 28 / .34); background: var(--vtd-panel-soft); color: var(--vtd-ink); }
.catalog-inline-menu,
.catalog-price-menu { border-color: rgb(95 87 28 / .38); background: var(--vtd-panel-soft) !important; box-shadow: 0 20px 46px rgb(146 122 0 / .16); }
.catalog-inline-menu a { color: var(--vtd-ink); }
.catalog-inline-menu a:hover,
.catalog-inline-menu a[aria-current='page'] { background: #fff4a8; color: var(--vtd-ink); }
.catalog-price-heading h2,
.catalog-price-panel h3,
.catalog-heading h2 { color: var(--vtd-ink); }
.catalog-price-heading p,
.catalog-price-field small { color: var(--muted); }
.catalog-price-panel { border-color: rgb(95 87 28 / .3); background: var(--vtd-panel-soft); box-shadow: inset 0 1px rgb(255 255 255 / .56); }
.catalog-price-input { border-color: rgb(95 87 28 / .32); background: #fffef5; color: var(--muted); }
.catalog-price-input input { color: var(--vtd-ink); }
.catalog-search--wide button { border-color: rgb(95 87 28 / .38); background: linear-gradient(180deg, #fff4a8, #e8d66a); color: var(--vtd-ink); box-shadow: inset 0 1px rgb(255 255 255 / .5), 0 7px 16px rgb(146 122 0 / .13); }
.catalog-price-presets a,
.catalog-bands a,
.catalog-pagination a { border-color: rgb(95 87 28 / .32); background: var(--vtd-panel-soft); color: var(--vtd-ink); box-shadow: 0 5px 14px rgb(146 122 0 / .08); }
.catalog-price-presets a:hover,
.catalog-bands a:hover { border-color: var(--vtd-ink); background: #fff4a8; color: var(--vtd-ink); }
.catalog-price-presets a[aria-current='page'],
.catalog-bands a[aria-current='page'],
.catalog-pagination a[aria-current='page'] { border-color: var(--vtd-ink); background: linear-gradient(180deg, #fff4a8, #e8d66a); color: var(--vtd-ink); }
.catalog-pagination .catalog-pagination-page,
.catalog-pagination .catalog-pagination-control { border-color: rgb(95 87 28 / .28); background: #fffef7; color: var(--vtd-ink); box-shadow: 0 5px 14px rgb(146 122 0 / .08); }
.catalog-pagination .catalog-pagination-page[aria-current='page'] { border-color: rgb(95 87 28 / .52); background: #fffef7; color: var(--vtd-ink); box-shadow: 0 7px 18px rgb(146 122 0 / .13); }
.catalog-pagination .catalog-pagination-page:hover,
.catalog-pagination .catalog-pagination-control:hover:not(.is-disabled) { border-color: var(--vtd-ink); background: #fff; color: var(--vtd-ink); }
.catalog-heading h2 span { border: 1px solid rgb(95 87 28 / .3); background: var(--vtd-panel-soft); color: var(--vtd-ink); }
.catalog-sort-dropdown > summary b { color: var(--vtd-ink); }

.account-card { border-color: rgb(95 87 28 / .38); background: var(--vtd-panel); box-shadow: 0 12px 28px rgb(146 122 0 / .12); }
.account-card.is-hot { border-color: #b83225; }
.account-card-title h2,
.account-detail-panel h1 { color: var(--vtd-ink); }
.account-card-title h2 a:hover { color: #4d5600; }
.account-prices { border-top-color: rgb(95 87 28 / .22); }
.account-prices p { color: var(--muted); }
.account-detail-link {
  border-color: #d6b52d;
  background: linear-gradient(180deg, #fff4a8, #e8d66a);
  color: #3a3100;
  box-shadow: inset 0 1px rgb(255 255 255 / .45), 0 7px 16px rgb(146 122 0 / .15);
}
.account-detail-link:hover,
.account-detail-link:focus-visible { border-color: #a88b00; background: linear-gradient(180deg, #fff8c9, #efd978); color: #2f2700; }
.account-installment-link {
  border-color: #1aa7bd;
  background: linear-gradient(180deg, #43d8e8, #18bad3);
  color: #052b36;
  box-shadow: inset 0 1px rgb(255 255 255 / .38), 0 7px 16px rgb(20 155 179 / .15);
}
.account-installment-link:hover,
.account-installment-link:focus-visible { border-color: #087f98; background: linear-gradient(180deg, #69e3ed, #27bfd5); color: #03212b; }

.catalog-empty,
.detail-back a,
.account-detail-panel { border-color: rgb(95 87 28 / .38); background: var(--vtd-panel); color: var(--vtd-ink); }
.account-image-viewer-trigger { border-color: rgb(95 87 28 / .38); background: var(--vtd-panel-soft); }
.account-detail-panel { box-shadow: 0 16px 36px rgb(146 122 0 / .13); }
.detail-price { border-color: rgb(95 87 28 / .32); background: rgb(255 253 240 / .78); }
.detail-price span,
.detail-price small,
.detail-facts dt { color: var(--muted); }
.detail-facts dd { color: var(--vtd-ink); }
.detail-facts div { border-bottom-color: rgb(95 87 28 / .2); }
.account-description { border-color: rgb(95 87 28 / .32); background: var(--vtd-panel-soft); }
.account-description h2,
.detail-note { color: var(--vtd-ink); }
.account-description p { color: var(--muted); }
.detail-note { border-color: rgb(95 87 28 / .32); background: var(--vtd-panel-soft); }

.shop-footer { border-top-color: rgb(95 87 28 / .3); color: var(--vtd-ink); }
.shop-footer .shop-logo strong { color: var(--vtd-ink); }

/* Use the supplied VTD portrait as the public header mark. */
.shop-logo-avatar {
  display: block;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border: 2px solid rgb(255 255 255 / .78);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  box-shadow: 0 4px 12px rgb(95 87 28 / .2);
}
.shop-logo--footer .shop-logo-avatar {
  width: 60px;
  height: 60px;
  flex-basis: 60px;
}

@media (max-width: 767px) {
  .shop-logo-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-width: 1px;
  }
}

.installment-calculator,
.installment-modal-card { border-color: rgb(95 87 28 / .36); background: var(--vtd-panel); box-shadow: 0 16px 38px rgb(146 122 0 / .15); }
.installment-toggle { color: var(--vtd-ink); }
.installment-toggle:hover { background: rgb(255 244 168 / .72); color: var(--vtd-ink); }
.installment-field { color: var(--vtd-ink); }
.installment-field input,
.installment-field select,
.installment-field textarea,
.installment-select-trigger { border-color: rgb(95 87 28 / .34); background: #fffef5; color: var(--vtd-ink); }
.installment-summary div,
.installment-schedule-row,
.installment-message { border-color: rgb(95 87 28 / .3); background: var(--vtd-panel-soft); }
.installment-summary dt,
.installment-schedule-row span,
.installment-message label { color: var(--muted); }
.installment-summary dd,
.installment-modal-kicker,
.installment-schedule-row h4,
.installment-schedule-row strong,
.installment-modal-header h2 { color: var(--vtd-ink); }
.installment-modal-header { border-bottom-color: rgb(95 87 28 / .28); background: linear-gradient(135deg, #fffef5, #fff4a8); }
.installment-modal-close { border-color: rgb(95 87 28 / .34); background: var(--vtd-panel-soft); color: var(--vtd-ink); }
.installment-calculate { border-color: rgb(95 87 28 / .45); background: linear-gradient(180deg, #fff4a8, #e8d66a); color: var(--vtd-ink); }
.installment-calculate:hover { background: #e0cb55; }
.image-viewer-close { border-color: #d6c25d; background: #0b2132; color: #fffef5; }
.image-viewer-close:hover,
.image-viewer-close:focus-visible { border-color: #fff4a8; background: #183b52; color: #fff; }

@media (max-width: 767px) {
  .shop-hero { background: var(--vtd-bg); }
  .benefit-strip > div:nth-child(-n + 2),
  .trust-strip > div:nth-child(-n + 2) { border-bottom-color: rgb(7 24 39 / .25); }
}

/* Vũ Tiến Đạt uses a restrained black-and-gold palette sampled from the banner. */
:root {
  --text: #f7f0df;
  --muted: #c1b79d;
  --cyan: #e1ad3e;
  --cyan-soft: #f2cf72;
  --yellow: #f5c94f;
  --border: #65522e;
  --border-warm: #b88b32;
  --focus: #f2c85a;
  --catalog-cyan: #e1ad3e;
  --catalog-gold: #f2c85a;
  --catalog-line: rgb(225 173 62 / .24);
  --vtd-bg: #0b1015;
  --vtd-panel: #151b21;
  --vtd-panel-soft: #1b232b;
  --vtd-ink: #f7f0df;
}

html { background: var(--vtd-bg); }
body {
  background: radial-gradient(circle at 50% -10%, rgb(225 173 62 / .16), transparent 34rem), linear-gradient(180deg, #0b1015 0%, #111820 48%, #080c10 100%);
  color: var(--vtd-ink);
}
* { scrollbar-color: #b88b32 #151b21; }
*::-webkit-scrollbar-track { background: #151b21; }
*::-webkit-scrollbar-thumb { border-color: #151b21; background: #b88b32; }
*::-webkit-scrollbar-thumb:hover { background: #e1ad3e; }

.shop-header { border-bottom-color: rgb(225 173 62 / .34); background: linear-gradient(180deg, rgb(11 16 21 / .94), rgb(11 16 21 / .76)); }
.shop-logo strong,
.shop-nav a,
.shop-footer,
.shop-footer .shop-logo strong { color: var(--vtd-ink); }
.shop-nav a:hover,
.shop-nav a[aria-current='page'] { color: #f5c94f; }
.shop-nav a::after { background: #e1ad3e; }
.shop-hotline { border-color: rgb(225 173 62 / .38); background: #151b21; color: #f7f0df; box-shadow: 0 8px 22px rgb(0 0 0 / .22); }
.shop-box-zalo-button { border-color: #b88b32; background: linear-gradient(180deg, #f5d16c, #c5912d); color: #171106; }
.shop-hero { border-color: rgb(225 173 62 / .48); background: #070b0f; box-shadow: 0 20px 52px rgb(0 0 0 / .4); }
.shop-home--vtd .hero-visual,
.shop-home--vtd .hero-visual .hero-banner-image { background: #070b0f; }

.trust-strip,
.benefit-strip,
.catalog-filter-bar,
.account-card,
.account-detail-panel,
.catalog-empty { border-color: rgb(225 173 62 / .3); background: linear-gradient(145deg, #192129, #11171d); box-shadow: 0 16px 38px rgb(0 0 0 / .28); }
.trust-strip > div,
.benefit-strip > div { border-color: rgb(225 173 62 / .2); }
.trust-strip b,
.benefit-strip b,
.catalog-heading h2,
.account-card-title h2,
.account-detail-panel h1 { color: var(--vtd-ink); }
.trust-strip small,
.benefit-strip small,
.account-prices p,
.detail-price span,
.detail-price small,
.detail-facts dt { color: var(--muted); }
.benefit-strip > div > svg,
.benefit-strip > div:nth-child(2) > svg,
.benefit-strip > div:nth-child(3) > svg,
.benefit-strip > div:nth-child(4) > svg { color: #e1ad3e; }

.catalog-search-field,
.catalog-inline-dropdown > summary,
.catalog-sort-dropdown > summary,
.catalog-price-panel,
.catalog-price-input,
.catalog-inline-menu,
.catalog-price-menu,
.catalog-price-presets a,
.catalog-bands a,
.catalog-pagination .catalog-pagination-page,
.catalog-pagination .catalog-pagination-control,
.detail-back a,
.account-image-viewer-trigger,
.detail-price,
.account-description,
.detail-note { border-color: rgb(225 173 62 / .28); background: var(--vtd-panel-soft) !important; color: var(--vtd-ink); }
.catalog-search-field input[type='search'],
.catalog-search-field input::placeholder,
.catalog-price-input input,
.catalog-inline-menu a,
.detail-facts dd,
.account-description h2,
.detail-note { color: var(--vtd-ink); }
.catalog-inline-menu a:hover,
.catalog-inline-menu a[aria-current='page'],
.catalog-price-presets a:hover,
.catalog-bands a:hover,
.catalog-price-presets a[aria-current='page'],
.catalog-bands a[aria-current='page'],
.catalog-pagination a[aria-current='page'] { border-color: #e1ad3e; background: linear-gradient(180deg, #e8b84b, #b77f22) !important; color: #160f04; }
.account-card-info { background: transparent; }
.account-prices { border-top-color: rgb(225 173 62 / .2); }
.account-detail-link,
.installment-calculate { border-color: #c89731; background: linear-gradient(180deg, #f2cd68, #c38c2b); color: #171106; box-shadow: inset 0 1px rgb(255 255 255 / .34), 0 8px 20px rgb(0 0 0 / .22); }
.account-installment-link { border-color: #7f642d; background: linear-gradient(180deg, #303943, #202830); color: #f7e6b7; box-shadow: inset 0 1px rgb(255 255 255 / .08), 0 8px 20px rgb(0 0 0 / .22); }
.installment-calculator,
.installment-modal-card,
.installment-modal-header,
.installment-summary div,
.installment-schedule-row,
.installment-message { border-color: rgb(225 173 62 / .28); background: var(--vtd-panel) !important; color: var(--vtd-ink); }
.installment-field input,
.installment-field select,
.installment-field textarea,
.installment-select-trigger,
.installment-modal-close { border-color: rgb(225 173 62 / .3); background: var(--vtd-panel-soft); color: var(--vtd-ink); }
.mobile-contact-bar { border-top-color: rgb(225 173 62 / .38); background: rgb(11 16 21 / .97); }
.mobile-contact-item { color: #efe4c7; }
.mobile-contact-item:hover,
.mobile-contact-item:focus-visible { color: #f5c94f; }
.shop-footer { border-top-color: rgb(225 173 62 / .28); }

@media (max-width: 767px) {
  .benefit-strip > div:nth-child(-n + 2),
  .trust-strip > div:nth-child(-n + 2) { border-bottom-color: rgb(225 173 62 / .2); }
}

/* Cuchuoishop neon identity. */
:root {
  --text: #f8f7ff;
  --muted: #b4b1d0;
  --cyan: #2cf7ff;
  --cyan-soft: #9afbff;
  --yellow: #ff46d7;
  --border: #315a8b;
  --border-warm: #a72a99;
  --focus: #fff28a;
  --catalog-cyan: #2cf7ff;
  --catalog-gold: #ff46d7;
  --catalog-line: rgb(44 247 255 / .23);
  --vtd-bg: #050716;
  --vtd-panel: #101127;
  --vtd-panel-soft: #171631;
  --vtd-ink: #f8f7ff;
}
html { background: #050716; }
body { background: radial-gradient(circle at 18% -10%, rgb(44 247 255 / .18), transparent 34rem), radial-gradient(circle at 88% 8%, rgb(255 70 215 / .16), transparent 30rem), linear-gradient(180deg, #050716 0%, #100b24 48%, #050713 100%); color: var(--vtd-ink); }
* { scrollbar-color: #2cf7ff #101127; }
*::-webkit-scrollbar-track { background: #101127; }
*::-webkit-scrollbar-thumb { border-color: #101127; background: #2cf7ff; }
*::-webkit-scrollbar-thumb:hover { background: #ff46d7; }
.shop-header {
  border: 1px solid rgb(44 247 255 / .34);
  border-top-color: transparent;
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(5 7 22 / .96), rgb(13 9 31 / .78));
  box-shadow: 0 0 24px rgb(44 247 255 / .08), inset 0 1px rgb(255 255 255 / .04);
  overflow: hidden;
}
.shop-nav a:hover, .shop-nav a[aria-current='page'] { color: #2cf7ff; }
.shop-nav a::after { background: linear-gradient(90deg, #2cf7ff, #ff46d7); }
.shop-hotline { border-color: rgb(255 70 215 / .48); background: #15132d; color: #fff; box-shadow: 0 0 22px rgb(255 70 215 / .12); }
.shop-box-zalo-button { border-color: #ff46d7; background: linear-gradient(180deg, #ff70df, #d52eaf); color: #16061a; }
.shop-facebook-button { border-color: #1877f2; background: linear-gradient(180deg, #1877f2, #0d65d9); color: #fff; }
.shop-hero { border-color: rgb(44 247 255 / .48); background: #050716; box-shadow: 0 0 44px rgb(44 247 255 / .12), 0 20px 52px rgb(0 0 0 / .4); }
.shop-home--cuchuoishop .hero-visual, .shop-home--cuchuoishop .hero-visual .hero-banner-image { background: #050716; }
.shop-home--cuchuoishop .account-cover { background: #050716; }
.shop-home--cuchuoishop .account-card-actions { grid-template-columns: 1fr; }
.shop-home--cuchuoishop .account-card-actions .account-detail-link { width: fit-content; min-width: 132px; justify-self: end; }
.account-detail-panel .contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-detail-panel .contact-actions a:first-child { grid-column: auto; }
.shop-logo-avatar { border-color: #2cf7ff; box-shadow: 0 0 20px rgb(44 247 255 / .38); }
.shop-footer { border-top-color: rgb(44 247 255 / .28); }
.catalog-highlight-band { display: none !important; }
.back-to-top {
  position: fixed;
  z-index: 1090;
  right: 20px;
  bottom: 22px;
  left: auto;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(44 247 255 / .62);
  border-radius: 50%;
  background: rgb(5 7 22 / .94);
  color: var(--cyan);
  box-shadow: 0 0 22px rgb(44 247 255 / .2), inset 0 1px rgb(255 255 255 / .1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.back-to-top svg { width: 22px; height: 22px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover { background: var(--cyan); color: var(--navy-900); }
}

@media (max-width: 767px) {
  .shop-header { border-radius: 0 0 14px 14px; }
  .back-to-top { right: 14px; left: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

.account-detail-gallery { min-width: 0; display: grid; align-content: start; gap: 10px; }
.account-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.account-gallery-thumb { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: #020913; cursor: pointer; opacity: .7; transition: border-color .2s ease, opacity .2s ease, transform .2s ease; }
.account-gallery-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.account-gallery-thumb:hover, .account-gallery-thumb.is-active { border-color: var(--yellow); opacity: 1; }
.account-gallery-thumb:hover { transform: translateY(-2px); }
@media (max-width: 700px) {
  .account-gallery-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
}
.shop-announcement {
  width: min(520px, calc(100% - 24px));
  max-width: 520px;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(37 199 223 / .34);
  border-radius: 28px;
  background: transparent;
  color: var(--text);
  box-shadow: 0 30px 100px rgb(0 0 0 / .55);
}
.shop-announcement::backdrop {
  background: rgb(0 7 15 / .76);
  backdrop-filter: blur(4px);
}
.shop-announcement-card {
  position: relative;
  display: grid;
  justify-items: center;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 6vw, 46px) 30px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 15% 0%, rgb(37 199 223 / .13), transparent 45%),
    linear-gradient(155deg, #0a1d32, #050d1a 72%);
  text-align: center;
}
.shop-announcement-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgb(161 184 205 / .28);
  border-radius: 50%;
  background: rgb(4 17 31 / .72);
  color: #c4d4e2;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.shop-announcement-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.shop-announcement-close:hover { transform: rotate(90deg); background: rgb(32 54 76 / .9); color: #fff; }
.shop-announcement-kicker {
  margin: 0 0 12px;
  color: var(--cyan-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.shop-announcement-card h2 {
  margin: 0;
  color: #f7fbff;
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.shop-announcement-callout {
  margin: 18px 0 10px;
  padding: 8px 15px;
  border: 1px solid rgb(255 196 50 / .45);
  border-radius: 999px;
  background: rgb(255 196 50 / .12);
  color: #ffd866;
  font-size: 15px;
  font-weight: 900;
}
.shop-announcement-description {
  margin: 0 0 24px;
  color: #a8bbca;
  font-size: 13px;
  font-weight: 700;
}
.shop-announcement-description span { margin-inline: 5px; color: var(--cyan); }
.shop-announcement-actions {
  display: flex;
  width: min(100%, 430px);
  gap: 12px;
}
.shop-announcement-zalo,
.shop-announcement-facebook,
.shop-announcement-dismiss {
  width: min(100%, 330px);
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.shop-announcement-actions > .shop-announcement-zalo,
.shop-announcement-actions > .shop-announcement-facebook { width: 0; flex: 1 1 0; }
.shop-announcement-zalo {
  border: 1px solid #4e9bff;
  background: linear-gradient(180deg, #278bfa, #1264d6);
  color: #fff;
  box-shadow: 0 12px 24px rgb(17 108 229 / .25), inset 0 1px rgb(255 255 255 / .3);
}
.shop-announcement-zalo .zalo-brand-icon { width: 25px; height: 25px; object-fit: contain; }
.shop-announcement-facebook {
  border: 1px solid #4b8df8;
  background: linear-gradient(180deg, #327df2, #175bc5);
  color: #fff;
  box-shadow: 0 12px 24px rgb(24 98 214 / .22), inset 0 1px rgb(255 255 255 / .3);
}
.shop-announcement-facebook .facebook-brand-icon { width: 24px; height: 24px; color: currentColor; }
.shop-announcement-dismiss {
  margin-top: 12px;
  border: 1px solid rgb(153 169 193 / .28);
  background: #536073;
  color: #f3f7fb;
  cursor: pointer;
  box-shadow: inset 0 1px rgb(255 255 255 / .14);
}
.shop-announcement-dismiss svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .shop-announcement-zalo:hover,
  .shop-announcement-facebook:hover,
  .shop-announcement-dismiss:hover { transform: translateY(-2px); filter: brightness(1.08); }
}

/* Shared full-image mobile cards and pagination picker UI. */
@media (max-width: 767px) {
  .account-cover-link { height: auto; aspect-ratio: auto; }
  .account-cover { height: auto; object-fit: contain; }
}

.catalog-pagination { align-items: center; gap: 14px; }
.catalog-pagination-picker { position: relative; }
.catalog-pagination-trigger {
  display: flex;
  min-width: 188px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  border: 1px solid var(--cyan);
  border-radius: 14px;
  background: var(--cyan);
  color: #00131d;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  list-style: none;
  cursor: pointer;
}
.catalog-pagination-trigger::-webkit-details-marker { display: none; }
.catalog-pagination-trigger svg { width: 18px; height: 18px; }
.catalog-pagination-picker[open] .catalog-pagination-trigger svg { transform: rotate(180deg); }
.catalog-pagination-panel {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 20px);
  left: 50%;
  display: grid;
  width: min(376px, calc(100vw - 32px));
  max-height: min(320px, 50vh);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border: 1px solid #ccdde2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 36px rgb(42 77 91 / .15);
  transform: translateX(-50%);
}
.catalog-pagination-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.catalog-pagination-picker[open]::after {
  content: '';
  position: absolute;
  z-index: 21;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 16px;
  height: 16px;
  border-right: 1px solid #ccdde2;
  border-bottom: 1px solid #ccdde2;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.catalog-pagination .catalog-pagination-page {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border-color: #ccdde2;
  border-radius: 10px;
  background: #fff;
  color: #31515f;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 14px rgb(42 77 91 / .06);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.catalog-pagination .catalog-pagination-page:hover { border-color: rgb(40 211 230 / .7); color: #087e97; transform: translateY(-1px); }
.catalog-pagination .catalog-pagination-page[aria-current='page'] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #00131d;
  box-shadow: 0 7px 18px rgb(40 211 230 / .2);
}
.catalog-pagination .catalog-pagination-control {
  display: inline-flex;
  width: 54px;
  min-width: 54px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: #ccdde2;
  border-radius: 11px;
  background: #fff;
  color: #31515f;
  box-shadow: 0 5px 14px rgb(42 77 91 / .06);
}
.catalog-pagination .catalog-pagination-control svg { width: 17px; height: 17px; transition: transform .2s ease; }
.catalog-pagination .catalog-pagination-control--previous:hover svg { transform: translateX(-2px); }
.catalog-pagination .catalog-pagination-control--next:hover svg { transform: translateX(2px); }
.catalog-pagination .catalog-pagination-control.is-disabled { opacity: .34; cursor: not-allowed; }
.catalog-pagination .catalog-pagination-control:focus-visible { outline: 3px solid rgb(40 211 230 / .55); outline-offset: 3px; }
.catalog-pagination-trigger:focus-visible, .catalog-pagination-page:focus-visible { outline: 3px solid #087e97; outline-offset: 3px; }
@media (max-width: 767px) {
  .catalog-pagination { gap: 10px; margin: 22px 0; }
  .catalog-pagination-trigger { min-width: 168px; padding-inline: 12px; }
  .catalog-pagination-panel { gap: 8px; padding: 14px; }
  .catalog-pagination .catalog-pagination-control { width: 44px; min-width: 44px; min-height: 44px; }
  .catalog-pagination .catalog-pagination-control svg { width: 16px; height: 16px; }
}


/* Keep every pagination state readable across the source themes. */
.catalog-pagination .catalog-pagination-trigger {
  border-color: #b77f22 !important;
  background: #fff4a8 !important;
  color: #171106 !important;
}
.catalog-pagination .catalog-pagination-panel {
  border-color: #ccdde2 !important;
  background: #fff !important;
}
.catalog-pagination .catalog-pagination-page,
.catalog-pagination .catalog-pagination-control {
  border-color: #b9cbd1 !important;
  background: #fff !important;
  color: #17212b !important;
}
.catalog-pagination .catalog-pagination-page:hover,
.catalog-pagination .catalog-pagination-control:hover:not(.is-disabled) {
  border-color: #087e97 !important;
  background: #effcff !important;
  color: #063d4a !important;
}
.catalog-pagination .catalog-pagination-page[aria-current='page'] {
  border-color: #b77f22 !important;
  background: linear-gradient(180deg, #fff0a0, #e8b84b) !important;
  color: #171106 !important;
}
.catalog-pagination .catalog-pagination-control.is-disabled {
  color: #4a5c63 !important;
}
.catalog-pagination .catalog-pagination-trigger:focus-visible,
.catalog-pagination .catalog-pagination-page:focus-visible,
.catalog-pagination .catalog-pagination-control:focus-visible {
  outline-color: #087e97 !important;
}
:root{--bg:#0b101a;--panel:#111927;--panel2:#162032;--line:#233047;--text:#f0f4fb;--muted:#92a2b9;--blue:#438cff;--cyan:#68d5ef;--gold:#edce8c;--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 'Segoe UI',Arial,sans-serif}body:has(dialog[open]){overflow:hidden}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:0;background:none;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}input,select{color:var(--text);background:#0d1421;border:1px solid var(--line);border-radius:8px}select{padding:10px;font-size:12px}input{min-width:0}img{max-width:100%}[hidden]{display:none!important}.cyan{color:var(--cyan)}.load-progress{position:fixed;top:0;left:0;height:2px;z-index:100;background:var(--cyan);box-shadow:0 0 15px var(--cyan);width:0;transition:width .4s,opacity .4s}.announcement{height:34px;padding:0 5vw;display:flex;align-items:center;justify-content:center;gap:10px;background:#111c2d;color:#a6b7cf;font-size:9px;letter-spacing:1px}.announcement a{margin-left:15px;color:var(--cyan)}.announcement-divider{color:#3d506b}.live-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px #68d5ef70;flex-shrink:0}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1360px)/2));border-bottom:1px solid #24334b88;background:#0b101aeb;backdrop-filter:blur(18px);position:sticky;top:0;z-index:30;gap:25px;transition:height .25s,box-shadow .25s}header.scrolled{height:70px;box-shadow:0 10px 40px #0003}.brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:750;letter-spacing:-.8px}.brand img{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);object-fit:cover}.brand-dot{color:var(--cyan)}.brand small{display:block;font-size:8px;font-weight:500;letter-spacing:2.1px;color:#7c8ca4;margin-top:-2px}nav{display:flex;gap:32px;font-size:12px;color:var(--muted)}nav a{position:relative;white-space:nowrap}nav a:hover,nav a.active{color:var(--text)}nav a.active::after{position:absolute;bottom:-30px;left:0;right:0;height:2px;background:var(--cyan);content:''}nav span{font-size:8px;padding:2px 4px;background:#22334f;margin-left:3px;border-radius:3px}.header-actions{display:flex;align-items:center;gap:14px}.icon-button{width:32px;height:32px;display:grid;place-items:center;font-size:21px;color:var(--muted)}.icon-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.5}.small-primary{background:#1d3e69;color:#d7e7ff;border:1px solid #31537f;padding:9px 13px;font-size:11px;border-radius:7px}.primary,.outline,.subtle{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:12px 20px;border-radius:8px;font-weight:650;font-size:12px;transition:background .2s,border-color .2s,transform .2s}.primary{background:var(--blue);color:#fff;border:1px solid #7aadff40;box-shadow:0 5px 20px #397af225}.primary:hover{background:#5c9cff;transform:translateY(-1px)}.outline{border:1px solid #3b4b63;background:#162133;color:#e3ebf8}.outline:hover{border-color:var(--cyan);background:#1a2c41}.subtle{color:#b9c9e2;border:1px solid #32415a;background:#101a2a}.text-link{color:#aac5ec;font-size:11px}.text-link:hover{color:var(--cyan)}main{max-width:1360px;margin:auto;padding:0 24px}.hero{position:relative;display:grid;grid-template-columns:1.06fr 1fr;min-height:570px;overflow:hidden;border-bottom:1px solid var(--line);padding:58px 30px 68px;isolation:isolate}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#35507115 1px,transparent 1px),linear-gradient(90deg,#35507115 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(90deg,transparent,#000);z-index:-1}.hero-light{position:absolute;width:600px;height:600px;right:-100px;top:-100px;border-radius:50%;background:radial-gradient(circle,#245b9f38,transparent 67%);z-index:-1}.eyebrow{font-size:9px;letter-spacing:2.1px;color:#8396b1;font-weight:650;display:flex;align-items:center;gap:8px}.tiny-line{display:inline-block;width:24px;height:1px;background:var(--cyan)}.hero-copy{padding-top:12px;z-index:2}.hero-kicker{display:inline-flex;background:#1b304bcc;border:1px solid #30506e;border-radius:4px;padding:4px 8px;color:var(--cyan);font-size:9px;letter-spacing:1px;margin-top:27px}h1{font-size:57px;line-height:1.1;letter-spacing:-2px;margin:17px 0 20px;font-weight:750}.hero h1 em{font-style:normal;color:var(--cyan)}.hero p{max-width:370px;color:var(--muted);font-size:13px;line-height:1.9;margin:0}.hero-actions{display:flex;gap:12px;margin-top:29px}.hero-meta{display:flex;gap:27px;margin-top:34px}.hero-meta>div{border-right:1px solid var(--line);padding-right:26px}.hero-meta>div:last-child{border:0;padding:0}.hero-meta strong{display:block;font-size:20px;letter-spacing:-.6px;font-weight:650}.hero-meta span{display:block;font-size:7px;letter-spacing:1px;color:#7387a4;margin-top:4px}.hero-art{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;padding-bottom:20px}.orbit{border:1px solid #2f57795c;border-radius:50%;position:absolute;width:370px;height:370px;transform:rotateX(45deg) rotate(-25deg);top:18px;right:-14px;z-index:-1}.orbit-two{width:500px;height:500px;top:-40px;right:-78px;border-color:#23426080}.floating-tag{position:absolute;top:0;right:20px;font-size:15px;font-weight:800;letter-spacing:3px;color:#90b1d6}.floating-tag span{display:block;text-align:right;font-size:8px;letter-spacing:5px;color:#476386}.hero-main-card{position:relative;width:360px;border:1px solid #6c8baf74;border-radius:13px;background:linear-gradient(145deg,#1c2a40,#101a29);box-shadow:0 25px 70px #0006;padding:0;transform:rotate(-5deg);transition:transform .4s;z-index:3;text-align:left}.hero-main-card:hover{transform:rotate(-2deg) translateY(-5px)}.hero-main-card>img{width:100%;height:210px;object-fit:cover;object-position:top;display:block}.hero-card-top{display:flex;gap:7px;align-items:center;padding:12px 14px;font-size:8px;letter-spacing:1.5px;color:#b9d2ef}.hero-card-corner{margin-left:auto;color:var(--cyan);font-size:16px}.hero-card-bottom{padding:14px 16px;display:flex;justify-content:space-between;gap:10px}.hero-card-bottom small{display:block;color:#8095b2;font-size:7px;letter-spacing:1px}.hero-card-bottom strong{display:block;font-size:16px;font-weight:650}.hero-card-bottom>div:last-child{text-align:right}.hero-card-bottom>div:last-child strong{color:var(--gold)}.hero-back-card{position:absolute;left:58px;top:78px;width:285px;height:200px;border:1px solid #647ea574;border-radius:12px;background:#23334c;padding:10px;transform:rotate(10deg) translate(70px,-5px);opacity:.62;box-shadow:0 20px 40px #0005}.hero-back-card img{height:100%;width:100%;object-fit:cover;object-position:top;border-radius:6px}.floating-caption{position:absolute;right:-5px;bottom:0;font-size:31px;font-weight:200;color:#3b537577;letter-spacing:4px;line-height:1.1;z-index:0}.floating-caption strong{font-size:49px;color:#3f5b8130;letter-spacing:1px}.slide-controls{position:absolute;bottom:24px;left:30px;display:flex;align-items:center;gap:15px;font-size:9px;color:var(--muted)}.slide-controls>button{border:1px solid #32445d;width:29px;height:29px;border-radius:50%;padding:0;color:#c1d3ec;font-size:15px}.slide-controls>button:hover{border-color:var(--cyan)}.slide-dots{display:flex;gap:5px;margin-right:6px}.slide-dots button{width:18px;height:3px;padding:0;background:#2e415b;border-radius:3px;transition:width .25s}.slide-dots button.active{width:36px;background:var(--cyan)}.hero-bottom-line{position:absolute;bottom:0;left:0;width:24%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}.hero-enter{animation:enter .6s both}.slide-changing{animation:enter .35s both}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#111a28;border-radius:12px;margin:25px 0 55px;padding:20px 23px}.trust-strip>div{display:grid;grid-template-columns:26px 1fr;column-gap:9px;padding:0 13px;border-right:1px solid var(--line)}.trust-strip>div:last-child{border:0}.trust-icon{grid-row:span 2;color:var(--cyan);font-size:25px;line-height:1.2}.trust-strip strong{font-size:10px;font-weight:600}.trust-strip small{font-size:8px;color:#7d91ad;margin-top:3px}.section{margin:50px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}h2{font-size:28px;letter-spacing:-.8px;margin:7px 0 0;line-height:1.25}.section-heading>.text-link{margin-bottom:3px}.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.category{position:relative;text-align:left;background:#111a28;border:1px solid var(--line);border-radius:11px;padding:20px 18px;min-height:156px;overflow:hidden;transition:transform .25s,border-color .25s}.category:hover{transform:translateY(-4px);border-color:#5085b8}.category img{display:block;width:64px;height:60px;object-fit:contain;filter:drop-shadow(0 4px 12px #0006);margin-bottom:15px}.category strong{display:block;font-size:13px}.category>span{display:block;font-size:9px;color:var(--muted);margin-top:5px}.game-category{background:linear-gradient(140deg,#183758,#122034);border-color:#2e6085}.game-icon{width:70px;height:61px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:2px solid var(--gold);color:var(--gold);font-size:20px;font-weight:900;line-height:1.2;margin-bottom:14px}.game-icon small{font-size:9px;letter-spacing:2px}.section-tabs{display:flex;gap:6px}.tab{padding:7px 12px;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:6px}.tab.active{color:var(--cyan);border-color:#306073;background:#142c38}.grid{display:grid;gap:19px}.home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;min-width:0}.card:hover{transform:translateY(-5px);border-color:#517ba7;box-shadow:0 14px 30px #0003}.card-image{display:block;position:relative;padding:0;width:100%;background:#0b1424;overflow:hidden;text-align:left}.card-image img{width:100%;height:177px;object-fit:cover;object-position:top;display:block;transition:transform .4s}.card:hover .card-image img{transform:scale(1.035)}.card-badges{position:absolute;left:9px;top:9px;display:flex;gap:5px}.badge{display:inline-flex;padding:3px 7px;background:#091726e8;border:1px solid #65b4ca40;backdrop-filter:blur(8px);color:#b1edff;border-radius:4px;font-size:8px;font-weight:600}.badge.gold{color:#f7dfa0;background:#35281ae8;border-color:#d0ad6c60}.badge.sold{color:#ffc3c3;background:#3d2028dd;border-color:#b25a6360}.card-image-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#050b16cc);padding:16px 12px 8px;font-size:8px;letter-spacing:1px;color:#e3edfc}.card-body{padding:15px}.card-code-line{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:7px}.card-code-line>span{font-size:8px;color:#7891b4;letter-spacing:1px}.card-code-line .status{display:flex;align-items:center;gap:4px;font-size:8px;letter-spacing:0}.status i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#6ccda8}.card h3{margin:0;font-size:13px;font-weight:650;letter-spacing:-.2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.card-tags{display:flex;gap:5px;flex-wrap:wrap;min-height:20px;margin-top:10px}.card-tags span{font-size:8px;color:#9fb3ce;background:#1c2a3d;padding:2px 6px;border:1px solid #2b3a50;border-radius:3px}.card-tags .neutral{color:#71849e;background:transparent;border-color:transparent;padding-left:0}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}.card-price{font-weight:750;color:var(--gold);font-size:18px;letter-spacing:-.5px}.card-price small{display:block;font-size:7px;letter-spacing:1px;color:#8298b7;font-weight:500;margin-bottom:2px}.card-buy{width:30px;height:30px;color:#c9e3ff;border:1px solid #3c5a7e;background:#1b3452;border-radius:6px;font-size:19px;line-height:1}.card-foot{font-size:7px;color:#7893b0;margin-top:9px;display:flex;gap:5px;align-items:center}.card-foot span{color:#7faecb}.browse-all{display:flex;margin:28px auto 0;width:260px}.upgrade-banner{display:flex;align-items:center;justify-content:space-between;padding:36px 40px;border-radius:14px;background:linear-gradient(115deg,#182d4e,#122034 70%);border:1px solid #2e4c73;overflow:hidden;position:relative;margin:50px 0}.upgrade-banner h2{font-size:27px}.upgrade-banner p{color:#94a9c5;font-size:12px;margin-bottom:0}.upgrade-decoration{position:absolute;font-size:190px;color:#3d6da328;right:140px;top:-85px;transform:rotate(10deg);pointer-events:none}.upgrade-banner>.primary{z-index:1}.page-heading{padding:35px 0 28px}.breadcrumb{font-size:10px;color:#8598b6;display:flex;gap:10px;margin-bottom:28px;align-items:center}.breadcrumb a:hover{color:var(--cyan)}.breadcrumb span:not(:last-child){color:#38506f}.page-heading h1{font-size:46px;margin:14px 0}.page-heading p{font-size:12px;color:var(--muted)}.catalog-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:30px;align-items:start}.filter-sidebar{background:#111a28;border:1px solid var(--line);border-radius:12px;padding:20px;position:sticky;top:94px}.sidebar-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.sidebar-title h2{font-size:18px;margin:0}.filter-label{display:block;color:#91a6c3;font-size:8px;letter-spacing:1px}.filter-label input{width:100%;padding:11px;margin-top:10px;font-size:11px}.filter-section{border-bottom:1px solid var(--line);padding:20px 0}.filter-section h3{font-size:8px;color:#91a6c3;letter-spacing:1.1px;margin:0 0 13px}.price-inputs{display:flex;gap:8px;align-items:center}.price-inputs label{display:block;flex:1;min-width:0;font-size:8px;color:#68819e}.price-inputs input{display:block;width:100%;padding:8px;margin-top:5px;font-size:10px}.price-inputs>span{padding-top:18px;color:#526881}.price-presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.price-presets button{font-size:9px;border:1px solid #30415a;background:#182436;border-radius:5px;padding:7px 2px;color:#a6bbd5}.price-presets button.active{color:var(--cyan);border-color:#528aab;background:#19364a}.checkbox{display:flex;gap:8px;align-items:center;font-size:11px;color:#adbed5;margin:9px 0}.checkbox input{accent-color:var(--blue);width:13px;height:13px}.checkbox .tag-count{margin-left:auto;font-size:8px;color:#677e9e;background:#1b2b41;padding:1px 5px;border-radius:3px}.filter-help{font-size:8px;line-height:1.8;color:#7085a3;margin-bottom:0}.sidebar-help{margin-top:20px;padding:15px;background:#16273c;border:1px solid #2b435c;border-radius:8px}.sidebar-help>span{display:block;color:var(--cyan);font-size:20px}.sidebar-help strong{font-size:11px}.sidebar-help p{font-size:9px;color:#8ea6c4}.sidebar-help .outline{font-size:10px;padding:7px 12px}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px}.catalog-toolbar p{font-size:11px;color:#9fb1c9;margin:0}.catalog-toolbar>div{display:flex;gap:8px}.catalog-toolbar label{display:flex;align-items:center;gap:10px;font-size:9px;color:#7d94b2}.catalog-toolbar select{font-size:10px}.active-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}.active-filters:empty{display:none}.active-filters button{font-size:9px;padding:4px 8px;border:1px solid #3e5f81;border-radius:5px;color:#b3d5f2;background:#192c42}.empty{text-align:center;padding:60px 20px;background:var(--panel);border:1px dashed #304562;border-radius:12px}.empty>span{font-size:40px;color:var(--cyan)}.empty p{font-size:12px;color:var(--muted)}.detail-breadcrumb{margin:30px 0}.detail-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}.detail-gallery{min-width:0}.gallery-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#7790b3;margin-bottom:12px}.gallery-main{width:100%;padding:0;border:1px solid #324c6e;background:#131e2f;border-radius:13px;overflow:hidden;cursor:zoom-in}.gallery-main img{width:100%;display:block}.gallery-thumbs{display:flex;gap:12px;margin-top:15px;align-items:stretch}.gallery-thumb{width:95px;padding:4px;border:1px solid var(--cyan);border-radius:7px;background:#15273c;text-align:left}.gallery-thumb img{width:100%;height:52px;object-fit:cover;object-position:top;border-radius:3px}.gallery-thumb span{font-size:8px;display:block;margin:3px 5px;color:#bad9ef}.video-placeholder{display:flex;align-items:center;gap:12px;padding:12px 18px;border:1px dashed #2a3d58;background:#111a27;border-radius:7px;color:#748dac;font-size:11px;flex:1}.video-placeholder>span{font-size:28px}.video-placeholder small{display:block;font-size:8px;margin-top:3px}.image-note{font-size:9px;color:#6985a6}.detail-info h1{font-size:37px;margin:13px 0 22px}.detail-badges{display:flex;gap:6px;margin-top:14px}.detail-price-block{padding:20px 22px;background:linear-gradient(115deg,#1a2b44,#141f30);border:1px solid #304762;border-radius:10px}.detail-price-block>span{font-size:8px;letter-spacing:1.5px;color:#97a9c5;display:block}.detail-price-block strong{display:block;font-size:33px;letter-spacing:-1px;color:var(--gold);margin:3px 0}.detail-price-block small{font-size:9px;color:#7e97b9}.detail-summary{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.detail-summary span{font-size:10px;border:1px solid #2d4665;border-radius:5px;color:#a9c4e3;background:#192b41;padding:5px 9px}.detail-cta{display:flex;gap:10px;margin-top:20px}.detail-cta>*{flex:1;padding:14px;font-size:12px}.detail-cta .primary{flex:1.4}#detail-installment{margin:12px 0 24px;padding:0;font-size:10px}.specs{border-top:1px solid var(--line);padding-top:20px}.specs h2{font-size:17px;margin:0 0 13px}.specs table{width:100%;border-collapse:collapse;font-size:11px}.specs td{padding:10px 0;border-bottom:1px solid #1d2c41;vertical-align:top}.specs td:first-child{color:#7e96b5;width:39%;padding-right:12px}.specs td:last-child{color:#b6c8e0}.detail-policy{display:flex;gap:12px;align-items:center;padding:15px;background:#112333;border:1px solid #25485f;border-radius:8px;margin-top:22px}.detail-policy>span{font-size:26px;color:var(--cyan)}.detail-policy p{font-size:9px;color:#829eb8;margin:0}.detail-policy strong{color:#b7d6ea}.detail-policy>.text-link{white-space:nowrap;font-size:9px}.mobile-buy-bar{display:none}.policy-section{padding-top:10px;scroll-margin-top:90px}.section-note{font-size:9px;color:#6f89aa}.policy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.policy-grid article{border:1px solid var(--line);border-radius:10px;padding:25px 20px;background:#101925}.policy-number{font-size:8px;color:#66b3d5;letter-spacing:1.2px}.policy-grid h3{font-size:16px;letter-spacing:-.4px;margin:15px 0 12px;line-height:1.3}.policy-grid p{font-size:10px;color:#8198b7;line-height:1.9;margin:0}.contact-section{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:42px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.contact-section h2{font-size:34px;line-height:1.2;margin-top:13px}.contact-section>div:last-child{display:flex;flex-wrap:wrap;gap:10px;max-width:380px;justify-content:flex-end}.contact-section p{width:100%;font-size:10px;color:#6884a9;text-align:right;margin:0}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;font-size:9px;color:#6d87ab}.footer-brand{font-weight:700;font-size:19px;letter-spacing:-.5px;color:#c3d0e5}.footer-brand span{color:var(--cyan)}.chat-launcher{position:fixed;bottom:22px;right:24px;z-index:35;display:flex;align-items:center;gap:10px;padding:12px 17px;background:#172f4d;border:1px solid #527aa9;border-radius:12px;box-shadow:0 5px 25px #0005;font-size:11px}.chat-launcher>span:first-child{font-size:20px;color:var(--cyan)}.chat-launcher i{width:5px;height:5px;border-radius:50%;background:#6dd9b1}.assistant{position:fixed;bottom:82px;right:24px;width:360px;height:570px;max-height:calc(100dvh - 105px);z-index:45;background:#111d2e;border:1px solid #3b5474;border-radius:15px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 70px #0007}.chat-heading{display:flex;align-items:center;gap:9px;padding:14px 13px;border-bottom:1px solid var(--line);background:#16253b}.chat-heading h2{font-size:13px;margin:0}.chat-heading span{font-size:8px;color:#7f9bbc}.bot-mark{font-size:24px;color:var(--cyan)}#reset-chat{margin-left:auto}.chat-messages{flex:1;overflow:auto;padding:16px 13px;overscroll-behavior:contain}.message{max-width:95%;margin-bottom:14px;font-size:11px}.speaker{font-size:8px;letter-spacing:.5px;color:#6f8baa;margin-bottom:5px}.bubble{padding:11px 12px;background:#1b2a40;border:1px solid #283b55;border-radius:0 10px 10px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.message.user{margin-left:auto;max-width:85%}.message.user .speaker{text-align:right}.message.user .bubble{background:#244f87;border-color:#386aac;border-radius:10px 0 10px 10px;color:#ecf4ff}.chat-links{display:flex;gap:5px;margin-top:8px}.chat-links a{font-size:9px;border:1px solid #406184;color:#b0d8ff;border-radius:5px;padding:6px 10px;background:#18304b}.mini-card{display:flex;gap:9px;width:100%;text-align:left;background:#132238;border:1px solid var(--line);border-radius:7px;padding:7px;margin-top:6px}.mini-card img{width:65px;height:49px;object-fit:cover;object-position:top;border-radius:4px}.mini-card strong{display:block;font-size:10px}.mini-card span{font-size:10px;color:var(--gold);font-weight:650}.mini-card small{display:block;font-size:8px;color:#7196b5}.feedback{font-size:8px;color:#627fa1;margin-top:5px}.feedback button{padding:2px 6px}.feedback .selected{background:#284b71;border-radius:3px}.suggestions{display:flex;flex-wrap:wrap;gap:5px;padding:10px}.suggestions button{border:1px solid #344b68;color:#9fbcdf;border-radius:5px;font-size:8px;padding:5px 7px}#chat-form{display:flex;gap:5px;border:1px solid #345073;border-radius:8px;margin:0 10px 8px;padding:6px;background:#0e1b2e}#chat-input{width:100%;border:0;outline:0;background:none;padding:5px;font-size:10px}.send{width:30px;border-radius:5px;background:#376faf;font-size:20px;color:white}.chat-disclaimer{font-size:7px;color:#7892b0;text-align:center}.export{margin:8px auto 11px;font-size:8px}dialog{color:var(--text);background:#132035;border:1px solid #3c5474;border-radius:15px;box-shadow:0 20px 90px #0008;max-height:90dvh;padding:25px;width:min(460px,94vw)}dialog::backdrop{background:#030912c4;backdrop-filter:blur(8px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-heading h2{font-size:22px;margin-top:7px}.dialog-heading>.icon-button{flex-shrink:0}.dialog-heading>div:last-child{display:flex;align-items:center;gap:10px}#contact-description{font-size:12px;color:#9db3d0;margin:20px 0}.contact-code{background:#1b314e;border:1px solid #355476;border-radius:7px;padding:10px 15px;font-size:12px;color:#bfdcf8;margin-bottom:18px}#contact-dialog>.primary,#contact-dialog>.outline{display:flex;width:100%;margin-top:10px}.dialog-note{font-size:9px;color:#7f98b8;margin:18px 0 0}#image-dialog{width:min(1280px,96vw);padding:0}#image-dialog .dialog-heading{padding:15px 20px}.image-viewport{max-height:78dvh;overflow:auto;overscroll-behavior:contain;background:#09111e}.image-viewport img{width:100%;display:block}.image-viewport.zoom img{width:2048px;max-width:none}.menu-mobile{display:none}.reveal{opacity:1}.js-motion .reveal.pending{opacity:0;transform:translateY(22px)}.js-motion .reveal{transition:opacity .65s,transform .65s}.js-motion .reveal.visible{opacity:1;transform:translateY(0)}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){.hero{padding-left:40px;padding-right:40px}}@media(max-width:1100px){nav{gap:19px}.hero{padding-left:10px;padding-right:10px;min-height:530px}h1{font-size:48px}.hero-art{padding-left:20px}.hero-main-card{width:310px}.hero-main-card>img{height:180px}.hero-back-card{width:255px;left:0}.hero-meta{gap:15px}.hero-meta>div{padding-right:15px}.trust-strip{padding:18px 8px}.trust-strip strong{font-size:9px}.trust-strip small{font-size:7px}.catalog-layout{grid-template-columns:215px minmax(0,1fr);gap:20px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-grid{gap:14px}.card-image img{height:140px}.card-body{padding:12px}.card-price{font-size:16px}.category-grid{gap:10px}.category{padding:17px 14px}.detail-layout{gap:25px}.policy-grid article{padding:20px 15px}.policy-grid h3{font-size:14px}}@media(max-width:850px){header{padding:0 20px;gap:15px}.brand{font-size:21px}.brand img{width:36px;height:36px}nav{gap:15px;font-size:10px}.header-actions{gap:8px}.small-primary{font-size:9px}.hero h1{font-size:44px}.hero-meta strong{font-size:17px}.hero-meta span{font-size:6px}.hero-main-card{width:270px}.hero-main-card>img{height:165px}.hero-back-card{width:220px;left:-5px;top:85px}.floating-tag{font-size:11px;right:0}.floating-caption{font-size:20px}.floating-caption strong{font-size:37px}.hero{min-height:500px;padding-top:45px}.orbit{right:-100px}.trust-strip{grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:40px}.trust-strip>div:nth-child(2){border:0}.trust-strip strong{font-size:11px}.trust-strip small{font-size:9px}.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-image img{height:200px}.category-grid{grid-template-columns:repeat(5,1fr)}.category{padding:15px 10px;min-height:143px}.category strong{font-size:11px}.category>span{font-size:8px}.category img{width:50px;height:50px}.game-icon{width:54px;height:50px;font-size:15px}.game-icon small{font-size:7px}.policy-grid{grid-template-columns:repeat(2,1fr)}.detail-layout{grid-template-columns:1fr 1fr}.detail-info h1{font-size:28px}.detail-price-block strong{font-size:27px}.detail-cta{flex-direction:column}.detail-policy{align-items:start}.detail-policy>.text-link{display:none}.catalog-grid .card-image img{height:150px}.catalog-toolbar label>span{display:none}}@media(max-width:640px){.announcement{font-size:7px;letter-spacing:.4px;height:28px;gap:7px}.announcement a{display:none}header,header.scrolled{height:70px;padding:0 16px}.brand{font-size:21px}.brand small{font-size:6px}.header-actions{gap:7px}.small-primary{font-size:9px;padding:7px 9px}.header-actions>#nav-search{display:none}.menu-mobile{display:inline-flex;align-items:center;justify-content:center}nav{display:none;position:absolute;left:0;right:0;top:70px;flex-direction:column;background:#111d2e;border-bottom:1px solid var(--line);padding:20px;gap:18px;font-size:13px}nav.mobile-open{display:flex}nav a.active::after{display:none}main{padding:0 16px}.hero{grid-template-columns:1fr;padding:28px 6px 56px;min-height:0}.hero-copy{padding-top:5px}.eyebrow{font-size:8px;letter-spacing:1.3px}.hero-kicker{margin-top:21px}.hero h1{font-size:45px;letter-spacing:-1.7px;margin:16px 0}.hero p{font-size:12px;max-width:320px}.hero-actions{margin-top:22px}.hero-meta{margin-top:26px;gap:17px}.hero-meta strong{font-size:18px}.hero-meta span{font-size:6px}.hero-art{height:290px;margin-top:28px;padding:30px 20px 0}.hero-main-card{width:280px;transform:rotate(-4deg)}.hero-main-card>img{height:155px}.hero-card-bottom strong{font-size:14px}.hero-back-card{left:calc(50% - 155px);top:42px;width:225px;height:150px}.floating-tag{top:0;right:12px;font-size:10px}.floating-tag span{font-size:6px}.floating-caption{display:none}.orbit{right:calc(50% - 230px);top:-50px}.orbit-two{right:calc(50% - 250px)}.slide-controls{left:8px;bottom:16px;gap:12px}.hero-bottom-line{width:50%}.trust-strip{padding:19px 10px;gap:18px;margin:20px 0 35px}.trust-strip>div{padding:0 7px;grid-template-columns:22px 1fr;column-gap:5px}.trust-strip strong{font-size:9px}.trust-strip small{font-size:7px}.trust-icon{font-size:20px}.section{margin:35px 0}.section-heading{gap:12px;align-items:center;margin-bottom:19px}h2{font-size:22px}.section-heading>.text-link{font-size:8px;white-space:nowrap}.category-grid{grid-template-columns:repeat(3,1fr);gap:9px}.category:first-child{grid-row:span 2;display:flex;justify-content:center;flex-direction:column;min-height:230px}.category{padding:13px 11px;min-height:113px}.category img{width:40px;height:36px;margin-bottom:10px}.category strong{font-size:10px}.category>span{font-size:7px}.game-icon{width:65px;height:57px;font-size:19px;margin-bottom:18px}.home-grid,.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card-image img,.catalog-grid .card-image img{height:135px}.card-body{padding:11px}.card-price{font-size:15px}.card h3{font-size:11px}.card-tags span{font-size:7px}.card-code-line>span{font-size:7px}.card-code-line .status{font-size:7px}.card-foot{font-size:6px}.card-bottom{margin-top:10px;padding-top:10px}.card-buy{height:27px;width:27px}.badge{font-size:7px;padding:2px 5px}.card-image-label{font-size:6px}.section-tabs{gap:4px}.tab{font-size:8px;padding:6px 9px}.browse-all{font-size:10px;width:235px;margin-top:22px}.upgrade-banner{padding:25px 22px;display:block;margin:35px 0}.upgrade-banner h2{font-size:23px;max-width:220px}.upgrade-banner p{font-size:10px;max-width:230px}.upgrade-banner>.primary{margin-top:20px;font-size:10px}.upgrade-decoration{right:-30px;top:-25px}.page-heading{padding-top:24px}.page-heading h1{font-size:37px;margin:12px 0}.page-heading p{font-size:11px}.breadcrumb{margin-bottom:22px;font-size:9px}.catalog-layout{display:block}.filter-sidebar{display:none}.filter-sidebar.open{display:block;position:fixed;top:76px;bottom:15px;left:12px;right:12px;z-index:40;overflow:auto;box-shadow:0 0 0 100vmax #0009;padding:22px}.sidebar-title .icon-button{margin-left:8px}.sidebar-title .text-link{margin-left:auto}.catalog-toolbar{gap:6px;margin-bottom:14px}.catalog-toolbar p{font-size:9px}.catalog-toolbar select{font-size:9px;padding:8px;max-width:108px}.catalog-toolbar .outline{padding:7px 9px;font-size:9px;gap:6px}.detail-breadcrumb{margin:23px 0}.detail-layout{grid-template-columns:1fr;gap:25px}.detail-info h1{font-size:31px}.gallery-thumbs{gap:10px}.video-placeholder{padding:10px}.detail-cta{flex-direction:row}.detail-cta>*{font-size:10px;padding:12px}.detail-price-block strong{font-size:31px}.detail-policy>.text-link{display:block}.policy-grid{gap:10px}.policy-grid article{padding:18px 14px}.policy-grid h3{font-size:14px}.policy-grid p{font-size:9px}.policy-number{font-size:7px}.section-note{display:none}.contact-section{display:block;padding:28px 0}.contact-section h2{font-size:30px}.contact-section>div:last-child{justify-content:flex-start;margin-top:22px;max-width:none}.contact-section .primary,.contact-section .outline{padding:10px 14px;font-size:10px}.contact-section p{text-align:left;font-size:9px}footer{flex-wrap:wrap;padding:22px 0 85px;gap:10px}footer p{width:100%;order:3;font-size:8px;margin:0}.footer-brand{font-size:17px}.chat-launcher{bottom:15px;right:15px;padding:9px 12px;font-size:9px;border-radius:10px}.chat-launcher>span:first-child{font-size:18px}.assistant{width:auto;left:10px;right:10px;bottom:72px;height:70dvh;max-height:640px}.mobile-buy-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:32;align-items:center;justify-content:space-between;background:#142034f5;backdrop-filter:blur(12px);border-top:1px solid #345071;padding:12px 18px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -6px 25px #0004}.mobile-buy-bar small{font-size:7px;color:#91a9c9;display:block;letter-spacing:1px}.mobile-buy-bar strong{font-size:18px;color:var(--gold)}.mobile-buy-bar .primary{font-size:12px;padding:11px 24px}body.detail-active .chat-launcher{bottom:92px}body.detail-active .assistant{bottom:151px;max-height:calc(100dvh - 180px)}.dialog-heading h2{font-size:19px}.dialog-heading .text-link{font-size:8px}#image-dialog .dialog-heading{padding:12px}.image-viewport{max-height:80dvh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .reveal.pending{opacity:1;transform:none}}@media(max-width:370px){.brand{font-size:18px}.brand img{width:30px;height:30px}.hero h1{font-size:40px}.card-image img{height:115px}.hero-main-card{width:250px}.hero-meta{gap:10px}.hero-meta>div{padding-right:10px}.category>span{font-size:6px}}
.saved-nav{display:flex;align-items:center;gap:5px;color:#b5c8e3;font-size:21px;line-height:1}.saved-nav b{font-size:8px;border-radius:4px;background:#234062;color:#cde2ff;padding:3px 5px}.save-button{position:absolute;right:9px;top:9px;z-index:3;display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:#0a1528db;border:1px solid #405d7d;color:#deebfc;font-size:18px;transition:background .2s}.save-button.saved{color:var(--cyan);background:#163b50;border-color:#5e9ab9}.card{position:relative}.card-image:focus-visible{outline-offset:-3px}.detail-save.saved{color:var(--cyan);border-color:#5294b4}.detail-cta{flex-wrap:wrap}.detail-cta>#detail-ask{flex-basis:100%;padding:9px;font-size:10px}.library-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px}.library-storage-note{font-size:10px;line-height:1.8;color:#8298b7;margin:25px 0}.library-empty-description{font-size:11px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:60;background:#1c344d;border:1px solid #5485a8;color:#d8effb;padding:10px 18px;border-radius:9px;box-shadow:0 8px 30px #0006;font-size:11px;max-width:90vw;text-align:center} @media(max-width:850px){nav{gap:12px}.brand{font-size:20px}.header-actions{gap:8px}}@media(max-width:640px){.saved-nav{font-size:20px;gap:3px}.saved-nav b{font-size:7px;padding:3px}.header-actions{gap:5px}.small-primary{display:none}.detail-cta{flex-wrap:wrap}.detail-cta .detail-save{flex:1}.detail-cta>#detail-ask{flex-basis:100%}.toast{bottom:90px;width:max-content}.library-toolbar .tab{font-size:10px}.library-storage-note{font-size:9px}}
/* Củ Chuối — cinematic storefront, mobile-first product reading */
:root{--bg:#0d0d0e;--panel:#171718;--panel2:#202021;--line:#34312a;--text:#f5f2eb;--muted:#aaa69e;--blue:#dec18a;--cyan:#dec18a;--gold:#e5ca95;--radius:12px;color-scheme:dark}
body{background:var(--bg);font-size:15px;line-height:1.65}html{scroll-padding-top:96px}button,a,input,select{ -webkit-tap-highlight-color:transparent}button,input,select{min-height:44px}a,button{overflow-wrap:anywhere}input,select{background:#111112;border-color:#444035;border-radius:8px;font-size:15px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #eed7ad;outline-offset:3px}.announcement{height:auto;min-height:30px;padding:6px 16px;background:#211e17;color:#c9bb9e;font-size:10px;letter-spacing:.8px;text-align:center}header,header.scrolled{height:80px;background:#0d0d0ef2;border-color:#34312a;box-shadow:none;gap:22px}.brand{gap:10px;white-space:nowrap}.brand>span{font-size:23px}.brand small{font-size:9px;color:#aaa08c;letter-spacing:2px;margin-top:1px}.banana-logo{width:42px;height:42px;background:#242016;border:1px solid #56482b;border-radius:12px;color:#e8c889;flex-shrink:0}.banana-logo svg{width:32px;height:32px}nav{font-size:13px;gap:25px}nav span,.saved-nav b{background:#3c3323;color:#ead1a2}nav a.active::after{bottom:-27px}.saved-nav{color:#e3d5bb;min-height:44px}.icon-button{width:44px;height:44px;min-width:44px;color:#c9c2b6}.small-primary{background:#e2c68f;color:#211b11;border-color:#e2c68f;padding:10px 15px;font-size:12px;font-weight:700}.primary{background:#dec18a;color:#20190d;border:1px solid #e6ca98;box-shadow:0 6px 22px #d9b57412;font-size:14px;font-weight:750;gap:15px;padding:13px 20px}.primary:hover{background:#f1d6a3}.outline,.subtle{background:#1d1c1a;border:1px solid #484236;color:#e4dac6;font-size:13px;padding:12px 18px;gap:12px}.outline:hover,.subtle:hover{background:#2a261d;border-color:#d0b47f}.text-link{color:#d2bc94;font-size:12px}.eyebrow{color:#b6a385;font-size:10px;letter-spacing:1.6px}h1,h2,h3{color:#f4f0e7}h2{font-size:31px;letter-spacing:-.8px;line-height:1.25}main{max-width:1380px;padding:0 36px}.hero{padding:44px 10px 62px;min-height:450px;grid-template-columns:1.05fr 1fr;border-bottom:1px solid #423a2b;gap:22px}.hero-grid{background-image:linear-gradient(#a1854510 1px,transparent 1px),linear-gradient(90deg,#a1854510 1px,transparent 1px);background-size:64px 64px;opacity:.5}.hero-light{background:radial-gradient(ellipse,#97733324,transparent 65%);width:780px;height:600px;right:-130px;top:-100px}.hero-copy{padding-top:12px}.hero-kicker{background:none;border:0;border-left:2px solid #d6b879;border-radius:0;padding:0 10px;margin-top:27px;font-size:9px;color:#bbaa8c;letter-spacing:1.3px}.hero h1{font-size:clamp(40px,4.1vw,59px);line-height:1.12;font-weight:760;letter-spacing:-2.5px;margin:18px 0}.hero h1 em{background:linear-gradient(105deg,#f2dfb6,#c59d57);background-clip:text;-webkit-background-clip:text;color:transparent}.hero p{font-size:14px;line-height:1.8;max-width:445px;color:#afa99d}.hero-actions{margin-top:24px;gap:10px}.hero-meta{gap:17px;margin-top:27px;flex-wrap:wrap}.hero-meta>span{font-size:10px;color:#b9b0a0;display:flex;gap:7px;align-items:center}.hero-meta i{font-style:normal;color:#d7b67a;font-size:10px;border:1px solid #51422c;border-radius:50%;width:23px;height:23px;display:grid;place-items:center}.hero-art{padding:34px 15px 12px;align-items:center}.hero-main-card{width:min(430px,100%);transform:rotate(-3deg);background:linear-gradient(140deg,#2d291f,#151514);border:1px solid #8d75484d;box-shadow:0 25px 60px #0009,0 0 60px #bd95450b;border-radius:12px;padding:12px;text-align:left}.hero-main-card:hover{transform:rotate(0deg) translateY(-3px)}.hero-main-card>img{height:auto;max-height:240px;object-fit:contain;display:block;width:100%;border-radius:5px;background:#080808}.hero-card-top{color:#d4bd92;padding:2px 3px 11px;font-size:9px}.hero-card-bottom{padding:12px 3px 2px}.hero-card-bottom small{color:#9d927e}.hero-card-bottom strong{font-size:19px}.hero-back-card{display:none}.floating-tag{color:#c5b18c;font-size:12px;right:18px;top:3px;letter-spacing:3px}.floating-tag span{color:#8a7758}.floating-caption{color:#57482e35;right:0;bottom:-22px;font-size:38px;z-index:-1;line-height:1.05;letter-spacing:1px}.orbit{border-color:#81673724;right:5px;top:25px}.orbit-two{border-color:#81673715}.slide-controls{left:10px;bottom:13px;gap:12px}.slide-controls button{min-height:30px;border-color:#4a4131;color:#cfb687}.slide-controls #slide-dots button{min-height:14px}.hero-bottom-line{background:#c9a264;width:22%}.section{margin:44px 0}.section-heading{margin-bottom:23px;gap:18px}.quick-finder{margin:26px 0 40px;padding:24px 26px;background:linear-gradient(110deg,#222018,#161616 75%);border:1px solid #4a402c;border-radius:12px;display:grid;grid-template-columns:1fr 1.45fr;gap:18px 28px;align-items:center}.quick-finder h2{font-size:23px;margin:7px 0 0}.quick-finder form{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,.8fr) auto;gap:9px}.quick-finder input,.quick-finder select{width:100%;height:49px;padding:10px 13px}.quick-budgets{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:15px;border-top:1px solid #3c3528}.quick-budgets>span{font-size:11px;color:#a49983;margin-right:5px}.quick-budgets button,.quick-budgets a{padding:6px 14px;min-height:34px;border-radius:6px;background:#29251d;border:1px solid #4b402a;color:#dac7a3;font-size:12px;display:inline-flex;align-items:center}.quick-budgets a{margin-left:auto;background:none;border:0}.grid,.home-grid,.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#171717;border:1px solid #3b3529;border-radius:12px;overflow:hidden;min-width:0;transition:transform .2s,border-color .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);border-color:#927749;box-shadow:0 15px 32px #0005}.card-image{padding:0;background:#080808;width:100%;display:block;position:relative}.card-image img,.catalog-grid .card-image img{height:auto;aspect-ratio:1.56;object-fit:contain;width:100%;display:block;background:#080808}.card-image-label{display:none}.card-badges{left:10px;top:10px;bottom:auto}.badge,.badge.gold{background:#19170fe8;border:1px solid #7b653e;color:#e2c28e;font-size:9px}.save-button{right:10px;top:10px;width:40px;height:40px;min-height:40px;background:#14120ef2;border:1px solid #87704a;color:#e2d4b8;font-size:23px}.save-button.saved{background:#4b3b20;color:#ffde91;border-color:#ddba76}.card-body{padding:18px}.card-code-line{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}.card-code-line>span,.card-code-line .status{font-size:9px;letter-spacing:.4px}.card-code-line .status{color:#ad9f86}.status i{background:#bfa16b}.card h3{font-size:21px;line-height:1.35;margin:10px 0;overflow-wrap:anywhere}.card-tags{min-height:27px;gap:6px}.card-tags span{font-size:10px;padding:3px 8px;background:#28251e;border-color:#51462f;color:#cab793}.card-tags .neutral{color:#a99e89;background:none}.card-bottom{padding-top:15px;margin-top:12px;border-color:#363126;align-items:center;gap:10px}.card-price{font-size:24px;color:#e6c991;line-height:1.3;overflow-wrap:anywhere}.card-price small{font-size:8px;letter-spacing:1px;color:#b1a38d;margin-bottom:5px}.card-buy{width:auto;height:auto;min-height:42px;min-width:86px;padding:9px 11px;background:#2a251c;border:1px solid #645234;border-radius:7px;font-size:12px;color:#e2c68f;flex-shrink:0}.card-inquiry{width:100%;margin-top:15px;border-radius:7px;background:#dec18a;color:#221b0e;padding:11px 12px;min-height:46px;font-size:13px;font-weight:750}.card-inquiry:hover{background:#efd4a1}.card-foot{border:0;padding-top:10px;color:#a99d86;font-size:10px;display:flex;gap:7px}.section-tabs{gap:8px}.tab{font-size:12px;padding:9px 14px;border-color:#53442b}.tab.active{background:#392e1b;border-color:#917441;color:#e9c994}.browse-all{width:auto;min-width:260px;margin:25px auto 0}.category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.category,.category.game-category{background:linear-gradient(135deg,#252219,#171716);border:1px solid #403725;min-height:145px;border-radius:10px;padding:18px;text-align:left}.category:hover{border-color:#ab8850;background:#282217}.category img{width:50px;height:46px;object-fit:contain;margin-bottom:12px}.category strong{font-size:14px}.category>span{font-size:10px;color:#a99b80}.game-icon{border-color:#8c703f;color:#e5c58c}.upgrade-banner{background:radial-gradient(ellipse at 100% 60%,#74582745,transparent 55%),#1c1a15;border:1px solid #56452b;padding:32px;border-radius:12px;margin:42px 0}.upgrade-decoration{color:#b6944929}.upgrade-banner h2{font-size:29px;max-width:none}.upgrade-banner p{font-size:13px;color:#b0a38b;max-width:480px}.page-heading{padding-top:28px}.page-heading h1{font-size:46px}.page-heading p{font-size:14px}.catalog-layout{grid-template-columns:235px minmax(0,1fr);gap:25px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-sidebar{background:#191815;border:1px solid #453c2b;border-radius:12px;padding:21px;top:98px}.filter-section{border-color:#3e3527}.filter-label,.filter-section h3{color:#c0ac8a;font-size:11px}.filter-label input,.price-inputs input{font-size:14px;padding:10px;width:100%}.filter-help{font-size:11px;line-height:1.65}.checkbox{font-size:13px;gap:9px;min-height:38px}.checkbox input{min-height:0;accent-color:#d9b981}.price-presets button{background:#282319;border-color:#52422b;font-size:11px}.price-presets button.active{background:#514027;color:#f0d8ac;border-color:#c39c5c}.sidebar-help{background:#242017;border-color:#4d3f28}.catalog-toolbar{gap:12px;align-items:center}.catalog-toolbar p{font-size:12px;color:#b3a68f}.catalog-toolbar select{font-size:12px;min-width:115px}.catalog-toolbar label>span{font-size:11px}.active-filters button{background:#372d1e;border-color:#84683b;color:#e7cca0;font-size:12px}.filter-apply{display:none}.breadcrumb{font-size:12px;color:#b0a28c}.detail-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px}.gallery-main{background:#080808;border:1px solid #49402e;border-radius:10px;overflow:hidden;width:100%}.gallery-main img{display:block;object-fit:contain;width:100%;height:auto;max-height:none}.gallery-top{color:#b7a381;font-size:11px}.gallery-thumb{border-color:#92713e;background:#1e1b15}.gallery-thumbs{margin-top:15px}.image-note{color:#ab9d83;font-size:12px}.detail-info h1{font-size:36px;overflow-wrap:anywhere}.detail-price-block{background:#242016;border-color:#584629;border-radius:10px;padding:20px}.detail-price-block strong{font-size:35px;color:#edcf99}.detail-price-block small{font-size:11px;color:#b9ab91}.detail-cta{gap:10px}.detail-cta>#detail-buy{flex:1 1 100%}.detail-cta>#detail-save,.detail-cta>#detail-ask{flex:1 1 40%;font-size:12px;min-height:44px}.detail-policy{background:#211d15;border-color:#4d3e27;color:#bcae94}.detail-policy p{font-size:12px}.specs td{font-size:13px;border-color:#3a3225;overflow-wrap:anywhere}.specs td:first-child{color:#a89b85}.specs{overflow-wrap:anywhere}.policy-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.policy-grid article{background:#191816;border-color:#433925;padding:23px}.policy-grid h3{font-size:16px}.policy-grid p{font-size:12px;color:#b2a68f}.policy-number{font-size:10px;color:#c4a773}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.steps article{border-top:1px solid #6b5531;padding:20px 8px 8px}.steps b{font-size:35px;color:#c8a86e;font-weight:400}.steps h3{font-size:18px;margin:12px 0 7px}.steps p{font-size:13px;color:#b2a48d;margin:0}.faq{max-width:850px}.faq h2{margin:8px 0 20px}.faq details{border-bottom:1px solid #3c3426;padding:17px 0}.faq summary{cursor:pointer;font-size:15px;font-weight:600;min-height:32px}.faq details p{color:#b6a98f;font-size:13px;max-width:700px}.contact-section{border-color:#473a25;padding:36px 0;gap:30px}.contact-section h2{font-size:37px;line-height:1.3}.contact-section p{color:#b7a381;font-size:12px}.chat-launcher{position:static;display:flex;width:max-content;max-width:100%;margin:20px 0 10px;padding:12px 18px;background:#221e16;border:1px solid #5c4929;border-radius:8px;font-size:13px;color:#ddc294;box-shadow:none}.assistant{background:#171614;border-color:#66512d;width:390px;bottom:20px;max-height:calc(100dvh - 110px);z-index:45}.chat-heading{background:#252017;border-color:#443622}.chat-heading h2{font-size:14px}.chat-heading span{color:#bba88b;font-size:10px}.bot-mark{background:#3a2f1b;color:#e6c587}.bubble{background:#262117;border-color:#473a27;color:#e1d4be;font-size:13px}.user .bubble{background:#41331e;border-color:#735830}.suggestions button{background:#2a2318;border-color:#5b472b;color:#ddc69f;font-size:11px}.chat-disclaimer{font-size:10px;color:#b4a185}#chat-form input{font-size:16px;background:#171614}.send{background:#d4b27b;color:#1d170d}dialog{background:#1a1814;border-color:#665233;max-width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;color:#e4d8c5;border-radius:12px}dialog::backdrop{background:#000c;backdrop-filter:blur(6px)}.dialog-heading{gap:10px}.dialog-heading h2{font-size:25px}.contact-code{background:#282217;border-color:#6e5430;color:#efd19c;font-size:15px;overflow-wrap:anywhere;user-select:text}#copy-inquiry{width:100%;margin-bottom:10px}#copy-status{font-size:12px;color:#e0c48e}.dialog-note{font-size:12px;color:#b3a58c}.dialog-heading .icon-button{flex-shrink:0}.image-viewport{background:#080808}#image-dialog{max-width:calc(100vw - 24px)}#image-dialog .dialog-heading{background:#1d1a14}.toast{background:#3a2e1c;border-color:#a27e46;color:#f2dcb4;font-size:13px;z-index:100}footer{border-color:#3d3322;padding:26px 0 36px;gap:16px}footer p{font-size:11px;color:#ac9c7e}.footer-brand{font-size:18px;color:#e6c48b;letter-spacing:1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mobile-buy-bar{display:none}
@media(min-width:761px) and (max-width:1050px){main{padding:0 24px}header{padding:0 24px}.brand>span{font-size:20px}nav{gap:14px;font-size:11px}.header-actions{gap:5px}.small-primary{display:none}.hero{min-height:420px}.hero h1{font-size:43px}.hero-main-card{width:340px}.hero-meta{gap:9px}.hero-meta>span{font-size:9px}.quick-finder{grid-template-columns:1fr}.quick-budgets{grid-column:auto}.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-layout{grid-template-columns:200px minmax(0,1fr);gap:18px}.card-price{font-size:21px}.card-body{padding:14px}.policy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){html{scroll-padding-top:82px}.announcement{font-size:9px;letter-spacing:0;min-height:27px;padding:5px 10px}header,header.scrolled{height:68px;padding:0 16px;gap:8px}.brand{gap:8px}.brand>span{font-size:19px}.brand small{font-size:8px;letter-spacing:1.3px}.banana-logo{width:36px;height:36px;border-radius:10px}.banana-logo svg{width:27px;height:27px}.header-actions{gap:3px}.small-primary,#nav-search{display:none}.saved-nav{font-size:23px;min-width:37px}.saved-nav b{font-size:8px}.menu-mobile{display:inline-flex;align-items:center;justify-content:center}nav{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;background:#1b1813;border-bottom:1px solid #655033;padding:10px 18px;gap:0;font-size:14px;max-height:calc(100dvh - 100px);overflow:auto}nav.mobile-open{display:flex}nav a{padding:12px 0;min-height:44px}nav a.active::after{display:none}main{padding:0 16px}.hero{display:block;padding:24px 0 28px;min-height:0;overflow:hidden}.hero-copy{padding:0}.hero-kicker{display:none}.hero h1{font-size:clamp(34px,9.4vw,48px);letter-spacing:-1.7px;line-height:1.15;margin:17px 0 13px}.hero p{font-size:13px;line-height:1.75;max-width:100%}.hero-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:19px}.hero-actions .primary,.hero-actions .subtle{width:100%;font-size:14px;min-height:46px;padding:11px 14px}.hero-actions .subtle{min-height:40px;padding:8px}.hero-meta{display:none}.hero-art,.slide-controls{display:none}.hero-bottom-line{width:34%}.eyebrow{font-size:9px;letter-spacing:1.1px}.quick-finder{display:block;margin:18px 0 30px;padding:17px;border-radius:10px}.quick-finder h2{font-size:21px;margin-top:6px}.quick-finder form{margin-top:17px;grid-template-columns:1fr;gap:9px}.quick-finder input,.quick-finder select{height:46px;min-height:46px;font-size:16px}.quick-finder .primary{width:100%;min-height:46px}.quick-budgets{gap:7px;margin-top:16px;padding-top:12px}.quick-budgets>span{display:none}.quick-budgets button{font-size:11px;flex:1 1 auto;padding:6px 9px;min-height:37px}.quick-budgets a{margin-left:0;width:100%;justify-content:center;min-height:38px}.section{margin:30px 0}.section-heading{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:18px;align-items:flex-start}h2{font-size:25px;letter-spacing:-.6px}.section-heading h2{margin-top:7px}.section-heading>.text-link{font-size:12px;white-space:normal}.section-tabs{width:100%;gap:8px}.tab{font-size:12px;min-height:42px;padding:9px 14px}.grid,.home-grid,.catalog-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:20px;width:100%}.card{width:100%;border-radius:11px}.card:hover{transform:none}.card-image img,.catalog-grid .card-image img{height:auto!important;aspect-ratio:auto;object-fit:contain;width:100%;max-height:none}.card-body{padding:17px}.card h3{font-size:23px;margin:10px 0}.card-code-line>span,.card-code-line .status{font-size:10px}.card-tags span{font-size:11px}.card-price{font-size:27px}.card-price small{font-size:9px}.card-buy{font-size:13px;min-height:44px;padding:10px 13px}.card-inquiry{font-size:14px;min-height:48px;margin-top:15px}.card-foot{font-size:11px;line-height:1.6}.badge{font-size:9px}.browse-all{display:flex;width:100%;min-width:0;min-height:48px;font-size:14px;margin-top:20px}.category-grid{grid-template-columns:1fr;gap:9px}.category,.category:first-child,.category.game-category{min-height:86px;grid-row:auto;display:grid;grid-template-columns:55px 1fr;grid-template-rows:auto auto;align-items:center;justify-content:start;column-gap:15px;padding:14px 17px}.category img,.category .game-icon{grid-column:1;grid-row:1/3;margin:0;width:49px;height:45px}.category .game-icon{font-size:15px}.category strong{grid-column:2;font-size:15px}.category>span{grid-column:2;font-size:11px}.upgrade-banner{padding:24px 20px;margin:30px 0;display:block;overflow:hidden}.upgrade-banner h2{font-size:26px;max-width:100%;margin:11px 0}.upgrade-banner p{font-size:13px;max-width:100%;position:relative}.upgrade-banner>.primary{font-size:14px;min-height:48px;width:100%;margin-top:18px}.page-heading{padding-top:22px}.page-heading h1{font-size:36px}.page-heading p{font-size:14px}.breadcrumb{font-size:11px;margin-bottom:18px;flex-wrap:wrap}.catalog-layout{display:block}.filter-sidebar{display:none}.filter-sidebar.open{display:block;position:fixed;inset:12px;z-index:70;overflow-y:auto;padding:20px;box-shadow:0 0 0 100vmax #000c;background:#1b1813;border:1px solid #685232;border-radius:12px;max-height:calc(100dvh - 24px);overscroll-behavior:contain}.sidebar-title{position:sticky;top:-20px;background:#1b1813;padding:12px 0;z-index:2}.sidebar-title h2{font-size:23px}.sidebar-title .text-link{margin-left:auto;font-size:12px}.sidebar-title .icon-button{margin-left:8px}.filter-label{font-size:12px}.filter-label input,.price-inputs input{font-size:16px;min-height:46px}.checkbox{font-size:14px;min-height:44px}.price-presets button{font-size:13px}.filter-help{font-size:12px}.filter-apply{display:flex;width:100%;margin:20px 0 0;min-height:48px}.sidebar-help{display:none}.catalog-toolbar{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:17px}.catalog-toolbar>p{width:100%;font-size:12px;margin:0}.catalog-toolbar>div{width:100%;display:flex;justify-content:space-between;gap:12px}.catalog-toolbar .outline{font-size:13px;min-height:44px;padding:10px 14px}.catalog-toolbar select{font-size:13px;max-width:none;min-height:44px;padding:9px 12px}.catalog-toolbar label>span{display:none}.detail-breadcrumb{margin:19px 0}.detail-layout{display:flex;flex-direction:column;gap:24px}.detail-info{min-width:0;width:100%}.detail-info h1{font-size:32px;margin:15px 0}.gallery-top{font-size:10px;gap:10px}.gallery-top .text-link{font-size:12px;min-height:44px}.gallery-main img{height:auto;max-height:none}.gallery-thumbs{gap:10px}.video-placeholder{display:none}.image-note{font-size:12px}.detail-price-block strong{font-size:33px}.detail-price-block small{font-size:12px}.detail-summary{flex-wrap:wrap}.detail-cta .primary{font-size:15px;min-height:48px}.detail-cta>#detail-ask,.detail-cta>#detail-save{font-size:12px;flex-basis:40%;padding:10px}.detail-policy p{font-size:12px}.specs td{font-size:13px;padding:12px 8px}.specs td:first-child{width:38%}.detail-info .badge{font-size:9px;white-space:normal}.steps{grid-template-columns:1fr;gap:13px}.steps article{padding:17px 0;display:grid;grid-template-columns:42px 1fr;gap:2px 12px}.steps b{grid-row:1/3;font-size:28px}.steps h3{font-size:17px;margin:0 0 6px}.steps p{font-size:13px;grid-column:2}.faq summary{font-size:14px;line-height:1.6}.faq details p{font-size:13px}.policy-grid{grid-template-columns:1fr;gap:12px}.policy-grid article{padding:20px}.policy-grid h3{font-size:18px}.policy-grid p{font-size:13px}.policy-number{font-size:10px}.contact-section{display:block;padding:28px 0;gap:20px}.contact-section h2{font-size:29px}.contact-section>div:last-child{margin-top:19px;max-width:none;display:flex;flex-wrap:wrap;gap:10px}.contact-section .primary,.contact-section .outline{font-size:14px;min-height:46px;flex:1;padding:11px 14px}.contact-section p{font-size:12px;width:100%;text-align:left;margin:4px 0}.chat-launcher{font-size:13px;width:100%;justify-content:center;min-height:46px;margin:20px 0;position:static}.assistant,body.detail-active .assistant{position:fixed;left:10px;right:10px;top:10px;bottom:10px;width:auto;height:auto;max-height:calc(100dvh - 20px);z-index:80;box-shadow:0 0 0 100vmax #000c}.chat-messages{min-height:0}.chat-heading h2{font-size:14px}.chat-heading span{font-size:10px}.chat-heading .icon-button{min-width:38px;width:38px}.chat-heading{gap:6px}.mobile-buy-bar{display:none}body.detail-active .mobile-buy-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;gap:12px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));background:#1c1912f7;border-top:1px solid #6e552d;box-shadow:0 -10px 30px #0007;backdrop-filter:blur(16px);justify-content:space-between;align-items:center}body.detail-active{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.mobile-buy-bar>div{min-width:0}.mobile-buy-bar small{font-size:8px;color:#b8a584;letter-spacing:.7px}.mobile-buy-bar strong{font-size:20px;color:#eccb94;white-space:nowrap}.mobile-buy-bar .primary{font-size:12px;padding:11px 13px;min-height:46px;max-width:55%;gap:5px}.toast{bottom:104px;font-size:12px;max-width:calc(100vw - 32px);width:max-content}dialog{width:calc(100vw - 28px);max-width:calc(100vw - 28px);padding:20px;max-height:calc(100dvh - 28px)}.dialog-heading h2{font-size:22px}.dialog-heading .text-link{font-size:11px}.contact-code{font-size:14px}.dialog-note{font-size:12px}#contact-dialog .primary,#contact-dialog .outline{font-size:14px;min-height:46px}#image-dialog{padding:0}#image-dialog .dialog-heading{flex-wrap:wrap;padding:10px}#image-dialog .dialog-heading>div{display:flex;align-items:center;gap:12px}.image-viewport{max-height:calc(100dvh - 140px)}footer{display:flex;flex-wrap:wrap;gap:12px;padding:22px 0 30px}footer p{order:3;width:100%;font-size:11px}.footer-brand{font-size:16px}footer>a:last-child{font-size:12px;margin-left:auto}.library-toolbar{flex-wrap:wrap}.library-toolbar .tab{font-size:12px}.library-storage-note{font-size:12px}.section-note{display:none}}
@media(max-width:359px){header,header.scrolled{padding:0 11px}.brand>span{font-size:17px}.brand small{font-size:7px}.header-actions{gap:0}.banana-logo{width:32px;height:32px}.hero h1{font-size:34px}main{padding:0 12px}.card-price{font-size:24px}.card-body{padding:15px}.mobile-buy-bar strong{font-size:17px}.mobile-buy-bar .primary{font-size:11px;padding:10px}.card-buy{min-width:80px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:760px){.quick-finder form{grid-template-columns:minmax(0,1fr) auto}.quick-finder #quick-search{grid-column:1/-1}.quick-finder form>.primary{padding:10px 17px}.quick-finder select{min-width:0}.hero p{max-width:540px}}
/* Floating helmet support bot */
.chat-launcher{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:10px;width:auto;max-width:250px;min-height:66px;margin:0;padding:6px 20px 6px 5px;border:1px solid #947442;border-radius:19px;background:linear-gradient(140deg,#322819,#151411);color:#f4dfb5;box-shadow:0 10px 32px #0009,0 0 24px #d4ad5b12;isolation:isolate;transition:transform .2s,border-color .2s,box-shadow .2s}
.chat-launcher:hover{transform:translateY(-3px);border-color:#eac98c;box-shadow:0 12px 35px #0009,0 0 25px #d4ad5b25}
.chat-launcher .support-avatar{position:relative;display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;font-size:inherit}
.support-avatar>img{display:block;width:64px;height:64px;filter:drop-shadow(0 3px 3px #0008)}
.support-spark{position:absolute;right:0;top:4px;color:#f1d69c;font-size:15px;line-height:1}
.chat-launcher .support-label{display:block;text-align:left;line-height:1.4;font-size:14px}
.support-label strong{display:block;font-size:14px;letter-spacing:.1px;font-weight:750}.support-label small{display:block;color:#b8a17a;font-size:10px;margin-top:4px;font-weight:400}
.chat-launcher .support-mobile-label{display:none}
body:has(#assistant:not([hidden])) #show-chat,body:has(.filter-sidebar.open) #show-chat{visibility:hidden;pointer-events:none}
.assistant{bottom:24px;right:24px;max-height:calc(100dvh - 112px)}
.chat-heading .bot-mark{display:grid;place-items:center;width:46px;height:46px;min-width:46px;background:#302617;border:1px solid #705531;border-radius:12px;padding:0}
.bot-mark img{width:44px;height:44px;display:block}
footer{padding-bottom:110px}
@media(max-width:760px){.chat-launcher,body.detail-active .chat-launcher{position:fixed;right:12px;bottom:calc(18px + env(safe-area-inset-bottom));width:62px;max-width:62px;min-height:72px;padding:0 0 5px;margin:0;display:flex;flex-direction:column;gap:0;border-radius:17px;background:linear-gradient(145deg,#392c18,#14130f);box-shadow:0 6px 20px #0008;z-index:40}.chat-launcher .support-avatar{width:58px;height:54px}.support-avatar>img{width:58px;height:58px}.support-spark{font-size:12px;right:2px;top:5px}.chat-launcher .support-label{display:none}.chat-launcher .support-mobile-label{display:block;font-size:10px;line-height:1.3;letter-spacing:.2px;color:#edd2a0}.chat-launcher:hover{transform:none}body.detail-active .chat-launcher{bottom:calc(102px + env(safe-area-inset-bottom))}.assistant,body.detail-active .assistant{top:10px;bottom:10px;left:10px;right:10px;max-height:calc(100dvh - 20px)}footer{padding-bottom:108px}.chat-heading .bot-mark{width:40px;height:40px;min-width:40px}.bot-mark img{width:38px;height:38px}}
/* Củ Chuối cinematic theme compatibility for the server-rendered catalog. */
.shop-home--cuchuoishop .shop-header { position: sticky; top: 0; z-index: 30; padding: 0 max(16px, calc((100vw - 1320px) / 2)); }
.shop-home--cuchuoishop .shop-logo { color: var(--text); }
.shop-home--cuchuoishop .shop-logo > span:last-child { display: block; }
.shop-home--cuchuoishop .shop-logo-avatar { display: none; }
.shop-home--cuchuoishop .shop-nav { display: flex; }
.shop-home--cuchuoishop .shop-header-actions { flex-shrink: 0; }
.shop-home--cuchuoishop .shop-hotline,
.shop-home--cuchuoishop .shop-zalo-button,
.shop-home--cuchuoishop .shop-box-zalo-button,
.shop-home--cuchuoishop .shop-facebook-button { min-height: 40px; padding: 8px 10px; border: 1px solid #484236; border-radius: 7px; background: #1d1c1a; color: #e4dac6; font-size: 11px; }
.shop-home--cuchuoishop .shop-hotline { border-color: #80653a; color: #e2c68f; }
.shop-home--cuchuoishop .shop-hotline svg,
.shop-home--cuchuoishop .shop-facebook-button svg { width: 16px; height: 16px; }
.shop-home--cuchuoishop .shop-logo strong { color: #f4f0e7; }
.shop-home--cuchuoishop .shop-logo > span:last-child,
body:has(.shop-home--cuchuoishop) .shop-footer .shop-logo > span:last-child {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  color: inherit;
  clip-path: none;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: 1.15;
}
.shop-home--cuchuoishop .shop-logo > span:last-child .brand-dot,
body:has(.shop-home--cuchuoishop) .shop-footer .shop-logo > span:last-child .brand-dot,
.shop-home--cuchuoishop .shop-logo > span:last-child small,
body:has(.shop-home--cuchuoishop) .shop-footer .shop-logo > span:last-child small {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  clip-path: none;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}
.shop-home--cuchuoishop .shop-logo > span:last-child small,
body:has(.shop-home--cuchuoishop) .shop-footer .shop-logo > span:last-child small {
  display: block;
  color: #aaa08c;
  font-size: 8px;
  letter-spacing: 1.5px;
}
.shop-home--cuchuoishop .cinematic-hero { margin-inline: 0; }
.shop-home--cuchuoishop .hero-copy-shell { padding-top: 12px; z-index: 2; }
.shop-home--cuchuoishop .hero-copy-shell > p { max-width: 445px; color: #afa99d; font-size: 14px; line-height: 1.8; }
.shop-home--cuchuoishop .hero-copy-shell h1 { color: #f4f0e7; }
.shop-home--cuchuoishop .hero-copy-shell h1 em { font-style: normal; }
.shop-home--cuchuoishop .hero-main-card { display: block; }
.shop-home--cuchuoishop .hero-main-card > img { object-fit: contain; }
.shop-home--cuchuoishop .quick-finder-form { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, .8fr) auto; gap: 9px; }
.shop-home--cuchuoishop .quick-finder-form input,
.shop-home--cuchuoishop .quick-finder-form select { width: 100%; min-height: 49px; padding: 10px 13px; }
.shop-home--cuchuoishop .quick-finder-form .primary { position: static; width: auto; height: auto; }
.shop-home--cuchuoishop .cch-budget-select { position: relative; min-width: 0; }
.shop-home--cuchuoishop .cch-budget-native {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.shop-home--cuchuoishop .cch-budget-trigger {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px 10px 13px;
  border: 1px solid #51452d;
  border-radius: 12px;
  background: #111110;
  color: var(--cch-text);
  text-align: left;
  cursor: pointer;
}
.shop-home--cuchuoishop .cch-budget-trigger::after {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--cch-gold);
  border-bottom: 2px solid var(--cch-gold);
  content: '';
  transform: translateY(-65%) rotate(45deg);
  transition: transform .18s ease;
}
.shop-home--cuchuoishop .cch-budget-select.is-open .cch-budget-trigger {
  border-color: var(--cch-gold);
  box-shadow: 0 0 0 3px rgb(222 193 138 / .14);
}
.shop-home--cuchuoishop .cch-budget-select.is-open .cch-budget-trigger::after { transform: translateY(-25%) rotate(225deg); }
.cch-budget-menu {
  position: fixed;
  z-index: 100;
  display: grid;
  gap: 5px;
  max-height: 240px;
  overflow: auto;
  padding: 7px;
  border: 1px solid #6b5531;
  border-radius: 14px;
  background: #1b1813;
  box-shadow: 0 16px 34px rgb(0 0 0 / .42), 0 0 0 1px rgb(222 193 138 / .08);
}
.cch-budget-menu[hidden] { display: none; }
.cch-budget-option {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #d5c5a8;
  text-align: left;
  cursor: pointer;
}
.cch-budget-option:hover,
.cch-budget-option:focus-visible,
.cch-budget-option.is-selected { background: #2b2418; color: var(--cch-gold-bright); outline: 0; }
.shop-home--cuchuoishop .theme-categories { margin-top: 44px; }
.shop-home--cuchuoishop .account-grid { gap: 22px; }
.shop-home--cuchuoishop .account-card { overflow: hidden; }
.shop-home--cuchuoishop .account-cover-link { padding: 0; }
.shop-home--cuchuoishop .account-cover { aspect-ratio: 1.56; height: auto; object-fit: contain; background: #080808; }
.shop-home--cuchuoishop .account-card-info { min-width: 0; }
.shop-home--cuchuoishop .account-card-title h2 { margin: 10px 0; font-size: 21px; line-height: 1.35; overflow-wrap: anywhere; }
.shop-home--cuchuoishop .account-highlights { min-height: 27px; gap: 6px; }
.shop-home--cuchuoishop .account-highlights li { font-size: 10px; padding: 3px 8px; background: #28251e; border: 1px solid #51462f; border-radius: 3px; color: #cab793; }
.shop-home--cuchuoishop .account-date { color: #a99d86; }
.shop-home--cuchuoishop .account-prices { align-items: center; }
.shop-home--cuchuoishop .account-prices > p { color: #b1a38d; }
.shop-home--cuchuoishop .account-prices .card-price { color: #e6c991; font-size: 24px; }
.shop-home--cuchuoishop .account-prices .card-price strong { display: block; color: inherit; }
.shop-home--cuchuoishop .account-card-actions { margin-top: 15px; }
.shop-home--cuchuoishop .account-detail-link { width: 100%; min-height: 46px; justify-content: center; border-radius: 7px; background: #dec18a; color: #221b0e; font-weight: 750; }
.shop-home--cuchuoishop .account-status-badge { border-color: #7b653e; background: #19170fe8; color: #e2c28e; }
.shop-home--cuchuoishop .account-status-badge i { background: #bfa16b; }
.shop-home--cuchuoishop .hero-banner-frame { display: none; }
.shop-home--cuchuoishop .floating-zalo-banner { display: none; }
.shop-footer .footer-brand { display: inline-flex; align-items: center; gap: 10px; color: #e6c48b; }
.shop-footer .footer-brand .banana-logo { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #56482b; border-radius: 12px; background: #242016; color: #e8c889; }
.shop-footer .footer-brand .banana-logo svg { width: 32px; height: 32px; }
.shop-footer .footer-brand > span:last-child { display: block; }
.shop-footer .footer-brand small { display: block; color: #aaa08c; font-size: 8px; letter-spacing: 1.5px; }
@media (max-width: 760px) {
  .shop-home--cuchuoishop .shop-header { padding: 0 16px; }
  .shop-home--cuchuoishop .shop-nav { display: none; }
  .shop-home--cuchuoishop .shop-header-actions { gap: 4px; }
  .shop-home--cuchuoishop .shop-hotline { display: none; }
  .shop-home--cuchuoishop .shop-zalo-button,
  .shop-home--cuchuoishop .shop-box-zalo-button,
  .shop-home--cuchuoishop .shop-facebook-button { min-width: 38px; padding: 6px; }
  .shop-home--cuchuoishop .shop-zalo-button span,
  .shop-home--cuchuoishop .shop-box-zalo-button span,
  .shop-home--cuchuoishop .shop-facebook-button span { display: none; }
  .shop-home--cuchuoishop .quick-finder-form { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-home--cuchuoishop .quick-finder-form input { grid-column: 1 / -1; }
  .shop-home--cuchuoishop .quick-finder-form .primary { min-height: 46px; }
  .shop-home--cuchuoishop .account-cover { aspect-ratio: auto; }
}

/* Cuchuoishop homepage: keep the reference theme consistent below the hero. */
body:has(.shop-home--cuchuoishop) {
  --cch-bg: #0d0d0e;
  --cch-panel: #171716;
  --cch-panel-2: #211d15;
  --cch-line: #4b402c;
  --cch-gold: #dec18a;
  --cch-gold-bright: #f0d39a;
  --cch-text: #f2ede3;
  --cch-muted: #b0a38d;
  background: var(--cch-bg);
  color: var(--cch-text);
}

.shop-home--cuchuoishop {
  margin-inline: 0;
  width: 100%;
  color: var(--cch-text);
}
body:has(.shop-home--cuchuoishop) .shop-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  min-height: 94px;
  width: min(calc(100% - 72px), 1308px);
  margin-inline: auto;
  padding-bottom: 0;
  border-top-color: transparent;
}
body:has(.shop-home--cuchuoishop) .shop-footer .footer-brand .banana-logo,
body:has(.shop-home--cuchuoishop) .shop-footer p { display: none; }
body:has(.shop-home--cuchuoishop) .shop-footer .footer-brand > span:last-child {
  color: var(--cch-gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body:has(.shop-home--cuchuoishop) .shop-footer .footer-brand > span:last-child small { display: none; }
body:has(.shop-home--cuchuoishop) .shop-footer > small {
  justify-self: center;
  color: #776d5c;
  font-size: 9px;
}
body:has(.shop-home--cuchuoishop) .shop-footer > small::after {
  content: 'cuchuoishop.com · Zalo chính thức 0798888812';
}
body:has(.shop-home--cuchuoishop) .shop-footer > small { font-size: 0; }
body:has(.shop-home--cuchuoishop) .shop-footer > small::after { font-size: 9px; }
body:has(.shop-home--cuchuoishop) .footer-top-link {
  display: block;
  justify-self: end;
  color: #65758b;
  font-size: 9px;
}
body:has(.shop-home--cuchuoishop) .footer-top-link:hover { color: var(--cch-gold); }
.footer-top-link { display: none; }
@media (max-width: 760px) {
  body:has(.shop-home--cuchuoishop) .shop-footer {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 8px;
    min-height: 0;
    padding-bottom: 0;
  }
  body:has(.shop-home--cuchuoishop) .shop-footer > small { justify-self: start; }
  body:has(.shop-home--cuchuoishop) .footer-top-link { justify-self: start; }
}
.shop-home--cuchuoishop .announcement {
  background: #151412;
  border-bottom: 1px solid #342d20;
  color: var(--cch-muted);
}
.shop-home--cuchuoishop .announcement a,
.shop-home--cuchuoishop .eyebrow,
.shop-home--cuchuoishop .text-link,
.shop-home--cuchuoishop .cyan { color: var(--cch-gold); }
.shop-home--cuchuoishop .shop-header {
  border-bottom-color: #3b3325;
  background: #0d0d0ef2;
}
.shop-home--cuchuoishop .shop-nav a,
.shop-home--cuchuoishop .shop-hotline,
.shop-home--cuchuoishop .shop-zalo-button,
.shop-home--cuchuoishop .shop-box-zalo-button,
.shop-home--cuchuoishop .shop-facebook-button { color: #d8cfbf; }
.shop-home--cuchuoishop .shop-nav a:hover,
.shop-home--cuchuoishop .shop-nav a[aria-current='page'] { color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .shop-nav a::after { background: var(--cch-gold); }
.shop-home--cuchuoishop .hero {
  border-top-color: #342d20;
  border-right-color: #342d20;
  border-bottom-color: #342d20;
  border-left-color: #342d20;
  background: radial-gradient(circle at 75% 45%, #3b2d1850, transparent 38%), #0d0d0e;
}
.shop-home--cuchuoishop .hero-grid { background-image: linear-gradient(#6a58351a 1px, transparent 1px), linear-gradient(90deg, #6a58351a 1px, transparent 1px); }
.shop-home--cuchuoishop .hero-light { background: radial-gradient(circle, #a47b3024, transparent 67%); }
.shop-home--cuchuoishop .tiny-line,
.shop-home--cuchuoishop .hero-bottom-line { background: var(--cch-gold); }
.shop-home--cuchuoishop .hero-copy-shell > p { color: var(--cch-muted); }
.shop-home--cuchuoishop .hero-copy-shell h1,
.shop-home--cuchuoishop .hero-card-bottom strong,
.shop-home--cuchuoishop .hero-card-top { color: var(--cch-text); }
.shop-home--cuchuoishop .hero-copy-shell h1 em,
.shop-home--cuchuoishop .hero-card-bottom > div:last-child strong { color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .hero-main-card,
.shop-home--cuchuoishop .hero-back-card { border-color: #75603b88; background: linear-gradient(145deg, #282218, #141310); }
.shop-home--cuchuoishop .primary,
.shop-home--cuchuoishop .account-detail-link { background: var(--cch-gold); border-color: var(--cch-gold); color: #241b0d; }
.shop-home--cuchuoishop .primary:hover,
.shop-home--cuchuoishop .account-detail-link:hover { background: var(--cch-gold-bright); border-color: var(--cch-gold-bright); color: #241b0d; }
.shop-home--cuchuoishop .subtle,
.shop-home--cuchuoishop .outline { background: #191816; border-color: #5b4a2f; color: #ded3c2; }
.shop-home--cuchuoishop .quick-finder,
.shop-home--cuchuoishop .category,
.shop-home--cuchuoishop .upgrade-banner,
.shop-home--cuchuoishop .catalog-search,
.shop-home--cuchuoishop .account-card,
.shop-home--cuchuoishop .catalog-empty,
.shop-home--cuchuoishop .trust-strip,
.shop-home--cuchuoishop .benefit-strip {
  border-color: var(--cch-line);
  background: var(--cch-panel);
  box-shadow: 0 12px 28px #0005;
}
.shop-home--cuchuoishop .quick-finder { color: var(--cch-text); }
.shop-home--cuchuoishop .quick-finder h2,
.shop-home--cuchuoishop .section-heading h2,
.shop-home--cuchuoishop .catalog-heading h2 { color: var(--cch-text); }
.shop-home--cuchuoishop .quick-finder-form input,
.shop-home--cuchuoishop .quick-finder-form select,
.shop-home--cuchuoishop .catalog-search-field input,
.shop-home--cuchuoishop .catalog-inline-dropdown summary,
.shop-home--cuchuoishop .catalog-sort-dropdown summary {
  background: #111110 !important;
  border-color: #51452d !important;
  color: var(--cch-text) !important;
}
.shop-home--cuchuoishop .quick-budgets a,
.shop-home--cuchuoishop .catalog-bands a,
.shop-home--cuchuoishop .catalog-pagination a,
.shop-home--cuchuoishop .catalog-pagination span {
  border-color: #5b4a2f;
  background: #211d15 !important;
  color: #d5c5a8;
}
.shop-home--cuchuoishop .quick-budgets a:hover,
.shop-home--cuchuoishop .catalog-bands a:hover,
.shop-home--cuchuoishop .catalog-pagination a:hover { border-color: var(--cch-gold); color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .catalog-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 12px; }
.shop-home--cuchuoishop .catalog-search-field { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 13px; border: 1px solid #51452d; border-radius: 8px; background: #111110 !important; }
.shop-home--cuchuoishop .catalog-search-field svg { width: 18px; color: var(--cch-gold); }
.shop-home--cuchuoishop .catalog-search-field input { width: 100%; min-height: 40px; border: 0; outline: 0; background: transparent; color: var(--cch-text); }
.shop-home--cuchuoishop .catalog-search-submit { position: static; display: inline-flex; width: auto; min-height: 44px; align-items: center; gap: 7px; padding: 0 16px; border-radius: 8px; background: var(--cch-gold); color: #241b0d; font-size: 11px; }
.shop-home--cuchuoishop .catalog-search-submit svg { width: 16px; }
.shop-home--cuchuoishop .catalog-inline-dropdown,
.shop-home--cuchuoishop .catalog-filter { position: relative; }
.shop-home--cuchuoishop .catalog-inline-dropdown summary,
.shop-home--cuchuoishop .catalog-filter-trigger { min-height: 44px; padding: 0 12px; border: 1px solid #51452d !important; border-radius: 8px; background: #111110 !important; color: #d5c5a8 !important; }
.shop-home--cuchuoishop .catalog-inline-menu,
.shop-home--cuchuoishop .catalog-filter-menu { border-color: #5b4a2f !important; background: #1a1814 !important; color: var(--cch-text) !important; }
.shop-home--cuchuoishop .catalog-inline-menu a,
.shop-home--cuchuoishop .catalog-price-presets a { color: #d5c5a8; }
.shop-home--cuchuoishop .catalog-bands { border-bottom-color: #3c3324; }
.shop-home--cuchuoishop .catalog-bands a[aria-current='page'],
.shop-home--cuchuoishop .catalog-pagination a[aria-current='page'] { border-color: var(--cch-gold); background: var(--cch-gold); color: #241b0d; }
.shop-home--cuchuoishop .catalog-bands a,
.shop-home--cuchuoishop .catalog-pagination a,
.shop-home--cuchuoishop .catalog-pagination span { border-color: #5b4a2f !important; background: #211d15 !important; color: #d5c5a8 !important; }
.shop-home--cuchuoishop .catalog-bands a[aria-current='page'],
.shop-home--cuchuoishop .catalog-pagination a[aria-current='page'] { border-color: var(--cch-gold) !important; background: var(--cch-gold) !important; color: #241b0d !important; }
.shop-home--cuchuoishop .catalog-kicker > span { background: var(--cch-gold) !important; }
.shop-home--cuchuoishop .catalog-hot-band.is-active { background: #6a4a1e !important; border-color: var(--cch-gold) !important; color: var(--cch-gold-bright) !important; }
.shop-home--cuchuoishop .catalog-heading h2 span { background: var(--cch-gold); color: #241b0d; }
.shop-home--cuchuoishop .catalog-toolbar,
.shop-home--cuchuoishop .catalog-kicker,
.shop-home--cuchuoishop .catalog-toolbar p { color: var(--cch-muted); }
.shop-home--cuchuoishop .account-card { border-radius: 10px; }
.shop-home--cuchuoishop .account-cover-link { background: #090909; }
.shop-home--cuchuoishop .account-card-info { background: var(--cch-panel); }
.shop-home--cuchuoishop .account-card-title h2 a,
.shop-home--cuchuoishop .account-card-info p { color: #ded5c6; }
.shop-home--cuchuoishop .account-highlights li { background: #282217; border-color: #5b4a2f; color: #d5c5a8; }
.shop-home--cuchuoishop .account-date { color: #9d917c; }
.shop-home--cuchuoishop .account-prices { border-top-color: #403522; }
.shop-home--cuchuoishop .account-prices .card-price strong,
.shop-home--cuchuoishop .account-prices > p:last-child strong { color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .account-status-badge { border-color: #77613b; background: #211b11e8; color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .account-status-badge i { background: #cda65b; }
.shop-home--cuchuoishop .catalog-pagination { gap: 8px; }
.shop-home--cuchuoishop .catalog-empty { color: var(--cch-text); }
.shop-home--cuchuoishop .catalog-empty p { color: var(--cch-muted); }
.shop-home--cuchuoishop .catalog-empty a { color: var(--cch-gold); }
.shop-home--cuchuoishop .trust-strip,
.shop-home--cuchuoishop .benefit-strip { box-shadow: none; }
.shop-home--cuchuoishop .trust-strip > div,
.shop-home--cuchuoishop .benefit-strip > div { border-right-color: #4a3e2b; }
.shop-home--cuchuoishop .trust-strip svg,
.shop-home--cuchuoishop .benefit-strip svg { color: var(--cch-gold); }
.shop-home--cuchuoishop .trust-strip b,
.shop-home--cuchuoishop .benefit-strip b { color: #e8dece; }
.shop-home--cuchuoishop .trust-strip small,
.shop-home--cuchuoishop .benefit-strip small { color: var(--cch-muted); }
body:has(.shop-home--cuchuoishop) .shop-footer { border-top-color: #3b3325; color: var(--cch-muted); }
body:has(.shop-home--cuchuoishop) .shop-footer small { color: #9e927d; }
.shop-home--cuchuoishop .featured-accounts { scroll-margin-top: 92px; }
.shop-home--cuchuoishop .featured-accounts .section-heading { align-items: center; margin-bottom: 24px; }
.shop-home--cuchuoishop .featured-accounts .section-tabs { display: flex; gap: 8px; }
.shop-home--cuchuoishop .featured-accounts .tab { min-height: 44px; padding: 0 16px; border: 1px solid #5b4a2f; border-radius: 8px; background: #171614; color: #d5c5a8; }
.shop-home--cuchuoishop .featured-accounts .tab.active { border-color: var(--cch-gold); background: #211d15; color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .featured-accounts .browse-all { width: 100%; min-height: 48px; margin: 25px 0 0; border-color: #5b4a2f; border-radius: 8px; background: #171614; color: #d5c5a8; }
.shop-home--cuchuoishop .featured-accounts .browse-all:hover { border-color: var(--cch-gold); color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .featured-card .card-image { aspect-ratio: 16 / 10; background: #090909; }
.shop-home--cuchuoishop .featured-card .card-image img { width: 100%; height: 100%; object-fit: cover; }
.shop-home--cuchuoishop .featured-card .card-image .badge { position: absolute; top: 10px; left: 10px; }
.shop-home--cuchuoishop .featured-card .card-body { background: var(--cch-panel); }
.shop-home--cuchuoishop .featured-card .card-code-line > span { color: #9d917c; }
.shop-home--cuchuoishop .featured-card .card h3 a { color: var(--cch-text); }
.shop-home--cuchuoishop .featured-card .card-buy { display: grid; place-items: center; border-color: #6f5936; background: #211d15; color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .featured-accounts .tab,
.shop-home--cuchuoishop .quick-budgets a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.shop-home--cuchuoishop .featured-pagination {
  margin: 28px 0 0;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-page {
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px) {
  .shop-home--cuchuoishop .featured-pagination .catalog-pagination-page {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 760px) {
  .shop-home--cuchuoishop .catalog-search { grid-template-columns: minmax(0, 1fr) auto; padding: 9px; }
  .shop-home--cuchuoishop .catalog-search-field { grid-column: 1 / -1; }
  .shop-home--cuchuoishop .catalog-inline-dropdown,
  .shop-home--cuchuoishop .catalog-filter,
  .shop-home--cuchuoishop .catalog-search-submit { min-width: 0; }
  .shop-home--cuchuoishop .catalog-search-submit { padding-inline: 13px; }
  .shop-home--cuchuoishop .catalog-search-submit span { display: inline; }
  .shop-home--cuchuoishop .trust-strip,
  .shop-home--cuchuoishop .benefit-strip { border-radius: 9px; }
  .shop-home--cuchuoishop .trust-strip > div:nth-child(2),
  .shop-home--cuchuoishop .trust-strip > div:nth-child(4),
  .shop-home--cuchuoishop .benefit-strip > div:nth-child(2),
  .shop-home--cuchuoishop .benefit-strip > div:nth-child(4) { border-right: 0; }
  .shop-home--cuchuoishop .account-card-info h2 { font-size: 16px; }
  .shop-home--cuchuoishop .featured-accounts .section-heading { align-items: flex-start; }
  .shop-home--cuchuoishop .featured-accounts .section-tabs { width: 100%; }
  .shop-home--cuchuoishop .featured-accounts .tab { flex: 1; justify-content: center; }
  .shop-home--cuchuoishop .featured-accounts .browse-all { margin-top: 17px; }
}

/* Reference homepage header: full-width charcoal bar with the compact gold controls. */
.shop-home--cuchuoishop .announcement {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 30px;
  height: auto;
  padding: 6px 16px;
  background: #211e17;
  border-bottom: 0;
  color: #c9bb9e;
  font-size: 10px;
  letter-spacing: .8px;
  text-align: center;
}
.shop-home--cuchuoishop > .announcement,
.shop-home--cuchuoishop > .shop-header {
  width: 100vw !important;
  max-width: none;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.shop-home--cuchuoishop .shop-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-inline: max(24px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid #34312a;
  border-inline: 0;
  border-radius: 0;
  background: #0d0d0ef2;
  box-shadow: none;
}
.shop-home--cuchuoishop .shop-logo {
  gap: 10px;
  color: #f4f0e7;
  font-size: 23px;
  white-space: nowrap;
}
.shop-home--cuchuoishop .shop-logo > .banana-logo {
  display: grid;
  width: 42px;
  height: 42px;
  min-width: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid #56482b;
  border-radius: 12px;
  background: #242016;
  color: #e8c889;
  clip-path: none;
  font-size: initial;
}
.shop-home--cuchuoishop .shop-logo > .banana-logo svg { width: 32px; height: 32px; }
.shop-home--cuchuoishop .shop-logo > span:last-child {
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  color: #f4f0e7;
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -.8px;
  line-height: 1.15;
}
.shop-home--cuchuoishop .shop-logo .brand-dot { color: #e2c68f; }
.shop-home--cuchuoishop .shop-logo > span:last-child small {
  display: block;
  width: auto;
  height: auto;
  margin-top: 1px;
  color: #aaa08c;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1;
}
.shop-home--cuchuoishop .shop-nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 25px;
  overflow: visible;
}
.shop-home--cuchuoishop .shop-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #d8cfbf;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.shop-home--cuchuoishop .shop-nav a::after { display: none; }
.shop-home--cuchuoishop .shop-nav a:hover { color: #f0d39a; }
.shop-home--cuchuoishop .shop-nav a[href="#catalog"] {
  padding: 8px 12px;
  border-color: #675536;
  background: #211d16;
  color: #f0d39a;
}
.shop-home--cuchuoishop .shop-nav a b,
.shop-home--cuchuoishop .saved-nav b {
  margin-left: 5px;
  padding: 3px 5px;
  border-radius: 4px;
  background: #3c3323;
  color: #ead1a2;
  font-size: 8px;
  line-height: 1;
}
.shop-home--cuchuoishop .shop-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-shrink: 0;
}
.shop-home--cuchuoishop .saved-nav {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 5px;
  color: #e3d5bb;
  font-size: 23px;
  line-height: 23px;
}
.shop-home--cuchuoishop .saved-nav b { margin-left: 0; }
.shop-home--cuchuoishop .icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  place-items: center;
  padding: 0;
  color: #c9c2b6;
}
.shop-home--cuchuoishop .icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.shop-home--cuchuoishop .small-primary {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #e2c68f;
  border-radius: 7px;
  background: #e2c68f;
  color: #211b11;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.shop-home--cuchuoishop .small-primary:hover { background: #f1d6a3; }
.shop-home--cuchuoishop > .shop-zalo-button,
.shop-home--cuchuoishop .shop-header-actions > .shop-zalo-button {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #e2c68f;
  border-radius: 7px;
  background: #e2c68f;
  color: #211b11;
  font-size: 0;
  font-weight: 700;
  white-space: nowrap;
}
.shop-home--cuchuoishop .shop-header-actions > .shop-zalo-button span { font-size: 0; }
.shop-home--cuchuoishop .shop-header-actions > .shop-zalo-button span::before {
  content: 'Liên hệ shop ↗';
  font-size: 12px;
}
.shop-home--cuchuoishop .shop-header-actions > .shop-zalo-button:hover { background: #f1d6a3; }
@media (max-width: 1050px) {
  .shop-home--cuchuoishop .shop-header { padding-inline: 24px; gap: 14px; }
  .shop-home--cuchuoishop .shop-nav { gap: 14px; }
  .shop-home--cuchuoishop .shop-nav a { font-size: 11px; }
  .shop-home--cuchuoishop .shop-header-actions { gap: 7px; }
  .shop-home--cuchuoishop .small-primary,
  .shop-home--cuchuoishop .shop-header-actions > .shop-zalo-button { display: none; }
}
@media (max-width: 760px) {
  .shop-home--cuchuoishop .announcement { min-height: 27px; padding: 5px 10px; font-size: 9px; letter-spacing: 0; }
  .shop-home--cuchuoishop .shop-header {
    min-height: 68px;
    height: 68px;
    padding-inline: 16px;
    gap: 8px;
  }
  .shop-home--cuchuoishop .shop-logo { gap: 8px; font-size: 19px; }
  .shop-home--cuchuoishop .shop-logo > .banana-logo { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; }
  .shop-home--cuchuoishop .shop-logo > .banana-logo svg { width: 27px; height: 27px; }
  .shop-home--cuchuoishop .shop-logo > span:last-child { font-size: 19px; }
  .shop-home--cuchuoishop .shop-logo > span:last-child small { font-size: 8px; letter-spacing: 1.3px; }
  .shop-home--cuchuoishop .shop-nav { display: none; }
  .shop-home--cuchuoishop .shop-header-actions { gap: 3px; }
  .shop-home--cuchuoishop .icon-button { width: 44px; min-width: 44px; height: 44px; }
  .shop-home--cuchuoishop #nav-search { display: none; }
  .shop-home--cuchuoishop .saved-nav { min-width: 37px; font-size: 23px; }
  .shop-home--cuchuoishop .saved-nav b { font-size: 8px; }
  body:has(.shop-home--cuchuoishop) { padding-bottom: 0; }
  body:has(.shop-home--cuchuoishop) .mobile-contact-bar { display: none; }
  .shop-home--cuchuoishop .menu-mobile { display: inline-flex; }
  .shop-home--cuchuoishop .shop-nav.mobile-open {
    position: absolute;
    top: 68px;
    right: 0;
    left: 0;
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 10px 18px;
    border-bottom: 1px solid #655033;
    background: #1b1813;
    overflow: auto;
    z-index: 40;
  }
  .shop-home--cuchuoishop .shop-nav.mobile-open a {
    min-height: 44px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 760px) {
  .shop-home--cuchuoishop .featured-pagination {
    position: static;
    display: flex;
    width: 100%;
    min-height: 54px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
  }
}

@media (min-width: 761px) {
  .shop-home--cuchuoishop .featured-pagination {
    justify-content: center;
    padding-left: 0;
    gap: 14px;
  }
}

/* Match bacsipubgshop's page picker on the public homepage. */
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-picker {
  position: relative;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-trigger {
  display: flex;
  min-width: 188px;
  min-height: 54px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 20px;
  border: 1px solid #2fc4dc !important;
  border-radius: 14px;
  background: #2fc4dc !important;
  color: #063848 !important;
  font-size: 16px !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  list-style: none;
  cursor: pointer;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-trigger > span {
  margin: 0;
  padding: 0;
  background: transparent !important;
  color: inherit !important;
  font-size: inherit;
  line-height: 1.2;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-trigger::-webkit-details-marker { display: none; }
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-trigger svg { width: 18px; height: 18px; }
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-picker[open]::after {
  content: '';
  position: absolute;
  z-index: 21;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 16px;
  height: 16px;
  border-right: 1px solid #ccdde2;
  border-bottom: 1px solid #ccdde2;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-panel {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 20px);
  left: 50%;
  display: grid;
  width: min(376px, calc(100vw - 32px));
  max-height: min(320px, 50vh);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border: 1px solid #ccdde2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 36px rgb(42 77 91 / .15);
  transform: translateX(-50%);
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-page {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ccdde2 !important;
  border-radius: 10px;
  background: #fff !important;
  color: #31515f !important;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 14px rgb(42 77 91 / .06);
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-page:hover { border-color: #65c7da !important; color: #087e97 !important; transform: translateY(-1px); }
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-page[aria-current='page'] { border-color: #22b9d1 !important; background: #22b9d1 !important; color: #063848 !important; box-shadow: 0 7px 18px rgb(40 211 230 / .2); }
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-control {
  display: inline-flex;
  width: 54px;
  min-width: 54px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: #ccdde2 !important;
  border-radius: 11px;
  background: #fff !important;
  color: #31515f !important;
  box-shadow: 0 5px 14px rgb(42 77 91 / .06);
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-control svg { width: 17px; height: 17px; }
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-control.is-disabled { opacity: .38; cursor: not-allowed; }
@media (max-width: 767px) {
  .shop-home--cuchuoishop .featured-pagination { gap: 10px; margin: 22px 0; }
  .shop-home--cuchuoishop .featured-pagination .catalog-pagination-trigger { min-width: 168px; padding-inline: 12px; }
  .shop-home--cuchuoishop .featured-pagination .catalog-pagination-panel { gap: 8px; padding: 14px; }
  .shop-home--cuchuoishop .featured-pagination .catalog-pagination-control { width: 44px; min-width: 44px; min-height: 44px; }
}

/* Keep the picker controls inside Củ Chuối's dark gold palette. */
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-trigger {
  border-color: var(--cch-gold) !important;
  background: var(--cch-gold) !important;
  color: #241b0d !important;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-panel {
  border-color: #5b4a2f !important;
  background: #171716 !important;
  box-shadow: 0 18px 40px rgb(0 0 0 / .5) !important;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-picker[open]::after {
  border-color: #5b4a2f !important;
  background: #171716 !important;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-page,
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-control {
  border-color: #5b4a2f !important;
  background: #211d15 !important;
  color: #d5c5a8 !important;
  box-shadow: inset 0 1px rgb(255 255 255 / .04) !important;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-page:hover,
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-control:hover:not(.is-disabled) {
  border-color: var(--cch-gold) !important;
  background: #2c2519 !important;
  color: var(--cch-gold-bright) !important;
}
.shop-home--cuchuoishop .featured-pagination .catalog-pagination-page[aria-current='page'] {
  border-color: var(--cch-gold) !important;
  background: var(--cch-gold) !important;
  color: #241b0d !important;
  box-shadow: 0 7px 18px rgb(222 193 138 / .2) !important;
}

/* Remove the legacy neon accents from homepage-only shared widgets. */
.shop-home--cuchuoishop .shop-header {
  border-top-color: transparent;
  border-right-color: #3b3325;
  border-bottom-color: #3b3325;
  border-left-color: #3b3325;
}
.shop-home--cuchuoishop .shop-hero {
  border-top-color: #342d20;
  border-right-color: #342d20;
  border-bottom-color: #342d20;
  border-left-color: #342d20;
  background: #0d0d0e;
  box-shadow: 0 18px 42px rgb(0 0 0 / .32);
}
body:has(.shop-home--cuchuoishop) .shop-announcement {
  border-color: #5b4a2f;
  background: transparent;
}
body:has(.shop-home--cuchuoishop) .shop-announcement::backdrop { background: rgb(8 7 5 / .78); }
body:has(.shop-home--cuchuoishop) .shop-announcement-card {
  background: radial-gradient(circle at 15% 0%, rgb(222 193 138 / .12), transparent 45%), linear-gradient(155deg, #282218, #0f0e0c 72%);
}
body:has(.shop-home--cuchuoishop) .shop-announcement-kicker,
body:has(.shop-home--cuchuoishop) .shop-announcement-description span { color: var(--cch-gold); }
body:has(.shop-home--cuchuoishop) .shop-announcement-card h2 { color: var(--cch-text); }
body:has(.shop-home--cuchuoishop) .shop-announcement-description { color: var(--cch-muted); }
body:has(.shop-home--cuchuoishop) .shop-announcement-close {
  border-color: #5b4a2f;
  background: #171614;
  color: #d5c5a8;
}
body:has(.shop-home--cuchuoishop) .shop-announcement-close:hover { background: #2c2519; color: var(--cch-gold-bright); }
body:has(.shop-home--cuchuoishop) .shop-announcement-callout {
  border-color: #80653a;
  background: #211b11;
  color: var(--cch-gold-bright);
}
body:has(.shop-home--cuchuoishop) .shop-announcement-zalo,
body:has(.shop-home--cuchuoishop) .shop-announcement-facebook {
  border-color: #80653a;
  background: #211d15;
  color: var(--cch-gold-bright);
  box-shadow: inset 0 1px rgb(255 255 255 / .05), 0 8px 20px rgb(0 0 0 / .22);
}
body:has(.shop-home--cuchuoishop) .shop-announcement-dismiss {
  border-color: #80653a;
  background: #3a3021;
  color: #eadcc4;
}
body:has(.shop-home--cuchuoishop) .back-to-top {
  border-color: #80653a;
  background: #171614;
  color: var(--cch-gold);
  box-shadow: 0 8px 20px rgb(0 0 0 / .35), inset 0 1px rgb(255 255 255 / .05);
}
body:has(.shop-home--cuchuoishop) .back-to-top:hover { background: var(--cch-gold); color: #241b0d; }
body:has(.shop-home--cuchuoishop) .shop-footer { border-top-color: transparent !important; }
.shop-home--cuchuoishop .menu-mobile { display: none; }
@media (max-width: 760px) {
  .shop-home--cuchuoishop .shop-header { overflow: visible; }
  .shop-home--cuchuoishop .menu-mobile { display: inline-flex; }
  .shop-home--cuchuoishop .shop-nav.mobile-open {
    right: auto;
    left: calc(50% + 2px);
    width: 100vw;
    transform: translateX(-50%) !important;
  }
}

/* Match the reference site's native mobile scrollbar instead of the legacy neon bar. */
@media (max-width: 760px) {
  html:has(.shop-home--cuchuoishop),
  body:has(.shop-home--cuchuoishop),
  body:has(.shop-home--cuchuoishop) * {
    direction: ltr;
    scrollbar-color: auto;
  }
  html:has(.shop-home--cuchuoishop)::-webkit-scrollbar-track,
  body:has(.shop-home--cuchuoishop)::-webkit-scrollbar-track,
  body:has(.shop-home--cuchuoishop) *::-webkit-scrollbar-track {
    background: transparent;
  }
  html:has(.shop-home--cuchuoishop)::-webkit-scrollbar-thumb,
  body:has(.shop-home--cuchuoishop)::-webkit-scrollbar-thumb,
  body:has(.shop-home--cuchuoishop) *::-webkit-scrollbar-thumb {
    border-color: transparent;
    background: transparent;
  }
}

/* Show the complete account image on narrow cards; never crop the source artwork. */
@media (max-width: 760px) {
  .shop-home--cuchuoishop .featured-card .card-image {
    height: auto;
    aspect-ratio: auto;
  }
  .shop-home--cuchuoishop .featured-card .card-image img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

.shop-home--cuchuoishop .saved-nav {
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 37px;
  flex-shrink: 0;
  justify-content: center;
}
.shop-home--cuchuoishop .saved-nav .saved-heart {
  display: block;
  width: auto;
  min-width: 0;
  height: 23px;
  flex: 0 0 auto;
  line-height: 23px;
  overflow: visible;
}
.shop-home--cuchuoishop .saved-nav .saved-heart svg {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shop-home--cuchuoishop .saved-nav b {
  display: inline-flex;
  min-width: 20px;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
}
.shop-home--cuchuoishop .shop-nav a[href="#catalog"] b {
  display: inline-flex;
  min-width: 24px;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1;
}
.shop-home--cuchuoishop .saved-nav .saved-heart svg {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shop-home--cuchuoishop .saved-nav:hover,
.shop-home--cuchuoishop .saved-nav:focus-visible { color: var(--cch-gold-bright); }
.shop-home--cuchuoishop .card-save {
  position: static;
  display: grid;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  flex: 0 0 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #dfc897;
  cursor: pointer;
}
.shop-home--cuchuoishop .card-save svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shop-home--cuchuoishop .card-save:hover,
.shop-home--cuchuoishop .card-save.is-saved {
  color: var(--cch-gold-bright);
}
.shop-home--cuchuoishop .card-save.is-saved svg { fill: currentColor; }
.shop-home--cuchuoishop .collection-section {
  scroll-margin-top: 92px;
  padding: 22px;
  border: 1px solid var(--cch-line);
  border-radius: 12px;
  background: var(--cch-panel);
}
.shop-home--cuchuoishop .collection-clear {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #5b4a2f;
  border-radius: 7px;
  background: #211d15;
  color: #d5c5a8;
  cursor: pointer;
}
.shop-home--cuchuoishop .collection-list { display: grid; gap: 9px; }
.shop-home--cuchuoishop .collection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #4b402b;
  border-radius: 8px;
  background: #211d15;
}
.shop-home--cuchuoishop .collection-item-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: #eadcc4;
}
.shop-home--cuchuoishop .collection-item-link img { width: 76px; height: 48px; flex: 0 0 auto; object-fit: contain; background: #090909; border-radius: 5px; }
.shop-home--cuchuoishop .collection-item-link span { min-width: 0; }
.shop-home--cuchuoishop .collection-item-link strong,
.shop-home--cuchuoishop .collection-item-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-home--cuchuoishop .collection-item-link strong { font-size: 13px; }
.shop-home--cuchuoishop .collection-item-link small { margin-top: 3px; color: var(--cch-gold); font-size: 11px; }
.shop-home--cuchuoishop .collection-item-remove { width: 32px; min-width: 32px; height: 32px; border: 0; border-radius: 0; color: #d5c5a8; font-size: 18px; }
.shop-home--cuchuoishop .collection-empty { margin: 12px 0 0; color: var(--cch-muted); font-size: 12px; }
@media (max-width: 760px) {
  .shop-home--cuchuoishop .shop-header-actions { margin-left: auto; }
  .shop-home--cuchuoishop .saved-nav { min-width: 37px; }
  .shop-home--cuchuoishop .saved-nav .saved-heart { width: auto; min-width: 0; }
  .shop-home--cuchuoishop .collection-section { padding: 16px; }
  .shop-home--cuchuoishop .collection-section .section-heading { align-items: center; }
  .shop-home--cuchuoishop .collection-clear { font-size: 11px; }
}

html:has(.shop-home--cuchuoishop),
body:has(.shop-home--cuchuoishop) {
  overflow-x: hidden;
}
@media (max-width: 359px) {
  .shop-home--cuchuoishop .shop-header { padding-inline: 11px; }
  .shop-home--cuchuoishop .shop-header-actions { gap: 0; }
  .shop-home--cuchuoishop .shop-logo { font-size: 17px; }
  .shop-home--cuchuoishop .shop-logo > .banana-logo { width: 32px; height: 32px; min-width: 32px; }
  .shop-home--cuchuoishop .shop-logo > .banana-logo svg { width: 24px; height: 24px; }
  .shop-home--cuchuoishop .shop-logo > span:last-child { font-size: 17px; }
  .shop-home--cuchuoishop .shop-logo > span:last-child small { font-size: 7px; }
}

/* Keep card badges and actions below the image so the artwork stays unobstructed. */
.shop-home--cuchuoishop .featured-card .card-top-actions {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.shop-home--cuchuoishop .featured-card .card-top-actions > span[aria-hidden='true'] { flex: 1; }
.shop-home--cuchuoishop .featured-card .card-top-actions .badge {
  position: static;
  flex: 0 0 auto;
  padding: 5px 9px;
}
.shop-home--cuchuoishop .featured-card .card-top-actions .badge.gold {
  border-color: #ef4444;
  background: #ef4444;
  color: #fff;
  box-shadow: none;
}
.shop-home--cuchuoishop .featured-card .card-code-line .status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #63e58d !important;
  line-height: 1.2;
}
.shop-home--cuchuoishop .featured-card .card-code-line .status i {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #43d879;
  box-shadow: 0 0 7px rgb(67 216 121 / .65);
}
.shop-home--cuchuoishop .featured-card .card-status-line {
  justify-content: flex-end;
}
.shop-home--cuchuoishop .featured-card .card-save.is-saved {
  color: #f04d52;
}
.shop-home--cuchuoishop .featured-card .card-save.is-saved svg {
  fill: currentColor;
  stroke: currentColor;
}
.shop-home--cuchuoishop .featured-card .card-save:focus,
.shop-home--cuchuoishop .featured-card .card-save:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
.shop-home--cuchuoishop .featured-card .card-code-line .status i {
  transform: translateY(-1px);
}

/* Compact the card body so the metadata stays grouped below the artwork. */
.shop-home--cuchuoishop .featured-card .card-body {
  padding: 12px 16px 14px;
}
.shop-home--cuchuoishop .featured-card .card-top-actions {
  min-height: 30px;
  margin-bottom: 4px;
}
.shop-home--cuchuoishop .featured-card .card-save {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  flex-basis: 30px;
}
.shop-home--cuchuoishop .featured-card .card-save svg {
  width: 22px;
  height: 22px;
}
.shop-home--cuchuoishop .featured-card .card-status-line {
  margin-bottom: 4px;
}
.shop-home--cuchuoishop .featured-card h3 {
  margin: 5px 0 8px;
  line-height: 1.2;
}
.shop-home--cuchuoishop .featured-card .card-bottom {
  margin-top: 8px;
  padding-top: 10px;
}

/* Củ Chuối theme for account details. */
body:has(.account-detail--cuchuoishop) {
  --cch-bg: #0d0d0e;
  --cch-panel: #171716;
  --cch-panel-2: #211d15;
  --cch-line: #4b402c;
  --cch-gold: #dec18a;
  --cch-gold-bright: #f0d39a;
  --cch-text: #f2ede3;
  --cch-muted: #b0a38d;
  background: var(--cch-bg);
  color: var(--cch-text);
}
body:has(.account-detail--cuchuoishop) > main { padding: 0; }
.account-detail--cuchuoishop {
  width: min(calc(100% - 72px), 1308px);
  margin-inline: auto;
  padding-bottom: 30px;
  color: var(--cch-text);
}
.account-detail--cuchuoishop .detail-back { margin: 0 0 18px; }
.account-detail--cuchuoishop .detail-back a {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #5b4a2f;
  border-radius: 7px;
  background: #211d15 !important;
  color: var(--cch-gold-bright);
  font-size: 11px;
}
.account-detail--cuchuoishop .account-detail-grid { grid-template-columns: minmax(0, 1.55fr) minmax(360px, .85fr); gap: 24px; align-items: start; }
.account-detail--cuchuoishop .account-image-viewer-trigger {
  height: auto;
  aspect-ratio: auto;
  border: 1px solid #5b4a2f;
  border-radius: 12px;
  background: #090909 !important;
}
.account-detail--cuchuoishop .account-detail-image { width: 100%; height: auto; max-height: none; object-fit: contain; }
.account-detail--cuchuoishop .account-image-viewer-trigger > span {
  bottom: 12px;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgb(23 23 22 / .94);
  color: #ded3c2;
  font-size: 9px;
}
.account-detail--cuchuoishop .account-gallery-thumbs { gap: 8px; }
.account-detail--cuchuoishop .account-gallery-thumb { border-color: #5b4a2f; background: #111110; border-radius: 7px; }
.account-detail--cuchuoishop .account-gallery-thumb:hover,
.account-detail--cuchuoishop .account-gallery-thumb.is-active { border-color: var(--cch-gold); }
.account-detail--cuchuoishop .account-detail-panel {
  padding: 24px;
  border: 1px solid var(--cch-line);
  border-radius: 12px;
  background: var(--cch-panel);
  box-shadow: 0 12px 28px #0005;
}
.account-detail--cuchuoishop .detail-status {
  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid #228f62;
  border-radius: 7px;
  background: rgb(29 157 101 / .13);
  color: #63e58d;
  font-size: 10px;
}
.account-detail--cuchuoishop .account-detail-panel .eyebrow { margin-bottom: 5px; color: var(--cch-gold); font-size: 9px; letter-spacing: 1.5px; }
.account-detail--cuchuoishop .account-detail-panel h1 { margin: 0 0 18px; color: var(--cch-text); font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.04em; }
.account-detail--cuchuoishop .detail-price {
  gap: 7px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #5b4a2f;
  border-radius: 11px;
  background: var(--cch-panel-2) !important;
}
.account-detail--cuchuoishop .detail-price span,
.account-detail--cuchuoishop .detail-price small,
.account-detail--cuchuoishop .detail-facts dt { color: var(--cch-muted); }
.account-detail--cuchuoishop .detail-price strong { color: var(--cch-gold-bright); font-size: clamp(36px, 4vw, 50px); }
.account-detail--cuchuoishop .detail-facts { margin-bottom: 16px; }
.account-detail--cuchuoishop .detail-facts div { padding: 11px 0; border-bottom-color: #403522; }
.account-detail--cuchuoishop .detail-facts dd { color: var(--cch-text); }
.account-detail--cuchuoishop .account-highlight-section,
.account-detail--cuchuoishop .account-description {
  margin: 0 0 12px;
  padding: 13px 14px;
  border: 1px solid #5b4a2f;
  border-radius: 9px;
  background: #211d15 !important;
}
.account-detail--cuchuoishop .account-highlight-section h2,
.account-detail--cuchuoishop .account-description h2 { margin: 0 0 8px; color: var(--cch-gold); font-size: 11px; }
.account-detail--cuchuoishop .account-highlights li { border-color: #5b4a2f; background: #282217; color: #d5c5a8; }
.account-detail--cuchuoishop .account-description p { color: #d5c5a8; }
.account-detail--cuchuoishop .contact-actions { position: static; display: grid; gap: 8px; }
.account-detail--cuchuoishop .contact-actions a { min-height: 42px; border: 1px solid #5b4a2f; border-radius: 7px; background: #211d15; color: var(--cch-gold-bright); font-size: 11px; }
.account-detail--cuchuoishop .contact-actions a:first-child,
.account-detail--cuchuoishop .contact-actions a:last-child { border-color: #5b4a2f; background: #211d15; color: var(--cch-gold-bright); }
.account-detail--cuchuoishop .detail-note { margin-top: 14px; padding: 10px 12px; border-color: #5b4a2f; background: #211d15 !important; color: var(--cch-muted); font-size: 9px; }
@media (max-width: 760px) {
  .account-detail--cuchuoishop { width: calc(100% - 32px); }
  .account-detail--cuchuoishop .detail-back { margin: 0 0 12px; }
  .account-detail--cuchuoishop .account-detail-grid { grid-template-columns: 1fr; gap: 14px; }
  .account-detail--cuchuoishop .account-image-viewer-trigger { border-radius: 10px; }
  .account-detail--cuchuoishop .account-detail-panel { padding: 17px; }
  .account-detail--cuchuoishop .account-detail-panel h1 { margin-bottom: 15px; font-size: 30px; }
  .account-detail--cuchuoishop .detail-price { padding: 15px; }
  .account-detail--cuchuoishop .detail-price strong { font-size: 36px; }
  .account-detail--cuchuoishop .detail-facts { font-size: 10px; }
  .account-detail--cuchuoishop .contact-actions a { font-size: 10px; }
}

/* Keep the public header attached to the viewport while the announcement scrolls away. */
.shop-home--cuchuoishop.cch-header-fixed > .shop-header {
  position: fixed !important;
  top: var(--cch-announcement-height, 30px);
  left: 0;
  right: 0;
  z-index: 90;
  width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: top .2s ease, box-shadow .2s ease;
}
.shop-home--cuchuoishop.cch-header-fixed.cch-header-scrolled > .shop-header {
  top: 0;
  box-shadow: 0 10px 28px rgb(0 0 0 / .28);
}
.shop-home--cuchuoishop > .cch-header-spacer { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .shop-home--cuchuoishop.cch-header-fixed > .shop-header { transition: none; }
}

/* Củ Chuối chatbot: public-only launcher and search assistant. */
.chatbot-toggle{position:fixed;right:20px;bottom:82px;z-index:1200;display:inline-flex;align-items:center;gap:8px;border:1px solid #947442;border-radius:999px;background:linear-gradient(140deg,#322819,#151411);color:#f4dfb5;padding:7px 15px 7px 8px;font:700 13px/1 inherit;box-shadow:0 10px 30px #0007,0 0 24px #d4ad5b12;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.chatbot-toggle:hover{transform:translateY(-2px);border-color:#eac98c;box-shadow:0 12px 35px #0009,0 0 25px #d4ad5b25}
.chatbot-toggle svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.chatbot-toggle span{white-space:nowrap}
.chatbot-panel{position:fixed;right:20px;bottom:136px;z-index:1201;display:flex;width:min(390px,calc(100vw - 28px));height:520px;max-height:calc(100dvh - 160px);flex-direction:column;overflow:hidden;border:1px solid #66512d;border-radius:18px;background:#171614;color:#f4ead8;box-shadow:0 18px 55px #000b}
.chatbot-panel[hidden]{display:none!important}
header.chatbot-header{position:static;height:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:0;border-bottom:1px solid #443622;background:#252017;backdrop-filter:none}
.chatbot-header strong,.chatbot-header small{display:block}.chatbot-header small{margin-top:3px;color:#bba88b;font-size:11px}.chatbot-header button{width:32px;height:32px;padding:0;border:0;background:transparent;color:#f4ead8;font-size:25px;line-height:1;cursor:pointer}
.chatbot-messages{display:flex;min-height:0;max-height:none;flex:1 1 auto;flex-direction:column;gap:8px;overflow:auto;overflow-anchor:none;padding:14px;scrollbar-width:thin;scrollbar-color:#b9985d #171614}
.chatbot-messages::-webkit-scrollbar{width:5px;height:5px}.chatbot-messages::-webkit-scrollbar-button{display:none;width:0;height:0}.chatbot-messages::-webkit-scrollbar-button:single-button,.chatbot-messages::-webkit-scrollbar-button:vertical:start:decrement,.chatbot-messages::-webkit-scrollbar-button:vertical:end:increment,.chatbot-messages::-webkit-scrollbar-button:horizontal:start:decrement,.chatbot-messages::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;height:0!important;background:transparent!important}.chatbot-messages::-webkit-scrollbar-track{background:#171614}.chatbot-messages::-webkit-scrollbar-thumb{border:1px solid #171614;border-radius:999px;background:#b9985d}
.chatbot-message{width:fit-content;max-width:90%;margin:0;border-radius:12px;padding:8px 11px;font-size:13px;line-height:1.4}.chatbot-message--bot{background:#262117;color:#e1d4be}.chatbot-message--user{align-self:flex-end;background:#d4b27b;color:#21190d}.chatbot-message-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px;color:#bba88b;font-size:10px;font-weight:700;line-height:1.2}.chatbot-message-meta time{font-weight:500;opacity:.86}.chatbot-message--user .chatbot-message-meta{color:#5b4212}.chatbot-message-text{margin:0}
.chatbot-suggestions{display:flex;flex:none;gap:6px;overflow:auto;padding:0 14px 10px}.chatbot-suggestions button{flex:none;border:1px solid #5b472b;border-radius:999px;background:#2a2318;color:#ddc69f;padding:6px 9px;font-size:11px;cursor:pointer}.chatbot-suggestions button:focus-visible{border-color:#d4b27b;outline:0;box-shadow:0 0 0 1px #d4b27b66}
.chatbot-form{display:flex;flex:none;gap:8px;padding:10px 14px 14px;border-top:1px solid #443622}.chatbot-form textarea{min-width:0;min-height:40px;max-height:112px;flex:1;resize:none;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#b9985d transparent;border:1px solid #66512d;border-radius:10px;background:#171614;color:#fff;padding:10px;font:inherit;line-height:1.35}.chatbot-form textarea::-webkit-scrollbar{width:3px}.chatbot-form textarea::-webkit-scrollbar-button{display:none;width:0;height:0}.chatbot-form textarea::-webkit-scrollbar-button:single-button,.chatbot-form textarea::-webkit-scrollbar-button:vertical:start:decrement,.chatbot-form textarea::-webkit-scrollbar-button:vertical:end:increment,.chatbot-form textarea::-webkit-scrollbar-button:horizontal:start:decrement,.chatbot-form textarea::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;height:0!important;background:transparent!important}.chatbot-form textarea::-webkit-scrollbar-track{background:transparent}.chatbot-form textarea::-webkit-scrollbar-thumb{border-radius:999px;background:#b9985d}.chatbot-form textarea:focus,.chatbot-form textarea:focus-visible{border-color:#d4b27b;outline:0;box-shadow:0 0 0 2px #d4b27b33}.chatbot-form>button{display:grid;width:42px;min-width:42px;height:42px;place-items:center;padding:0;border:0;border-radius:10px;background:#d4b27b;color:#21190d;cursor:pointer}.chatbot-form>button svg{width:21px;height:21px;fill:currentColor}
.chatbot-results{display:grid;gap:7px}.chatbot-result{display:flex;align-items:center;gap:8px;border-radius:10px;background:#30291d;color:#f7ead2;padding:6px}.chatbot-result-image{display:block;flex:none;cursor:zoom-in;line-height:0}.chatbot-result img{width:58px;height:34px;object-fit:cover;border-radius:6px}.chatbot-result-info{min-width:0;flex:1;color:inherit;text-decoration:none}.chatbot-result b,.chatbot-result strong,.chatbot-result small{display:block}.chatbot-result strong{color:#e6c991;font-size:12px}.chatbot-result small{color:#b9aa8f;font-size:10px}.chatbot-more{color:#e6c991;font-size:12px;font-weight:700;text-decoration:none}.chatbot-contact-links{display:flex;flex-wrap:wrap;gap:7px}.chatbot-contact-links a{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#d4b27b;color:#21190d;padding:7px 10px;font-size:11px;font-weight:700;text-decoration:none}.chatbot-contact-links .chatbot-contact-link--zalo{background:#168cff;color:#fff}.chatbot-contact-links .chatbot-contact-link--box{background:#2f6fe4;color:#fff}.chatbot-contact-links .chatbot-contact-link--facebook{background:#1877f2;color:#fff}.chatbot-contact-icon{display:inline-grid;width:15px;height:15px;place-items:center}.chatbot-contact-icon svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.chatbot-contact-icon img{display:block;width:15px;height:15px;object-fit:contain}.chatbot-typing{display:inline-flex;align-items:center;gap:8px}.chatbot-typing-label{color:#bba88b;font-size:10px;font-weight:700}.chatbot-typing-dots{display:inline-flex;gap:3px;align-items:center;height:12px}.chatbot-typing-dots i{width:4px;height:4px;border-radius:50%;background:#d4b27b;animation:chatbot-typing-bounce 1s infinite ease-in-out}.chatbot-typing-dots i:nth-child(2){animation-delay:.14s}.chatbot-typing-dots i:nth-child(3){animation-delay:.28s}@keyframes chatbot-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
body.chatbot-open{overflow:hidden}
@media (max-width:767px){.chatbot-toggle{right:12px;bottom:calc(164px + env(safe-area-inset-bottom));width:auto;min-width:62px;min-height:62px;flex-direction:column;gap:0;padding:2px 7px 6px;border-radius:17px}.chatbot-toggle svg{width:48px;height:48px}.chatbot-toggle span{font-size:10px;line-height:1.2}.chatbot-panel{top:calc(var(--chatbot-viewport-top,0px) + 8px);right:8px;bottom:auto;width:calc(100% - 16px);height:calc(var(--chatbot-viewport-height,100dvh) - 16px);max-height:none;border-radius:18px}body.chatbot-open .chatbot-toggle{visibility:hidden;pointer-events:none}}

/* Image viewer sizing matches TBP: preserve the source ratio instead of stretching to the modal. */
.image-viewer-dialog {
  width: fit-content;
  max-width: 100%;
  height: auto;
  grid-template-rows: auto auto auto;
}
.image-viewer-image {
  width: auto;
  height: auto;
  max-width: min(1680px, calc(100vw - 54px));
  max-height: calc(100dvh - 198px);
}
@media (max-width: 767px) {
  .image-viewer-dialog { height: auto; }
  .image-viewer-image {
    max-width: calc(100vw - 22px);
    max-height: calc(100dvh - 138px);
  }
}

/* Keep the image viewer above the chatbot and every public floating control, as in TBP. */
.image-viewer { z-index: 1300; }

/* Match the Củ Chuối brown-gold theme in the viewer action. */
.image-viewer-detail {
  border-color: #8b6e3f;
  background: #211d15;
  color: #e6c991;
  box-shadow: inset 0 1px rgb(255 255 255 / .06);
}
.image-viewer-detail:hover,
.image-viewer-detail:focus-visible {
  border-color: #dec18a;
  background: #302719;
  color: #f0d39a;
}

/* Keep the viewer close control clean on the brown-gold theme. */
.image-viewer-close {
  border: 0;
  box-shadow: none;
  background: #211d15;
  color: #e6c991;
}
.image-viewer-close:hover,
.image-viewer-close:focus-visible {
  border: 0;
  box-shadow: none;
  outline: 0;
  background: #302719;
  color: #f0d39a;
}

/* Clone the reference support launcher and keep the chat bubble anchored to it. */
.chatbot-toggle {
  right: 24px;
  bottom: 24px;
  gap: 10px;
  width: auto;
  max-width: 250px;
  min-height: 66px;
  padding: 6px 20px 6px 5px;
  border-radius: 19px;
  background: linear-gradient(140deg, #322819, #151411);
  color: #f4dfb5;
}
.chatbot-toggle .support-avatar {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  place-items: center;
}
.chatbot-toggle .support-avatar img {
  display: block;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 3px 3px #0008);
}
.chatbot-toggle .support-label {
  display: block;
  text-align: left;
  line-height: 1.4;
  font-size: 14px;
}
.chatbot-toggle .support-label strong,
.chatbot-toggle .support-label small {
  display: block;
}
.chatbot-toggle .support-label strong { font-size: 14px; font-weight: 750; letter-spacing: .1px; }
.chatbot-toggle .support-label small { margin-top: 4px; color: #b8a17a; font-size: 10px; font-weight: 400; }
.chatbot-toggle .support-mobile-label { display: none; }
.chatbot-toggle .support-spark {
  position: absolute;
  top: 4px;
  right: 0;
  color: #f1d69c;
  font-size: 15px;
  line-height: 1;
}
.chatbot-panel {
  right: 24px;
  bottom: 104px;
  width: min(390px, calc(100vw - 48px));
  max-height: calc(100dvh - 128px);
  overflow: visible;
}
.chatbot-panel::before,
.chatbot-panel::after {
  position: absolute;
  right: 36px;
  width: 0;
  height: 0;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  pointer-events: none;
}
.chatbot-panel::before {
  bottom: -12px;
  border-bottom: 12px solid #66512d;
}
.chatbot-panel::after {
  right: 38px;
  bottom: -10px;
  border-right-width: 10px;
  border-left-width: 10px;
  border-bottom: 10px solid #171614;
}
@media (max-width: 767px) {
  .chatbot-toggle {
    right: 12px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 62px;
    max-width: 62px;
    min-height: 72px;
    padding: 0 0 5px;
    border-radius: 17px;
    flex-direction: column;
    gap: 0;
  }
  .chatbot-toggle .support-avatar { width: 58px; height: 54px; }
  .chatbot-toggle .support-avatar img { width: 58px; height: 58px; }
  .chatbot-toggle .support-label { display: none; }
  .chatbot-toggle .support-mobile-label {
    display: block;
    color: #edd2a0;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: .2px;
  }
  .chatbot-toggle .support-spark { top: 5px; right: 2px; font-size: 12px; }
  .chatbot-panel {
    right: 12px;
    bottom: calc(102px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 126px);
  }
}

/* Match TBP's compact, color-coded contact pills inside chatbot replies. */
.chatbot-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chatbot-contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0 !important;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.chatbot-contact-links a.chatbot-contact-link--phone {
  background: #39c967 !important;
  color: #082d17;
}
.chatbot-contact-links a.chatbot-contact-link--zalo {
  background: #168cff !important;
  color: #fff;
}
.chatbot-contact-links a.chatbot-contact-link--box {
  background: #2f6fe4 !important;
  color: #fff;
}
.chatbot-contact-links a.chatbot-contact-link--facebook {
  background: #1877f2 !important;
  color: #fff;
}
.chatbot-contact-links a:hover,
.chatbot-contact-links a:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.chatbot-contact-icon {
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
}
.chatbot-contact-icon svg,
.chatbot-contact-icon img {
  width: 15px;
  height: 15px;
}

/* The account-code note is secondary copy, but it should remain easy to read. */
.account-detail--cuchuoishop .detail-note {
  border: 0;
  background: transparent !important;
  color: #cbb997;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.45;
}

/* Give the launcher pointer a clean gap and enough contrast against the panel. */
.chatbot-panel {
  bottom: 110px;
}
.chatbot-panel::before,
.chatbot-panel::after {
  z-index: 2;
}
.chatbot-panel::before {
  right: 40px;
  bottom: -10px;
  border-right-width: 10px;
  border-left-width: 10px;
  border-bottom: 10px solid #d4ad5b;
  filter: drop-shadow(0 2px 2px #000b);
}
.chatbot-panel::after {
  display: none;
}
@media (max-width: 767px) {
  .chatbot-panel {
    bottom: calc(108px + env(safe-area-inset-bottom));
  }
}

/* Keep the Facebook mark blue inside the brown-gold announcement popup. */
body:has(.shop-home--cuchuoishop) .shop-announcement-facebook svg {
  color: #1877f2;
  fill: #1877f2;
}

/* The launcher and popup share one anchor so the connector always tracks the launcher center. */
.chatbot-widget {
  position: fixed;
  right: 24px;
  /* Keep the launcher above the 46px back-to-top control. */
  bottom: 82px;
  z-index: 1200;
  display: grid;
  width: max-content;
  max-width: calc(100vw - 24px);
  justify-items: center;
  isolation: isolate;
}
.chatbot-toggle {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 3;
  display: inline-flex;
  min-height: 70px;
  gap: 9px;
  padding: 5px 18px 5px 7px;
  border: 1px solid #947442;
  border-radius: 22px;
  background: linear-gradient(145deg, #322819, #151411);
  box-shadow: 0 12px 32px #0009, 0 0 24px #d4ad5b14;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.chatbot-toggle:hover,
.chatbot-toggle:focus-visible {
  transform: translateY(-2px);
  border-color: #d4ad5b;
  box-shadow: 0 15px 36px #000b, 0 0 26px #d4ad5b25;
}
.chatbot-toggle:focus-visible { outline: 2px solid #d4ad5b; outline-offset: 4px; }
.chatbot-toggle .support-avatar {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(145deg, #3b2f1e, #1a1712);
  filter: drop-shadow(0 3px 5px #0007);
}
.chatbot-toggle .support-avatar img { width: 60px; height: 60px; filter: none; }
.chatbot-toggle .support-label { line-height: 1.35; }
.chatbot-toggle .support-label strong { font-size: 14px; letter-spacing: .02em; }
.chatbot-toggle .support-label small { margin-top: 5px; font-size: 10px; }
.chatbot-panel {
  position: absolute;
  top: auto;
  right: 0;
  bottom: calc(100% + 12px);
  left: auto;
  z-index: 2;
  width: min(390px, calc(100vw - 24px));
  height: min(520px, calc(100dvh - 140px));
  max-height: calc(100dvh - 140px);
  overflow: hidden;
  border: 1px solid rgb(184 139 50 / .62);
  border-radius: 22px;
  background: linear-gradient(165deg, #211d15, #14120f 78%);
  box-shadow: 0 24px 70px #000c, 0 0 0 1px rgb(212 173 91 / .08);
  opacity: 0;
  scale: .96;
  translate: 0 7px;
  transform-origin: bottom center;
  visibility: hidden;
  transition: opacity .2s ease, scale .2s ease, translate .2s ease, visibility 0s linear .2s;
}
.chatbot-panel.chatbot-panel--visible {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  visibility: visible;
  transition-delay: 0s;
}
.chatbot-panel::before,
.chatbot-panel::after { display: none; }
body.chatbot-open .chatbot-toggle { visibility: visible; pointer-events: auto; }
@media (max-width: 767px) {
  .chatbot-widget {
    right: 12px;
    bottom: calc(154px + env(safe-area-inset-bottom));
  }
  .chatbot-toggle {
    width: 62px;
    min-height: 72px;
    padding: 0 0 5px;
    border-radius: 18px;
    flex-direction: column;
    gap: 0;
  }
  .chatbot-toggle .support-avatar {
    width: 58px;
    height: 54px;
    border-radius: 16px;
  }
  .chatbot-toggle .support-avatar img { width: 58px; height: 58px; }
  .chatbot-toggle .support-spark { top: 5px; right: 2px; }
  .chatbot-panel {
    position: fixed;
    top: calc(var(--chatbot-viewport-top, 0px) + 8px);
    right: 8px;
    bottom: auto;
    width: calc(100% - 16px);
    height: calc(var(--chatbot-viewport-height, 100dvh) - 16px);
    max-height: none;
    border-radius: 18px;
  }
  body.chatbot-open .chatbot-toggle { visibility: hidden; pointer-events: none; }
}

/* Keep the account detail action crisp on touch screens; avoid platform emoji glyphs. */
.shop-home--cuchuoishop .featured-card .card-buy {
  display: grid;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  flex: 0 0 46px;
  place-items: center;
  padding: 0;
  border: 1px solid #8b6e3f;
  border-radius: 12px;
  background: linear-gradient(145deg, #302719, #1a1711);
  color: #e6c991;
  box-shadow: 0 6px 16px rgb(0 0 0 / .22);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.shop-home--cuchuoishop .featured-card .card-buy svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.shop-home--cuchuoishop .featured-card .card-buy:hover,
.shop-home--cuchuoishop .featured-card .card-buy:focus-visible {
  border-color: #dec18a;
  background: linear-gradient(145deg, #4a3920, #211b12);
  color: #f4dca5;
  box-shadow: 0 8px 20px rgb(0 0 0 / .3), 0 0 0 3px rgb(222 193 138 / .12);
  transform: translateY(-2px);
}