/* =========================================================
   VUA TAI NGHE – Giao diện sáng, chuyên nghiệp (v1 · 11/2026)
   Một file dùng chung cho mọi trang. Gỡ dòng <link> là về giao diện cũ.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f5f5f7; --surface:#ffffff; --ink:#1d1d1f; --ink-2:#424245; --muted:#6e6e73;
  --line:#e5e5ea; --brand:#d70018; --brand-ink:#b80015; --link:#0066cc;
  --ok:#1a7f37; --ok-bg:#e9f7ee; --warn-bg:#fff4e5;
  --radius:18px; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0!important; padding:0!important;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
  background:var(--bg)!important; color:var(--ink)!important;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
img{max-width:100%}
a{color:var(--link)}

/* Bỏ video nền: nhẹ trang, tập trung vào sản phẩm */
.video-background-container,.video-overlay{display:none!important}

/* Chữ trắng viết sẵn trong HTML -> chữ tối trên nền sáng */
[style*="color:#fff"],[style*="color: #fff"],[style*="color:white"],
[style*="color:rgba(255,255,255"],[style*="color: rgba(255,255,255"],[style*="color:rgba(255, 255, 255"]{color:var(--ink-2)!important}
[style*="color:#ff9f0a"],[style*="color: #ff9f0a"]{color:var(--brand)!important}
[style*="color:#0071e3"],[style*="color: #0071e3"]{color:var(--link)!important}
[style*="border-top:1px solid rgba(255,255,255"]{border-top-color:var(--line)!important}

/* ---------- Thanh cam kết trên cùng ---------- */
.badge-authentic-top{
  background:var(--ink)!important; color:#fff!important;
  text-align:center; padding:9px 16px; font-size:12.5px; font-weight:600; letter-spacing:.02em; text-transform:none;
}

/* ---------- Thanh điều hướng ---------- */
.navbar{
  position:sticky; top:0; z-index:9999;
  background:rgba(255,255,255,.92)!important; backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line)!important; padding:12px 16px!important;
}
.navbar-container,.navbar>div{max-width:1180px!important; margin:0 auto!important; display:flex!important; justify-content:space-between!important; align-items:center!important; gap:16px; flex-wrap:wrap}
.navbar a{color:var(--ink)!important}
.navbar-brand,.navbar-container>a:first-child,.navbar>div>a:first-child{
  font-size:19px!important; font-weight:800!important; letter-spacing:-.02em!important; text-decoration:none!important; color:var(--ink)!important;
}
.navbar-menu{display:flex; align-items:center; gap:20px}
.navbar-link,.navbar-container>a:not(:first-child),.navbar-container>div a{font-size:14px!important; font-weight:500!important; text-decoration:none!important; color:var(--ink-2)!important}
.navbar-link:hover,.navbar-container a:not(:first-child):hover{color:var(--brand)!important}
.search-box{display:flex; align-items:center; background:var(--bg)!important; border:1px solid var(--line)!important; border-radius:999px; padding:7px 14px}
.search-box input{border:0; background:transparent; outline:none; font:inherit; font-size:14px; color:var(--ink); width:180px}
.search-box input::placeholder{color:var(--muted)}
.search-box button{border:0; background:none; cursor:pointer; font-size:14px}

/* ---------- Hero trang chủ ---------- */
.hero-section{max-width:1180px; margin:0 auto; text-align:center; padding:56px 16px 8px!important}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--ok-bg); color:var(--ok); font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px; margin-bottom:18px}
.hero-section h1{
  font-size:clamp(30px,5vw,52px)!important; line-height:1.1!important; font-weight:800!important; letter-spacing:-.03em!important;
  margin:0 0 14px!important; color:var(--ink)!important; background:none!important; -webkit-text-fill-color:var(--ink)!important;
}
.hero-section h1 em{font-style:normal; color:var(--brand); -webkit-text-fill-color:var(--brand)}
.hero-section>p{color:var(--muted)!important; font-size:17px!important; max-width:640px; margin:0 auto!important}
.hero-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:24px 0 0; padding:0; list-style:none}
.hero-badges li{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:500; color:var(--ink-2)}
.hero-badges li b{color:var(--ink)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px}
.hero-cta a{display:inline-block; text-decoration:none; font-weight:600; font-size:15px; padding:12px 22px; border-radius:999px}
.hero-cta .primary{background:var(--brand); color:#fff}
.hero-cta .primary:hover{background:var(--brand-ink)}
.hero-cta .ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line)}

/* ---------- Lưới sản phẩm (trang chủ + tìm kiếm) ---------- */
.grid{
  display:grid!important; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important; gap:20px!important;
  max-width:1180px!important; margin:0 auto!important; padding:28px 16px 56px!important;
}
.card{
  position:relative; display:flex!important; flex-direction:column!important; justify-content:space-between!important; text-align:left!important;
  background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:var(--radius)!important;
  padding:16px!important; box-shadow:var(--shadow)!important; backdrop-filter:none!important; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease!important;
}
.card:hover{transform:translateY(-4px)!important; box-shadow:0 2px 4px rgba(0,0,0,.05),0 16px 40px rgba(0,0,0,.10)!important; background:var(--surface)!important}
.image-wrapper{
  height:220px!important; display:flex!important; align-items:center!important; justify-content:center!important;
  background:var(--bg)!important; border-radius:14px!important; margin-bottom:16px!important; padding:18px!important;
}
.card img{max-height:100%!important; max-width:100%!important; object-fit:contain!important; filter:none!important; mix-blend-mode:multiply}
.card h2,.product-name{
  color:var(--ink)!important; font-size:16.5px!important; line-height:1.35!important; font-weight:700!important; margin:0 0 6px!important; letter-spacing:-.01em!important;
  min-height:44px; text-align:left!important;
}
.desc{color:var(--muted)!important; font-size:13px!important; line-height:1.5!important; margin:0 0 14px!important; height:39px; display:-webkit-box!important; -webkit-box-orient:vertical; -webkit-line-clamp:2!important; overflow:hidden!important; white-space:normal}
.sale-tag,.sale-badge{
  position:absolute; top:14px; left:14px; z-index:2; background:var(--brand)!important; color:#fff!important;
  font-size:12px!important; font-weight:700!important; padding:4px 10px!important; border-radius:999px!important; letter-spacing:0!important;
}
.price-box,.price-container{display:flex!important; align-items:baseline!important; gap:10px!important; justify-content:flex-start!important; margin:0 0 14px!important; flex-wrap:wrap}
.price-current{color:var(--brand)!important; font-weight:800!important; font-size:20px!important; letter-spacing:-.01em}
.price-old{color:var(--muted)!important; text-decoration:line-through!important; font-size:14px!important}
.action-container{display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important}
.action-container form{margin:0}
.action-container .btn,.action-container .btn-cart{white-space:nowrap; padding:11px 8px!important; font-size:13.5px!important}
.btn,.btn-cart,.btn-submit,.btn-buy,.btn-pay,.btn-back{
  display:inline-flex!important; align-items:center; justify-content:center; width:100%;
  font:inherit!important; font-size:14px!important; font-weight:600!important; text-decoration:none!important; cursor:pointer;
  border-radius:12px!important; padding:11px 14px!important; border:1px solid transparent!important; transition:background .2s, border-color .2s, color .2s!important;
}
.btn{background:var(--brand)!important; color:#fff!important}
.btn:hover{background:var(--brand-ink)!important}
.btn.btn-cart,.btn-cart{background:var(--surface)!important; color:var(--ink)!important; border-color:var(--line)!important}
.btn.btn-cart:hover,.btn-cart:hover{border-color:var(--ink)!important; background:var(--surface)!important}

/* ---------- Khối cam kết ---------- */
.trust-section,.trust-container-premium{
  max-width:1180px!important; margin:8px auto 56px!important; padding:0 16px!important;
  display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:16px!important;
}
.trust-card,.trust-card-premium{
  background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:var(--radius)!important;
  padding:22px!important; text-align:left!important; box-shadow:none!important; backdrop-filter:none!important; transform:none!important;
}
.trust-card .icon{font-size:28px!important; display:inline-flex!important; width:48px; height:48px; align-items:center; justify-content:center; background:var(--bg); border-radius:12px; margin-bottom:12px!important}
.icon-wrapper-premium{width:48px!important; height:48px!important; display:flex!important; align-items:center!important; justify-content:center!important; background:var(--bg)!important; border-radius:12px!important; margin:0 0 12px!important; box-shadow:none!important; border:0!important}
.icon-wrapper-premium svg{width:26px; height:26px}
.trust-card h3,.trust-card-premium h3{color:var(--ink)!important; font-size:16px!important; font-weight:700!important; margin:0 0 6px!important}
.trust-card p,.trust-card-premium p{color:var(--muted)!important; font-size:14px!important; line-height:1.5!important; margin:0!important}

/* ---------- Trang chi tiết sản phẩm ---------- */
.container:has(.product-gallery){
  max-width:1180px!important; margin:28px auto!important; padding:0 16px!important;
  display:grid!important; grid-template-columns:1.05fr 1fr!important; gap:28px!important; align-items:start!important;
  background:none!important; border:0!important; box-shadow:none!important;
}
.product-gallery{
  position:sticky; min-width:0; top:84px; background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:22px!important;
  padding:36px!important; display:flex!important; align-items:center!important; justify-content:center!important; min-height:420px; backdrop-filter:none!important; box-shadow:none!important;
}
.product-img{max-height:420px!important; width:auto!important; max-width:100%!important; object-fit:contain!important; filter:none!important; mix-blend-mode:multiply}
.order-section{
  background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:22px!important; padding:28px!important;
  backdrop-filter:none!important; box-shadow:none!important; display:flex; flex-direction:column; gap:14px;
}
.order-section>span:first-child{
  display:inline-flex!important; width:max-content; max-width:100%; background:var(--ok-bg); color:var(--ok)!important;
  font-size:12.5px!important; font-weight:600!important; letter-spacing:0!important; text-transform:none!important; padding:6px 12px; border-radius:999px; margin:0!important;
}
.order-section h1{color:var(--ink)!important; font-size:clamp(24px,3.2vw,34px)!important; line-height:1.2!important; margin:0!important}
.order-section>p{
  white-space:pre-line; color:var(--ink-2)!important; font-size:14.5px!important; line-height:1.65!important;
  max-height:260px; overflow:auto; padding:14px 16px; background:var(--bg); border-radius:14px; margin:0!important;
}
.order-section .price-container{margin:4px 0 0!important}
.order-section .price-current{font-size:30px!important}
.btn-box{display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important}
.btn-box form{margin:0}
.btn-submit{background:var(--brand)!important; color:#fff!important; padding:15px!important; font-size:16px!important}
.btn-submit:hover{background:var(--brand-ink)!important}
.btn-submit.btn-cart{background:var(--surface)!important; color:var(--ink)!important; border-color:var(--ink)!important}
.toast-msg{background:var(--ok-bg)!important; color:var(--ok)!important; border:1px solid #bfe6cc!important; border-radius:12px!important}

/* ---------- Giỏ hàng ---------- */
.container:has(table),.container:has(> h1){
  max-width:960px!important; margin:28px auto 56px!important; padding:28px!important;
  background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:22px!important; box-shadow:none!important; backdrop-filter:none!important;
}
.container h1{color:var(--ink)!important; font-size:28px!important; font-weight:800!important; letter-spacing:-.02em; margin:0 0 18px!important; text-align:left!important}
.container h2{color:var(--ink)!important}
table{width:100%!important; border-collapse:collapse!important; background:none!important}
th{color:var(--muted)!important; font-size:12.5px!important; font-weight:600!important; text-transform:uppercase; letter-spacing:.04em; background:none!important}
th,td{padding:14px 10px!important; border-bottom:1px solid var(--line)!important; color:var(--ink)!important; text-align:left}
.img-cart{width:64px!important; height:64px!important; object-fit:contain!important; background:var(--bg); border-radius:12px; padding:6px}
.btn-remove{color:var(--brand)!important; background:none!important; border:0!important; font-weight:600; text-decoration:none}
.total-box{color:var(--ink)!important; font-size:20px!important; font-weight:700!important; text-align:right; margin:18px 0!important}
.btn-buy{background:var(--brand)!important; color:#fff!important; width:auto!important; float:right; padding:14px 26px!important; font-size:15px!important}
.btn-buy:hover{background:var(--brand-ink)!important}

/* ---------- Thanh toán ---------- */
.container:has(.checkout-box){
  max-width:1180px!important; margin:28px auto!important; padding:0 16px!important;
  display:grid!important; grid-template-columns:1.25fr 1fr!important; gap:24px!important; align-items:start!important;
  background:none!important; border:0!important;
}
.checkout-box,.summary-box{background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:22px!important; padding:26px!important; box-shadow:none!important; backdrop-filter:none!important; color:var(--ink)!important}
.summary-box{position:sticky; top:84px}
.checkout-box h2,.summary-box h2{color:var(--ink)!important; font-size:20px!important; font-weight:800!important; margin:0 0 16px!important}
input,select,textarea{
  width:100%; font:inherit!important; font-size:15px!important; color:var(--ink)!important;
  background:var(--surface)!important; border:1px solid #d2d2d7!important; border-radius:12px!important; padding:13px 14px!important; margin:0 0 12px!important; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--link)!important; box-shadow:0 0 0 4px rgba(0,102,204,.12)!important}
select option{color:var(--ink); background:#fff}
.select-group{display:grid!important; grid-template-columns:1fr 1fr!important; gap:12px!important}
.search-box input{width:180px; margin:0!important; border:0!important; padding:0!important; box-shadow:none!important}
.btn-pay{background:var(--brand)!important; color:#fff!important; padding:15px!important; font-size:16px!important; margin-top:4px}
.btn-pay:hover{background:var(--brand-ink)!important}
.prod-item>div:last-child{white-space:nowrap}
.prod-item{border-bottom:1px solid var(--line)!important; padding:12px 0!important; display:flex; justify-content:space-between; align-items:center; gap:10px}
.prod-img{width:60px!important; height:60px!important; object-fit:contain!important; background:var(--bg)!important; border-radius:12px!important; padding:6px}
.qty-controls{display:flex; align-items:center; gap:8px; margin-top:6px}
.btn-qty{display:inline-flex!important; align-items:center; justify-content:center; width:28px!important; height:28px!important; border-radius:8px!important; border:1px solid var(--line)!important; background:var(--surface)!important; color:var(--ink)!important; text-decoration:none!important; font-weight:600}
.btn-del-item{color:var(--brand)!important; font-size:12.5px; text-decoration:none!important; margin-left:6px; background:none!important; border:0!important}
.msg,.success-page{background:var(--ok-bg)!important; color:var(--ok)!important; border-radius:14px!important; border:1px solid #bfe6cc!important}
.error{background:#fdecec!important; color:#b42318!important; border-radius:14px!important; border:1px solid #f5c2c0!important}
.success-page *{color:inherit}

/* ---------- Hỗ trợ & tìm kiếm ---------- */
.section{background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:18px!important; padding:22px!important; margin:0 0 14px!important; box-shadow:none!important}
.section h2{font-size:18px!important; margin:0 0 10px!important; color:var(--ink)!important}
.section p,p{color:inherit}
.container .section p{color:var(--ink-2)!important; font-size:15px!important}
.highlight{color:var(--ink)!important; font-weight:700!important}
.btn-back{background:var(--ink)!important; color:#fff!important; width:auto!important; margin-top:10px}
.container:has(.section){background:none!important; border:0!important; padding:28px 16px!important}
.container:has(.search-header){max-width:1180px!important; margin:0 auto!important; padding:28px 16px 0!important; background:none!important; border:0!important}
.container:has(.search-header) .grid{padding:16px 0 56px!important}
.search-header h1{color:var(--ink)!important}
.search-header p{color:var(--muted)!important}
.no-result{color:var(--muted)!important}

/* ---------- Chân trang ---------- */
.footer,.footer-premium{
  background:var(--ink)!important; color:rgba(255,255,255,.75)!important; border:0!important;
  padding:40px 16px!important; font-size:14px!important; text-align:center; line-height:1.7; margin-top:24px;
}
.footer p,.footer-premium p,.address-premium,.copyright-premium{color:rgba(255,255,255,.8)!important; margin:4px 0!important}
.footer [style],.footer-premium [style]{color:rgba(255,255,255,.55)!important}
.footer a,.footer-premium a{color:#fff!important}

/* ---------- Nút liên hệ nổi ---------- */
.floating-contact-container{position:fixed!important; bottom:20px!important; right:20px!important; display:flex!important; flex-direction:column!important; gap:10px!important; z-index:99999!important}
.floating-btn{display:flex!important; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; text-decoration:none!important; font-size:14px; font-weight:600;
  backdrop-filter:none!important; border:0!important; box-shadow:0 6px 18px rgba(0,0,0,.18)!important; color:#fff!important; transition:transform .2s}
.floating-btn:hover{transform:translateY(-2px)}
.floating-btn svg{width:22px!important; height:22px!important; fill:#fff!important; flex:none}
.btn-zalo-premium{background:#0068ff!important}
.btn-fb-premium{background:#1877f2!important}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .container:has(.product-gallery),.container:has(.checkout-box){grid-template-columns:1fr!important}
  .product-gallery{position:relative!important; top:auto}
  .summary-box{position:static}
  .container:has(.product-gallery)>*,.container:has(.checkout-box)>*{min-width:0}
  .product-gallery{min-height:280px; padding:24px!important}
  .product-img{max-height:300px!important}
}
@media (max-width:768px){
  .navbar-container{flex-direction:row!important}
  .navbar-menu{width:100%; justify-content:space-between; gap:12px; flex-wrap:wrap}
  .search-box{flex:1 1 100%; order:3}
  .search-box input{width:100%}
  .hero-section{padding:36px 16px 4px!important}
  .hero-section>p{font-size:15.5px!important}
  .hero-section h1 br{display:none}
  .hero-badges li{font-size:12.5px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; padding:20px 12px 40px!important}
  .card{padding:12px!important; border-radius:16px!important}
  .image-wrapper{height:150px!important; padding:10px!important; margin-bottom:10px!important}
  .card h2,.product-name{font-size:14.5px!important; min-height:40px}
  .desc{display:none!important}
  .price-current{font-size:17px!important}
  .price-old{font-size:12.5px!important}
  .action-container{grid-template-columns:1fr!important}
  .btn,.btn-cart{padding:10px!important; font-size:13.5px!important}
  .trust-section,.trust-container-premium{grid-template-columns:1fr!important}
  .container:has(table),.container:has(> h1){padding:18px!important; margin:16px 12px 40px!important}
  th:nth-child(3),td:nth-child(3),th:nth-child(5),td:nth-child(5){display:none}
  .btn-buy{width:100%!important; float:none}
  .select-group{grid-template-columns:1fr!important}
  .floating-btn span{display:none}
  .floating-btn{padding:12px!important; border-radius:50%!important}
}


/* ---------- Đặt nhanh qua chat (v2 · 04/11/2026) ---------- */
.quick-order{margin-top:4px; padding:16px; border:1px dashed #d2d2d7; border-radius:16px; background:var(--bg); text-align:center}
.quick-order-label{margin:0 0 10px!important; font-size:13.5px!important; color:var(--ink-2)!important; font-weight:500}
.quick-order-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.qo-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 10px; border-radius:12px; font-weight:600; font-size:14.5px; text-decoration:none!important; color:#fff!important; transition:filter .2s}
.qo-btn:hover{filter:brightness(.92)}
.qo-zalo{background:#0068ff}
.qo-msg{background:#1877f2}
.qo-call{display:inline-block; margin-top:10px; font-size:14px; font-weight:600; color:var(--ink)!important; text-decoration:none!important}
.qo-call:hover{color:var(--brand)!important}
.form-hint{margin:-4px 0 12px!important; font-size:13px!important; color:var(--muted)!important}
@media (max-width:420px){.quick-order-btns{grid-template-columns:1fr}}

.success-page a,.success-page a[style]{color:#fff!important; background:var(--brand)!important}