/* Be Vietnam Pro — hỗ trợ tiếng Việt, an toàn đa nền tảng */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

:root {
  --brand: #c62828;
  --text-on-hero: #fff;
  --btn-border: rgba(255,255,255,.65);
  --btn-bg: rgba(255,255,255,.96);
  --btn-bg-hover: #ffe5e5;
  --tap: 38px; /* tap-target tối thiểu cho mobile */

  /* easing + thời lượng hiệu ứng */
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --spin-dur: 8s; /* 5 giây 1 vòng cho logo + sweep */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== HEADER ===== */
.site-header {
  position: sticky;             /* bám trên cùng khi cuộn */
  top: 0;
  z-index: 1000;
  isolation: isolate;           /* tách overlay với nội dung */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url('/banner/banner.png') no-repeat center center / cover, var(--brand);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 10px 12px; /* safe-area + gọn hơn */
  color: var(--text-on-hero);
  gap: 10px;                    /* tránh dính nhau khi wrap */
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Đảm bảo nội dung nằm trên overlay */
.site-header > * {
  position: relative;
  z-index: 1;
}


:root{ --gp-scale: 1.5; }

/* ===== Google Play badge (overlay góc phải, không đẩy layout) ===== */
.gp-badge-float{
  position: absolute !important;
  right: 10px;
  top: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px; /* clear space */
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-decoration: none;
  transform: scale(var(--gp-scale));
  transform-origin: top right;
}

.gp-badge-float img{
  /* Dùng !important để tránh CSS global (img{width:100%}) làm badge phóng to trên App/WebView */
  height: 32px !important;
  width: auto !important;
  max-width: 180px !important;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

.gp-badge-float:active{
  transform: scale(var(--gp-scale)) translateY(1px);
}

/* Mobile: nhỏ hơn để không che logo/nút */
@media (max-width: 480px){
  .gp-badge-float{
    right: 8px;
    top: 8px;
    padding: 4px;
    border-radius: 10px;
  }
  .gp-badge-float img{
    height: 22px !important;
    max-width: 160px !important;
  }
}

/* Mobile rất nhỏ */
@media (max-width: 360px){
  .gp-badge-float img{
    height: 20px !important;
    max-width: 150px !important;
  }
}

/* Lớp phủ nhẹ cải thiện độ tương phản chữ trên ảnh banner */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
  z-index: 0; /* overlay nằm dưới nội dung */
}

/* Logo + text (trái) */
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;        /* ƯU TIÊN chỗ cho brand */
  min-width: 0;          /* để text có thể ellipsis */
}

.logo-img {
  width: 60px;           /* TO HƠN */
  height: 60px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;          /* VIỀN TRẮNG MỎNG HƠN */
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  flex: 0 0 auto;

  /* Hiệu ứng xuất hiện + xoay liên tục */
  will-change: transform, opacity, filter;
  animation:
    brand-pop .6s var(--ease-out) .05s both,
    logo-spin var(--spin-dur) linear infinite;
  transition: transform 120ms ease;
}
.header-left:hover .logo-img,
.header-left:active .logo-img {
  transform: scale(1.04);
}

/* Brand text */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  flex: 1 1 auto;

  /* từng dùng cho tia sáng; giữ để không ảnh hưởng layout */
  position: relative;
  overflow: hidden;
}

/* Tên “Liên Kết 24h” — TO HƠN, co giãn mượt */
.brand-name {
  /* Đã giảm tổng ~50% theo yêu cầu */
  font-size: clamp(17.6px, 5.12vw, 20.8px);
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .2px;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);

  /* Hiệu ứng xuất hiện */
  will-change: transform, opacity;
  animation: brand-slide .7s var(--ease-out) .12s both;
}

/* Slogan — TO HƠN đồng loạt, giữ 2 dòng khi cần */
.brand-tagline {
  /* Nhỏ thêm 50% theo yêu cầu */
  font-size: clamp(10.8px, 3.04vw, 12px);
  color: rgba(255,255,255,0.94);
  margin-top: 1px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1; /* mobile chỉ 1 dòng mặc định */

  /* Hiệu ứng xuất hiện */
  will-change: opacity, transform;
  animation: brand-fade .8s var(--ease-out) .2s both;
}

/* Bên phải header */
.header-right {
  display: flex;
  align-items: center;
  flex: 0 1 auto;        /* cho phép BÊN PHẢI co lại */
  min-width: 120px;
  max-width: 48vw;       /* tránh lấn hết chỗ của brand */
  gap: 8px;              /* desktop/tablet có khoảng cách nhẹ */
}

/* Đặt thứ tự để có thể gom 2 nút thành segmented pill trên mobile */
#updateLocationBtn { order: 1; }
#viewLocationBtn   { order: 2; }
#headerLocation    { order: 3; }

#headerLocation {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: right;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* ===== Buttons ===== */
.btn {
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--brand);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  font-family: inherit;
  min-height: var(--tap);
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  transition: background .15s ease, transform .05s ease;
}

.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn-outline { /* giữ class cũ để tương thích */
  border-color: var(--btn-border);
}

/* Nút xem vị trí (giữ nhỏ hơn 1 nhịp) */
#viewLocationBtn {
  font-size: 13px;
  padding: 8px 12px;
}

/* ===== OVERLAY + DIALOG ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

/* Leaflet: tránh bị global CSS img{max-width:100%} làm vỡ tile */
.leaflet-container img{ max-width:none !important; max-height:none !important; }

.dialog {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1100;
  width: 92%;
  max-width: 600px;
}

/* MapBox (desktop/web): co giãn theo màn hình */
#mapBox.dialog{ width: min(1100px, 96vw); max-width: 1100px; }
#mapBox #map{ height: 60vh; min-height: 360px; border-radius: 10px; overflow: hidden; }

/* Mobile/App(WebView): dialog full-screen + scroll để không bị "chỉ còn 1 đường" */
@media (max-width: 640px){
  .dialog{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100vw;
    max-width: none;
    height: 100vh;
    border-radius: 0;
    padding: 12px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  /* Map picker trong header */
  #mapBox #map{
    height: calc(100vh - 210px);
    min-height: 260px;
  }
}

.dialog h2 {
  margin-top: 0;
  font-size: 20px;
  color: var(--brand);
}

.location-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.btn-action {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.btn-action:hover {
  background: #ffebee;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn-save {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

.btn-cancel {
  background: #eee;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

.suggestions {
  border: 1px solid #ddd;
  background: #fafafa;
  margin-top: 4px;
  max-height: 150px;
  overflow-y: auto;
}
.suggestions div {
  padding: 6px 10px;
  cursor: pointer;
}
.suggestions div:hover {
  background: #eee;
}

/* ===== RESPONSIVE ===== */

/* Màn rất nhỏ: bố cục dọc — Brand (logo + tên + 2 dòng slogan) → Tọa độ → 2 nút (segmented) */
@media (max-width: 480px) {
  /* Header xếp dọc, brand ở trên cùng */
  .site-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 8px 10px;
  }

  .logo-img { width: 58px; height: 58px; padding: 3px; } /* to hơn + viền mỏng hơn mobile */

  .header-left {
    order: 1;
    width: 100%;
  }

  /* Slogan đủ 2 dòng (mỗi .brand-tagline là 1 dòng) */
  .brand-name { font-size: clamp(17.6px, 5.6vw, 20.8px); }
  .brand-tagline {
    -webkit-line-clamp: unset;   /* bỏ clamp 1 dòng ở mobile */
    display: block;
    white-space: normal;
    line-height: 1.28;
    font-size: 11.2px;             /* tăng +60% */
  }

  /* Khối bên phải: width 100%, nằm dưới brand */
  .header-right {
    order: 2;
    width: 100%;
    max-width: none;     /* chiếm toàn bộ bề ngang */
    flex-wrap: wrap;
    gap: 0;              /* để 2 nút khít nhau như segmented */
    margin-top: 6px;
  }

  /* (1) Tọa độ — nằm ngay dưới brand, full width */
  #headerLocation {
    order: 1;
    flex-basis: 100%;
    width: 100%;
    text-align: left;
    font-size: 12.5px;
    opacity: .95;
    margin: 2px 0 6px 0; /* tạo khoảng cách với nhóm nút */
  }

  /* (2) Hai nút — hàng dưới, dạng segmented pill */
  #updateLocationBtn,
  #viewLocationBtn {
    order: 2;
    min-height: var(--tap, 38px);
    padding: 8px 12px;
    font-size: 12.5px;
    border-radius: 999px; /* bo tròn tổng thể */
  }

  /* Segment trái/phải + chung 1 nhóm viền */
  #updateLocationBtn {
    border-right: none;
    border-radius: 999px 0 0 999px;  /* trái */
  }
  #viewLocationBtn {
    border-left: 1px solid var(--btn-border);
    border-radius: 0 999px 999px 0;  /* phải */
  }

  /* Mặc định mỗi nút full-width (fallback).
     Khi cả hai cùng hiển thị → chia đôi 50/50 */
  .header-right:has(#viewLocationBtn:not([hidden])) #updateLocationBtn,
  .header-right:has(#viewLocationBtn:not([hidden])) #viewLocationBtn {
    flex: 1 1 calc(50% - 0px); /* khít nhau để giống segmented */
  }

  /* Thu gọn chữ bằng pseudo — vẫn giữ icon + nhãn ngắn gọn */
  #updateLocationBtn,
  #viewLocationBtn {
    position: relative;
    color: transparent;             /* ẩn text gốc để tránh dài */
  }
  #updateLocationBtn::after,
  #viewLocationBtn::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 12px;
    color: var(--brand);
    font-weight: 800;
    letter-spacing: .1px;
  }
  #updateLocationBtn::after { content: "📍 Cập nhật"; }
  #viewLocationBtn::after   { content: "🔎 Xem vị trí"; }

  /* Liên kết/nút quản trị (Expert) – tự xuống dưới 2 nút nếu có */
  .header-right > a.btn {
    order: 4;
    flex: 0 1 auto;
    margin-top: 6px;
  }
}

/* Màn rất nhỏ hơn nữa: chỉ giữ icon nếu bề ngang quá hẹp */
@media (max-width: 360px) {
  #updateLocationBtn::after { content: "📍"; }
  #viewLocationBtn::after   { content: "🔎"; }
  #headerLocation { font-size: 12px; }
}

/* Tablet (≥768px) — thoáng hơn, vẫn giữ cân đối */
@media (min-width: 768px) {
  .site-header { padding: calc(env(safe-area-inset-top, 0px) + 10px) 20px 12px 20px; }
  .logo-img { width: 72px; height: 72px; padding: 5px; } /* TO HƠN nhưng viền vẫn mỏng */
  .brand-name { font-size: clamp(19.2px, 2.56vw, 24px); }
  .brand-tagline {
    font-size: clamp(11.2px, 1.92vw, 13.2px);
    -webkit-line-clamp: 2; /* tablet cho phép 2 dòng */
  }
  .header-right { max-width: 50vw; gap: 8px; }
  #headerLocation { font-size: 14px; order: 3; flex-basis: auto; width: auto; margin: 0; text-align: right; }
  .btn { font-size: 15px; padding: 9px 14px; min-height: 40px; }
  #viewLocationBtn { font-size: 14px; }

  /* Trả text nút về bình thường ở tablet trở lên */
  #updateLocationBtn, #viewLocationBtn { color: var(--brand); position: static; }
  #updateLocationBtn::after, #viewLocationBtn::after { content: none; }
}

/* Desktop (≥1024px) — chuyên nghiệp, thoáng */
@media (min-width: 1024px) {
  .site-header { padding: calc(env(safe-area-inset-top, 0px) + 12px) 28px 14px 28px; }
  .logo-img { width: 84px; height: 84px; padding: 5px; }  /* TO HƠN, viền mỏng */
  .brand-name { font-size: clamp(20.8px, 1.92vw, 27.2px); }
  .brand-tagline { font-size: clamp(12px, 1.44vw, 14.4px); }
  .header-right { max-width: 40vw; }
  #headerLocation { font-size: 15px; }
  .btn { font-size: 16px; padding: 10px 16px; min-height: 42px; }
  #viewLocationBtn { font-size: 15px; }
  .dialog h2 { font-size: 22px; }
}

/* ====== Animations ====== */
@keyframes brand-pop {
  0%   { transform: scale(.92); filter: blur(1px); opacity: 0; }
  60%  { transform: scale(1.02); filter: blur(0); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes brand-slide {
  0%   { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes brand-fade {
  0%   { opacity: 0 }
  100% { opacity: 1 }
}

/* Logo xoay quanh tâm */
@keyframes logo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Tôn trọng người dùng hạn chế chuyển động */
@media (prefers-reduced-motion: reduce) {
  .logo-img, .brand-name, .brand-tagline {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
 * LK24H Header Popup Fix v2 (2026-02-27)
 * - Popup của header (Cập nhật vị trí / Chọn bản đồ) luôn nằm gọn giữa
 *   header (top) và bottom-nav (bottom) trên web + app (WebView).
 * - Fix lỗi popup bị che bởi bottom-nav (z-index) / chỉ còn 1 đường.
 * - Không ảnh hưởng popup khác: chỉ scope vào #overlay + 2 dialog của header.
 * ===================================================================== */
:root{
  --lk-header-h: 0px;
  --lk-bottomnav-h: 0px;
  --lk-modal-top: var(--lk-header-h);
  --lk-modal-bottom: var(--lk-bottomnav-h);
  --lk-header-modal-z: 9900; /* < chatbot (10001), > bottom-nav (9000) */
}

/* Overlay trở thành "modal host" giữa header và bottom nav */
#overlay.overlay{
  inset: auto !important;
  left: 0;
  right: 0;
  top: var(--lk-modal-top);
  bottom: var(--lk-modal-bottom);
  z-index: var(--lk-header-modal-z) !important;

  /* host */
  display: none;                 /* bật khi bỏ [hidden] */
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* backdrop */
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
#overlay.overlay:not([hidden]){ display: flex !important; }


/* App/WebView tablet hardening:
   - hidden overlay/modal phải thật sự biến mất
   - tránh trường hợp Android WebView vẫn vẽ nền backdrop khi element đang hidden
   - chỉ áp dụng trong app vì app đã inject html.lk-app-android / html.lk-app-tablet-safe */
html.lk-app-android #overlay.overlay,
html.lk-app-android .app-download-modal{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
html.lk-app-android #overlay.overlay[hidden],
html.lk-app-android .app-download-modal[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
html.lk-app-tablet-safe #overlay.overlay[hidden]{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.lk-app-tablet-safe .app-download-modal[hidden] .app-download-modal__backdrop{
  opacity:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.lk-app-android #overlay.overlay:not([hidden]),
html.lk-app-android .app-download-modal.is-open:not([hidden]){
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
html.lk-app-tablet-safe .site-header::before{
  content:none !important;
  display:none !important;
}

/* Dialog của header khi được portal vào #overlay */
#overlay #locationDialog.dialog,
#overlay #mapBox.dialog{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: calc(var(--lk-header-modal-z) + 1) !important;

  width: min(600px, 100%);
  max-width: 600px;
  max-height: calc(100% - 0px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Map dialog rộng hơn trên web */
#overlay #mapBox.dialog{
  width: min(1100px, 100%);
  max-width: 1100px;
}

/* fallback map height (JS sẽ override chuẩn theo không gian overlay) */
#overlay #mapBox #map{
  height: 55vh;
  min-height: 260px;
  border-radius: 10px;
  overflow: hidden;
}

/* Mobile/App: dialog full vùng giữa header & bottom-nav (không che 2 vùng) */
@media (max-width: 640px){
  #overlay.overlay{ padding: 0; }

  #overlay #locationDialog.dialog,
  #overlay #mapBox.dialog{
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    padding: 12px !important;

    /* safe-area trong vùng overlay (đề phòng App/WebView có inset nội bộ) */
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #overlay #mapBox #map{
    height: 100%;
    min-height: 260px;
  }
}

/* Body lock (JS dùng position:fixed; CSS này chỉ chống overscroll) */
body.lk-modal-open{ overscroll-behavior: none; }

/* ===== I18N language switch ===== */
.lang-switch{
  position: relative;
  display: inline-flex;
  flex-direction: column;
}
.lang-switch-btn{
  min-width: 118px;
  white-space: nowrap;
}
.lang-switch-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 132px;
  display: none;
  flex-direction: column;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  overflow: hidden;
}
.lang-switch-menu.open{ display:flex; }
.lang-option{
  appearance:none;
  border:0;
  background:#fff;
  color:#222;
  font:inherit;
  font-weight:700;
  text-align:left;
  padding:10px 12px;
  cursor:pointer;
}
.lang-option:hover{ background:#fff3f3; }
.lang-option.active{ color:var(--brand); background:#fff0f0; }

@media (max-width: 768px){
  .header-right{
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .lang-switch{
    order: -1;
    margin-left: auto;
  }
  .lang-switch-btn{
    min-width: 104px;
    padding: 8px 10px;
    font-size: 13px;
  }
}


/* =====================================================================
 * LK24H App Download Button + Sheet (2026-04-21, mobile/full-display fix)
 * - Thay badge CH Play bằng nút tải app nổi
 * - Popup luôn hiển thị đủ trên app + app web
 * - Portal ra body, safe-area, viewport JS var, cuộn nội bộ
 * ===================================================================== */
:root{
  --lk-app-sheet-vh: 100vh;
}

.app-download-float{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 4;
  appearance: none;
  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.12));
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  letter-spacing: .1px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.app-download-float:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.15));
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}
.app-download-float:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
}
.app-download-float:focus-visible{
  outline: 2px solid rgba(255,255,255,.95);
  outline-offset: 2px;
}
.app-download-float__icon{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}
.app-download-float__icon svg{
  width: 20px;
  height: 20px;
  display: block;
}
.app-download-float__label{
  white-space: nowrap;
  line-height: 1;
}

.app-download-modal{
  position: fixed;
  inset: 0;
  z-index: 10020;
  min-height: var(--lk-app-sheet-vh);
}
.app-download-modal[hidden]{
  display: none !important;
}
.app-download-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 20, .56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
}
.app-download-modal__viewport{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: var(--lk-app-sheet-vh);
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.app-download-sheet{
  width: min(420px, 100%);
  max-width: 420px;
  max-height: calc(var(--lk-app-sheet-vh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 84px);
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.98);
  color: #18202a;
  border-radius: 24px;
  border: 1px solid rgba(198,40,40,.10);
  box-shadow: 0 22px 54px rgba(12, 18, 28, .24);
  padding: 18px;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}
.app-download-modal.is-open .app-download-modal__backdrop{ opacity: 1; }
.app-download-modal.is-open .app-download-sheet{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.app-download-sheet__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.app-download-sheet__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(15,23,42,.06);
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.app-download-sheet__close:hover{
  background: rgba(15,23,42,.1);
  transform: rotate(90deg);
}
.app-download-sheet__close svg{
  width: 20px;
  height: 20px;
  display: block;
}
.app-download-sheet__hero{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 42px;
  margin-bottom: 16px;
  flex: 0 0 auto;
}
.app-download-sheet__badge{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #c62828, #ef5350);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(198,40,40,.24);
  flex: 0 0 54px;
}
.app-download-sheet__badge svg{
  width: 26px;
  height: 26px;
  display: block;
}
.app-download-sheet__copy h2{
  margin: 0;
  font-size: 22px;
  line-height: 1.16;
  color: #111827;
}
.app-download-sheet__copy p{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #5b6472;
}
.app-download-options{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-download-option{
  appearance: none;
  width: 100%;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.app-download-option:hover{
  transform: translateY(-1px);
  border-color: rgba(198,40,40,.22);
  box-shadow: 0 14px 26px rgba(15,23,42,.09);
  background: #fffdfd;
}
.app-download-option:focus-visible{
  outline: 2px solid rgba(198,40,40,.65);
  outline-offset: 2px;
}
.app-download-option__icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  background: #fff3f3;
  color: #c62828;
}
.app-download-option.is-play .app-download-option__icon{
  background: #eef6ff;
  color: #2563eb;
}
.app-download-option.is-apk .app-download-option__icon{
  background: #fff3f3;
  color: #c62828;
}
.app-download-option.is-store .app-download-option__icon{
  background: #f4f5f7;
  color: #64748b;
}
.app-download-option__icon svg{
  width: 22px;
  height: 22px;
  display: block;
}
.app-download-option__text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
}
.app-download-option__text strong{
  font-size: 16px;
  line-height: 1.2;
}
.app-download-option__text small{
  font-size: 12.5px;
  line-height: 1.4;
  color: #64748b;
}
.app-download-option__arrow{
  font-size: 24px;
  line-height: 1;
  color: #94a3b8;
  flex: 0 0 auto;
}
.app-download-option.is-disabled,
.app-download-option[disabled]{
  cursor: not-allowed;
  opacity: .62;
  box-shadow: none;
  transform: none;
}
.app-download-option.is-disabled:hover,
.app-download-option[disabled]:hover{
  transform: none;
  border-color: rgba(15,23,42,.08);
  background: #fff;
  box-shadow: none;
}
.app-download-sheet__footnote{
  margin: 14px 2px 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6b7280;
}
html.lk-app-sheet-open,
body.lk-app-sheet-open{
  overscroll-behavior: none;
}

@media (max-width: 768px){
  .app-download-float{
    right: 8px;
    top: 8px;
    min-height: 36px;
    padding: 8px 12px;
    gap: 7px;
  }
  .app-download-float__label{
    font-size: 13px;
  }
  .app-download-modal__viewport{
    align-items: flex-end;
    justify-content: stretch;
    padding: 12px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
  .app-download-sheet{
    width: 100%;
    max-width: none;
    max-height: calc(var(--lk-app-sheet-vh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    transform: translateY(14px);
    transform-origin: bottom center;
    border-radius: 24px;
  }
  .app-download-modal.is-open .app-download-sheet{
    transform: translateY(0);
  }
}

@media (max-width: 480px){
  .app-download-float{
    padding: 8px 10px;
    min-height: 34px;
    border-radius: 999px;
  }
  .app-download-float__label{
    font-size: 12.5px;
  }
  .app-download-modal__viewport{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
  .app-download-sheet{
    border-radius: 22px;
    padding: 16px;
  }
  .app-download-sheet__hero{
    gap: 12px;
  }
  .app-download-sheet__badge{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    flex-basis: 48px;
  }
  .app-download-sheet__copy h2{
    font-size: 20px;
  }
  .app-download-sheet__copy p{
    font-size: 13px;
  }
  .app-download-option{
    padding: 12px;
    border-radius: 16px;
    gap: 10px;
  }
  .app-download-option__icon{
    width: 42px;
    height: 42px;
    border-radius: 13px;
    flex-basis: 42px;
  }
  .app-download-option__text strong{
    font-size: 15px;
  }
}

@media (max-width: 360px){
  .app-download-float{
    right: 6px;
    top: 6px;
    padding: 7px 9px;
    gap: 6px;
  }
  .app-download-float__label{
    font-size: 12px;
  }
  .app-download-sheet{
    padding: 14px;
    border-radius: 20px;
  }
  .app-download-sheet__copy h2{
    font-size: 18px;
  }
  .app-download-option__text strong{
    font-size: 14px;
  }
  .app-download-option__text small,
  .app-download-sheet__footnote{
    font-size: 12px;
  }
}


/* v20: phân nhóm lựa chọn tải app trong header */
.app-download-group-title{
  margin:6px 2px 2px;
  font-size:12px;
  font-weight:800;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.app-download-options .app-download-group-title:first-child{margin-top:0;}


/* =====================================================================
 * LK24H Header Search Button (2026-06-08)
 * - Nút tìm kiếm được đưa lên header.
 * - Popup kết quả do client_compute_search_home_bridge_v288.js quản lý.
 * ===================================================================== */
.header-search-btn{
  order:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  border-radius:999px;
}
.header-search-btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.header-search-btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(255,255,255,.34), 0 0 0 5px rgba(198,40,40,.24);
}
@media (max-width:480px){
  .header-search-btn{
    order:0;
    flex:1 1 auto;
    min-width:0;
    margin-right:6px;
    padding:8px 10px;
    font-size:12.5px;
  }
  .header-search-btn__label{
    max-width:92px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .lang-switch{
    flex:0 0 auto;
  }
}
@media (max-width:360px){
  .header-search-btn__label{ display:none; }
  .header-search-btn{ flex:0 0 var(--tap, 38px); padding:8px; margin-right:4px; }
}
@media (min-width:768px){
  .header-right{ max-width:62vw; }
}
@media (min-width:1024px){
  .header-right{ max-width:56vw; }
}

/* =====================================================================
 * LK24H_HEADER_COMPACT_SMART_SCROLL
 * Header gọn cho App/Mobile, rõ cho Web, tự ẩn khi cuộn xuống.
 * CSS-only override, không đổi dữ liệu/SQL.
 * ===================================================================== */
:root{
  --lk-header-shadow: 0 10px 28px rgba(15, 23, 42, .12);
  --lk-header-compact-h: 56px;
}

.site-header[data-lk-smart-header="1"],
.site-header{
  will-change: transform, opacity, box-shadow;
  transition:
    transform .22s cubic-bezier(.2,.7,.2,1),
    opacity .18s ease,
    box-shadow .18s ease,
    padding .18s ease;
  box-shadow: 0 1px 0 rgba(15,23,42,.08);
}

.site-header.lk-header-hidden{
  transform: translateY(calc(-100% - 8px));
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

.site-header.lk-header-visible,
.site-header.lk-header-at-top,
body.lk-modal-open .site-header,
body.lk-app-sheet-open .site-header,
.site-header:focus-within{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

body.lk-header-is-hidden .app-download-float{
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .site-header{
    transition: none !important;
  }
}

/* LK24H_HEADER_LOGO_NAME_INLINE_V2: mobile/app ưu tiên logo + Lienket24h.com cùng một dòng rõ ràng. */
@media (max-width: 768px){
  .site-header{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "actions"
      "loc";
    align-items: center !important;
    gap: 4px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 7px 10px !important;
    min-height: var(--lk-header-compact-h);
    border-bottom: 1px solid rgba(255,255,255,.18);
  }

  .site-header::before{
    background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,.14)) !important;
  }

  .header-left{
    grid-area: brand;
    order: initial !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding-right: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .logo-img{
    width: 38px !important;
    height: 38px !important;
    padding: 2px !important;
    box-shadow: 0 1px 5px rgba(15,23,42,.16) !important;
    animation: none !important;
    flex: 0 0 38px !important;
  }

  .brand-text{
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.05 !important;
    display: block !important;
    flex: 1 1 auto !important;
  }

  .brand-name{
    display: block !important;
    font-size: clamp(17px, 5.4vw, 20px) !important;
    line-height: 1.05 !important;
    letter-spacing: .1px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-tagline{
    display: none !important;
  }

  .header-right{
    grid-area: actions;
    order: initial !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  #headerLocation{
    grid-area: loc;
    order: 99 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    opacity: .86 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #headerLocation:empty{
    display: none !important;
  }

  .btn,
  #updateLocationBtn,
  #viewLocationBtn,
  .lang-switch-btn,
  .header-search-btn{
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.10) !important;
  }

  .header-search-btn,
  .lang-switch-btn,
  #updateLocationBtn,
  #viewLocationBtn{
    width: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: transparent !important;
    position: relative !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    background: rgba(255,255,255,.96) !important;
  }

  .header-search-btn__label{
    display: none !important;
  }

  .header-search-btn__icon{
    color: var(--brand) !important;
    font-size: 15px !important;
  }

  .lang-switch{
    order: 1 !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }

  .lang-switch-btn{
    font-size: 0 !important;
  }
  .lang-switch-btn::after{
    content: "🌐";
    color: var(--brand);
    font-size: 15px;
    line-height: 1;
  }
  .lang-switch-menu{
    right: 0 !important;
    top: calc(100% + 8px) !important;
    z-index: 1005 !important;
  }

  #updateLocationBtn,
  #viewLocationBtn{
    order: 2 !important;
    margin: 0 !important;
  }
  #updateLocationBtn::after,
  #viewLocationBtn::after{
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    color: var(--brand) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  #updateLocationBtn::after{ content: "📍" !important; }
  #viewLocationBtn::after{ content: "🔎" !important; }
  #viewLocationBtn[hidden]{ display: none !important; }

  .app-download-float{
    position: absolute !important;
    right: 10px !important;
    top: calc(env(safe-area-inset-top, 0px) + 7px) !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-content: center !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--brand) !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.12) !important;
  }
  .app-download-float__label{
    display: none !important;
  }
  .app-download-float__icon,
  .app-download-float__icon svg{
    width: 18px !important;
    height: 18px !important;
  }

  .header-right > span[style]{
    display: none !important;
  }

  .header-right > a.btn{
    display: none !important;
  }
}

@media (max-width: 390px){
  .site-header{
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 3px !important;
  }
  .header-left{
    padding-right: 40px !important;
    gap: 7px !important;
  }
  .logo-img{
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
  .brand-name{
    font-size: clamp(16px, 5.25vw, 18px) !important;
  }
  .header-right{
    gap: 4px !important;
  }
  .header-search-btn,
  .lang-switch-btn,
  #updateLocationBtn,
  #viewLocationBtn,
  .app-download-float{
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex-basis: 32px !important;
  }
}

/* Web: rõ hơn, ít thô hơn nhưng vẫn đầy đủ. */
@media (min-width: 769px){
  .site-header{
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 156px 11px 24px !important;
    gap: 18px !important;
  }
  .logo-img{
    width: 56px !important;
    height: 56px !important;
    padding: 3px !important;
    animation: none !important;
  }
  .brand-name{
    font-size: clamp(20px, 1.7vw, 24px) !important;
    letter-spacing: 0 !important;
  }
  .brand-tagline{
    display: block !important;
    -webkit-line-clamp: 1 !important;
    font-size: clamp(12px, 1vw, 13.5px) !important;
    opacity: .92 !important;
  }
  .header-right{
    max-width: none !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }
  .btn,
  .lang-switch-btn,
  .header-search-btn{
    border-radius: 999px !important;
    min-height: 38px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
  }
  #headerLocation{
    max-width: 240px !important;
    font-size: 13px !important;
  }
  .app-download-float{
    top: 10px !important;
    right: 12px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
  }
}



/* LK24H_HEADER_DESKTOP_BRAND_INLINE_GUARD_V2: web vẫn giữ logo + tên miền cùng hàng, slogan nằm dưới tên. */
@media (min-width: 769px){
  .header-left{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  .brand-text{
    min-width: 0 !important;
  }
  .brand-name{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* =====================================================================
 * LK24H_INDEX_HEADER_PROFESSIONAL_COMPACT_R1_FIXED_R5
 * Header index nền trắng, nhận diện rõ, một hàng, không lặp điều hướng.
 * ===================================================================== */
:root{
  --lk-header-surface:#ffffff;
  --lk-header-border:#e7eaf0;
  --lk-header-ink:#172033;
  --lk-header-muted:#667085;
  --lk-header-accent:#d5202a;
  --lk-header-control:#f7f8fa;
  --lk-header-control-hover:#fff1f2;
}

.site-header[data-lk-smart-header="1"],
.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  isolation:isolate !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-height:62px !important;
  padding:calc(env(safe-area-inset-top, 0px) + 9px) max(16px, calc((100vw - 1120px)/2 + 16px)) 9px !important;
  background:var(--lk-header-surface) !important;
  color:var(--lk-header-ink) !important;
  border:0 !important;
  border-bottom:1px solid var(--lk-header-border) !important;
  box-shadow:0 4px 18px rgba(16,24,40,.045) !important;
}
.site-header::before{display:none !important;content:none !important;}
.site-header > *{position:relative;z-index:1;}

.header-left.header-brand-link,
.header-left{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:0 !important;
  color:inherit !important;
  text-decoration:none !important;
}
.header-logo-shell{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid #eceef2;
  border-radius:11px;
  background:#fff;
  overflow:hidden;
}
.logo-img,
.header-left .logo-img{
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  border:0 !important;
  border-radius:10px !important;
  background:#fff !important;
  object-fit:cover !important;
  box-shadow:none !important;
  animation:none !important;
  transform:none !important;
  transition:none !important;
}
.header-left:hover .logo-img,
.header-left:active .logo-img{transform:none !important;}
.brand-text{
  min-width:0 !important;
  display:block !important;
  overflow:visible !important;
  line-height:1 !important;
}
.brand-name{
  display:block !important;
  max-width:100% !important;
  color:var(--lk-header-ink) !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:-.25px !important;
  text-shadow:none !important;
  animation:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.brand-tagline{display:none !important;}

.header-right{
  flex:0 0 auto !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  gap:7px !important;
  margin:0 !important;
}
.header-location-group{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.header-action,
.site-header .btn,
.site-header #updateLocationBtn,
.site-header #viewLocationBtn,
.site-header .lang-switch-btn,
.site-header .app-download-float{
  appearance:none !important;
  position:relative !important;
  inset:auto !important;
  min-width:38px !important;
  width:auto !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:1px solid #e4e7ec !important;
  border-radius:11px !important;
  background:var(--lk-header-control) !important;
  color:#344054 !important;
  box-shadow:none !important;
  font:inherit !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease !important;
}
.header-action:hover,
.site-header .btn:hover,
.site-header .app-download-float:hover{
  background:var(--lk-header-control-hover) !important;
  border-color:#ffc7cd !important;
  color:var(--lk-header-accent) !important;
  transform:none !important;
}
.header-action:active,
.site-header .btn:active,
.site-header .app-download-float:active{transform:scale(.97) !important;}
.header-action:focus-visible,
.site-header .btn:focus-visible,
.site-header .app-download-float:focus-visible{
  outline:2px solid rgba(213,32,42,.22) !important;
  outline-offset:2px !important;
}
.header-action-icon,
.app-download-float__icon{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:currentColor !important;
}
.header-action-icon svg,
.app-download-float__icon svg{
  display:block !important;
  width:18px !important;
  height:18px !important;
}
.header-action-label,
.app-download-float__label{
  display:inline-block !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
.header-language-code{letter-spacing:.3px;}

#headerLocation,
.header-location-text{
  order:initial !important;
  width:auto !important;
  max-width:180px !important;
  margin:0 2px 0 0 !important;
  padding:0 !important;
  color:var(--lk-header-muted) !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  text-align:left !important;
  text-shadow:none !important;
  opacity:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#headerLocation:empty{display:none !important;}

.lang-switch{position:relative !important;display:inline-flex !important;flex-direction:column !important;margin:0 !important;}
.lang-switch-btn{min-width:58px !important;}
.lang-switch-menu{
  top:calc(100% + 8px) !important;
  right:0 !important;
  min-width:148px !important;
  padding:5px !important;
  gap:2px !important;
  border:1px solid #e4e7ec !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 14px 35px rgba(16,24,40,.14) !important;
  overflow:hidden !important;
}
.lang-option{
  border-radius:8px !important;
  padding:9px 10px !important;
  color:#344054 !important;
  font-size:12px !important;
  font-weight:700 !important;
}
.lang-option:hover{background:#f7f8fa !important;}
.lang-option.active{background:#fff1f2 !important;color:var(--lk-header-accent) !important;}

.site-header .app-download-float{
  flex:0 0 auto !important;
  color:var(--lk-header-accent) !important;
  background:#fff5f5 !important;
  border-color:#ffd8dc !important;
}
.header-expert-state,
.header-expert-action{display:none !important;}

@media(max-width:768px){
  .site-header[data-lk-smart-header="1"],
  .site-header{
    display:flex !important;
    grid-template-columns:none !important;
    grid-template-areas:none !important;
    min-height:56px !important;
    padding:calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px !important;
    gap:7px !important;
  }
  .header-left.header-brand-link,
  .header-left{
    width:auto !important;
    max-width:none !important;
    min-height:0 !important;
    padding:0 !important;
    gap:8px !important;
  }
  .header-logo-shell{width:34px;height:34px;flex-basis:34px;border-radius:10px;}
  .logo-img,.header-left .logo-img{width:100% !important;height:100% !important;flex-basis:auto !important;border-radius:9px !important;}
  .brand-name{font-size:15.5px !important;letter-spacing:-.2px !important;}
  .header-right{width:auto !important;max-width:none !important;gap:5px !important;}
  .header-location-group{gap:5px !important;}
  #headerLocation,.header-location-text{display:none !important;}
  .header-action,
  .site-header .btn,
  .site-header #updateLocationBtn,
  .site-header #viewLocationBtn,
  .site-header .lang-switch-btn,
  .site-header .app-download-float{
    width:34px !important;
    min-width:34px !important;
    flex:0 0 34px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    border-radius:10px !important;
    overflow:hidden !important;
    color:#475467 !important;
    font-size:0 !important;
  }
  .header-action-label,.app-download-float__label{display:none !important;}
  .header-action-icon,.app-download-float__icon{width:17px !important;height:17px !important;flex-basis:17px !important;}
  .header-action-icon svg,.app-download-float__icon svg{width:17px !important;height:17px !important;}
  .site-header .app-download-float{color:var(--lk-header-accent) !important;}
  .lang-switch{order:initial !important;margin:0 !important;}
  .lang-switch-btn::after,#updateLocationBtn::after,#viewLocationBtn::after{content:none !important;display:none !important;}
  .lang-switch-menu{top:calc(100% + 7px) !important;right:0 !important;}
}

@media(max-width:390px){
  .site-header{padding-left:10px !important;padding-right:10px !important;gap:5px !important;}
  .header-left{gap:7px !important;}
  .brand-name{font-size:14.5px !important;}
  .header-right{gap:4px !important;}
  .header-location-group{gap:4px !important;}
  .header-action,.site-header .btn,.site-header #updateLocationBtn,.site-header #viewLocationBtn,.site-header .lang-switch-btn,.site-header .app-download-float{
    width:32px !important;min-width:32px !important;flex-basis:32px !important;height:32px !important;min-height:32px !important;
  }
}

/* R5 final cascade seal: neutralize legacy narrow-screen column/order rules. */
.site-header[data-lk-smart-header="1"],
.site-header{
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
}
.site-header .header-left,
.site-header .header-right,
.site-header .app-download-float{
  order:initial !important;
}
@media(max-width:768px){
  .site-header[data-lk-smart-header="1"],
  .site-header{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
  .site-header .header-left{
    order:initial !important;
    flex:1 1 auto !important;
    width:auto !important;
  }
  .site-header .header-right{
    order:initial !important;
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
  }
  .site-header .app-download-float{
    order:initial !important;
    position:relative !important;
    inset:auto !important;
  }
}