:root {
  color-scheme: dark;
  --background: #0B0D12;
  --surface: #141821;
  --primary: #F4D36A;
  --accent: #C62828;
  --text: #F5F7FA;
  --muted: #B8BEC9;
  --border: #343A46;
  --border-warm: #71633B;
  --focus: var(--primary);
  --navy-950: var(--background);
  --navy-900: var(--surface);
  --navy-850: var(--surface);
  --navy-800: #1D2330;
  --cyan: var(--primary);
  --cyan-soft: var(--primary);
  --yellow: var(--primary);
  --coral: var(--primary);
  --catalog-bg: var(--background);
  --catalog-panel: var(--surface);
  --catalog-panel-2: #1D2330;
  --catalog-line: var(--border);
  --catalog-cyan: var(--primary);
  --catalog-gold: var(--primary);
  --catalog-orange: var(--primary);
  --admin-navy: var(--background);
  --admin-navy-2: var(--surface);
  --admin-ink: var(--text);
  --admin-cyan: var(--primary);
  --admin-cyan-soft: var(--primary);
  --admin-yellow: var(--primary);
  --admin-coral: var(--accent);
  --admin-green: var(--primary);
  --admin-blue: var(--primary);
  --admin-canvas: var(--background);
  --admin-line: var(--border);
  --admin-muted: var(--muted);
  --admin-white: var(--surface);
}

/* The template layer preserves layout and behavior; these rules own the shop palette. */
body { background: var(--background); color: var(--text); }
body * { color: inherit; border-color: var(--border); background-color: transparent; background-image: none; box-shadow: none; text-shadow: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input, select, textarea { accent-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
body :where(p, small, dt, label, .account-date, .catalog-status, .auth-description) { color: var(--muted); }
body :where(h1, h2, h3, h4, strong, b, dd) { color: var(--text); }
body :where(button, input, select, textarea, summary) { background-color: var(--surface); color: var(--text); }
body :where(.shop-header, .shop-footer, .catalog-shell, .catalog-search, .catalog-search--wide,
  .catalog-filter-bar, .catalog-filter-menu, .catalog-inline-menu, .catalog-price-panel,
  .catalog-price-input, .catalog-price-summary, .account-card, .account-detail-panel,
  .account-description, .detail-note, .detail-price, .benefit-strip, .trust-strip,
  .shop-announcement, .shop-announcement-card, .mobile-contact-bar, .image-viewer-dialog,
  .installment-calculator, .installment-modal-card, .installment-modal-header,
  .installment-select-menu, .installment-select-trigger, .installment-summary div,
  .installment-schedule-row, .installment-message, .auth-shell, .auth-form, .auth-brand,
  .admin-top, .admin-nav, .analytics-card, .summary-grid article, .account-filters,
  .account-table, .account-cards article, .account-form, .form-meta, .image-panel,
  .fields-panel, .fields-panel footer, .custom-select-menu, .custom-select-trigger,
  .admin-filter-multiselect-menu, .admin-modal-dialog, .bulk-toolbar,
  .account-quick-features form, .image-gallery-item, .image-gallery-placeholder,
  .admin-image-viewer-dialog, .security-page) { background-color: var(--surface); }
body :where(.account-cover-link, .account-image-viewer-trigger, .image-viewer-stage,
  .admin-image-viewer-stage, .dropzone, .auth-input, .detail-note, .installment-field input[readonly]) { background-color: var(--background); }
body :where(.shop-nav a, .catalog-bands a, .catalog-pagination a, .catalog-filter-group a,
  .catalog-inline-menu a, .account-detail-link, .account-installment-link, .detail-back a,
  .detail-status, .account-highlights li, .admin-account-highlights li,
  .catalog-price-presets a, .catalog-price-actions a, .pagination a, .small-button,
  .icon-button, .shop-announcement-dismiss, .installment-select-option) { background-color: var(--surface); color: var(--text); }
body .catalog-bands a:first-child { font-size: 12px; font-weight: 800; }
body .catalog-bands a small { background: transparent; color: #000; font-size: 12px; font-weight: 800; line-height: 1.2; opacity: 1; }
body :where(.shop-hotline, .shop-logo-wordmark b, .catalog-kicker, .eyebrow,
  .catalog-price-label, .catalog-price-step, .catalog-price-heading-icon,
  .account-prices strong, .detail-price strong, .image-viewer-price strong,
  .installment-summary dd, .auth-eyebrow, .admin-logo em, .admin-nav a svg,
  .mobile-contact-icon, .benefit-strip svg, .trust-strip svg,
  .installment-toggle-label svg, .installment-modal-kicker) { color: var(--primary); }
.account-prices strong, .account-prices p:last-child strong, .account-price strong { color: var(--primary) !important; }
.account-date { color: var(--muted) !important; }
.shop-logo--tqt .shop-logo-avatar { object-fit: contain; object-position: center; border-color: var(--border-warm); }
.shop-logo--tqt .shop-logo-wordmark b { color: var(--primary); }
.shop-logo--tqt .shop-logo-wordmark em { background: var(--primary); color: var(--background); }
.shop-footer { border-radius: 16px; }
body.has-auth-shell .auth-main { display: grid; place-items: center; }
body .auth-shell--login .auth-input { border: 1px solid var(--border); }
body .auth-shell--login .auth-input input { outline: none; background: transparent; }
body .auth-shell--login .auth-input input:is(:autofill, :-webkit-autofill) { box-shadow: inset 0 0 0 1000px var(--background); -webkit-text-fill-color: var(--text); caret-color: var(--text); }
body .auth-shell--login .password-toggle { background: transparent; }
body .auth-shell--login .auth-input:focus-within { border-color: var(--primary); }
body .auth-shell--login .auth-input:has(input:focus-visible) > svg { color: var(--primary); }
.admin-logo-avatar { display: block; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--border-warm); border-radius: 50%; object-fit: contain; }
.auth-logo .admin-logo-avatar { width: 48px; height: 48px; flex-basis: 48px; }
.hero-banner-frame { aspect-ratio: 2048 / 1076; background: var(--background); }
.hero-banner-artboard { height: 100%; background: var(--background); }
.hero-banner-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.floating-social-banners img { filter: saturate(.25); }
@media (min-width: 1200px) {
  body:has(.account-detail) .shop-footer { margin-top: 18px; }
}
body :where(.shop-zalo-button, .shop-box-zalo-button, .catalog-search button,
  .catalog-filter-trigger, .catalog-price-actions button, .auth-submit, .primary-action,
  .account-filters button, .fields-panel footer button[type='submit'], .installment-calculate,
  .installment-zalo, .installment-contact-toggle, .shop-announcement-zalo,
  .shop-announcement-facebook, .catalog-bands a[aria-current='page'],
  .catalog-pagination a[aria-current='page'], .catalog-filter-group a[aria-current='page'],
  .catalog-price-presets a[aria-current='page'], .pagination a[aria-current='page'],
  .admin-nav a[aria-current='page']) { background: var(--primary); border-color: var(--primary); color: var(--background); }
body :where(.auth-submit, .primary-action, .shop-zalo-button, .shop-box-zalo-button,
  .shop-announcement-zalo, .shop-announcement-facebook) :where(span, strong, svg) { color: inherit; }
body :where(.contact-actions a:first-child, .account-badge--hot, .admin-hot-badge,
  .hot-toggle.is-active, .danger-button, .auth-alert--error, .installment-error) { background: var(--accent); border-color: var(--accent); color: var(--text); }
body :where(.account-badge--new, .account-badge--rented, .detail-status,
  .auth-alert--success, .installment-paid-message, .shop-announcement-callout) { background: var(--surface); border-color: var(--border-warm); color: var(--primary); }
.shop-nav a[aria-current='page'], .shop-nav a:hover { color: var(--primary); }
.shop-announcement::backdrop, .installment-modal::backdrop,
.admin-image-viewer-backdrop, .image-viewer-backdrop { background: rgb(0 0 0 / .78); }
body :where(.catalog-pagination a, .pagination a, .shop-announcement-close,
  .installment-modal-close, .catalog-price-close, .back-to-top) { color: var(--text); background-color: var(--surface); }
* { scrollbar-color: var(--primary) var(--surface); }
*::-webkit-scrollbar-track { background: var(--surface); }
*::-webkit-scrollbar-thumb { background: var(--primary); border-color: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  body :where(button, summary, .shop-nav a, .catalog-bands a, .account-detail-link,
    .account-installment-link, .catalog-pagination a, .catalog-price-presets a,
    .catalog-inline-menu a, .contact-actions a, .small-button, .icon-button,
    .shop-zalo-button, .shop-box-zalo-button, .shop-announcement-actions a):hover {
    background-color: #1D2330; border-color: var(--primary); color: var(--primary);
  }
  .account-card:hover { border-color: var(--primary); }
}
@media (max-width: 767px) {
  .hero-banner-frame { aspect-ratio: 2048 / 1076; }
  .shop-logo--tqt .shop-logo-wordmark { gap: .3em; }
}