*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.5;color:#111}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:50}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.logo{font-weight:700}
.nav{display:flex;gap:14px}
.auth{display:flex;gap:10px;align-items:center}
.btn{background:#111;color:#fff;padding:8px 12px;border-radius:10px;display:inline-block;border:0;cursor:pointer}
.btn-outline{border:1px solid #111;padding:8px 12px;border-radius:10px}
.btn-link{background:transparent;border:0;color:#111;cursor:pointer}
.page-hero{padding:18px 0;border-bottom:1px solid #f0f0f0}
.section{padding:18px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:16px 0}
@media (max-width:900px){.content-grid{grid-template-columns:1fr}}
.card{border:1px solid #eee;border-radius:14px;background:#fff}
.card-body{padding:12px}
.card-title{margin:0 0 8px 0;font-size:16px}
.meta{color:#444;font-size:13px;display:flex;gap:8px;flex-wrap:wrap}
.price{font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding:0;list-style:none}
.chip{border:1px solid #ddd;border-radius:999px;padding:4px 8px;font-size:12px;font-weight: 500;}
.chip-active{background:#111;color:#fff;border-color:#111}
.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid #ddd}
.badge-success{background:#eefbf1;border-color:#bfe9c7}
.badge-warn{background:#fff8e6;border-color:#f6d68a}
.badge-danger{background:#fff0f0;border-color:#f2b7b7}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.table th{font-size:13px;color:#444}
.table td{font-size:14px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-xs{padding:6px 10px;border-radius:10px;font-size:12px}
.btn-outline.btn-xs{padding:5px 10px}
.chip.vip{border-color:#111}
.sidebar .filter-box{border:1px solid #eee;border-radius:14px;padding:12px;position:sticky;top:72px}
.filter-box label{display:block;margin-top:10px;font-size:13px;color:#333}
.filter-box input,.filter-box select{width:100%;padding:8px 10px;border-radius:10px;border:1px solid #ddd;margin-top:6px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.w-full{width:100%}
.breadcrumbs ol{display:flex;gap:8px;list-style:none;padding:10px 0;margin:0;color:#555;font-size:13px;flex-wrap:wrap}
.breadcrumbs li:after{content:"/";margin-left:8px;color:#bbb}
.breadcrumbs li:last-child:after{content:""}
.pagination .pager{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.alert{background:#fff4f4;border:1px solid #ffd2d2;padding:10px;border-radius:10px}
.form-wrap{max-width:520px}
.site-footer{border-top:1px solid #eee;padding:16px 0;color:#666}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.media-list{padding-left:18px}

/* Skeleton shimmer */
.skeleton-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.skeleton-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.skeleton-grid{grid-template-columns:1fr}}

.skeleton-card{
  border:1px solid #eee;border-radius:14px;background:#fff;overflow:hidden
}
.skel-img{height:140px;background:#f1f1f1}
.skel-line{height:12px;margin:10px 12px;border-radius:8px;background:#f1f1f1}
.skel-line.w70{width:70%}
.skel-line.w90{width:90%}
.skel-line.w80{width:80%}
.skel-line.w60{width:60%}

.shimmer{
  position:relative;
}
.shimmer:before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
  transform:translateX(-100%);
  animation:shimmer 1.2s infinite;
}
@keyframes shimmer{
  100%{transform:translateX(100%)}
}
.listing-card .thumb{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  background:#f2f2f2;
}
:root{
  --hd-bg: rgba(255,255,255,.92);
  --hd-border: rgba(0,0,0,.08);
  --text: #111;
  --muted: #666;
  --chip: #f3f4f6;
  --chipHover: #eceef1;
  --shadow: 0 6px 24px rgba(0,0,0,.08);
  --radius: 14px;
  --radius-pill: 999px;
  --tap: 44px;
}

/* Header base */
.site-header{
  background: var(--hd-bg);
  border-bottom: 1px solid var(--hd-border);
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(10px);
}

.header-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  min-height: 64px; /* chuẩn portal, dễ bấm */
}

.logo{
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  line-height: 1;
}

/* Desktop nav */
.nav-desktop{
  display:flex;
  align-items:center;
  gap: 6px;
  margin-left: 8px;
  flex: 1;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}

.nav-link:hover{
  background: var(--chipHover);
}

/* Auth */
.auth{
  display:flex;
  align-items:center;
  gap: 10px;
}

.btn, .btn-outline{
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 600;
}

.btn{ background:#111; color:#fff; border:0; }
.btn:hover{ filter: brightness(.95); }

.btn-outline{
  border:1px solid rgba(0,0,0,.18);
  background: #fff;
}
.btn-outline:hover{ background: var(--chip); }

.btn-link{
  height: 40px;
  padding: 0 8px;
  border-radius: 10px;
}
.btn-link:hover{
  background: var(--chip);
}

.btn-sm{ height: 38px; padding: 0 12px; border-radius: 12px; }

/* Hamburger */
.nav-toggle{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  display:none; /* chỉ hiện ở mobile */
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle:hover{ background: var(--chip); }

.nav-toggle-bars{
  width: 18px;
  height: 12px;
  position: relative;
  display:block;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars{
  background: transparent;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:#111;
  border-radius: 2px;
}
.nav-toggle-bars::before{ top:0; }
.nav-toggle-bars::after{ bottom:0; }
.nav-toggle-bars{
  /* middle line */
}
.nav-toggle-bars{
  box-shadow: 0 5px 0 #111; /* tạo 3 gạch */
}

/* Mobile drawer */
.mobile-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 90;
}

.mobile-drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(360px, 86vw);
  background: #fff;
  z-index: 100;
  box-shadow: var(--shadow);
  transform: translateX(-102%);
  transition: transform .18s ease;
  display:flex;
  flex-direction:column;
}

.mobile-drawer.is-open{ transform: translateX(0); }

.mobile-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.mobile-title{
  font-weight: 600;
  font-size: 16px;
}

.icon-close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
}
.icon-close:hover{ background: var(--chip); }

.mobile-nav{
  padding: 10px 10px 0 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.mobile-link{
  height: var(--tap);
  display:flex;
  align-items:center;
  padding: 0 12px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--text);
}
.mobile-link:hover{ background: var(--chipHover); }

.mobile-auth{
  margin-top:auto;
  padding: 12px 10px 16px 10px;
  display:grid;
  gap: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.w-full{ width:100%; }

/* Responsive behavior */
.auth-mobile{ display:none; }

@media (max-width: 820px){
  .nav-toggle{ display:inline-flex; }
  .nav-desktop{ display:none; }
  .auth-desktop{ display:none; }
  .auth-mobile{ display:flex; margin-left:auto; }
  .logo{ font-size: 16px; }
}

/* Optional: compact logo on very small screens */
@media (max-width: 380px){
  .logo{ max-width: 160px; overflow:hidden; text-overflow:ellipsis; }
}


/* FIX: mobile header icon sát mép */
@media (max-width: 820px){
  /* nếu .container của bạn đang padding nhỏ/0, ép padding cho riêng header */
  .site-header .header-row{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* hoặc nếu bạn dùng .container padding sẵn nhưng vẫn sát: tăng nhẹ */
  .site-header .container{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* tăng vùng tap + tạo khoảng đệm thị giác */
  .site-header .nav-toggle{
    margin-left: 2px;
  }
  .site-header .auth-mobile{
    margin-right: 2px;
  }
}

/* thiết bị rất nhỏ (<=380px) tăng thêm chút */
@media (max-width: 380px){
  .site-header .header-row{
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* =========================
   FOOTER (portal style)
========================= */
.site-footer{
  margin-top: 30px;
  background: #0f172a; /* navy giống portal */
  color: rgba(255,255,255,.86);
}

.site-footer a{ color: inherit; text-decoration: none; }

.ft-top{
  padding: 34px 0 20px;
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 26px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.ft-logo{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
  color: #fff;
  display:inline-block;
}

.ft-desc{
  margin: 10px 0 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  max-width: 420px;
}

.ft-badges{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ft-badge{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
}
.ft-badge:hover{ background: rgba(255,255,255,.12); }

.ft-social{
  display:flex;
  gap: 10px;
}

.ft-social-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
}
.ft-social-btn:hover{ background: rgba(255,255,255,.12); }

.ft-cols{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ft-col-title{
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: .2px;
}

.ft-link{
  display:block;
  padding: 8px 0;
  color: rgba(255,255,255,.74);
  border-radius: 10px;
}
.ft-link:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mid row: company + cert */
.ft-mid{
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.ft-mid-row{
  display:flex;
  gap: 18px;
  align-items:flex-start;
  justify-content: space-between;
}

.ft-company-title{
  font-weight: 900;
  color:#fff;
  margin-bottom: 6px;
}

.ft-company-meta{
  color: rgba(255,255,255,.70);
  line-height: 1.6;
}

.ft-cert-title{
  font-weight: 900;
  color:#fff;
  margin-bottom: 10px;
}

.ft-cert-boxes{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.ft-cert-box{
  width: 76px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(255,255,255,.88);
}

/* Bottom */
.ft-bottom{
  padding: 14px 0;
}

.ft-bottom-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ft-copy{
  color: rgba(255,255,255,.68);
}

.ft-mini{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.70);
}
.ft-mini-link:hover{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ft-dot{ opacity: .6; }

/* Responsive */
@media (max-width: 980px){
  .ft-top{
    grid-template-columns: 1fr;
  }
  .ft-cols{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ft-mid-row{
    flex-direction: column;
  }
  .ft-cert-boxes{
    justify-content:flex-start;
  }
}

@media (max-width: 520px){
  .ft-cols{
    grid-template-columns: 1fr;
  }
  .ft-badge{ width: 100%; }
}


/* =========================
   Footer add-ons (nhatot vibe)
========================= */

/* Support cards */
.ft-support{
  padding: 18px 0 8px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ft-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  gap: 12px;
  transition: transform .12s ease, background .12s ease;
}
.ft-card:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.ft-card-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #fff;
}

.ft-card-title{
  font-weight: 900;
  color: #fff;
  margin-bottom: 2px;
}
.ft-card-sub{
  color: rgba(255,255,255,.72);
  line-height: 1.4;
  font-weight: 600;
}

/* Chips by province */
.ft-chips-wrap{
  padding: 10px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.ft-chips-title{
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
}

.ft-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ft-chip{
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  white-space: nowrap;
}
.ft-chip:hover{
  background: rgba(255,255,255,.12);
  color:#fff;
}

/* Responsive */
@media (max-width: 980px){
  .ft-support{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  /* mobile giống nhatot: chips kéo ngang */
  .ft-chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .ft-chip{
    scroll-snap-align: start;
  }
  /* hide scrollbar (optional) */
  .ft-chips::-webkit-scrollbar{ height: 6px; }
  .ft-chips::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
}
.ft-chip.is-active{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}


/* ===== HOME HERO ===== */
.home-hero{
  padding: 26px 0 14px;
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
}

.hero-copy h1{
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.hero-copy p{
  margin: 0 0 14px;
  color: rgba(0,0,0,.66);
  line-height: 1.6;
  max-width: 60ch;
}

.hero-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip{
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: #f4f5f7;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 500;
  color: #111;
  text-decoration: none;
}
.chip:hover{ background:#eceef2; }

/* Search card */
.hero-search{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow: hidden;
}

.hero-tabs{
  display:flex;
  background: #f6f7f8;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 8px;
  gap: 8px;
}

.hero-tab{
  flex: 1;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}
.hero-tab.is-active{
  background: #111;
  color: #fff;
  border-color: #111;
}

.hero-form{
  padding: 14px;
}

.hero-fields{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.field-label{
  font-weight: 900;
  font-size: 13px;
  display:block;
  margin-bottom: 6px;
  color: rgba(0,0,0,.80);
}

.field-control{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: 0 12px;
  font-weight: 700;
}

.field-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hero-submit{
  margin-top: 12px;
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 0;
  background: #111;
  color: #fff;
  font-weight: 900;
  cursor:pointer;
}
.hero-submit:hover{ filter: brightness(.95); }

.hero-quicklinks{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(0,0,0,.64);
  font-weight: 700;
  font-size: 13px;
}
.hero-quicklinks .link{ color: rgba(0,0,0,.70); text-decoration:none; }
.hero-quicklinks .link:hover{ text-decoration: underline; text-underline-offset: 3px; }
.hero-quicklinks .dot{ opacity: .5; }

/* ===== SECTIONS ===== */
.section--home{
  padding-top: 10px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-more{
  font-weight: 900;
  text-decoration: none;
  color: rgba(0,0,0,.72);
}
.section-more:hover{ text-decoration: underline; text-underline-offset: 3px; }

.grid--cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Responsive */
@media (max-width: 1100px){
  .grid--cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-inner{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .grid--cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .grid--cards{ grid-template-columns: 1fr; }
}


/* ===== HERO enhancements ===== */
.hero-cats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
}
.cat-card{
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 16px;
  padding: 12px 12px;
  text-decoration: none;
  color: #111;
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
}
.cat-card:hover{ transform: translateY(-1px); }
.cat-title{ font-weight: 900; }
.cat-hint{ margin-top: 2px; color: rgba(0,0,0,.62); font-weight: 700; font-size: 13px; }

.hero-stats{
  margin-top: 14px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}
.stat{
  display:flex;
  align-items:baseline;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f6f7f8;
  border: 1px solid rgba(0,0,0,.08);
}
.stat strong{ font-size: 16px; }
.stat span{ color: rgba(0,0,0,.62); font-weight: 800; }

/* ===== VIP CAROUSEL ===== */
.carousel{
  position: relative;
}
.car-track{
  display:flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.car-item{
  flex: 0 0 280px;         /* mỗi card cố định chiều rộng */
  scroll-snap-align: start;
}
@media (max-width: 520px){
  .car-item{ flex-basis: 86vw; } /* mobile: gần full */
}

.car-btn{
  position:absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  opacity: .98;
}
.car-btn:disabled{
  opacity: .35;
  cursor: default;
}
.car-prev{ left: -8px; }
.car-next{ right: -8px; }

@media (max-width: 820px){
  .car-btn{ display:none; } /* mobile chỉ swipe */
}

/* Skeleton (khi chưa có VIP data) */
.card-skeleton{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
}
.sk-img{ height: 150px; background:#eceef2; }
.sk-line{ height: 12px; background:#f0f2f5; margin: 10px 12px; border-radius: 999px; }
.sk-line.w80{ width: 80%; }
.sk-line.w60{ width: 60%; }

/* Empty state */
.empty-state{
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed rgba(0,0,0,.20);
  border-radius: 14px;
  color: rgba(0,0,0,.70);
  background: #fafafa;
}

/* Responsive tweaks */
@media (max-width: 1100px){
  .hero-cats{ max-width: none; }
}
@media (max-width: 520px){
  .hero-cats{ grid-template-columns: 1fr; }
}

.car-track{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-y; /* vẫn cho scroll dọc trang, ngang sẽ do drag JS xử lý */
}

.car-track.is-dragging{
  cursor: grabbing;
  scroll-snap-type: none; /* kéo mượt hơn */
}


/* Base VIP badge */
.img-badge--vip{
  background: #0f172a;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 18px rgba(0,0,0,.20);
}

/* DIAMOND: dark + icy accent */
.img-badge--vip.is-diamond{
  background: linear-gradient(135deg, #0b1220 0%, #111827 55%, #0b1220 100%);
  border-color: rgba(99, 214, 255, .35);
  box-shadow: 0 12px 22px rgba(0,0,0,.22), 0 0 0 2px rgba(99,214,255,.08) inset;
}

/* GOLD: champagne gold (not too bright) */
.img-badge--vip.is-gold{
  background: linear-gradient(135deg, #6b4f00 0%, #b08a00 55%, #6b4f00 100%);
  border-color: rgba(255, 214, 102, .42);
  box-shadow: 0 12px 22px rgba(0,0,0,.22), 0 0 0 2px rgba(255,214,102,.10) inset;
}

/* SILVER: cool gray */
.img-badge--vip.is-silver{
  background: linear-gradient(135deg, #2b2f36 0%, #6b7280 55%, #2b2f36 100%);
  border-color: rgba(226, 232, 240, .40);
  box-shadow: 0 12px 22px rgba(0,0,0,.20), 0 0 0 2px rgba(226,232,240,.10) inset;
}

/* BRONZE: warm copper */
.img-badge--vip.is-bronze{
  background: linear-gradient(135deg, #4a2c12 0%, #9a5a2a 55%, #4a2c12 100%);
  border-color: rgba(255, 170, 110, .35);
  box-shadow: 0 12px 22px rgba(0,0,0,.20), 0 0 0 2px rgba(255,170,110,.08) inset;
}


.img-badge--vip::before{
  content: "★";
  font-size: 11px;
  margin-right: 6px;
  opacity: .95;
}

.img-badge small{
  font-size: 10px;
  font-weight: 900;
  opacity: .9;
  margin-left: 6px;
}


/* Base chip style (nếu chip hiện tại đã có thì giữ, chỉ override vip) */
.chips .chip.vip{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #f6f7f8;
  color: rgba(0,0,0,.78);
}

/* VIP chip base */
.chips .chip.vip{
  background: rgba(15, 23, 42, .08);
  border-color: rgba(15, 23, 42, .18);
  color: #0f172a;
}

/* DIAMOND */
.chips .chip.vip.vip-diamond{
  background: rgba(99,214,255,.12);
  border-color: rgba(99,214,255,.38);
  color: #075985;
}

/* GOLD */
.chips .chip.vip.vip-gold{
  background: rgba(255,214,102,.16);
  border-color: rgba(255,214,102,.45);
  color: #7a5a00;
}

/* SILVER */
.chips .chip.vip.vip-silver{
  background: rgba(226,232,240,.75);
  border-color: rgba(148,163,184,.45);
  color: #334155;
}

/* BRONZE */
.chips .chip.vip.vip-bronze{
  background: rgba(255,170,110,.16);
  border-color: rgba(255,170,110,.42);
  color: #7c2d12;
}


.chips .chip.vip::before{
  content: "★";
  margin-right: 6px;
  font-size: 11px;
  opacity: .9;
}

/* Filter box like Nhatot (preset + range) */
.filter-box{
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
}

.filter-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.filter-title{ font-weight: 900; }
.filter-hint{ color: rgba(0,0,0,.55); font-weight: 700; font-size: 13px; }

.preset-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.preset{
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}
.preset:hover{ background:#f6f7f8; }

.minmax-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.mini span{
  display:block;
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.65);
  margin-bottom: 6px;
}
.mini-input{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  font-weight: 800;
}

/* Double range */
.range-wrap{
  position: relative;
  height: 28px;
  margin: 4px 2px 6px;
}
.range{
  position:absolute;
  left:0; right:0;
  top: 8px;
  width:100%;
  pointer-events: none; /* enable click on top thumb only via z-index */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #111;
  box-shadow: 0 8px 14px rgba(0,0,0,.18);
}
.range::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
}
.range::-moz-range-thumb{
  pointer-events:auto;
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #111;
}
.range::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
}

.range-fill{
  position:absolute;
  top: 11px;
  height: 6px;
  border-radius: 999px;
  background: #e11d48; /* đỏ kiểu filter screenshot */
  left: 0%;
  right: 0%;
  pointer-events:none;
}

.range-caption{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  margin-top: 6px;
}
.btn-clear{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-weight: 900;
  cursor:pointer;
}
.btn-clear:hover{ background:#f6f7f8; }

@media (max-width: 520px){
  .minmax-row{ grid-template-columns: 1fr; }
}

/* carousel touch */
.car-track{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
}
.car-track.is-dragging{ scroll-snap-type: none; cursor: grabbing; }



/* ==============================
   HOME GEO PICKER - HARD OVERRIDE
   (Fix: css not applied / fixed stuck in card)
   ============================== */

.geo-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.35) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}
.geo-overlay[hidden]{ display:none !important; }

.geo-modal.geo-picker{
  width: min(520px, 100%) !important;
  background:#fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
}

@media (max-width: 640px){
  .geo-overlay{
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .geo-modal.geo-picker{
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* header */
.geo-modal.geo-picker .geo-head{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  background:#fff !important;
}

.geo-modal.geo-picker .geo-title{
  flex: 1 !important;
  text-align: center !important;
  font-weight: 600 !important;
  color:#111827 !important;
}

.geo-modal.geo-picker .geo-back,
.geo-modal.geo-picker .geo-close{
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  appearance: none !important;
}

/* body */
.geo-modal.geo-picker .geo-body{
  padding: 12px 14px 14px !important;
  background:#fff !important;
}

/* search */
.geo-modal.geo-picker .geo-search{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  background:#f6f7f9 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
}

.geo-modal.geo-picker .geo-search input{
  width:100% !important;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  font-weight: 600 !important;
  color:#111827 !important;
}

/* breadcrumb */
.geo-modal.geo-picker .geo-breadcrumb{
  margin: 10px 2px 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.62) !important;
  min-height: 18px !important;
}

/* list */
.geo-modal.geo-picker .geo-list{
  max-height: 54vh !important;
  overflow: auto !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  background:#fff !important;
}

/* item = radio row */
.geo-modal.geo-picker .geo-item{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 12px !important;

  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  cursor: pointer !important;

  text-align: left !important;
  appearance:none !important;
}

.geo-modal.geo-picker .geo-item + .geo-item{
  border-top: 1px solid rgba(0,0,0,.06) !important;
}

.geo-modal.geo-picker .geo-item:hover{
  background: #fafafa !important;
}

.geo-modal.geo-picker .geo-name{
  flex: 1 !important;
  font-weight: 500 !important;
  color: #111827 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.geo-modal.geo-picker .geo-radio{
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(0,0,0,.18) !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.geo-modal.geo-picker .geo-item[aria-checked="true"] .geo-radio{
  border-color: #ff6d00 !important;
}

.geo-modal.geo-picker .geo-item[aria-checked="true"] .geo-radio::after{
  content:"" !important;
  position:absolute !important;
  inset: 3px !important;
  border-radius: 999px !important;
  background:#ff6d00 !important;
}

/* empty state */
.geo-modal.geo-picker .geo-empty{
  padding: 14px 12px !important;
  color: rgba(0,0,0,.6) !important;
  font-weight: 700 !important;
}

/* actions */
.geo-modal.geo-picker .geo-actions{
  display:flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 12px !important;
}

.geo-modal.geo-picker .geo-btn{
  height: 40px !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background:#fff !important;
}

.geo-modal.geo-picker .geo-btn.primary{
  background:#ff6d00 !important;
  border-color:#ff6d00 !important;
  color:#fff !important;
}
.geo-modal.geo-picker .geo-btn.primary:hover{ opacity: .92 !important; }

/* make "field button" look like select */
.field-control--btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background:#fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  position: relative !important;
}

.field-control--btn #geoLabel{
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(2,6,23,.08);
  --brand:#111827;
  --brand2:#0b1220;
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;
  --shadow:0 12px 30px rgba(2,6,23,.06);
  --r:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(1200px, calc(100% - 28px));
  margin-inline:auto;
}

.page{
  padding:18px 0 26px;
}

.admin-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.admin-head h1{
  margin:0;
  font-size:34px;
  letter-spacing:-.02em;
}

.admin-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Buttons */
.btn, .btn-outline{
  height:42px;
  padding:0 14px;
  border-radius:999px;
  font-weight:800;
  border:1px solid var(--line);
  background:var(--card);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover,.btn-outline:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(2,6,23,.10);
  text-decoration:none;
}
.btn:active,.btn-outline:active{transform:translateY(0)}
.btn{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#fff;
  border-color:transparent;
}
.btn-outline{
  background:var(--card);
  color:var(--text);
}

/* Inputs */
.input, select.input, textarea.input{
  width:100%;
  height:42px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
textarea.input{height:auto;padding:10px 12px}
.input:focus{
  border-color:rgba(15,23,42,.28);
  box-shadow:0 0 0 4px rgba(15,23,42,.08);
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

.card-pad{padding:14px}

/* Filter row */
.filters{
  margin-top:14px;
  display:grid;
  grid-template-columns: 220px 1fr 240px auto;
  gap:12px;
  align-items:end;
}
.filters label{font-size:13px;color:var(--muted);font-weight:800;display:block;margin-bottom:6px}
.filters .btn{height:42px}

@media (max-width: 980px){
  .filters{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  .filters{
    grid-template-columns: 1fr;
  }
}

/* Small stats */
.stats{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

/* Table */
.table-wrap{
  margin-top:14px;
  overflow:auto;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--card);
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:900px;
}
.table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:linear-gradient(180deg,#fff, #fafafa);
  text-align:left;
  padding:12px 14px;
  font-size:13px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.table tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-size:14px;
}
.table tbody tr:hover td{background:#fafafa}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--line);
  background:#fff;
}
.badge.ok{border-color:rgba(22,163,74,.25); color:var(--ok); background:rgba(22,163,74,.06)}
.badge.warn{border-color:rgba(245,158,11,.28); color:var(--warn); background:rgba(245,158,11,.08)}
.badge.bad{border-color:rgba(239,68,68,.25); color:var(--bad); background:rgba(239,68,68,.06)}
.badge.neu{color:var(--muted); background:#f8fafc}

/* Pagination */
.pager{
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
}

/* Mobile: table -> cards (optional if bạn thêm data-label vào td) */
@media (max-width: 720px){
  .table{min-width:0}
  .table thead{display:none}
  .table tbody tr{
    display:block;
    border-bottom:1px solid var(--line);
  }
  .table tbody td{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
  }
  .table tbody td::before{
    content:attr(data-label);
    color:var(--muted);
    font-weight:800;
    font-size:12px;
    padding-right:10px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .btn, .btn-outline{transition:none}
}

}

.field-control__chev{
  position:absolute !important;
  right: 12px !important;
  opacity: .7 !important;
}

/* User dropdown menu (header) */
.user-menu{position:relative; display:inline-block;}
.user-menu .user-btn{width:40px;height:40px;border-radius:999px;border:1px solid #e6e8ee;background:#fff;display:grid;place-items:center;font-weight:800;cursor:pointer}
.user-dropdown{position:absolute; right:0; top:calc(100% + 10px); width:220px; background:#fff; border:1px solid #e6e8ee; border-radius:14px; box-shadow:0 18px 60px rgba(16,24,40,.14); padding:8px; display:none; z-index:50}
.user-menu.is-open .user-dropdown{display:block;}
.user-dropdown a{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; color:#0f172a; text-decoration:none; font-weight:600}
.user-dropdown a:hover{background:#f5f7fb}
.user-dropdown .sep{height:1px;background:#eef1f6;margin:6px 0}
.user-dropdown a.danger{color:#b42318}



/* =========================================================
   Street typeahead (mobile-friendly)
   - input#streetInput + div#streetSuggest .ta-item
   ========================================================= */

#streetSuggest{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(16,24,40,.14);
  padding: 6px;
  z-index: 60;
  max-height: 260px;
  overflow: auto;
}

#streetSuggest[hidden]{display:none !important;}

#streetSuggest .ta-item{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
  color: #0f172a;
  font-weight: 650;
}

#streetSuggest .ta-item:hover{
  background: #f5f7fb;
}

/* Wrap helper: any container can set position:relative to anchor #streetSuggest */
.street-typeahead-wrap{position:relative;}


/* =====================
   Price input helper (mobile-friendly)
   ===================== */
.range-io{display:block;}
.range-label{margin-top:6px;font-size:12px;font-weight:900;color:rgba(15,23,42,.70);}
.range-label b{color:rgba(15,23,42,.95);}



/* ============================================================

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(2,6,23,.10);background:rgba(2,6,23,.04);font-size:12px;font-weight:900;color:rgba(15,23,42,.92)}
.pill.ok{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.22);color:#145a2a}
.pill.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.22);color:#7a5a00}
.pill.bad{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22);color:#9a1c1c}
.pill.neu{background:rgba(2,6,23,.05);border-color:rgba(2,6,23,.12);color:rgba(15,23,42,.80)}
   Locked / Appeal page (better UX)
   ============================================================ */
.alert{background:#fff4f4;border:1px solid #ffd2d2;padding:10px 12px;border-radius:14px}
.alert-danger{background:#fff2f2;border-color:#ffd0d0;color:#9a1c1c}
.alert-success{background:#f2fff5;border-color:#cfead6;color:#145a2a}

.auth-locked-wrap{max-width:1040px;margin:0 auto;padding:18px 0}
.auth-locked-head{display:flex;gap:14px;align-items:flex-start}
.auth-locked-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(2,6,23,.04);border:1px solid rgba(0,0,0,.08);font-size:20px}
.auth-locked-title{margin:0;font-size:40px;letter-spacing:-.02em}
.auth-locked-sub{margin-top:6px;font-size:16px;line-height:1.5;color:rgba(15,23,42,.90)}
@media (max-width:640px){
  .auth-locked-title{font-size:30px}
  .auth-locked-head{align-items:center}
}

.auth-locked-grid{margin-top:16px;display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
@media (max-width:900px){.auth-locked-grid{grid-template-columns:1fr}}
.auth-card{padding:14px}
.auth-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.auth-card-title{font-weight:1000;font-size:18px}
.auth-form{margin-top:12px;display:grid;gap:10px}
.field{display:block}
.field-label{font-weight:900;margin-bottom:6px}
.auth-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:2px}

.appeal-list{margin-top:10px;display:grid;gap:10px}
.appeal-item{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.appeal-sum{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 12px}
.appeal-sum::-webkit-details-marker{display:none}
.appeal-left{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.appeal-right{white-space:nowrap;font-size:12px}
.appeal-body{padding:12px;border-top:1px solid var(--line)}
.appeal-decision{margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(2,6,23,.03);border:1px dashed rgba(2,6,23,.18)}


/* ============================================================
   Appeal chat (conversation history)
   ============================================================ */
.appeal-chat{display:grid;gap:10px;margin-top:10px}
.msg{display:flex;flex-direction:column;max-width:92%}
.msg.from-admin{margin-left:auto;align-items:flex-end}
.msg.from-user{margin-right:auto;align-items:flex-start}
.msg-bubble{padding:10px 12px;border-radius:16px;background:rgba(2,6,23,.03);border:1px solid rgba(2,6,23,.10)}
.msg.from-admin .msg-bubble{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22)}
.msg-files{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.msg-meta{font-size:12px;margin-top:6px}
.appeal-reply{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(2,6,23,.18)}

/* ============================================================
   FB-like thread (used in locked page + admin appeal)
   ============================================================ */
.fb-thread{display:grid;gap:12px;margin-top:10px}
.fb-comment{display:flex;gap:10px;align-items:flex-start}
.fb-avatar{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font-weight:1000;border:1px solid rgba(2,6,23,.12);background:rgba(2,6,23,.04);color:rgba(15,23,42,.80);flex:0 0 auto}
.fb-comment.is-admin .fb-avatar{border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.10);color:rgb(185 28 28)}
.fb-content{min-width:0;flex:1}
.fb-meta{font-size:12px;line-height:1.2;color:rgba(15,23,42,.82);margin-bottom:6px}
.fb-bubble{display:inline-block;max-width:100%;padding:10px 12px;border-radius:16px;background:rgba(2,6,23,.03);border:1px solid rgba(2,6,23,.10);line-height:1.5}
.fb-comment.is-admin .fb-bubble{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22)}
.fb-attach{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fb-attach-thumb{width:54px;height:54px;border-radius:14px;border:1px solid rgba(2,6,23,.12);background:rgba(2,6,23,.03);display:grid;place-items:center;overflow:hidden;text-decoration:none;color:rgba(15,23,42,.75);font-weight:900}
.fb-attach-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fb-attach-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Better appeal form */
.auth-form-appeal .input{width:100%}
.auth-form-appeal textarea.input{min-height:140px;resize:vertical}
.auth-form-appeal .file-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.auth-form-appeal .file-input{padding:10px 12px}
.auth-form-appeal .auth-actions .btn{min-width:140px}


/* ============================================================
   Lightbox (image/pdf preview)
   ============================================================ */
html.lb-lock, html.lb-lock body{overflow:hidden !important}
.lb-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.62);backdrop-filter:saturate(120%) blur(4px);display:none;align-items:center;justify-content:center;z-index:9999;padding:14px}
.lb-backdrop.open{display:flex}
.lb-shell{width:min(1024px, 100%);max-height:92vh;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.22);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
.lb-close{position:absolute;right:18px;top:14px;width:38px;height:38px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:#fff;cursor:pointer;font-weight:900}
.lb-shell{position:relative}
.lb-stage{flex:1;display:grid;place-items:center;background:linear-gradient(180deg,rgba(2,6,23,.03),rgba(2,6,23,.01));}
.lb-img{max-width:100%;max-height:72vh;border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.20)}
.lb-pdf{width:100%;height:72vh;border:0;background:#fff}
.lb-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-top:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.92)}
.lb-prev,.lb-next{width:40px;height:36px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:#fff;cursor:pointer;font-size:20px;font-weight:900}
.lb-meta{flex:1;text-align:center;color:rgba(15,23,42,.70);font-weight:900}
.lb-open{color:var(--brand);font-weight:900;text-decoration:none}
.lb-open:hover{text-decoration:underline}


/* Flash / Toast */
.flash-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.flash{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  position:relative;
}
.flash-msg{
  font-weight:600;
  line-height:1.45;
}
.flash-close{
  width:32px;height:32px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
  cursor:pointer;
  font-size:18px;
  line-height:28px;
}
.flash-close:hover{ background:rgba(0,0,0,.06); }
.flash-success{ border-left:6px solid rgba(22,163,74,.85); }
.flash-error{ border-left:6px solid rgba(220,38,38,.85); background:#fff7f7; }
.flash-warn{ border-left:6px solid rgba(245,158,11,.95); background:#fffaf0; }
.flash-info{ border-left:6px solid rgba(37,99,235,.85); background:#f4f8ff; }

/* Improve legacy alerts */
.alert{
  border-radius:14px;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.alert.alert-success{ background:#f2fff5; border-color:#cfead6; color:#145a2a; border-left:6px solid rgba(22,163,74,.85);} 
.alert.alert-danger{ background:#fff2f2; border-color:#ffd0d0; color:#9a1c1c; border-left:6px solid rgba(220,38,38,.85);} 
.alert.alert-warning{ background:#fff8e6; border-color:#f6d68a; color:#7a5a00; border-left:6px solid rgba(245,158,11,.95);} 
.alert.alert-info{ background:#f4f8ff; border-color:#b6d4fe; color:#084298; border-left:6px solid rgba(37,99,235,.85);} 

@media (min-width: 900px){
  .flash-stack[data-flash-stack]{
    position:sticky;
    top: 12px;
    z-index: 90;
  }
}