/* CSS chung - giao diện hiện đại, đồng bộ, dễ chỉnh */
*{box-sizing:border-box;}

:root {
  --mau-chu-dao: #ff0055;
  --mau-chu-dao-dam: #d60047;
  --mau-phu: #10b981;
  --mau-xanh: #2563eb;
  --mau-nen: #f5f7fb;
  --mau-card: #ffffff;
  --mau-chu: #111827;
  --mau-chu-phu: #6b7280;
  --mau-vien: #e5e7eb;
  --radius-nho: 10px;
  --radius-vua: 16px;
  --radius-lon: 22px;
  --shadow-nhe: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-vua: 0 14px 40px rgba(15, 23, 42, 0.12);
}

html,body{height:100%;}
body{
  background:var(--mau-nen);
  color:var(--mau-chu);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  overflow-x:hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit;}
.text-muted{color:var(--mau-chu-phu)!important;}

.container-fluid{max-width:1280px; padding-left:16px; padding-right:16px;}

.header .container-fluid{max-width:1400px;}

img,svg,video,canvas{max-width:100%; height:auto;}

.app-shell{min-height:100vh; display:flex;}
.sidebar{
  width:270px;
  background:linear-gradient(180deg,#ffffff 0%, #fbfbfe 100%);
  border-right:1px solid var(--mau-vien);
  position:sticky; top:0; height:100vh; padding:14px;
  overflow:auto;
}
.sidebar{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.sidebar::-webkit-scrollbar{width:0;height:0;} /* Chrome/Safari */
.sidebar .nav-title{font-size:.78rem; letter-spacing:.08em;}
.sidebar .nav-link{
  border-radius:14px;
  color:var(--mau-chu);
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  transition: all .2s ease;
}
.sidebar .nav-link .mi{
  width:30px; height:30px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f3f4f6;
  border:1px solid var(--mau-vien);
}
.sidebar .nav-link:hover{
  transform:translateY(-1px);
  background:#f6f7fb;
}
.sidebar .nav-link.active{
  background:rgba(255,0,85,.10);
  border:1px solid rgba(255,0,85,.18);
}
.sidebar .nav-link.nav-group-toggle{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
}
.nav-caret{font-size:.85rem; color:var(--mau-chu-phu); transition: transform .2s ease;}
.nav-link[aria-expanded="true"] .nav-caret{transform: rotate(180deg);}
.nav-group{display:none; padding:2px 0 6px 40px;}
.nav-group.open{display:block;}
.nav-sublink{
  display:flex;
  align-items:center;
  border-radius:12px;
  padding:8px 10px;
  text-decoration:none;
  color:var(--mau-chu-phu);
  font-weight:700;
  gap:10px;
  background:#fff;
  border:1px solid rgba(255,0,85,.14);
}
.nav-sublink:hover{background:rgba(255,0,85,.06); color:var(--mau-chu);}
.nav-sublink.active{color:var(--mau-chu); background:rgba(255,0,85,.10); border:1px solid rgba(255,0,85,.26);}
.nav-subico{
  width:26px;height:26px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  border:1px solid var(--mau-vien);
  flex:0 0 auto;
  font-size:14px;
}
.nav-subico-img{width:16px;height:16px;object-fit:cover;border-radius:6px;display:block;}

.sidebar-user{
  border-radius:18px;
  padding:12px;
  color:#fff;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,0,85,.95) 0%, rgba(214,0,71,.95) 45%, rgba(37,99,235,.75) 100%);
  box-shadow: var(--shadow-nhe);
}
.sidebar-avatar{
  width:42px; height:42px;
  border-radius:16px;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.65);
  background:#fff;
  flex:0 0 auto;
}

.sidebar-logo{
  padding:10px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--mau-vien);
  box-shadow: var(--shadow-nhe);
}
.sidebar-logo-img{
  width:100%;
  height:42px;
  object-fit:contain;
  display:block;
}
.header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--mau-vien);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.dropdown-menu{z-index: 9999;}
.dropdown{position:relative; z-index: 9999;}
.d-none.d-lg-block .header{
  position:sticky;
  top:0;
  z-index:2000;
  border-radius: var(--radius-lon);
  border:1px solid var(--mau-vien);
}
.brand-dot{display:inline-block;width:10px;height:10px;border-radius:99px;background:var(--mau-chu-dao);margin-right:8px; box-shadow:0 0 0 6px rgba(255,0,85,.10);}
.brand-text{font-weight:800; letter-spacing:.2px;}
.search-pill .form-control{
  border-radius:999px;
  border:1px solid var(--mau-vien);
  background:#f7f9fc;
  padding:.65rem .9rem;
}
.search-pill .form-control:focus{box-shadow:0 0 0 .25rem rgba(255,0,85,.12); border-color:rgba(255,0,85,.35);}
.header-search{
  width:100%;
  max-width:420px;
  flex:0 0 420px;
}
@media (min-width: 1200px){
  .header-search{max-width:460px; flex-basis:460px;}
}

/* (sidebar search removed) */

.product-card{
  background:var(--mau-card);
  border:1px solid var(--mau-vien);
  border-radius:var(--radius-vua);
  box-shadow:var(--shadow-nhe);
  transition: all .2s ease;
}
.product-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-vua);}
.icon-pill{
  width:46px;height:46px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:#f3f4f6; border:1px solid var(--mau-vien);
}

.btn{
  border-radius:14px;
  transition: all .2s ease;
}
.btn:disabled{opacity:.75;}
.btn-brand{
  background:var(--mau-chu-dao);
  border-color:var(--mau-chu-dao);
}
.btn-brand:hover{background:var(--mau-chu-dao-dam); border-color:var(--mau-chu-dao-dam); transform:translateY(-1px);}
.btn-soft{
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.20);
  color:var(--mau-xanh);
}
.btn-soft:hover{filter:brightness(.98); transform:translateY(-1px);}

.badge-soft{background:#f3f4f6;color:var(--mau-chu);border:1px solid var(--mau-vien); border-radius:999px; padding:.35rem .6rem;}
.badge-dot{position:relative;}
.badge-dot::after{
  content:"";
  position:absolute; top:6px; right:6px;
  width:9px; height:9px; border-radius:99px;
  background:var(--mau-chu-dao);
  box-shadow:0 0 0 3px rgba(255,255,255,.95);
}

.user-pill{
  background:#fff;
  border:1px solid var(--mau-vien);
  border-radius:999px;
  padding:.35rem .55rem;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}
.user-pill:hover{transform:translateY(-1px);}
.user-pill-avatar{
  width:34px; height:34px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid rgba(255,0,85,.18);
  background:#fff;
}
.user-menu{
  border-radius:18px;
  border:1px solid var(--mau-vien);
  box-shadow:var(--shadow-vua);
  padding:.35rem;
  min-width: 240px;
}
.user-menu .dropdown-item{
  border-radius:14px;
  padding:.6rem .7rem;
  font-weight:700;
  color:var(--mau-chu);
}
.user-menu .dropdown-item i{width:18px; text-align:center; color:var(--mau-chu-phu);}
.user-menu .dropdown-item:hover{background:#f7f9fc;}

.breadcrumb{
  padding:.65rem .9rem;
  background:rgba(255,255,255,.75);
  border:1px solid var(--mau-vien);
  border-radius:16px;
}
.breadcrumb a{color:var(--mau-chu-phu); text-decoration:none;}
.breadcrumb a:hover{color:var(--mau-chu);}

.card{
  border-radius:var(--radius-vua)!important;
  border:1px solid var(--mau-vien)!important;
  box-shadow:var(--shadow-nhe);
}

.table{color:var(--mau-chu);}
.table thead th{font-weight:700;}
.table-light{--bs-table-bg: #f7f9fc;}

.modal-content{border-radius:var(--radius-lon)!important; border:1px solid var(--mau-vien); box-shadow:var(--shadow-vua);}
.modal-header{border-bottom:1px solid var(--mau-vien);}
.modal-footer{border-top:1px solid var(--mau-vien);}

.form-control,.form-select{
  border-radius:14px;
  border:1px solid var(--mau-vien);
  padding:.65rem .85rem;
}
.form-control:focus,.form-select:focus{
  border-color:rgba(255,0,85,.35);
  box-shadow:0 0 0 .25rem rgba(255,0,85,.12);
}

.alert{border-radius:16px;}

.checklist{list-style:none; padding-left:0; margin:0;}
.checklist li{display:flex; gap:10px; align-items:flex-start; margin:.35rem 0; color:var(--mau-chu-phu);}
.checklist li::before{
  content:"✓";
  flex:0 0 auto;
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.18);
  color:var(--mau-phu);
  font-weight:800;
  margin-top:1px;
}

.mobile-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:30;}
.mobile-sidebar{
  position:fixed; top:0; left:0; width:270px; height:100vh; background:#fff; z-index:40;
  transform: translateX(-110%);
  transition: transform .2s ease;
  padding:14px; border-right:1px solid var(--mau-vien);
  box-shadow: 0 18px 50px rgba(15,23,42,.18);
  display:block;
  overflow:auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.mobile-sidebar::-webkit-scrollbar{width:0;height:0;} /* Chrome/Safari */
.mobile-sidebar.open{transform: translateX(0);}
.mobile-overlay.open{display:block;}
.floating-tools{
  position:fixed; right:16px; bottom:16px; z-index:50; display:flex; flex-direction:column; gap:10px;
}
.floating-tools .btn{border-radius:999px; box-shadow:0 10px 24px rgba(15,23,42,.18);}

.floating-tools #btnSupport{padding:.65rem 1rem;}
.floating-tools #btnScrollUp,.floating-tools #btnScrollDown{
  width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--mau-chu-dao); border-color:var(--mau-chu-dao); color:#fff;
}
.floating-tools #btnScrollUp:hover,.floating-tools #btnScrollDown:hover{background:var(--mau-chu-dao-dam); border-color:var(--mau-chu-dao-dam);}

.price{
  color:var(--mau-chu-dao);
  font-weight:900;
  letter-spacing:.2px;
}

/* Category strip (Trang chủ catalog) */
.cat-strip{
  display:flex;
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 6px 2px;
}
.cat-strip::-webkit-scrollbar{height:8px;}
.cat-strip::-webkit-scrollbar-thumb{background:rgba(17,24,39,.10); border-radius:999px;}
.btn-cat{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:.6rem .85rem;
  border-radius:999px;
  border:1px solid var(--mau-vien);
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  font-weight:800;
  white-space:nowrap;
}
.btn-cat:hover{transform:translateY(-1px);}
.btn-cat-active{
  border-color:rgba(255,0,85,.25);
  background:rgba(255,0,85,.10);
}
.cat-ico{
  width:40px; height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  border:1px solid var(--mau-vien);
  flex:0 0 auto;
  font-size:16px;
}
.cat-ico-img{width:34px;height:34px;object-fit:cover;border-radius:12px;display:block;}

@media (max-width: 576px){
  .cat-strip{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding:0;
  }
  .btn-cat{
    width:100%;
    border-radius:16px;
    justify-content:flex-start;
    font-size:.95rem;
  }
  .btn-cat span:last-child{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* Layout spacing consistency */
main{min-width:0;}
.content-card{
  background:rgba(255,255,255,.70);
  border:1px solid var(--mau-vien);
  border-radius:var(--radius-lon);
  padding:14px;
}

/* Prevent floating tools from covering content on mobile */
main{
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Buttons consistency */
.btn-light{
  background:#fff;
  border-color:var(--mau-vien);
}
.btn-light:hover{transform:translateY(-1px);}