/* ModaStyle Mobile-first Clean UI
   Dựa theo layout mẫu Fashion Shop, chỉ làm đẹp và sửa responsive, không đổi logic PHP. */
:root{
  --bc-bg:#fff8f4;
  --bc-surface:#ffffff;
  --bc-soft:#fff1eb;
  --bc-soft-2:#fdf2f8;
  --bc-ink:#2b1c25;
  --bc-text:#5f4a55;
  --bc-muted:#947887;
  --bc-line:#f2d8cf;
  --bc-primary:#e85d8f;
  --bc-primary-2:#c7356b;
  --bc-secondary:#ff9f5a;
  --bc-gold:#d99a2b;
  --bc-danger:#e11d48;
  --bc-shadow:0 14px 34px rgba(98,45,62,.10);
  --bc-shadow-lg:0 22px 60px rgba(98,45,62,.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{width:100%;min-height:100%;overflow-x:hidden;}
body{
  margin:0;
  padding-top:66px!important;
  background:radial-gradient(circle at top left,rgba(255,159,90,.16),transparent 32%),linear-gradient(180deg,#fffaf7 0%,#fff5ef 45%,#fff 100%)!important;
  color:var(--bc-ink)!important;
  font-size:15px;
}

body.admin-page{padding-top:0!important;background:#fbf6f4!important;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}
.container{
  width:min(100% - 24px,1280px)!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
/* Header khách hàng: mobile-first, không có khoảng thừa phía trên */
.header{
  position:fixed!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  height:66px!important;
  margin:0!important;
  padding:0!important;
  z-index:2000!important;
  border-radius:0!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--bc-line)!important;
  box-shadow:0 10px 26px rgba(70,35,48,.08)!important;
  backdrop-filter:blur(14px);
}
.header-inner,
.header .container{
  min-height:66px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}
.logo{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  white-space:nowrap!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  color:var(--bc-primary-2)!important;
}
.logo::before{
  content:'B';
  width:38px;height:38px;
  flex:0 0 38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  color:#fff;
  font-size:19px;
  font-weight:950;
  background:linear-gradient(135deg,var(--bc-primary),var(--bc-secondary));
  box-shadow:0 10px 20px rgba(232,93,143,.20);
}
.logo span{color:var(--bc-secondary)!important;}
.desktop-nav{display:none!important;}
.menu-toggle,
.js-toggle-sidebar{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  margin:0!important;
  padding:0!important;
  border-radius:15px!important;
  border:1px solid var(--bc-line)!important;
  background:#fff3ee!important;
  color:var(--bc-primary-2)!important;
  font-size:18px!important;
  line-height:1!important;
}
.header-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-width:max-content!important;
}
.action-item{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  color:var(--bc-ink)!important;
  font-weight:850!important;
}
.action-icon{font-size:20px!important;color:var(--bc-primary-2)!important;}
.badge{
  background:var(--bc-secondary)!important;
  color:#fff!important;
  box-shadow:0 4px 10px rgba(255,159,90,.30)!important;
}
.btn-login,
.cart-btn,
.btn-apply-filter,
.checkout-btn,
.submit-btn,
.update-btn,
.shop-chat-send{
  border:0!important;
  background:linear-gradient(135deg,var(--bc-primary),var(--bc-secondary))!important;
  color:#fff!important;
  box-shadow:0 12px 24px rgba(232,93,143,.18)!important;
}
.btn-login{
  min-height:40px!important;
  padding:0 12px!important;
  border-radius:15px!important;
}
.btn-login-text,.user-name-text{display:none!important;}
.dropdown-menu{
  position:fixed!important;
  top:72px!important;
  right:12px!important;
  width:min(320px,calc(100vw - 24px))!important;
  border:1px solid var(--bc-line)!important;
  border-radius:20px!important;
  box-shadow:var(--bc-shadow-lg)!important;
}
.mobile-sidebar{
  display:flex!important;
  width:min(84vw,300px)!important;
  left:calc(-1 * min(84vw,300px))!important;
  background:#fff!important;
  border-right:1px solid var(--bc-line)!important;
  box-shadow:18px 0 50px rgba(70,35,48,.18)!important;
}
.mobile-sidebar.active{left:0!important;}
.sidebar-header,.sidebar-user{background:linear-gradient(135deg,#fff7f3,#fff)!important;border-color:var(--bc-line)!important;}
.sidebar-nav a{
  color:var(--bc-ink)!important;
  font-size:15px!important;
  font-weight:850!important;
}
.sidebar-nav a i{color:var(--bc-primary)!important;}
.overlay{z-index:1900!important;}
.overlay.active{opacity:1!important;pointer-events:auto!important;}
/* Trang chủ / khối chung */
.home-section{padding:22px 0!important;}
.hero-grid{gap:16px!important;}
.hero-sidebar,.product-card,.news-card,.feature-card,.cart-box,.checkout-box,.profile-card,.order-card,.detail-card,.product-detail-container,.auth-box,.form-card{
  border:1px solid var(--bc-line)!important;
  box-shadow:var(--bc-shadow)!important;
  background:#fff!important;
}
.hero-sidebar,.news-card,.feature-card{border-radius:20px!important;overflow:hidden!important;}
.hero-sidebar-title{
  background:linear-gradient(135deg,#fff1eb,#fff)!important;
  color:var(--bc-ink)!important;
  border-bottom:1px solid var(--bc-line)!important;
  font-weight:950!important;
  text-transform:none!important;
}
.hero-sidebar-title i{
  background:linear-gradient(135deg,var(--bc-primary),var(--bc-secondary))!important;
  color:#fff!important;
}
.hero-list a:hover{background:#fff3ee!important;color:var(--bc-primary-2)!important;}
.main-swiper,.sub-img-desktop,.sub-swiper img{border-radius:22px!important;border:1px solid var(--bc-line)!important;box-shadow:var(--bc-shadow)!important;}
.section-title{
  color:var(--bc-ink)!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  text-transform:none!important;
}
.section-title::after{background:linear-gradient(90deg,var(--bc-primary),var(--bc-secondary))!important;}
.view-more{
  border:1px solid var(--bc-line)!important;
  background:#fff!important;
  color:var(--bc-primary-2)!important;
  border-radius:999px!important;
  font-weight:900!important;
}
.feature-card{background:linear-gradient(180deg,#fff,#fff8f5)!important;}
.feature-icon{color:var(--bc-primary)!important;background:#fff1eb!important;}
/* Product cards */
.product-grid,.products-grid,.related-grid,.news-grid{display:grid!important;gap:12px!important;}
.product-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
.product-card:hover{transform:translateY(-4px)!important;border-color:#efb8ca!important;box-shadow:0 18px 42px rgba(232,93,143,.15)!important;}
.p-img-box{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:145px!important;
  padding:12px!important;
  background:linear-gradient(180deg,#fff1eb,#fffaf7 70%,#fff)!important;
  border-bottom:1px solid var(--bc-line)!important;
}
.p-img{width:100%!important;height:132px!important;object-fit:contain!important;filter:drop-shadow(0 12px 14px rgba(67,35,48,.12));}
.p-info{padding:12px!important;display:flex!important;flex-direction:column!important;gap:8px!important;flex:1!important;}
.p-name{
  min-height:39px!important;
  margin:0!important;
  color:var(--bc-ink)!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:900!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.p-price-box{margin-top:auto!important;display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;}
.p-price{color:var(--bc-primary-2)!important;font-size:15px!important;font-weight:950!important;}
.p-price-old{color:var(--bc-muted)!important;font-size:12px!important;}
.p-tags{top:9px!important;left:9px!important;z-index:2!important;}
.p-tag{border-radius:999px!important;padding:5px 8px!important;font-size:10px!important;line-height:1!important;}
.tag-hot{background:linear-gradient(135deg,#e11d48,#fb7185)!important;}
.tag-sale{background:linear-gradient(135deg,#e11d48,#fb923c)!important;}
/* Trang toàn bộ sản phẩm: mobile-first */
.products-page{padding:18px 0 64px!important;}
.page-layout{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;align-items:start!important;}
.products-content{width:100%!important;min-width:0!important;}
.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.filter-sidebar{
  position:fixed!important;
  top:0!important;
  left:-105%!important;
  width:min(86vw,320px)!important;
  max-width:320px!important;
  height:100dvh!important;
  z-index:2300!important;
  overflow-y:auto!important;
  padding:18px!important;
  border-radius:0 22px 22px 0!important;
  background:#fff!important;
  border:1px solid var(--bc-line)!important;
  box-shadow:20px 0 50px rgba(70,35,48,.20)!important;
  transition:left .28s ease!important;
}
.filter-sidebar.active{left:0!important;}
.filter-header{border-bottom:1px solid var(--bc-line)!important;padding-bottom:12px!important;margin-bottom:18px!important;}
.filter-title{color:var(--bc-ink)!important;font-weight:950!important;text-transform:none!important;}
.filter-box{border:0!important;box-shadow:none!important;margin-bottom:22px!important;}
.filter-box-title{color:var(--bc-ink)!important;font-weight:900!important;text-transform:none!important;}
.search-input,input,select,textarea,.form-control,.shop-chat-input{
  border:1px solid #ecd2ca!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--bc-ink)!important;
}
.search-input:focus,input:focus,select:focus,textarea:focus,.form-control:focus,.shop-chat-input:focus{
  border-color:#ee9ab7!important;
  box-shadow:0 0 0 4px rgba(232,93,143,.12)!important;
  outline:none!important;
}
.checkbox-item{border-radius:12px!important;padding:7px 6px!important;}
.checkbox-item:hover{background:#fff5f1!important;}
.checkbox-item input:checked ~ .checkmark{background:var(--bc-primary)!important;border-color:var(--bc-primary)!important;}
.checkmark{border-color:#ead2ca!important;border-radius:7px!important;}
.range-selected{background:linear-gradient(90deg,var(--bc-primary),var(--bc-secondary))!important;}
.range-input input::-webkit-slider-thumb{border-color:var(--bc-primary)!important;}
.filter-overlay{z-index:2200!important;}
.filter-overlay.active{opacity:1!important;pointer-events:auto!important;}
.floating-filter-btn{
  right:16px!important;
  bottom:88px!important;
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,var(--bc-primary),var(--bc-secondary))!important;
  box-shadow:0 16px 32px rgba(232,93,143,.22)!important;
  z-index:1500!important;
}
.pagination{gap:8px!important;margin-top:28px!important;}
.page-link{border-color:var(--bc-line)!important;border-radius:14px!important;color:var(--bc-ink)!important;}
.page-link:hover,.page-link.active{background:linear-gradient(135deg,var(--bc-primary),var(--bc-secondary))!important;border-color:transparent!important;color:#fff!important;}
/* Footer + chat */
.footer{background:linear-gradient(180deg,#fff 0%,#fff1eb 100%)!important;border-top:1px solid var(--bc-line)!important;color:var(--bc-text)!important;}
.footer-col h3{color:var(--bc-ink)!important;text-transform:none!important;}
.footer-col h3::after{background:linear-gradient(90deg,var(--bc-primary),var(--bc-secondary))!important;}
.footer-info i,.footer-links a:hover{color:var(--bc-primary)!important;}
.shop-chat-button{background:linear-gradient(135deg,var(--bc-primary),var(--bc-secondary))!important;border-radius:20px!important;z-index:1600!important;}
.shop-chat-panel{border-color:var(--bc-line)!important;border-radius:24px!important;}
.shop-chat-head{background:linear-gradient(135deg,#fff7f4,#fff)!important;color:var(--bc-ink)!important;border-color:var(--bc-line)!important;}
.shop-msg.user{background:linear-gradient(135deg,var(--bc-primary),var(--bc-secondary))!important;}
.shop-msg.bot,.shop-product-card{border-color:var(--bc-line)!important;}
/* Admin: giữ sidebar PC, mobile mới hiện nút 3 gạch */
.sidebar.js-sidebar{
  background:#fff!important;
  border-right:1px solid var(--bc-line)!important;
  box-shadow:14px 0 44px rgba(57,29,39,.08)!important;
}
.sidebar-brand{background:linear-gradient(135deg,#fff1eb,#f7ecff)!important;color:var(--bc-ink)!important;}
.sidebar-menu li a{color:#604554!important;font-weight:850!important;border-left-color:transparent!important;}
.sidebar-menu li a i{color:var(--bc-primary)!important;}
.sidebar-menu li a:hover,.sidebar-menu li a.active{background:#fff1eb!important;color:var(--bc-primary-2)!important;border-left-color:var(--bc-secondary)!important;}
.topbar{background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--bc-line)!important;box-shadow:0 8px 24px rgba(57,29,39,.05)!important;}
.toggle-btn,.js-toggle-btn{color:var(--bc-primary-2)!important;}
.user-info{color:var(--bc-primary-2)!important;}
@media (min-width:480px){
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;}
  .p-img-box{min-height:158px!important;}
  .p-img{height:145px!important;}
}
@media (min-width:768px){
  body{padding-top:72px!important;}
  .header{height:72px!important;}
  .header-inner,.header .container{min-height:72px!important;gap:14px!important;}
  .logo{font-size:22px!important;}
  .logo::before{width:44px;height:44px;flex-basis:44px;border-radius:16px;font-size:22px;}
  .products-page{padding-top:28px!important;}
  .products-grid,.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;}
  .p-img-box{min-height:176px!important;padding:16px!important;}
  .p-img{height:158px!important;}
  .p-name{font-size:14px!important;min-height:41px!important;}
  .p-price{font-size:16px!important;}
  .feature-card{border-radius:22px!important;}
  .dropdown-menu{position:absolute!important;top:calc(100% + 10px)!important;right:0!important;}
}
@media (min-width:992px){
  body{padding-top:78px!important;}
  .header{height:78px!important;}
  .header-inner,.header .container{min-height:78px!important;gap:18px!important;}
  .menu-toggle,
  header .js-toggle-sidebar{
    display:none!important;
    visibility:hidden!important;
    width:0!important;height:0!important;min-width:0!important;flex:0 0 0!important;
    border:0!important;padding:0!important;margin:0!important;overflow:hidden!important;
  }
  .desktop-nav{display:flex!important;align-items:center!important;gap:8px!important;}
  .desktop-nav a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    padding:0 13px!important;
    border-radius:999px!important;
    color:var(--bc-ink)!important;
    font-size:14px!important;
    font-weight:900!important;
    text-transform:none!important;
  }
  .desktop-nav a::after{display:none!important;}
  .desktop-nav a:hover{background:#fff1eb!important;color:var(--bc-primary-2)!important;}
  .btn-login-text,.user-name-text{display:inline!important;}
  .mobile-sidebar{display:none!important;}
  .page-layout{grid-template-columns:280px minmax(0,1fr)!important;gap:28px!important;}
  .filter-sidebar{
    position:static!important;
    left:auto!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    overflow:visible!important;
    padding:18px!important;
    border-radius:22px!important;
    box-shadow:var(--bc-shadow)!important;
  }
  .close-filter,.floating-filter-btn,.filter-overlay{display:none!important;}
  .products-grid,.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;}
  .product-card{border-radius:22px!important;}
  .p-img-box{min-height:190px!important;padding:18px!important;}
  .p-img{height:170px!important;}
  .p-info{padding:15px!important;}
  .p-name{font-size:14px!important;}
  .sidebar.js-sidebar{left:0!important;}
  .main-content.js-main-content{margin-left:250px!important;}
  .toggle-btn.js-toggle-btn{display:none!important;visibility:hidden!important;}
}
@media (min-width:1200px){
  body{padding-top:82px!important;}
  .header{height:82px!important;}
  .header-inner,.header .container{min-height:82px!important;}
  .products-grid,.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .p-img-box{min-height:205px!important;}
  .p-img{height:184px!important;}
}
@media (max-width:991.98px){
  .sidebar.js-sidebar{left:-250px!important;}
  .sidebar.js-sidebar.active{left:0!important;}
  .main-content.js-main-content{margin-left:0!important;}
  .toggle-btn.js-toggle-btn{display:block!important;visibility:visible!important;}
}
@media (max-width:359px){
  .container{width:calc(100% - 18px)!important;}
  .products-grid{grid-template-columns:1fr!important;}
  .logo{font-size:16px!important;}
  .logo::before{width:34px;height:34px;flex-basis:34px;font-size:17px;border-radius:12px;}
  .header-actions{gap:4px!important;}
  .menu-toggle,.js-toggle-sidebar{width:38px!important;height:38px!important;flex-basis:38px!important;}
}