/* =========================================================
   DONG GIA GIA DUNG - Style rieng, dat tren nen Bootstrap 5
   Phong cach lay cam hung tu Shopee nhung don gian hoa.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root{
  --brand:        #EE4D2D;   /* cam chinh - dac trung san TMDT */
  --brand-dark:   #D8431F;
  --brand-light:  #FFF1EE;
  --ink:          #222;
  --muted:        #757575;
  --border:       #EFEFEF;
  --bg:           #F5F5F5;
}

*{box-sizing:border-box;}
body{
  font-family:'Be Vietnam Pro',sans-serif;
  background:var(--bg);
  color:var(--ink);
}
a{text-decoration:none;color:inherit;}
.btn:focus, a:focus{box-shadow:none;}

/* ---------- Top bar ---------- */
.top-bar{background:#fff5f2;color:var(--muted);font-size:.82rem;padding:6px 0;border-bottom:1px solid var(--border);}
.top-bar-item i{color:var(--brand);margin-right:4px;}

/* ---------- Header ---------- */
.site-header{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);position:sticky;top:0;z-index:100;}
.logo{color:var(--brand);font-weight:800;font-size:1.15rem;line-height:1.1;}
.logo i{font-size:2rem;}
.logo small{color:var(--ink);font-weight:600;font-size:.72rem;}

.search-form{border:2px solid var(--brand);border-radius:6px;overflow:hidden;background:#fff;}
.search-cat{border:none;border-right:1px solid var(--border);padding:0 8px;background:#fafafa;font-size:.85rem;min-width:150px;}
.search-input{border:none !important;box-shadow:none !important;border-radius:0 !important;}
.search-btn{background:var(--brand);color:#fff;border-radius:0;padding:0 20px;}
.search-btn:hover{background:var(--brand-dark);color:#fff;}

.header-icon-link{display:flex;flex-direction:column;align-items:center;font-size:.75rem;color:var(--ink);position:relative;gap:2px;}
.header-icon-link i{font-size:1.35rem;}
.header-icon-link:hover{color:var(--brand);}
.cart-link{position:relative;}
.cart-badge{position:absolute;top:-6px;right:-10px;background:var(--brand);color:#fff;font-size:.68rem;font-weight:700;border-radius:20px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* ---------- Menu da cap (Desktop - hover, hieu ung mem mai) ---------- */
.main-nav{background:var(--brand);}
.nav-menu{display:flex;gap:4px;overflow-x:auto;padding:0;margin:0;list-style:none;}
.nav-menu .nav-item{position:relative;flex-shrink:0;}
.nav-menu .nav-item > a{display:flex;align-items:center;gap:5px;color:#fff;padding:11px 16px;font-size:.88rem;white-space:nowrap;transition:background .15s;}
.nav-menu .nav-item > a.active,.nav-menu .nav-item > a:hover{background:rgba(0,0,0,.12);}
.submenu-caret{font-size:.65rem;transition:transform .2s;}
.has-submenu:hover .submenu-caret{transform:rotate(180deg);}
.submenu{
  position:absolute;top:100%;left:0;background:#fff;min-width:230px;
  box-shadow:0 10px 26px rgba(0,0,0,.16);border-radius:0 0 10px 10px;z-index:200;padding:6px 0;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.has-submenu:hover .submenu{opacity:1;visibility:visible;transform:translateY(0);}
.submenu li a{display:block;padding:9px 18px;color:var(--ink);font-size:.86rem;transition:background .15s,color .15s,padding-left .15s;}
.submenu li a:hover{background:var(--brand-light);color:var(--brand);padding-left:22px;}

/* ---------- Nut mo menu tren mobile (hamburger) ---------- */
.menu-toggle-btn{
  background:none;border:none;font-size:1.5rem;color:var(--ink);
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;transition:background .15s;
}
.menu-toggle-btn:hover,.menu-toggle-btn:active{background:var(--brand-light);color:var(--brand);}

/* ---------- Menu mobile: offcanvas truot tu trai sang phai ---------- */
.mobile-menu{width:300px;}
.mobile-menu .offcanvas-header{background:var(--brand);color:#fff;padding:16px 18px;}
.mobile-menu .offcanvas-header .logo{color:#fff;font-weight:800;font-size:1rem;}
.mobile-menu .offcanvas-header .logo i{font-size:1.5rem;}
.mobile-menu .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.9;}

/* Lam hieu ung truot mem mai, chuyen nghiep hon mac dinh cua Bootstrap */
.offcanvas.offcanvas-start{transition:transform .35s cubic-bezier(.22,.98,.34,1) !important;}
.offcanvas-backdrop{transition:opacity .35s ease !important;}

.mobile-menu-account{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:var(--brand-light);border-bottom:1px solid var(--border);font-size:.88rem;
}
.mobile-menu-account i{font-size:2rem;color:var(--brand);}
.mobile-menu-account a{color:var(--brand);}

.mobile-menu-link{
  display:flex;align-items:center;gap:10px;padding:14px 18px;color:var(--ink);
  font-size:.92rem;font-weight:500;border-bottom:1px solid var(--border);
  transition:background .15s,padding-left .15s;
}
.mobile-menu-link:hover,.mobile-menu-link:active{background:var(--brand-light);color:var(--brand);padding-left:22px;}

.mobile-submenu-link{
  display:block;padding:12px 18px 12px 34px;color:var(--muted);font-size:.88rem;
  border-bottom:1px solid var(--border);transition:background .15s,color .15s,padding-left .15s;
}
.mobile-submenu-link:hover,.mobile-submenu-link:active{background:var(--brand-light);color:var(--brand);padding-left:38px;}

#mobileCategoryAccordion .accordion-item{border:none;border-radius:0;}
#mobileCategoryAccordion .accordion-button{
  font-size:.92rem;font-weight:500;padding:14px 18px;border-bottom:1px solid var(--border);
  box-shadow:none !important;border-radius:0 !important;
}
#mobileCategoryAccordion .accordion-button:not(.collapsed){background:var(--brand-light);color:var(--brand);}
#mobileCategoryAccordion .accordion-button::after{
  width:14px;height:14px;background-size:14px;transition:transform .25s ease;
}
#mobileCategoryAccordion .accordion-body{background:#fafafa;}

/* ---------- Banner carousel (chay ngang) ---------- */
.banner-carousel{margin-bottom:0;}
.banner-slide{height:320px;display:flex;align-items:center;background-size:cover;background-position:center;}
.banner-1{background:linear-gradient(120deg,var(--brand) 55%,#ff8f6b);}
.banner-2{background:linear-gradient(120deg,#2E5559 55%,#1F3A3D);}
.banner-3{background:linear-gradient(120deg,#3E4C59 55%,#222b32);}
.banner-content{color:#fff;max-width:520px;}
.banner-content h2{font-weight:800;font-size:2rem;margin-bottom:10px;}
.banner-content p{margin-bottom:18px;opacity:.95;}
@media (max-width:768px){ .banner-slide{height:220px;} .banner-content h2{font-size:1.4rem;} }

/* ---------- Marquee chay ngang (thong bao khuyen mai) ---------- */
.marquee-strip{background:var(--brand-light);border-bottom:1px solid var(--border);overflow:hidden;white-space:nowrap;padding:8px 0;}
.marquee-track{display:inline-block;animation:marquee 22s linear infinite;}
.marquee-track span{display:inline-block;margin-right:60px;font-size:.85rem;color:var(--brand-dark);font-weight:600;}
.marquee-track span i{margin-right:6px;}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ---------- Price sections ---------- */
.price-section{margin:28px 0;}
.price-section-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:8px 8px 0 0;padding:12px 18px;border:1px solid var(--border);border-bottom:none;}
.price-tag-title{display:flex;align-items:baseline;gap:10px;}
.price-num{background:var(--brand);color:#fff;font-weight:800;font-size:1.2rem;padding:6px 14px;border-radius:20px;}
.price-label{color:var(--muted);font-size:.9rem;}
.see-all{color:var(--brand);font-weight:600;font-size:.88rem;}
.see-all:hover{color:var(--brand-dark);}
.price-section .row{background:#fff;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;padding:14px;margin:0;}

/* ---------- Product card ---------- */
.product-card{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:box-shadow .15s, transform .15s;}
.product-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);transform:translateY(-3px);}
.thumb-link{position:relative;display:block;}
.product-card .thumb{aspect-ratio:1/1;background:#f5f5f5;overflow:hidden;}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;}
.badge-price{position:absolute;top:8px;left:8px;background:var(--brand);color:#fff;font-weight:700;font-size:.72rem;padding:3px 9px;border-radius:20px;}
.product-card .info{padding:10px 12px;flex:1;display:flex;flex-direction:column;}
.product-card h3{font-size:.88rem;font-weight:500;margin:0 0 8px;line-height:1.3;height:2.6em;overflow:hidden;color:var(--ink);}
.product-card .price{color:var(--brand);font-weight:700;font-size:1.05rem;margin-bottom:10px;}
.btn-add-cart{background:var(--brand);color:#fff;border:none;border-radius:6px;padding:9px 16px;font-weight:600;font-size:.86rem;}
.btn-add-cart:hover{background:var(--brand-dark);color:#fff;}
.btn-add-cart:disabled{opacity:.6;}

/* ---------- Product detail ---------- */
.thumb-large{aspect-ratio:1/1;background:#f5f5f5;border-radius:8px;overflow:hidden;}
.thumb-large img{width:100%;height:100%;object-fit:cover;}
.gallery-thumb{width:64px;height:64px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid var(--border);}
.gallery-thumb.active,.gallery-thumb:hover{border-color:var(--brand);}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;}
.product-title{font-size:1.4rem;font-weight:700;}
.price-big{font-size:1.9rem;font-weight:800;color:var(--brand);margin:10px 0;}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:6px;overflow:hidden;width:fit-content;}
.qty-stepper .qty-btn{background:#fafafa;border:none;width:34px;height:34px;font-size:1.1rem;cursor:pointer;}
.qty-stepper input{width:56px;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);text-align:center;height:34px;}

/* ---------- Phan loai san pham (variant chips) ---------- */
.variant-chips{display:flex;flex-wrap:wrap;gap:10px;}
.variant-chip{
  background:#fff;border:1.5px solid var(--border);border-radius:8px;padding:9px 16px;
  font-size:.88rem;cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.variant-chip:hover:not(:disabled){border-color:var(--brand);color:var(--brand);}
.variant-chip.selected{border-color:var(--brand);background:var(--brand-light);color:var(--brand);font-weight:600;}
.variant-chip:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through;}
.variant-chip small{display:block;font-size:.68rem;font-weight:400;}

/* ---------- Cart ---------- */
.cart-table thead th{background:#fafafa;color:var(--muted);font-weight:600;font-size:.85rem;}
.cart-thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;}
.cart-total{font-size:1.3rem;font-weight:800;color:var(--brand);}

/* ---------- Forms (login/register/checkout) ---------- */
.form-box{background:#fff;border:1px solid var(--border);border-radius:10px;padding:28px;max-width:480px;margin:36px auto;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.form-box h2{font-weight:700;margin-bottom:18px;}
.form-box .btn-add-cart{width:100%;padding:11px;}

/* ---------- Empty state ---------- */
.empty-state{text-align:center;padding:70px 20px;color:var(--muted);}

/* ---------- Footer ---------- */
.site-footer{background:#2b2b2b;color:#ccc;padding:36px 0 18px;margin-top:50px;font-size:.88rem;}
.site-footer h5{color:#fff;font-weight:700;font-size:1rem;margin-bottom:14px;}
.footer-links{list-style:none;padding:0;margin:0;}
.footer-links li{margin-bottom:8px;}
.footer-links a{color:#bbb;}
.footer-links a:hover{color:var(--brand);}

/* ---------- Responsive helpers ---------- */
@media (max-width:991px){
  .search-cat{display:none;}
}