/* =============================================
   TenMienDangCap.com — app.css v1.1
   Palette: Sage Green
   ============================================= */

:root {
  --primary: #2F855A;
  --primary-700: #276749;
  --primary-500: #48A373;
  --primary-300: #9AC8B0;
  --primary-100: #E8F5EE;
  --primary-50: #F4FBF7;
  --gold: #D69E2E;
  --gold-light: #FEEBC8;
  --n-900: #1A202C;
  --n-700: #2D3748;
  --n-600: #4A5568;
  --n-500: #718096;
  --n-400: #A0AEC0;
  --n-300: #CBD5E0;
  --n-200: #E2E8F0;
  --n-100: #EDF2F7;
  --n-50: #F7FAFC;
  --success: #38A169;
  --warning: #DD6B20;
  --danger: #E53E3E;
  --info: #3182CE;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow: 0 4px 12px rgba(47,133,90,0.08);
  --shadow-lg: 0 10px 24px rgba(47,133,90,0.12);
  --radius: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--n-700);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-700); }

h1, h2, h3, h4 { color: var(--n-900); line-height: 1.3; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; }
@media (min-width: 768px) { h1 { font-size: 2.5rem; } h2 { font-size: 1.875rem; } }
p { margin: 0 0 1em; }

.mono { font-family: "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace; letter-spacing: -0.01em; }

/* === Layout === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 24px; } }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 16px; }

/* === Buttons === */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius); font-weight: 600; font-size: 15px; cursor: pointer; transition: all .15s; text-decoration: none; font-family: inherit; line-height: 1.4; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-700); color: #fff; }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary-50); color: var(--primary-700); }
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background: #B7791F; }
.btn-ghost { background: transparent; color: var(--n-700); }
.btn-ghost:hover { background: var(--n-100); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #C53030; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Badges === */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-hot { background: #FED7D7; color: #C53030; }
.badge-new { background: var(--primary-100); color: var(--primary-700); }
.badge-sale { background: var(--gold-light); color: #744210; }
.badge-featured { background: linear-gradient(90deg, #F6E05E, var(--gold)); color: #744210; }
.badge-premium { background: linear-gradient(90deg, #B794F4, #805AD5); color: #fff; }
.badge-sold { background: var(--n-200); color: var(--n-500); }

/* === Forms === */
.form-group { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: var(--n-700); }
.form-control, input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password], input[type=search], textarea, select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}
textarea { min-height: 100px; resize: vertical; font-family: inherit; }
.form-hint { color: var(--n-500); font-size: 13px; margin-top: 4px; }
.form-error { color: var(--danger); font-size: 13px; margin-top: 4px; font-weight: 500; }
.required::after { content: " *"; color: var(--danger); }

.checkbox { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 400; line-height: 1.5; }
.checkbox input { margin-top: 3px; }

/* === Cards === */
.card { background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.card-hover { transition: transform .15s, box-shadow .15s, border-color .15s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary-300); }

/* === Alerts === */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: #F0FFF4; color: #22543D; border-color: #9AE6B4; }
.alert-error, .alert-danger { background: #FED7D7; color: #742A2A; border-color: #FC8181; }
.alert-warning { background: #FEFCBF; color: #744210; border-color: #F6E05E; }
.alert-info { background: #EBF8FF; color: #2A4365; border-color: #90CDF4; }

/* === Header === */
.header { background: #fff; border-bottom: 1px solid var(--n-200); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--primary-700); font-size: 17px; }
.logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 4px 10px rgba(47,133,90,0.25); }
.logo-text { line-height: 1.15; }
.logo-text small { font-weight: 500; color: var(--n-500); font-size: 11px; display: block; }
.nav { display: none; gap: 16px; flex: 1; margin-left: 24px; flex-wrap: wrap; }
.nav a { color: var(--n-700); font-weight: 500; font-size: 14px; white-space: nowrap; }
.nav a:hover { color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.hotline-btn { display: none; font-size: 13px; color: var(--n-700); font-weight: 600; }
.hotline-btn strong { color: var(--primary-700); }
.burger { display: block; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--n-700); margin: 4px 0; border-radius: 2px; }
@media (min-width: 900px) {
  .nav, .hotline-btn { display: flex; }
  /* burger vẫn hiện trên desktop để mở drawer đầy đủ (Blog, Đấu giá, Flash Sale, Affiliate, Chính sách...) */
}
.mobile-menu { display: none; background: #fff; padding: 16px; border-top: 1px solid var(--n-200); }
.mobile-menu.active { display: block; }
.mobile-menu a { display: block; padding: 10px 0; color: var(--n-700); border-bottom: 1px solid var(--n-100); }

/* === Hero === */
.hero { background: linear-gradient(135deg, var(--primary-50), #fff); padding: 48px 0; border-bottom: 1px solid var(--n-200); }
.hero h1 { font-size: 2rem; color: var(--primary-700); margin-bottom: 8px; text-align: center; }
.hero-sub { color: var(--n-500); text-align: center; margin-bottom: 28px; font-size: 1rem; }
.hero-search { max-width: 640px; margin: 0 auto; display: flex; gap: 8px; background: #fff; padding: 8px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-search input { border: 0; padding: 12px 16px; font-size: 16px; background: transparent; }
.hero-search input:focus { box-shadow: none; }
.hero-suggests { text-align: center; margin-top: 16px; color: var(--n-500); font-size: 14px; }
.hero-suggests a { color: var(--primary); margin: 0 6px; font-weight: 500; }
@media (min-width: 768px) { .hero { padding: 72px 0; } .hero h1 { font-size: 2.5rem; } .hero-sub { font-size: 1.125rem; } }

/* === Trust strip === */
.trust-strip { background: #fff; padding: 16px 0; border-bottom: 1px solid var(--n-200); overflow-x: auto; }
.trust-strip-inner { display: flex; gap: 24px; justify-content: center; align-items: center; font-size: 13px; color: var(--n-600); white-space: nowrap; min-width: min-content; }
.trust-strip-inner span { display: flex; align-items: center; gap: 6px; }

/* === Sections === */
.section { padding: 48px 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 8px; }
.section-title h2 { margin: 0; font-size: 1.5rem; }
.section-title .link { font-size: 14px; color: var(--primary); font-weight: 600; }

/* === Domain grid === */
.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
@media (min-width: 768px) { .domain-grid { gap: 20px; } }

/* === Domain card === */
.domain-card { background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg); padding: 18px; transition: all .15s; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.domain-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow); transform: translateY(-2px); }
.domain-card-badges { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.domain-card h3 { margin: 0 0 6px; font-size: 22px; color: var(--primary-700); word-break: break-all; }
.domain-card .meta { color: var(--n-500); font-size: 13px; margin-bottom: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.domain-card .price-usd { font-size: 22px; font-weight: 800; color: var(--n-900); margin-top: auto; }
.domain-card .price-vnd { color: var(--n-500); font-size: 13px; margin: 2px 0 12px; }
.domain-card .price-vnd-primary {
  font-size: 22px;
  font-weight: 800;
  color: var(--n-900);
  line-height: 1.1;
  margin-top: auto;
  letter-spacing: -0.01em;
}
.domain-card .price-vnd-primary .price-num {
  font-size: 22px;
  font-weight: 800;
  color: #000;
  letter-spacing: -0.02em;
}
.domain-card .price-vnd-primary .price-unit {
  font-size: 16px;
  font-weight: 800;
  color: #000;
  margin-left: 4px;
  letter-spacing: 0;
}
.domain-card .price-usd-sub {
  color: var(--n-500);
  font-size: 12px;
  margin: 3px 0 10px;
  font-weight: 500;
}
.domain-card .price-original { color: var(--n-400); text-decoration: line-through; font-size: 14px; margin-right: 8px; }
.domain-card .price-tag { display: inline-block; background: var(--primary-100); color: var(--primary-700); padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 12px; margin-bottom: 12px; }
.domain-card .actions { display: flex; gap: 8px; margin-top: 8px; }
.domain-card .actions .btn { flex: 1; padding: 8px 12px; font-size: 14px; }
.domain-card .installment-hint { font-size: 12px; color: var(--n-500); margin-top: 8px; }

/* === Category pills === */
.category-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.category-pill { background: #fff; border: 1px solid var(--n-200); padding: 8px 16px; border-radius: 20px; color: var(--n-700); font-size: 14px; font-weight: 500; transition: all .15s; }
.category-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.category-pill .count { color: var(--n-500); font-size: 12px; }

/* === Detail page === */
.detail-header { background: linear-gradient(135deg, var(--primary-50), #fff); padding: 32px 0; border-bottom: 1px solid var(--n-200); }
.breadcrumb { color: var(--n-500); font-size: 14px; margin-bottom: 16px; }
.breadcrumb a { color: var(--n-600); }
.breadcrumb span { color: var(--n-400); margin: 0 6px; }
.detail-title { font-size: 2.25rem; margin-bottom: 8px; color: var(--n-900); word-break: break-all; }
@media (min-width: 768px) { .detail-title { font-size: 3rem; } }
.detail-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--n-600); font-size: 14px; margin-bottom: 20px; }
.price-box { background: #fff; border: 2px solid var(--primary); border-radius: var(--radius-lg); padding: 20px; margin: 20px 0; box-shadow: var(--shadow); }
/* VND TO primary (luật VN). Cỡ nhỏ hơn tiêu đề domain để visual balance */
.price-vnd-big {
  font-size: 1.75rem;
  font-weight: 700;
  color: #000;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.price-vnd-big .price-unit {
  font-size: 0.85em;
  font-weight: 700;
  color: #000;
  margin-left: 4px;
  letter-spacing: 0;
}
.price-usd-sub-big {
  color: var(--n-500);
  font-size: 0.9rem;
  margin-top: 4px;
  font-weight: 500;
}
.price-box .price-market { font-size: 13px; color: var(--n-500); margin-top: 8px; }
.price-box .savings { background: var(--primary-100); color: var(--primary-700); padding: 6px 12px; border-radius: 6px; display: inline-block; font-weight: 600; font-size: 13px; margin-top: 8px; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.detail-section { margin: 40px 0; }
.detail-section h2 { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--primary-100); }
.detail-section ul { padding-left: 24px; }
.detail-section ul li { margin-bottom: 8px; }

.use-case-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.use-case-item { display: flex; gap: 12px; padding: 14px 16px; background: var(--primary-50); border-left: 3px solid var(--primary); border-radius: 6px; }
@media (min-width: 600px) { .use-case-grid { grid-template-columns: 1fr 1fr; } }

.insight-box { background: #FFF8E1; border-left: 3px solid var(--gold); padding: 14px 16px; border-radius: 6px; margin-bottom: 12px; }

.roadmap { display: grid; grid-template-columns: 1fr; gap: 16px; }
.roadmap-item { background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius); padding: 20px; }
.roadmap-item .label { display: inline-block; background: var(--primary-100); color: var(--primary-700); padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
@media (min-width: 700px) { .roadmap { grid-template-columns: 1fr 1fr; } }

.market-chart { background: var(--primary-50); border-radius: var(--radius-lg); padding: 24px; }
.price-range-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.price-range-row:last-child { margin-bottom: 0; }
.price-range-row .label-sm { font-size: 13px; color: var(--n-600); min-width: 140px; }
.price-range-row .range-bar { flex: 1; height: 28px; background: var(--n-100); border-radius: 4px; position: relative; overflow: hidden; }
.price-range-row .range-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--primary-300), var(--primary)); }
.price-range-row .range-fill.gold { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.price-range-row .price-text { font-weight: 700; color: var(--n-900); min-width: 140px; text-align: right; font-size: 14px; }

/* === FAQ === */
.faq-list details { background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq-list summary { padding: 14px 18px; cursor: pointer; font-weight: 600; color: var(--n-900); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; float: right; color: var(--primary); font-weight: 700; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details[open] summary { border-bottom: 1px solid var(--n-200); }
.faq-list .faq-body { padding: 14px 18px; color: var(--n-700); }

/* === Checkout === */
.checkout-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: 1fr 380px; } }
.order-summary { background: var(--primary-50); border: 1px solid var(--primary-300); border-radius: var(--radius-lg); padding: 20px; position: sticky; top: 80px; }
.order-summary .line { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.order-summary .line.total { border-top: 1px solid var(--primary-300); padding-top: 12px; margin-top: 12px; font-weight: 700; font-size: 16px; }
.order-summary .total .v { color: var(--primary-700); font-size: 20px; }
.rate-note { background: #fff; border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--n-500); margin-top: 12px; line-height: 1.5; }

/* === Payment (QR page) === */
.payment-box { background: #fff; border: 2px solid var(--primary); border-radius: var(--radius-lg); padding: 24px; max-width: 500px; margin: 0 auto; }
.payment-status-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-100); color: var(--primary-700); padding: 8px 16px; border-radius: 20px; font-weight: 600; margin-bottom: 16px; }
.payment-status-pill .dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.countdown { font-size: 1.5rem; font-family: "JetBrains Mono", monospace; color: var(--n-900); text-align: center; margin-bottom: 20px; }
.qr-wrap { text-align: center; margin: 16px 0; }
.qr-wrap img { max-width: 280px; width: 100%; border: 1px solid var(--n-200); border-radius: var(--radius); padding: 12px; background: #fff; margin: 0 auto; }
.qr-info { display: grid; gap: 10px; font-size: 14px; }
.qr-info-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--n-50); border-radius: 6px; }
.qr-info-row .label { color: var(--n-600); font-size: 13px; }
.qr-info-row .value { font-weight: 600; color: var(--n-900); }
.qr-info-row .copy { background: transparent; border: 1px solid var(--n-300); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; color: var(--n-700); }
.qr-info-row .copy:hover { border-color: var(--primary); color: var(--primary); }

/* === Success page === */
.success-hero { text-align: center; padding: 48px 24px; }
.success-hero .check { width: 80px; height: 80px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }

/* === Footer === */
.footer { background: var(--n-900); color: var(--n-300); padding: 48px 0 24px; margin-top: 48px; }
.footer a { color: var(--n-300); }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
/* Áp cho MỌI tiêu đề trong chân trang, không chỉ tiêu đề nằm trong lưới.
   Tách `.ft-top` ra khỏi `.footer-grid` khiến tên site rơi khỏi quy tắc cũ
   `.footer-grid h4` → mất màu trắng, thành chữ tối trên nền tối, không đọc được. */
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { margin-bottom: 6px; font-size: 14px; }
.footer-social { display: flex; gap: 12px; margin-top: 12px; }
.footer-social a { width: 36px; height: 36px; background: var(--n-700); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; transition: background .15s; }
.footer-social a:hover { background: var(--primary); }
.footer-bottom { border-top: 1px solid var(--n-700); padding-top: 20px; font-size: 12px; color: var(--n-400); line-height: 1.7; }

/* FOOTER_2COT_v1 — trên điện thoại xếp HAI cột thay vì một.
   Trước đây `grid-template-columns: 1fr` nên các khối nằm dọc, mỗi link một dòng:
   toàn chữ ngắn mà kéo dài gần hai màn hình.
   Khối thương hiệu và khối bài viết tách hẳn ra khỏi lưới (`.ft-top`, `.ft-tinbai`)
   nên thứ tự hiển thị bám đúng thứ tự trong HTML, không phụ thuộc grid tự xếp. */
.ft-top { margin-bottom: 24px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* FOOTER_CHAM_v1 — dấu chấm đầu dòng cho cột link.
   Không áp cho cột Liên hệ: các dòng đó đã có ☎ ✉ 💬 📍 dẫn đầu, thêm chấm nữa là thừa. */
.ft-links ul li { display: flex; align-items: baseline; gap: 8px; }
.ft-links ul li::before { content: "•"; color: var(--primary); font-size: 15px; line-height: 1; flex: 0 0 auto; }

/* FB_PAGE_v1 — thẻ trang Facebook thay ba nút tròn f/▶/♪.
   Bố cục học từ grenada.vn: biểu tượng, tên trang + tích xanh, số người theo dõi,
   nút Theo dõi. Một trang thật có sức nặng hơn ba nút không nói lên điều gì. */
.fb-page { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px;
           border-radius: 12px; border: 1px solid rgba(255,255,255,.16);
           background: rgba(255,255,255,.06); text-decoration: none; max-width: 380px; }
.fb-page:hover { background: rgba(255,255,255,.1); }
.fb-page .ic { width: 34px; height: 34px; border-radius: 9px; background: #1877F2; color: #fff;
               font-weight: 800; font-size: 19px; display: grid; place-items: center;
               font-family: Georgia, serif; flex: 0 0 auto; }
.fb-page .tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.fb-page .tx b { color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.fb-page .tx i { font-style: normal; font-size: 12px; opacity: .72; margin-top: 1px; }
.fb-page .vfy { width: 14px; height: 14px; flex: 0 0 auto; }
.fb-page .go { margin-left: auto; font-size: 12px; font-weight: 800; padding: 6px 13px;
               border-radius: 99px; background: #1877F2; color: #fff; flex: 0 0 auto; }

/* FOOTER_TINBAI_v1 — 6 bài mới nhất, dạng danh sách chữ.
   Bài viết vốn chỉ có lối vào từ thanh dưới và ngăn kéo, trang chủ không hề dẫn tới. */
.ft-tinbai { border-top: 1px solid var(--n-700); border-bottom: 1px solid var(--n-700);
             padding: 20px 0; margin-bottom: 24px; }
.ft-tinbai h4 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.ft-tinbai ul { list-style: none; padding: 0; margin: 0;
                display: grid; grid-template-columns: 1fr; gap: 10px; }
.ft-tinbai li { font-size: 14px; line-height: 1.5; display: flex; align-items: baseline; gap: 8px; }
.ft-tinbai li::before { content: "▸"; color: var(--primary); flex: 0 0 auto; font-size: 13px; }
/* LIEN_HE_GON_v1 — khối Liên hệ chiếm trọn bề ngang (nội dung dài hơn cột link),
   hai số máy và ba kênh nhắn tin xuống hàng mềm thay vì mỗi thứ một dòng cứng. */
.footer-grid > .ft-lienhe { grid-column: 1 / -1; }
.ft-lienhe ul li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 8px; }
.ft-lienhe .nb { white-space: nowrap; }
.ft-lienhe .uu-tien { font-size: 12px; opacity: .62; }
@media (min-width: 700px) { .ft-tinbai ul { grid-template-columns: 1fr 1fr; gap: 10px 28px; } }

/* KHOANG_TRANG_CHAN_v1 — bỏ khoảng trắng thừa giữa nội dung và chân trang.
   `.app-main` chừa 88px phía dưới để thanh điều hướng cố định không che nội dung.
   Nhưng chân trang nằm SAU `main`, nên 88px đó không che gì cả — nó chỉ tạo một
   mảng trắng to giữa khối nội dung cuối và chân trang (đo trên iPhone: 88px của
   main + 48px margin của chân trang = 136px trống).
   Chỗ thật sự cần chừa là CUỐI chân trang. Chuyển xuống đó.
   ⚠️ Chỉ áp cho trang CÓ chân trang (`.co-chan`) — layout admin cũng dùng
   `.app-main` và có thanh dưới nhưng KHÔNG có chân trang, bỏ đệm ở đó là thanh
   điều hướng che mất nội dung cuối trang. */
.app-main.co-chan { padding-bottom: 0; }
.footer { margin-top: 24px; padding-bottom: calc(24px + 88px + env(safe-area-inset-bottom, 0)); }
/* Site vệ tinh dùng chân trang riêng `.micro-footer` — phải bù đệm ở đó, không thì
   bỏ đệm của `main` là thanh điều hướng che mất phần cuối chân trang. */
.micro-footer { padding-bottom: calc(20px + 88px + env(safe-area-inset-bottom, 0)) !important; }

/* === Floating widgets === */
.floating-widgets { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 50; }
.floating-widgets a { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.2); transition: transform .15s; }
.floating-widgets a:hover { transform: scale(1.05); }
.fab-zalo { background: #0068ff; }
.fab-messenger { background: linear-gradient(135deg, #00B2FF, #006AFF); }
.fab-phone { background: var(--primary); }

/* === Admin layout === */
.admin-body { background: var(--n-100); min-height: 100vh; }
.admin-wrap { display: flex; min-height: 100vh; }

/* Sidebar - desktop: fixed side column */
.sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid var(--n-200);
  padding: 20px 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.25s ease;
}
.sidebar-logo { padding: 0 20px 20px; border-bottom: 1px solid var(--n-200); margin-bottom: 16px; }
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { margin-bottom: 2px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: var(--n-700);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.sidebar-nav a:hover { background: var(--primary-50); color: var(--primary-700); }
.sidebar-nav a.active { background: var(--primary-100); color: var(--primary-700); border-right: 3px solid var(--primary); }

.admin-content {
  flex: 1;
  padding: 24px;
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-topbar h1 { margin: 0; font-size: 1.5rem; flex: 1; min-width: 0; }
.admin-user { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--n-600); }

/* Burger button — hidden on desktop */
.admin-burger {
  display: none;
  background: #fff;
  border: 1px solid var(--n-300);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--n-700);
}
.admin-burger:active { background: var(--primary-50); }

/* Overlay when sidebar open on mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.2s;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
  .admin-wrap { display: block; }
  
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    transform: translateX(-100%);
    box-shadow: 2px 0 16px rgba(0,0,0,0.15);
  }
  .sidebar.active {
    transform: translateX(0);
  }
  
  .admin-content {
    padding: 16px;
    width: 100%;
    max-width: 100vw;
  }
  
  .admin-burger {
    display: inline-flex;
  }
  
  .admin-topbar {
    position: sticky;
    top: 0;
    background: var(--n-100);
    padding: 12px 0;
    margin: -16px -16px 16px;
    padding: 12px 16px;
    z-index: 50;
    border-bottom: 1px solid var(--n-200);
  }
  .admin-topbar h1 { font-size: 1.125rem; }
  .admin-user { display: none; } /* hide on mobile to save space */
  
  /* Stack cards vertically */
  .grid-2 { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card .value { font-size: 1.35rem; }
  .stat-card { padding: 12px 14px; }
  
  /* Tables scroll horizontally on mobile */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  th, td { padding: 10px 12px; font-size: 13px; }
  
  /* Cards with long mono text (Page ID, tokens) */
  .mono { word-break: break-all; }
  
  /* Forms full-width, better spacing */
  .card { padding: 16px; border-radius: 10px; }
  .form-group { margin-bottom: 14px; }
  
  /* Sticky action bar at bottom */
  form > div[style*="position:sticky"] {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 40;
  }
  .admin-content {
    padding-bottom: 100px; /* leave room for sticky footer */
  }
}

/* Tables */
.table-wrap { background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--n-100); }
th { background: var(--n-50); font-weight: 600; color: var(--n-700); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover { background: var(--primary-50); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg); padding: 16px 20px; }
.stat-card .label { color: var(--n-500); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card .value { font-size: 1.75rem; font-weight: 700; color: var(--n-900); margin-top: 4px; }
.stat-card .sub { font-size: 12px; color: var(--n-500); margin-top: 4px; }

/* Pagination */
.pagination { display: flex; gap: 4px; flex-wrap: wrap; margin: 20px 0; }
.pagination a, .pagination span { padding: 6px 12px; background: #fff; border: 1px solid var(--n-200); border-radius: 4px; font-size: 14px; color: var(--n-700); }
.pagination a:hover { background: var(--primary-50); border-color: var(--primary-300); }
.pagination .active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* Utility */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--n-500); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-primary { color: var(--primary); }
.text-gold { color: var(--gold); }
.text-sm { font-size: 13px; }
.text-lg { font-size: 18px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.rounded { border-radius: 6px; }
.grid { display: grid; }
.grid-2 { grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

/* Mobile responsive helpers */
@media (max-width: 768px) {
  h1 { font-size: 1.75rem; }
  .section { padding: 32px 0; }
  .domain-card h3 { font-size: 20px; }
  .detail-title { font-size: 1.75rem; }
}

/* ============================================================
   v1.2 — App-like mobile UX
   Fixed topbar + Drawer + Bottom-nav + Search modal
   ============================================================ */

/* Reset old layout classes (giữ code cũ nhưng ẩn) */
.floating-widgets { display: none !important; }
.header { display: none !important; }

/* --- Topbar (fixed) --- */
.topbar {
  position: fixed;
  top: var(--banner-h, 0px);
  left: 0; right: 0;
  height: 56px;
  background: #fff;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-bottom: 1px solid var(--n-100);
  transition: top 0.25s ease;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 2px; }
.topbar-brand {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.topbar-brand-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 4px 10px rgba(47,133,90,0.2);
  flex-shrink: 0;
}
.topbar-brand-text {
  font-weight: 700; font-size: 15.5px;
  color: var(--n-900);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-top: 2px;
}
.topbar-brand-text small {
  display: block;
  font-weight: 500; font-size: 9.5px;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
  line-height: 1.1;
}
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--n-700);
  padding: 0;
  position: relative;
}
.icon-btn:active { background: var(--n-100); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn .dot {
  position: absolute; top: 10px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 2px solid #fff;
}

/* --- Drawer menu --- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.drawer-overlay.active { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320px; max-width: 88vw;
  background: #fff;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 20px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.drawer.active { transform: translateX(0); }

.drawer-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--primary-50), #fff);
  border-bottom: 1px solid var(--n-100);
}
.drawer-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: 0;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--n-700);
}

.drawer-user {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--n-100);
}
.drawer-user-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-300), var(--primary-500));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 20px;
  flex-shrink: 0;
}
.drawer-user-info { flex: 1; min-width: 0; }
.drawer-user-info strong { display: block; font-size: 15px; color: var(--n-900); }
.drawer-user-info small { color: var(--n-500); font-size: 12px; }

.drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--n-100);
}
.drawer-action-btn {
  background: var(--n-50);
  border: 0;
  border-radius: 10px;
  padding: 10px 6px;
  font-size: 12px;
  color: var(--n-700);
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
}
.drawer-action-btn:active { background: var(--primary-50); color: var(--primary-700); }
.drawer-action-btn.danger { background: #FFF5F5; color: var(--danger); }
.drawer-action-btn .icon { font-size: 16px; }

.drawer-section {
  padding: 14px 16px;
}
.drawer-section + .drawer-section { border-top: 1px solid var(--n-100); }
.drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--n-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.drawer-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.drawer-quick-item {
  aspect-ratio: 1.1 / 1;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px;
  text-decoration: none;
  color: var(--n-800);
  font-size: 13px; font-weight: 600;
  text-align: center;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.drawer-quick-item:active {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
  transform: scale(0.97);
}
.drawer-quick-item .icon { font-size: 26px; line-height: 1; }

.drawer-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 4px;
  color: var(--n-700);
  font-size: 14.5px;
  text-decoration: none;
  background: #fff;
  font-weight: 500;
  transition: background 0.15s;
}
.drawer-nav-item:active, .drawer-nav-item.active {
  background: var(--primary-50);
  color: var(--primary-700);
}
.drawer-nav-item .icon {
  font-size: 18px;
  width: 24px; text-align: center;
  flex-shrink: 0;
}
.drawer-nav-item .badge {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}

/* --- Bottom navigation --- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--n-200);
  z-index: 90;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.bottom-nav a {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px 4px 6px;
  gap: 2px;
  color: var(--n-500);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  min-height: 56px;
  position: relative;
  transition: color 0.15s;
}
.bottom-nav a .icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.15s;
}
.bottom-nav a .icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bottom-nav a .nav-live-badge {
  position: absolute;
  top: -6px;
  left: 100%;
  transform: translateX(-50%);
  background: #dc2626;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 6px;
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(220,38,38,0.35);
}
.bottom-nav a.active {
  color: var(--primary-700);
  font-weight: 600;
}
.bottom-nav a.active .icon {
  transform: scale(1.08) translateY(-1px);
}
.bottom-nav a .nav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* --- Main content spacing --- */
.app-main {
  padding-top: calc(56px + var(--banner-h, 0px));
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0));
  min-height: 100vh;
  background: #fff;
}

/* --- Search modal --- */
.search-modal {
  position: fixed; inset: 0;
  background: #fff;
  z-index: 300;
  display: none;
  flex-direction: column;
  animation: slideUp 0.2s ease-out;
}
.search-modal.active { display: flex; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-modal-header {
  display: flex; align-items: center;
  padding: 10px;
  gap: 8px;
  border-bottom: 1px solid var(--n-100);
}
.search-input-wrap {
  flex: 1;
  display: flex; align-items: center;
  background: var(--n-100);
  border-radius: 10px;
  padding: 0 12px;
  gap: 8px;
}
.search-input-wrap input {
  flex: 1;
  border: 0; background: transparent;
  font-size: 16px;
  padding: 10px 0;
  outline: 0;
  font-family: inherit;
  color: var(--n-900);
}
.search-input-wrap .clear-btn {
  display: none;
  background: rgba(0,0,0,0.2);
  border: 0;
  color: #fff;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 11px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.search-input-wrap.has-value .clear-btn { display: flex; }

.search-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search-suggest {
  padding: 16px;
}
.search-suggest h4 {
  font-size: 12px; font-weight: 700;
  color: var(--n-500);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.search-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.search-chip {
  background: var(--n-100);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  color: var(--n-700);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.search-chip:active { background: var(--primary-100); color: var(--primary-700); }

.search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--n-100);
  text-decoration: none;
  color: inherit;
}
.search-result:active { background: var(--n-50); }
.search-result-icon {
  width: 40px; height: 40px;
  background: var(--primary-100);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-700);
  font-weight: 700;
  flex-shrink: 0;
}
.search-result-body { flex: 1; min-width: 0; }
.search-result-body .name {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--n-900);
  display: block;
  font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-result-body .meta {
  font-size: 12px;
  color: var(--n-500);
  margin-top: 2px;
}
.search-result .price {
  font-size: 14px; font-weight: 700;
  color: var(--primary-700);
  white-space: nowrap;
}
.search-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--n-500);
}
.search-loading {
  text-align: center;
  padding: 20px;
  color: var(--n-500);
  font-size: 14px;
}

/* --- Body lock scroll when drawer/modal open --- */
body.no-scroll { overflow: hidden; position: fixed; width: 100%; }

/* --- Desktop (>= 901px): hide bottom-nav, drawer becomes permanent sidebar --- */
@media (min-width: 901px) {
  .bottom-nav { display: none; }
  .topbar-brand-text small { display: block; font-size: 11px; }
  .app-main { padding-bottom: 24px; }
  /* Burger VẪN hiện trên desktop để mở drawer đầy đủ (categories, trợ giúp, kênh khác). */
  /* Topbar-nav ngắn chỉ có 5 quick-link bên cạnh để truy cập nhanh. */
  
  /* Topbar has inline nav on desktop */
  .topbar-nav-desktop {
    display: flex;
    gap: 4px;
    margin: 0 16px;
  }
  .topbar-nav-desktop a {
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--n-700);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
  }
  .topbar-nav-desktop a:hover { background: var(--n-100); color: var(--primary-700); }
  .topbar-nav-desktop a.active { background: var(--primary-100); color: var(--primary-700); }
}
@media (max-width: 900px) {
  .topbar-nav-desktop { display: none; }
}

/* --- Admin specific --- */
.admin-body { background: var(--n-50); }
.admin-wrap { display: block; } /* override old flex */
.sidebar, .sidebar-overlay, .admin-topbar, .admin-burger { display: none !important; } /* kill old admin layout */
.admin-content {
  padding: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}
@media (min-width: 901px) {
  .admin-content { padding: 24px !important; }
}

/* Override stat-grid for mobile 2 cols */
@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .value { font-size: 1.4rem; }
}

/* --- Domain card image cover (OBSOLETE - kept for fallback) --- */
/* Old vertical hero image layout removed in v1.3 horizontal card */

/* --- Detail hero image --- */
.detail-hero-image {
  margin: -32px -16px 20px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  max-height: 360px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.detail-hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .detail-hero-image {
    margin: -32px 0 24px;
    border-radius: var(--radius-lg);
    max-height: 420px;
  }
}

/* ============================================================
   v1.3 — Horizontal card layout + drawer scroll fix
   ============================================================ */

/* Override old card styles */
.domain-card {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
}
.domain-card:hover, .domain-card:active {
  border-color: var(--primary-300);
  box-shadow: 0 4px 12px rgba(47,133,90,0.1);
  transform: translateY(-1px);
}

.domain-card-inner {
  display: flex;
  gap: 12px;
  padding: 14px;
  align-items: flex-start;
}

.domain-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.domain-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.domain-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.domain-card h3 a {
  color: var(--primary-700);
  text-decoration: none;
}
.domain-card h3 a:active { color: var(--primary); }

.domain-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  flex-shrink: 0;
  max-width: 50%;
  position: static;
}
.domain-card-badges .badge { font-size: 10px; padding: 2px 7px; }

.domain-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--n-500);
  font-size: 12.5px;
}

.domain-card-price { margin-top: 2px; }
.domain-card .price-usd {
  font-size: 20px;
  font-weight: 800;
  color: var(--n-900);
  line-height: 1.1;
  margin: 0;
}
.domain-card .price-vnd {
  font-size: 12px;
  color: var(--n-500);
  margin-top: 2px;
}
.price-sale-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.domain-card .price-original {
  color: var(--n-400);
  text-decoration: line-through;
  font-size: 12px;
}
.domain-card .price-tag {
  display: inline-block;
  background: var(--primary-100);
  color: var(--primary-700);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}

/* Thumbnail bên phải - NHỎ GỌN, có !important để không bị override */
.domain-card-thumb {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px;
  max-width: 88px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--primary-50);
  display: block;
  text-decoration: none;
  position: relative;
  box-sizing: border-box;
}
.domain-card-thumb img {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.domain-card-thumb.is-placeholder {
  background: linear-gradient(135deg, var(--primary-100), var(--primary-50));
  display: flex;
  align-items: center;
  justify-content: center;
}
.domain-card-thumb.is-placeholder .mono {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary-700);
  text-transform: uppercase;
  opacity: 0.55;
}

/* Footer: actions full width below card content */
.domain-card-footer {
  padding: 0 14px 14px;
  border-top: 1px solid var(--n-100);
  padding-top: 12px;
  margin-top: auto;
}
.domain-card-actions {
  display: flex;
  gap: 6px;
}
.domain-card-actions .btn {
  flex: 1;
  padding: 8px 8px;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}
.installment-hint {
  font-size: 11.5px;
  color: var(--n-500);
  margin-top: 8px;
  text-align: center;
}

/* Desktop: bigger thumbnail */
@media (min-width: 768px) {
  .domain-card-thumb { width: 100px !important; height: 100px !important; min-width: 100px; max-width: 100px; }
  .domain-card-thumb img { width: 100px !important; height: 100px !important; max-width: 100px !important; max-height: 100px !important; }
  .domain-card h3 { font-size: 20px; }
}

/* Grid 2 cols on mobile, more on desktop */
.domain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .domain-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (min-width: 1024px) {
  .domain-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Detail hero image → move to bottom section instead --- */
.detail-hero-image { display: none; } /* hide hero image (old location) */
.detail-footer-image {
  margin: 24px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--n-200);
  background: var(--n-50);
}
.detail-footer-image img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  display: block;
  background: var(--primary-50);
}

/* --- Drawer scroll FIX (iOS Safari) --- */
/* Key: không dùng position:fixed trên body, thay bằng overflow:hidden
   + overscroll-behavior trên drawer để giữ scroll trong drawer */
body.no-scroll {
  overflow: hidden;
  /* removed: position: fixed; width: 100%; */
}
.drawer {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  /* Ensure content can scroll past last section */
  padding-bottom: 80px;
}
.drawer-overlay {
  overscroll-behavior: contain;
}

/* About page hero image */
.about-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--primary-50);
}
.about-hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   v1.5 — Overflow safety net + iOS body scroll lock
   ============================================================ */

/* Ngăn tràn ra ngoài viewport toàn site */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
.app-main {
  overflow-x: hidden;
  max-width: 100vw;
}
img, video, iframe { max-width: 100%; height: auto; }

/* Body lock riêng cho mobile khi drawer/search open
   Dùng JS pattern: position:fixed + top:-scrollY
   để scroll drawer hoạt động đúng trên iOS */
body.no-scroll {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}

/* About hero image không quá cao */
.about-hero-image {
  max-height: 260px;
  aspect-ratio: 16 / 9;
}
@media (max-width: 640px) {
  .about-hero-image { max-height: 200px; }
}

/* Container safety: đảm bảo padding */
.container {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* ============================================================
   v1.6 — Card layout: tên FULL WIDTH, thumb xuống dòng 2
   ============================================================ */

/* Disable v1.3 inner layout, dùng layout 3-row mới */
.domain-card-inner { display: none; }

/* Row 1: Tên domain chiếm full width, badges nhỏ bên phải */
.domain-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 14px 6px;
}
.domain-card-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.domain-card-head h3 a {
  color: var(--primary-700);
  text-decoration: none;
}
.domain-card-head .domain-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  flex-shrink: 0;
  max-width: 38%;
  padding-top: 2px;
}
.domain-card-head .badge {
  font-size: 10px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Row 2: Info bên trái, Thumb bên phải */
.domain-card-body {
  display: flex;
  gap: 12px;
  padding: 0 14px 12px;
  align-items: flex-start;
}
.domain-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.domain-card-info .domain-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--n-500);
  font-size: 12.5px;
  margin-bottom: 2px;
}

/* Row 3: Footer actions */
.domain-card-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--n-100);
  margin-top: 0;
}

/* Desktop: tên cỡ lớn hơn + thumb to hơn */
@media (min-width: 768px) {
  .domain-card-head h3 { font-size: 20px; }
}

/* Mobile hẹp < 360px: thumb nhỏ hẳn */
@media (max-width: 359px) {
  .domain-card-thumb,
  .domain-card-thumb img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
  }
  .domain-card-head h3 { font-size: 17px; }
}

/* ============================================================
   v1.7 — Fix card row 1 trống: badges NOWRAP, align center
   ============================================================ */

/* Override: badges không wrap nữa, chỉ tên domain được wrap */
.domain-card-head {
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 14px 4px !important;
}
.domain-card-head h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.domain-card-head .domain-card-badges {
  flex-wrap: nowrap !important;  /* KHÔNG CHO wrap thành 3 dòng */
  max-width: 50% !important;
  overflow: hidden;
  align-items: center;
}
.domain-card-head .domain-card-badges .badge {
  font-size: 10px !important;
  padding: 2px 7px !important;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4;
  font-weight: 700;
}

/* Tên dài vẫn wrap đẹp bên phía trái, badges cố định bên phải */
.domain-card-head h3 a { display: inline; }

/* ============================================================
   v1.8 — Tăng cỡ tên domain (quan trọng nhất của card)
   ============================================================ */

/* Tên domain = product name, PHẢI TO HƠN giá */
.domain-card-head h3 {
  font-size: 20px !important;    /* mobile: 20px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .domain-card-head h3 {
    font-size: 22px !important;  /* desktop: 22px */
  }
}

/* Giá USD nhỏ hơn tên 1 chút (19px thay 20px) */
.domain-card .price-usd {
  font-size: 19px !important;
  font-weight: 800;
}

/* Badges nhỏ thêm để nhường slot cho tên */
.domain-card-head .domain-card-badges .badge {
  font-size: 9.5px !important;
  padding: 2px 6px !important;
}

/* ============= v1.9: Wishlist heart button ============= */
.wishlist-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
  transition: transform 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.wishlist-btn:hover {
  transform: scale(1.2);
  background: rgba(220, 38, 38, 0.1);
}
.wishlist-btn.active {
  animation: heartbeat 0.4s ease-out;
}
@keyframes heartbeat {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.account-subnav::-webkit-scrollbar { display: none; }
.account-subnav { scrollbar-width: none; }

/* ============= v1.10: Social Proof (Phase 2 Batch 4) ============= */
.sold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.sold-card {
  background: #fff;
  border: 2px solid #fbbf24;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.sold-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.sold-domain {
  font-size: 15px;
  font-weight: 700;
  color: #276749;
  word-break: break-all;
  line-height: 1.3;
  margin: 4px 0;
}
.sold-time {
  font-size: 11px;
  color: #a0aec0;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.testimonial-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.testimonial-rating {
  font-size: 14px;
  letter-spacing: 2px;
}
.testimonial-content {
  color: #4a5568;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  flex: 1;
}
.testimonial-author {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #edf2f7;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial-avatar-placeholder {
  background: linear-gradient(135deg, #276749, #1A3D2F);
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.testimonial-author > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonial-author strong {
  color: #1a202c;
  font-size: 14px;
}

/* ============= v1.11: Social widgets + Share bar (Phase 2 Batch 6) ============= */

/* Floating Messenger + Zalo buttons */
.social-widgets {
  position: fixed;
  right: 14px;
  bottom: 76px; /* tránh bottom-nav mobile 64px + padding 12px */
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* chỉ buttons nhận click */
}
@media (min-width: 768px) {
  .social-widgets { bottom: 24px; right: 24px; }
}
.sw-btn {
  pointer-events: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  position: relative;
  color: #fff;
}
.sw-btn:hover, .sw-btn:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.sw-btn:active { transform: scale(0.95); }
.sw-messenger { background: linear-gradient(135deg, #0084ff, #0064d9); }
.sw-zalo { background: linear-gradient(135deg, #0068ff, #0050c8); }

/* Pulsing ring */
.sw-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #0084ff;
  opacity: 0;
  animation: sw-ping 2.2s ease-out infinite;
}
@keyframes sw-ping {
  0% { opacity: 0.8; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* Share bar */
.share-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #f7fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.share-label {
  font-size: 13px;
  color: #4a5568;
  font-weight: 600;
  margin-right: 4px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.15s;
}
.share-btn:hover { filter: brightness(1.1); }
.share-btn:active { transform: translateY(1px); }
.share-fb { background: #1877f2; }
.share-zalo { background: #0068ff; }
.share-x { background: #000; }
.share-copy { background: #4a5568; }
.share-copy.copied { background: #22c55e; }

@media (max-width: 480px) {
  .share-bar { padding: 10px 12px; gap: 6px; }
  .share-btn { padding: 7px 10px; font-size: 12px; }
  .share-btn span { display: none; } /* chỉ icon trên mobile nhỏ */
  .share-btn.share-copy span { display: inline; } /* giữ "Copy link" để rõ */
}


/* ============= v1.12: Collapsible social widgets ============= */
.social-widgets {
  align-items: flex-end;
  transition: gap 0.25s ease;
}

/* Toggle button (X / chat icon) */
.sw-toggle {
  pointer-events: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a5568;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 2px;
}
.sw-toggle:hover { 
  transform: scale(1.1); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  color: #276749;
}
.sw-toggle:active { transform: scale(0.92); }

.sw-toggle-icon { display: none; }
.social-widgets[data-sw-collapsed="false"] .sw-icon-close { display: flex; }
.social-widgets[data-sw-collapsed="true"]  .sw-icon-chat  { display: flex; }

/* Collapsed state: hide message+zalo, enlarge toggle, show chat icon */
.social-widgets[data-sw-collapsed="true"] .sw-buttons {
  display: none;
}
.social-widgets[data-sw-collapsed="true"] .sw-toggle {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #276749, #1A3D2F);
  color: #fbbf24;
  border: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.social-widgets[data-sw-collapsed="true"] .sw-toggle:hover {
  color: #fff;
}

.sw-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.2s ease;
}

/* ============= v1.13: Admin-controlled hide per device ============= */
@media (max-width: 767px) {
  .social-widgets.sw-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .social-widgets.sw-hide-desktop { display: none !important; }
}

/* ============= v1.15: Flash Sale Banner (Phase 3 Batch 1) ============= */
.flash-banner {
  color: #fff;
  padding: 10px 12px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101; /* trên topbar (100) */
  animation: flashSlide 0.5s ease;
}
@keyframes flashSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.flash-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.flash-banner-content {
  flex: 1;
  min-width: 180px;
}
.flash-banner-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.flash-banner-subtitle {
  font-size: 12px;
  opacity: 0.92;
  margin-top: 2px;
  line-height: 1.3;
}

/* Countdown */
.flash-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.fc-unit {
  background: rgba(0,0,0,0.22);
  border-radius: 6px;
  padding: 4px 8px;
  min-width: 38px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.fc-unit span {
  font-size: 16px;
  font-weight: 800;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.fc-unit small {
  font-size: 9px;
  opacity: 0.8;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fc-sep {
  font-size: 16px;
  font-weight: 800;
  opacity: 0.6;
}

.flash-cta {
  background: #fff;
  color: #dc2626;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}
.flash-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.flash-dismiss {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.8;
  transition: opacity 0.15s;
  font-family: inherit;
}
.flash-dismiss:hover { opacity: 1; }

@media (max-width: 640px) {
  .flash-banner-inner { gap: 10px }
  .flash-banner-title { font-size: 13px }
  .flash-banner-subtitle { display: none } /* ẩn subtitle mobile tiết kiệm space */
  .fc-unit { min-width: 32px; padding: 3px 5px }
  .fc-unit span { font-size: 13px }
  .fc-unit small { font-size: 8px }
  .flash-cta { padding: 6px 12px; font-size: 12px }
}

/* Khi đã dismiss: ẩn hoàn toàn */
.flash-banner[data-dismissed="1"] { display: none; }

/* ============= v1.16: Installment pay options (Phase 3 Batch 2) ============= */
.pay-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #4a5568;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.pay-option:hover { border-color: #276749; color: #276749; }
.pay-option input[type="radio"] { margin: 0; accent-color: #276749; }
.pay-option-active { 
  background: #f0fdf4; 
  border-color: #276749; 
  color: #276749;
}

/* ============= v1.17: Sticky form actions không đụng bottom-nav ============= */
.admin-sticky-actions {
  position: sticky;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  padding: 14px 16px;
  border-top: 1px solid var(--n-200);
  margin: 16px -24px -24px;
  z-index: 10;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (min-width: 901px) {
  /* Desktop không có bottom-nav → dính đáy */
  .admin-sticky-actions {
    bottom: 0;
  }
}

/* ============= v1.18: Auction UI (Phase 3 Batch 3) ============= */
.auction-box {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #fbbf24;
  border-radius: 12px;
  padding: 20px;
  position: relative;
}
.auction-badge {
  position: absolute;
  top: -12px; left: 16px;
  background: #dc2626;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.auction-status-msg {
  background: rgba(255,255,255,0.7);
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #78350f;
  margin: 8px 0;
}
.auction-status-ended { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.auction-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.auction-price-row .price-usd-big {
  color: #78350f;
  font-size: 32px;
  line-height: 1.1;
  margin: 4px 0;
}
.auction-countdown { text-align: right; }
.fc-live {
  display: inline-flex;
  gap: 3px;
  align-items: baseline;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-weight: 800;
  font-size: 22px;
  color: #dc2626;
  background: rgba(255,255,255,0.6);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.fc-live small {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 600;
  margin-right: 2px;
  margin-left: -1px;
}

.auction-hint {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin: 10px 0;
  font-weight: 600;
}
.auction-hint-winner { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }

.auction-bid-form {
  background: #fff;
  padding: 14px;
  border-radius: 8px;
  margin-top: 12px;
}
.bid-input-row { display: flex; gap: 6px; align-items: stretch; }
.bid-currency {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--n-100);
  border: 1px solid var(--n-300);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  font-weight: 700;
  color: #4a5568;
}
#auction-bid-input {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--n-300);
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: monospace;
}
#auction-bid-btn { border-radius: 0 8px 8px 0; white-space: nowrap; }

.auction-bids-list {
  margin-top: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  font-size: 13px;
}
.bid-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bid-item:last-child { border: 0 }
.bid-amount { font-family: monospace; font-weight: 700; color: #78350f; }

@media (max-width: 640px) {
  .auction-price-row { flex-direction: column; }
  .auction-countdown { text-align: left; }
  .fc-live { font-size: 18px; }
  .auction-price-row .price-usd-big { font-size: 26px; }
}

/* ============= v1.19: Bundle / Combo (Phase 3 Batch 5) ============= */
.mini-cart-btn { position: relative; }
.mini-cart-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: #dc2626;
  color: #fff;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bundle-add-btn { transition: all 0.2s ease; }
.bundle-add-btn[data-added="1"] {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}
.bundle-add-btn[data-added="1"] .bundle-icon-add,
.bundle-add-btn[data-added="1"] .bundle-text-add { display: none !important; }
.bundle-add-btn[data-added="1"] .bundle-icon-check,
.bundle-add-btn[data-added="1"] .bundle-text-check { display: inline !important; }

/* Bundle item row on /combo page */
.bundle-item {
  transition: background 0.15s;
}
.bundle-item:hover { background: var(--n-100) !important; }
.bundle-remove-btn {
  font-size: 24px;
  line-height: 1;
  padding: 4px 10px !important;
  min-width: 0;
}
@keyframes toastIn {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
#bundle-toast { transition: opacity 0.3s ease; }

/* ============= v1.20: Detail actions redesign (premium hierarchy) ============= */
.detail-actions-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

/* Primary CTA: Mua ngay */
.btn-buy-primary {
  background: linear-gradient(135deg, #2f855a, #276749);
  color: #fff;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(39, 103, 73, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: 0.01em;
  border: 0;
}
.btn-buy-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(39, 103, 73, 0.4);
  color: #fff;
}
.btn-buy-primary:active { transform: translateY(0); }
.btn-buy-icon { font-size: 18px; }
.btn-buy-label { font-weight: 700; }
.btn-buy-price {
  opacity: 0.92;
  font-weight: 600;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid rgba(255,255,255,0.3);
  font-family: 'SFMono-Regular', Consolas, monospace;
}

/* Secondary row: 2 columns */
.detail-secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.detail-secondary-row.secondary-single { grid-template-columns: 1fr; }

.btn-secondary-v2 {
  background: #fff;
  border: 1.5px solid #c6e4d1;
  color: #276749;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
}
.btn-secondary-v2:hover {
  background: #f0fdf4;
  border-color: #276749;
  color: #276749;
}
.btn-secondary-v2[data-added="1"] {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}

@media (max-width: 380px) {
  .btn-buy-primary { flex-wrap: wrap; gap: 6px; font-size: 15px; padding: 14px 16px; }
  .btn-buy-price { border-left: 0; padding-left: 0; margin-left: 0; width: 100%; text-align: center; opacity: 0.88; }
  .btn-secondary-v2 { font-size: 13px; padding: 10px 8px; }
}

/* ============= v1.21: Appraisal option cards (Phase 3 Batch 6) ============= */
.appraisal-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--n-200);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  color: inherit !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.appraisal-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: var(--primary-400);
}
.appraisal-option-ai:hover { border-color: #3b82f6; }
.appraisal-option-expert:hover { border-color: #276749; }

.appraisal-opt-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #fff;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.appraisal-opt-icon {
  font-size: 40px;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--n-50);
  border-radius: 12px;
}
.appraisal-opt-body { flex: 1; min-width: 0; }
.appraisal-opt-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary-700);
  padding-right: 80px; /* space for badge */
}
.appraisal-opt-desc {
  margin: 0 0 8px;
  font-size: 13px;
  color: #4a5568;
  line-height: 1.5;
}
.appraisal-opt-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #718096;
}
.appraisal-opt-arrow {
  font-size: 22px;
  color: var(--n-400);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.appraisal-option:hover .appraisal-opt-arrow { 
  transform: translateX(4px); 
  color: var(--primary-700);
}

@media (max-width: 480px) {
  .appraisal-option { padding: 16px; gap: 12px; }
  .appraisal-opt-icon { width: 48px; height: 48px; font-size: 32px; }
  .appraisal-opt-title { font-size: 16px; padding-right: 70px; }
}


/* IOS_NOZOOM_v1 - iOS Safari tu phong to khi o nhap duoi 16px */
@media (max-width: 820px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea, select { font-size: 16px !important; }
}