/*
 * ShopHuynhKhoa UI Enhancement Layer
 * CSS-only overrides. Existing markup, copy, assets and application logic remain untouched.
 * Loaded after the original styles.
 */
:root {
  --ui-primary:#0056b3; --ui-primary-light:#1685e8; --ui-primary-dark:#073b70;
  --ui-primary-glow:rgba(0,86,179,.22); --ui-cyan:#00d4ff; --ui-gold:#d97706; --ui-pink:#e64f83;
  --ui-bg-0:#f3f6fa; --ui-bg-1:#f8fafc; --ui-bg-2:#fff; --ui-border:rgba(20,48,82,.10);
  --ui-text:#172638; --ui-muted:#68778b; --ui-success:#0b9b62; --ui-danger:#dc3f59; --ui-warning:#bd7b10;
  --ui-grad-primary:linear-gradient(125deg,var(--ui-primary-light),var(--ui-primary) 58%,var(--ui-primary-dark));
  --ui-grad-card:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,249,253,.96));
  --ui-grad-border:linear-gradient(135deg,rgba(0,212,255,.52),rgba(0,86,179,.18),rgba(230,79,131,.18));
  --ui-r-sm:10px; --ui-r-md:14px; --ui-r-lg:20px; --ui-r-pill:999px;
  --ui-shadow-sm:0 3px 12px rgba(18,42,72,.055); --ui-shadow-md:0 10px 28px rgba(18,42,72,.09);
  --ui-shadow-lg:0 20px 54px rgba(18,42,72,.14); --ui-shadow-glow:0 8px 24px rgba(0,86,179,.20);
  --ui-ease-out:cubic-bezier(.22,1,.36,1); --ui-ease-spring:cubic-bezier(.34,1.56,.64,1);
}
html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:rgba(0,86,179,.55) rgba(20,48,82,.07); }
html::-webkit-scrollbar { width:8px;height:8px; }
html::-webkit-scrollbar-track { background:rgba(20,48,82,.06); }
html::-webkit-scrollbar-thumb { background:rgba(0,86,179,.42);border:2px solid transparent;background-clip:padding-box;border-radius:99px; }
::selection { color:#fff;background:rgba(0,86,179,.78); }
body {
  background:radial-gradient(ellipse at 4% 8%,rgba(0,212,255,.075),transparent 34%),radial-gradient(ellipse at 96% 28%,rgba(0,86,179,.055),transparent 32%),linear-gradient(180deg,#f8fafc 0%,#f2f5f9 55%,#f7f9fc 100%);
  color:var(--ui-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,input,select,textarea { font:inherit; }
button,a,[role="button"],.nav-item,.admin-tab,.deposit-tab { -webkit-tap-highlight-color:transparent; }
button,a,[role="button"],.nav-item,.admin-tab,.deposit-tab,.hero-card,.acc-card,.acc-mini,.service-card,.cat-big-card,.menu-item {
  transition:transform .24s var(--ui-ease-out),box-shadow .24s var(--ui-ease-out),border-color .2s ease,background-color .2s ease,color .2s ease,filter .2s ease;
}
:where(button,a,input,select,textarea,[tabindex]):focus-visible { outline:3px solid rgba(0,150,220,.42);outline-offset:3px; }

/* Header and navigation */
#main-header {
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%);
  border-bottom:1px solid rgba(19,62,103,.10);box-shadow:0 6px 24px rgba(19,48,78,.07);
}
#main-header::after { content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.42),rgba(0,86,179,.18),transparent);pointer-events:none; }
#main-header .logo-mark { border:1px solid rgba(255,255,255,.38);box-shadow:0 5px 16px rgba(0,86,179,.24),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .35s var(--ui-ease-spring),box-shadow .25s ease; }
#main-header .logo:hover .logo-mark { transform:translateY(-2px) rotate(-4deg);box-shadow:0 8px 20px rgba(0,86,179,.28),0 0 0 4px rgba(0,212,255,.08); }
#main-header .logo-text { background:linear-gradient(100deg,#12385f,#0879c8 55%,#12385f);background-size:180% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
#main-header .header-icons button { min-width:40px;min-height:40px;border-radius:13px;background:rgba(241,247,253,.72); }
#main-header .header-icons button:hover { transform:translateY(-2px);background:#eaf4ff;box-shadow:0 5px 14px rgba(0,86,179,.12); }
.badge-noti { border:2px solid #fff;box-shadow:0 2px 8px rgba(220,63,89,.24); }
#bottom-nav { background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-top:1px solid rgba(19,62,103,.10);box-shadow:0 -8px 28px rgba(20,45,72,.09); }
.nav-item { min-height:48px;justify-content:center; }
.nav-item .icon { transition:transform .25s var(--ui-ease-spring); }
.nav-item.active .icon { transform:translateY(-2px) scale(1.08); }
.nav-item.active::after { box-shadow:0 0 10px rgba(0,86,179,.35); }
#messenger-btn { box-shadow:0 8px 24px rgba(0,132,255,.26); }

/* Sections, cards and product catalog */
#main-content,.store-home,.detail-page { background:transparent; }
.section-header { align-items:center; }
.section-title,.shop-title,.cat-page-title,.detail-section-title { letter-spacing:-.35px; }
.section-title { position:relative;padding-left:11px; }
.section-title::before { content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:99px;background:linear-gradient(180deg,var(--ui-cyan),var(--ui-primary)); }
.home-hero { border:1px solid rgba(255,255,255,.24);box-shadow:0 16px 34px rgba(0,65,130,.18),inset 0 1px 0 rgba(255,255,255,.16); }
.home-hero button,.hero-card .btn-action,.btn-buy-big,.service-card .btn-buy,.acc-card .btn-detail,.btn-login {
  background-image:var(--ui-grad-primary);background-size:160% 160%;box-shadow:0 6px 16px rgba(0,86,179,.16);
}
.home-hero button:hover,.hero-card .btn-action:hover,.btn-buy-big:hover,.service-card .btn-buy:hover,.acc-card .btn-detail:hover,.btn-login:hover {
  transform:translateY(-2px);background-position:100% 50%;box-shadow:0 10px 22px rgba(0,86,179,.24);filter:saturate(1.08);
}
.home-hero button:active,.hero-card .btn-action:active,.btn-buy-big:active,.service-card .btn-buy:active,.acc-card .btn-detail:active,.btn-login:active { transform:translateY(0) scale(.985); }
.hero-card,.acc-mini,.acc-card,.service-card,.cat-big-card { border-color:rgba(25,64,104,.10);box-shadow:var(--ui-shadow-sm); }
.hero-card:hover,.acc-mini:hover,.acc-card:hover,.service-card:hover,.cat-big-card:hover { border-color:rgba(0,145,215,.34);box-shadow:var(--ui-shadow-md),0 0 0 3px rgba(0,212,255,.045); }
.hero-card .img-box img,.acc-card .acc-img img,.acc-mini .acc-img img,.service-card .img-box img,.detail-thumbs .thumb img { transition:transform .55s var(--ui-ease-out),filter .35s ease; }
.hero-card:hover .img-box img,.acc-card:hover .acc-img img,.acc-mini:hover .acc-img img,.service-card:hover .img-box img { transform:scale(1.045); }
.acc-card .price-new,.service-card .price,.detail-price-box .price-new,.home-product-grid .price-new { font-variant-numeric:tabular-nums;letter-spacing:-.3px; }
.acc-card .price-badge,.home-discount,.badge-sale { box-shadow:0 3px 10px rgba(230,79,131,.2); }
.acc-grid,.service-grid,.home-product-grid { align-items:stretch; }
.acc-card,.service-card,.hero-card,.acc-mini { min-width:0; }
.filter-btn,.filter-panel,.price-box,.detail-card,.detail-content-card,.policy-box-detail,.bank-card,.settings-section,.login-card,.menu-list { border-color:var(--ui-border);box-shadow:var(--ui-shadow-sm); }
.filter-btn:hover,.price-range button:hover,.filter-ranks label:hover { border-color:rgba(0,86,179,.36);background-color:#f0f7ff; }
.filter-panel { background:rgba(255,255,255,.94); }
.filter-ranks input:checked + span { color:var(--ui-primary); }
.price-range button.active { background:var(--ui-grad-primary); }
.detail-gallery { border:1px solid rgba(25,64,104,.11);border-radius:var(--ui-r-lg);box-shadow:var(--ui-shadow-md);background:#eef3f8; }
.detail-main-img { background-color:#eef3f8; }
.detail-thumbs .thumb { border-radius:10px;box-shadow:0 2px 8px rgba(15,40,70,.07); }
.detail-thumbs .thumb:hover { transform:translateY(-2px); }
.detail-card,.detail-content-card,.policy-box-detail { border-radius:var(--ui-r-lg);background:var(--ui-grad-card);box-shadow:var(--ui-shadow-sm); }
.detail-name { letter-spacing:-.55px; }
.detail-specs { background:#edf3f9; }
.detail-price-box { border-radius:var(--ui-r-md); }
.btn-buy-big { border-radius:12px; }
.detail-lightbox { -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); }
.detail-lightbox-close,.detail-lightbox-nav { border-radius:13px;transition:transform .2s var(--ui-ease-out),background .2s ease; }
.detail-lightbox-close:hover { transform:rotate(8deg);background:rgba(220,63,89,.82); }
.detail-lightbox-nav:hover { background:rgba(0,86,179,.82); }

/* Forms and customer account */
.form-group input,.form-group select,.input-wrap input,.settings-input,.wizard-input,#search-input,.admin-fg input,.admin-fg select,.admin-fg textarea {
  min-height:46px;font-size:16px;border-radius:var(--ui-r-sm);border-color:rgba(25,64,104,.17);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.form-group input:focus,.form-group select:focus,.input-wrap input:focus,.settings-input:focus,.wizard-input:focus,#search-input:focus,.admin-fg input:focus,.admin-fg select:focus,.admin-fg textarea:focus {
  border-color:var(--ui-primary);box-shadow:0 0 0 4px rgba(0,86,179,.10);
}
.form-group label,.admin-fg label { font-weight:700;letter-spacing:.25px; }
.login-card { border-radius:22px;background:rgba(255,255,255,.94);box-shadow:var(--ui-shadow-lg); }
.login-title { letter-spacing:-.6px; }
.user-avatar { box-shadow:0 8px 20px rgba(0,86,179,.18); }
.menu-list { border-radius:16px; }
.menu-item:hover { background:#f1f7fd; }
.denom-btn,.wizard-payment-method button,.wizard-ign-item { border-radius:11px;transition:transform .2s var(--ui-ease-out),box-shadow .2s ease,border-color .2s ease; }
.denom-btn:hover,.wizard-payment-method button:hover,.wizard-ign-item:hover { transform:translateY(-1px);border-color:rgba(0,86,179,.42); }
#qr-box { border:1px solid var(--ui-border);box-shadow:var(--ui-shadow-sm); }

/* SPA admin area */
.admin-page { max-width:1180px;padding:20px 16px 34px; }
.admin-tabs { gap:6px;padding:6px;border:1px solid var(--ui-border);border-radius:15px;background:rgba(255,255,255,.78);box-shadow:var(--ui-shadow-sm);scroll-snap-type:x proximity; }
.admin-tab { min-height:42px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:11px;padding:10px 15px;scroll-snap-align:start; }
.admin-tab:hover { background:#eef6ff;transform:translateY(-1px); }
.admin-tab.active { color:#fff;background:var(--ui-grad-primary);border-color:transparent;box-shadow:0 5px 14px rgba(0,86,179,.19); }
.admin-panel.show { animation:ui-panel-in .32s var(--ui-ease-out) both; }
.admin-form { border:1px solid rgba(25,64,104,.10);border-radius:18px;background:var(--ui-grad-card);box-shadow:var(--ui-shadow-sm); }
.admin-form h3 { color:var(--ui-primary);letter-spacing:-.2px; }
.admin-fg input,.admin-fg select,.admin-fg textarea { background:#fbfdff;font-size:16px; }
.admin-fg input:focus,.admin-fg select:focus,.admin-fg textarea:focus { background:#fff; }
.admin-img-grid { border-radius:14px;border-color:rgba(0,86,179,.28);background:linear-gradient(145deg,#f4f9ff,#fbfdff); }
.admin-img-item { border-radius:11px;box-shadow:0 3px 10px rgba(15,40,70,.08); }
.admin-img-item img { transition:transform .3s var(--ui-ease-out); }
.admin-img-item:hover img { transform:scale(1.04); }
.admin-table-wrap { border-radius:15px;border-color:var(--ui-border);box-shadow:var(--ui-shadow-sm); }
.admin-table { border-collapse:separate;border-spacing:0; }
.admin-table th { position:sticky;top:0;z-index:2;background:#edf4fb; }
.admin-table td { border-bottom-color:rgba(25,64,104,.08); }
.admin-table tr:nth-child(even) td { background:rgba(241,247,253,.56); }
.admin-table tr:hover td { background:#eaf4ff; }
.admin-table td,.admin-table th { padding:12px 11px; }
.admin-thumb { border-radius:9px;border:1px solid var(--ui-border); }
.admin-code { border-radius:7px; }
.admin-badge { padding:4px 9px; }
.admin-btn-sm,.btn-upload-group .btn,.btn-pick,.btn-del { min-height:40px;border-radius:10px; }
.btn-upload-group .btn,.btn-pick { transition:transform .2s var(--ui-ease-out),box-shadow .2s ease,background .2s ease; }
.btn-upload-group .btn:hover,.btn-pick:hover,.admin-btn-sm:hover,.btn-del:hover { transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,86,179,.12); }
.admin-empty { padding:48px 20px; }

/* Existing purchase wizard and overlays */
.wizard-overlay,#modal-overlay,#search-overlay { -webkit-backdrop-filter:blur(9px) saturate(125%);backdrop-filter:blur(9px) saturate(125%); }
.wizard-overlay { background:rgba(11,25,43,.58); }
.wizard-box { border:1px solid rgba(255,255,255,.72);border-radius:22px;box-shadow:0 24px 70px rgba(6,24,45,.26);animation:ui-modal-in .34s var(--ui-ease-spring) both; }
.wizard-close { width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#f2f5f8;transition:transform .22s var(--ui-ease-out),color .2s ease,background .2s ease; }
.wizard-close:hover { transform:rotate(90deg);color:#c83b51;background:#fff0f1; }
.wizard-header { padding:19px 20px; }
.wizard-icon { border:0;border-radius:13px;background:linear-gradient(135deg,#e7f5ff,#e9f8fb); }
.wizard-steps::before { background:linear-gradient(90deg,var(--ui-primary),rgba(0,86,179,.12)); }
.step-circle { transition:transform .25s var(--ui-ease-spring),box-shadow .25s ease; }
.step-circle.active { color:var(--ui-primary);border-color:var(--ui-primary);box-shadow:0 0 0 5px rgba(0,86,179,.10);transform:scale(1.08); }
.step-circle.done { background:var(--ui-grad-primary);border-color:transparent;box-shadow:0 4px 12px rgba(0,86,179,.20); }
.wizard-footer { background:rgba(248,250,253,.94); }
.btn-wizard-back,.btn-wizard-next { min-height:46px;border-radius:11px !important; }
.btn-wizard-back:hover { background:#f0f5fa; }
.btn-wizard-next { background:var(--ui-grad-primary);box-shadow:0 6px 16px rgba(0,86,179,.18); }
.btn-wizard-next:hover { transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,86,179,.24); }
#toast-container,#toast-wrap { filter:drop-shadow(0 8px 18px rgba(15,35,60,.12)); }
.toast { border-radius:13px; }

/* Standalone admin.html uses its existing dark navy/cyan palette */
body:has(.container) {
  background:radial-gradient(ellipse at 8% 0%,rgba(0,212,255,.10),transparent 36%),radial-gradient(ellipse at 100% 100%,rgba(0,86,179,.16),transparent 40%),linear-gradient(145deg,#101a30,#172640 58%,#111d33);
  color:#f6f9ff;
}
.container {
  border-radius:22px;border-color:rgba(0,212,255,.20);
  background:linear-gradient(150deg,rgba(25,39,67,.97),rgba(18,31,55,.98));
  box-shadow:0 22px 65px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045);
}
.container .header { border-bottom-color:rgba(255,255,255,.09); }
.container .tabs {
  display:flex;flex-wrap:nowrap;overflow-x:auto;padding:5px;gap:7px;
  border:1px solid rgba(0,212,255,.13);border-radius:14px;background:rgba(4,12,26,.35);scrollbar-width:none;
}
.container .tabs::-webkit-scrollbar { display:none; }
.container .tab { flex:1 0 auto;min-width:110px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045); }
.container .tab.active { color:#07172b;border-color:transparent;background:linear-gradient(135deg,#5be5ff,#00a9dc);box-shadow:0 6px 18px rgba(0,212,255,.18); }
.container .form-box { border:1px solid rgba(0,212,255,.20);border-style:solid;border-radius:17px;background:linear-gradient(145deg,rgba(8,22,43,.70),rgba(17,38,68,.74));box-shadow:0 10px 26px rgba(0,0,0,.14); }
.container .form-title { letter-spacing:-.2px; }
.container .input-group input,.container .input-group textarea,.container .input-group select {
  min-height:46px;border-radius:10px;border-color:rgba(0,212,255,.20);background:rgba(5,16,33,.72);color:#f7fbff;font-size:16px;
}
.container .input-group input:focus,.container .input-group textarea:focus,.container .input-group select:focus { border-color:#00d4ff;box-shadow:0 0 0 4px rgba(0,212,255,.11); }
.container .btn-submit { min-height:50px;border-radius:12px;background:linear-gradient(120deg,#00d4ff,#0876bd 55%,#0f3460);box-shadow:0 8px 22px rgba(0,150,220,.20); }
.container .btn-submit:hover { transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,150,220,.28); }
.container .table-wrap { border-radius:14px;border-color:rgba(0,212,255,.16); }
.container table { border-collapse:separate;border-spacing:0; }
.container th { position:sticky;top:0;z-index:2;background:#142a49;color:#b9c8dc; }
.container td { border-bottom-color:rgba(255,255,255,.07); }
.container tr:nth-child(even) td { background:rgba(255,255,255,.018); }
.container tr:hover td { background:rgba(0,212,255,.055); }
.container .img-thumb { border-radius:9px; }
.container .img-upload-zone { border-radius:14px; }
.container .img-list { border-radius:13px;background:rgba(3,13,28,.52); }
.container .btn-pick { min-height:44px;border-radius:10px; }
.container .upload-progress { border-radius:12px; }
.container .toast { border:1px solid rgba(255,255,255,.16); }

/* Lightweight entrance and responsive rules */
@keyframes ui-panel-in { from { opacity:0;transform:translateY(9px); } to { opacity:1;transform:translateY(0); } }
@keyframes ui-modal-in { from { opacity:0;transform:translateY(8px) scale(.975); } to { opacity:1;transform:translateY(0) scale(1); } }
@media (hover:hover) and (pointer:fine) {
  .admin-tab:hover,.nav-item:hover { transform:translateY(-2px); }
  .btn-login:hover,.btn-buy-big:hover { filter:brightness(1.04); }
}
@media (min-width:480px) { .acc-grid,.service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) {
  #main-content { max-width:1240px;margin-left:auto;margin-right:auto; }
  .acc-grid,.service-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
  .home-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .admin-page { padding-left:22px;padding-right:22px; }
}
@media (min-width:1280px) {
  .acc-grid,.service-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .home-product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:479px) {
  .acc-grid,.service-grid { grid-template-columns:minmax(0,1fr);gap:13px;padding-left:12px;padding-right:12px; }
  .acc-card .acc-img,.service-card .img-box { aspect-ratio:16/10; }
  .acc-card .acc-body,.service-card .info-box { padding:13px; }
  .acc-card .acc-name,.service-card .title { font-size:13px; }
  .acc-card .price-new,.service-card .price { font-size:18px; }
  .admin-page { padding:14px 10px 28px; }
  .admin-tabs { margin-left:-2px;margin-right:-2px; }
  .admin-tab { flex:0 0 auto; }
  .wizard-box { max-height:min(90vh,760px);border-radius:19px; }
  .wizard-footer { position:sticky;bottom:0; }
  #bottom-nav { padding-bottom:max(6px,env(safe-area-inset-bottom)); }
}
@media (max-width:380px) {
  #main-header { gap:3px; }
  #main-header .logo-text { font-size:12px; }
  #main-header .header-icons button { min-width:29px;width:29px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }
}


/* Critical production fixes: category contrast, image surfaces and header spacing */
.hero-card .title,
.cat-big-card .cat-info-name {
  color:#111 !important;
}
.hero-card .stats,
.cat-big-card .cat-info-count {
  color:#333 !important;
}
.hero-card .btn-action,
.cat-big-card .btn-action,
.cat-big-card .btn-view,
.cat-big-card button {
  color:#fff !important;
  background:#073b70 !important;
  border:1px solid #073b70 !important;
  box-shadow:0 4px 12px rgba(7,59,112,.18);
}
.hero-card .img-box,
.cat-big-card .cat-banner {
  background-color:#e5e7eb;
}
#main-header {
  gap:10px;
}
#main-header .logo {
  flex:1 1 auto;
  min-width:0;
}
#main-header .logo-text {
  flex:1 1 auto;
  width:auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
#main-header .header-icons {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  flex-shrink:0;
  min-width:max-content;
  gap:10px;
}
#main-header #user-hdr {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  margin-left:8px;
}
#main-header .login-btn {
  flex:0 0 auto;
  white-space:nowrap;
}
@media (max-width:380px) {
  #main-header .header-icons { gap:6px; }
  #main-header #user-hdr { margin-left:6px; }
  #main-header .login-btn { padding:4px 8px; }
  #main-header .logo-text { font-size:12px; }
}


/* Production override: enforce readable category text and stable mobile header */
html body .hero-card .info-box .title {
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  opacity:1 !important;
}
html body .hero-card .info-box .stats {
  color:#333 !important;
  -webkit-text-fill-color:#333 !important;
  opacity:1 !important;
}
html body .hero-card .info-box .btn-action {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:#073b70 !important;
  background-image:none !important;
  border:1px solid #073b70 !important;
  opacity:1 !important;
}
html body .hero-card .img-box {
  background:#e5e7eb !important;
}
html body .hero-card .img-box img {
  background:#e5e7eb !important;
  object-fit:cover;
}
#main-header {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:10px !important;
  justify-content:initial !important;
  box-sizing:border-box !important;
}
#main-header .logo {
  display:flex !important;
  flex:initial !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden;
}
#main-header .logo-text {
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#main-header .header-icons {
  display:flex !important;
  flex:initial !important;
  flex-shrink:0 !important;
  min-width:max-content !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
#main-header .header-icons button {
  flex:0 0 34px !important;
  min-width:34px !important;
  width:34px !important;
  height:36px !important;
}
#main-header #user-hdr {
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  margin-left:6px !important;
  min-width:max-content !important;
}
#main-header .login-btn {
  flex:0 0 auto !important;
  white-space:nowrap !important;
  margin:0 !important;
}
@media (max-width:380px) {
  #main-header { column-gap:6px !important; padding-left:8px !important; padding-right:8px !important; }
  #main-header .header-icons { gap:5px !important; }
  #main-header .header-icons button {
    flex-basis:30px !important;
    min-width:30px !important;
    width:30px !important;
    height:32px !important;
  }
  #main-header #user-hdr { margin-left:3px !important; }
  #main-header .login-btn { padding:4px 7px !important; font-size:11px !important; }
  #main-header .logo-text { font-size:12px !important; }
}