/* ==========================================================================
   TĂNG - DẦU NHỚT - HỆ THỐNG CATALOGUE SẢN PHẨM & QUẢN TRỊ CMS
   ========================================================================== */

:root {
  --color-primary: #0B1B3A; /* Slate 900 */
  --color-accent: #A97704;  /* Racing Industrial Orange */
  --color-accent-hover: #7F5A03;
  --color-accent-light: #FFF0BF;
  --color-navy: #14264D;
  --color-border: #E2E8F0;
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Glassmorphism Header */
.header-glass {
  background: rgba(11, 27, 58, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition-smooth);
}
.header-glass.scrolled {
  background: rgba(11, 27, 58, 0.98);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Product Card */
.lube-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
}
.lube-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -8px rgba(11, 27, 58, 0.12);
  border-color: #CBD5E1;
}

.lube-card:hover .product-img-wrapper img {
  transform: scale(1.05);
}

.product-img-wrapper {
  overflow: hidden;
  position: relative;
  background: #F1F5F9;
}

.product-img-wrapper img {
  transition: transform 0.5s ease;
}

/* Filter pills */
.filter-pill {
  transition: all 0.2s ease;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
}
.filter-pill:hover {
  border-color: #A97704;
  color: #A97704;
  background: #FFF9E6;
}
.filter-pill.active {
  background: #A97704;
  border-color: #A97704;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(169, 119, 4, 0.25);
}

/* Danh Mục Sản Phẩm Nằm Bên Trái Màn Hình */
.category-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  border: 1px solid transparent;
  background-color: transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  cursor: pointer;
}
.category-sidebar-btn:hover {
  background-color: #FFF9E6;
  color: #A97704;
  border-color: #FFE38A;
  transform: translateX(3px);
}
.category-sidebar-btn.active {
  background: linear-gradient(135deg, #A97704 0%, #7F5A03 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(169, 119, 4, 0.25);
  border-color: #A97704;
}
.category-sidebar-btn.active .cat-badge {
  background-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}
.category-sidebar-btn.active .cat-arrow {
  color: #FFFFFF;
  opacity: 1;
  transform: translateX(2px);
}

/* Thẻ Lọc Hãng Dầu Nhớt ở Cột Trái */
.brand-sidebar-chip {
  padding: 0.35rem 0.65rem;
  font-size: 0.725rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  transition: all 0.15s ease;
  cursor: pointer;
}
.brand-sidebar-chip:hover {
  border-color: #A97704;
  color: #A97704;
  background: #FFF9E6;
}
.brand-sidebar-chip.active {
  background: #0B1B3A;
  border-color: #0B1B3A;
  color: #F5B80C;
  box-shadow: 0 2px 6px rgba(11, 27, 58, 0.2);
}

/* Badges */
.badge-tech {
  background: #EEF2F9;
  color: #1B3262;
  border: 1px solid #B3C4E3;
}
.badge-accent {
  background: #FFF9E6;
  color: #7F5A03;
  border: 1px solid #FFF0BF;
}
.badge-stock {
  background: #FFF9E6;
  color: #7F5A03;
  border: 1px solid #FFE38A;
}

/* Admin Dashboard Specific Styles */
.admin-tab-btn {
  transition: all 0.2s ease;
}
.admin-tab-btn.active {
  background: #A97704;
  color: #FFFFFF;
}

.admin-nav-item.active {
  background: #14264D;
  color: #A97704;
  border-left: 3px solid #A97704;
}

/* Floating Actions */
.floating-contact-btn {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.floating-contact-btn:hover {
  transform: translateY(-3px) scale(1.03);
}

.mobile-card-label { display: none; }

/* Nhãn danh mục + hãng trên thẻ sản phẩm: gọn một hàng, không đụng cấu trúc quản trị */
#productGrid .lube-card .p-4 > .flex.items-center.justify-between {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto);
  align-items: center;
  column-gap: .45rem;
  min-width: 0;
}
#productGrid .lube-card .p-4 > .flex.items-center.justify-between > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
#productGrid .lube-card .p-4 > .flex.items-center.justify-between > span:last-child {
  float: none;
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  line-height: 1.25;
}

/* Hàng nút của thẻ sản phẩm trong lưới chính: 3 nút cân đối, đều chiều cao, chữ không bị bóp xếp chồng */
#productGrid .lube-card { container-type: inline-size; }
#productGrid .lube-card .px-4.pb-4 { align-items: stretch; }
#productGrid .lube-card .px-4.pb-4 button {
  min-width: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: .45rem;
  padding-right: .45rem;
}
#productGrid .lube-card .px-4.pb-4 button:first-child { flex: 1.1 1 0; }
#productGrid .lube-card .px-4.pb-4 button:nth-child(2) { flex: 1 1 0; }
#productGrid .lube-card .px-4.pb-4 button:last-child { flex: .65 1 0; }

/* Thẻ hẹp (màn hình vừa): nút Tư Vấn chiếm hàng riêng, Thêm giỏ + Thông số chia đều hàng dưới */
@media (min-width: 640px) {
  @container (max-width: 350px) {
    #productGrid .lube-card .px-4.pb-4 { flex-wrap: wrap; }
    #productGrid .lube-card .px-4.pb-4 button:first-child { flex: 1 1 100%; }
    #productGrid .lube-card .px-4.pb-4 button:nth-child(2),
    #productGrid .lube-card .px-4.pb-4 button:last-child { flex: 1 1 0; }
  }
}

/* Chi tiết sản phẩm trên điện thoại: giữ các dòng thông tin và nút hành động gọn trên một hàng */
@media (max-width: 639px) {
  #contact { padding-top: 1rem !important; padding-bottom: 1.25rem !important; }
  #contact > div { padding-left: .85rem; padding-right: .85rem; }
  #contact > div > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .7rem; row-gap: .85rem; padding-bottom: .9rem; }
  #contact > div > .grid > div { min-width: 0; }
  #contact > div > .grid > div:first-child { grid-column: 1 / -1; padding-bottom: .15rem; }
  #contact [data-license-row] { display: none !important; }
  #contact h4 { margin-bottom: .35rem; font-size: .68rem; letter-spacing: .03em; line-height: 1.2; }
  #contact p, #contact li, #contact a { line-height: 1.25; overflow-wrap: anywhere; }
  #contact .company-name { font-size: .78rem; }
  #contact .company-slogan { font-size: .6rem; margin-top: .15rem; }
  #contact ul { row-gap: .3rem; }
  #contact > div > .grid > div:first-child .flex { margin-top: .5rem; }
  #contact > div > .pt-5 { padding-top: .65rem; gap: .35rem; }
  #contact > div > .pt-5 > p { width: 100%; text-align: center; line-height: 1.4; overflow-wrap: anywhere; }
  #productGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  #productGrid .lube-card { border-radius: .75rem; }
  #productGrid .lube-card .product-img-wrapper { aspect-ratio: 1 / 1; }
  #productGrid .lube-card .product-img-wrapper button { width: 2rem; height: 2rem; top: .45rem; right: .45rem; }
  #productGrid .lube-card .product-img-wrapper button svg { width: 1rem; height: 1rem; }
  #productGrid .lube-card .p-4 { padding: .65rem; }
  #productGrid .lube-card .p-4 > .flex.items-center.justify-between { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto); margin-bottom: .25rem; column-gap: .25rem; }
  #productGrid .lube-card .p-4 > .flex.items-center.justify-between > span { display: block; max-width: none; min-width: 0; font-size: .58rem; }
  #productGrid .lube-card .p-4 > .flex.items-center.justify-between > span:last-child { max-width: 6.5rem; font-size: .56rem; padding-left: .35rem; padding-right: .35rem; }
  #productGrid .lube-card h3 { font-size: .68rem; line-height: 1.25; }
  #productGrid .lube-card p { font-size: .62rem; line-height: 1.35; margin-top: .35rem; }
  #productGrid .lube-card .mt-4.p-3 { margin-top: .55rem; padding: .5rem; font-size: .6rem; }
  #productGrid .lube-card .mt-4.p-3 > div { gap: .25rem; }
  #productGrid .lube-card .mt-4.p-3 span { min-width: 0; }
  #productGrid .lube-card .mt-4.p-3 span:last-child { max-width: 64%; font-size: .58rem; }
  #productGrid .lube-card .px-4.pb-4 { padding: .15rem .65rem .65rem; gap: .3rem; }
  #productGrid .lube-card .px-4.pb-4 button { min-width: 0; padding: .55rem .25rem; font-size: .6rem; white-space: nowrap; }
  #productGrid .lube-card .px-4.pb-4 svg { display: none; }
  #productGrid .lube-card .px-4.pb-4 button:first-child { flex: 1 1 0; }
  #productGrid .lube-card .px-4.pb-4 button:last-child { flex: 0 0 42%; }
  #productGrid .lube-card .desktop-card-label { display: none; }
  #productGrid .lube-card .mobile-card-label { display: inline; }
  #productModal { padding: .35rem; align-items: flex-start; }
  #productModal .modal-content-box {
    max-height: calc(100dvh - .7rem);
    padding: .75rem;
    border-radius: 1rem;
  }
  #modalContentContainer .p-3.flex.justify-between {
    padding: .55rem .65rem;
    gap: .5rem;
    align-items: center;
    font-size: .72rem;
  }
  #modalContentContainer .p-3.flex.justify-between > span:last-child {
    max-width: 58%;
    line-height: 1.25;
  }
  #modalContentContainer .mt-8.pt-5 {
    margin-top: 1rem;
    padding-top: .75rem;
  }
  #modalContentContainer .mt-8.pt-5 > .flex.items-center.gap-3 > button:first-child {
    padding: .7rem .45rem;
    font-size: .72rem;
    white-space: nowrap;
  }
  #modalContentContainer .mt-8.pt-5 > .grid.grid-cols-1.sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
  }
  #modalContentContainer .mt-8.pt-5 > .grid.grid-cols-1.sm\:grid-cols-3 a,
  #modalContentContainer .mt-8.pt-5 > .grid.grid-cols-1.sm\:grid-cols-3 button {
    min-width: 0;
    padding: .55rem .2rem;
    gap: .15rem;
    font-size: .58rem;
    white-space: nowrap;
  }
  #modalContentContainer .mt-8.pt-5 > .grid.grid-cols-1.sm\:grid-cols-3 svg { display: none; }
  .floating-contact-widget { right: .7rem; bottom: .7rem; gap: .45rem; }
  .floating-contact-widget .floating-contact-btn { width: 2.65rem; height: 2.65rem; }
}

/* Modal and Drawer backdrop blur */
.modal-backdrop {
  background: rgba(11, 27, 58, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-content-box {
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.drawer-slide-in {
  animation: drawerSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes drawerSlide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Print TDS Spec Sheet */
@media print {
  header, footer, .floating-contact-widget, #filterBar, .no-print, #adminPanel {
    display: none !important;
  }
  body {
    background: #FFF;
    color: #000;
  }
}

/* ===== Scroll-reveal tinh tế (trang khách) ===== */
[data-reveal] { transition: opacity .55s ease, transform .55s ease, box-shadow .3s ease, border-color .2s ease; }
.reveal-hidden { opacity: 0; transform: translateY(22px); }
.reveal-shown { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
  .reveal-hidden { opacity: 1; transform: none; }
}

/* ===== TRANG QUẢN TRỊ: nền trắng + vàng, đồng bộ web khách ===== */
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) { background-color:#ffffff; color:#0f172a; }

/* Mặt nền tối -> trắng / xám nhạt */
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-slate-950,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-slate-900 { background-color:#ffffff; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-slate-800 { background-color:#f1f5f9; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-slate-950\/60 { background-color:#fffbeb; }

/* Viền tối -> viền nhạt */
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .border-slate-800,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .border-slate-700 { border-color:#e2e8f0; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color:#e2e8f0; }

/* Chữ trắng -> chữ đậm (trừ chữ trên nút màu) */
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-white { color:#0f172a; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-orange-600.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-red-600.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-red-700.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-blue-600.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-emerald-600.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-emerald-500.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-amber-500.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-amber-600.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-slate-700.text-white,
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-red-600\/90.text-white { color:#ffffff; }

/* Chữ xám sáng -> xám đọc được trên nền trắng */
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-slate-200 { color:#1e293b; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-slate-300 { color:#334155; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-slate-400 { color:#64748b; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .placeholder-slate-500::placeholder { color:#94a3b8; }

/* Nút phụ xám: hover sáng thay vì tối */
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-slate-800.hover\:bg-slate-700:hover { background-color:#e2e8f0; }

/* Điểm nhấn cam -> vàng */
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-orange-600 { background-color:#f59e0b; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .hover\:bg-orange-700:hover { background-color:#d97706; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-orange-400 { color:#b45309; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-orange-300 { color:#d97706; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .border-orange-500 { border-color:#f59e0b; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .focus\:border-orange-500:focus { border-color:#f59e0b; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-orange-950 { background-color:#fffbeb; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .border-orange-800 { border-color:#fde68a; }

/* Badge trạng thái: nền nhạt, chữ đậm */
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-emerald-950 { background-color:#ecfdf5; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-emerald-400 { color:#059669; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .border-emerald-800 { border-color:#a7f3d0; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-blue-900 { background-color:#eff6ff; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-blue-200 { color:#1d4ed8; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .bg-red-950\/40 { background-color:#fef2f2; }
:is(#adminPanel, #productEditorModal, #promoEditorModal, .tang-admin-scope) .text-red-300 { color:#b91c1c; }