/* Trang danh muc mac dinh -- bo cuc 2026 (30/09/2026, user duyet ban xem thu).
   Pham vi: .category-page (pc/list.twig) + .dm-duoi. Nhip: 16px giua khoi, 8px giua nut,
   nut cao 40px, bo goc 8px, hover chi vien xam. Khong dung toi header/footer. */

.dm-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 16px auto 12px; font-size: 14px; color: #64748b; }
.dm-crumb a { color: #334155; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.dm-crumb a:hover { color: #e02424; }
.dm-crumb svg { width: 16px; height: 16px; }
.dm-crumb strong { color: #0f172a; font-weight: 600; }

.category-page .banner-slider-container { margin: 0 0 16px !important; border-radius: 8px; overflow: hidden; }
.category-page .banner-slider-container img { border-radius: 8px; }

.dm-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 auto 16px; }
.dm-head h1 { font-size: 24px !important; font-weight: 700; margin: 0 !important; color: #0f172a; }
.dm-dem { color: #64748b; font-size: 14px; }

.category-page .box-page-category { padding: 16px !important; border-radius: 8px !important; }

/* --- Chip danh muc con (anh + ten), 1 hang truot --- */
.category-page .filter-upgrade .form-label.fs-5 { display: none !important; }
.category-page .filter-upgrade .row, .category-page .filter-upgrade .row > * { margin: 0 !important; padding: 0 !important; }
.category-page .filter-categories { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 8px !important; padding: 0 0 8px !important; margin: 0 !important; }
.category-page .filter-categories::-webkit-scrollbar { display: none; }
.category-page .category-filter-item { flex: none; margin: 0 !important; }
.category-page .category-chip-filter, .category-page .category-chip-more {
	height: 40px; margin: 0 !important; padding: 0 14px !important; display: inline-flex !important; align-items: center; gap: 8px;
	border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #fff !important; font-size: 14px; color: #1f2937; white-space: nowrap; box-sizing: border-box;
}
.category-page .category-chip-filter:has(.dm-chip-img) { padding-left: 6px !important; }
.category-page .category-chip-filter:hover { border-color: #cbd5e1 !important; }
.category-page .category-chip-filter.active { border-color: #0f172a !important; font-weight: 600; }
.dm-chip-img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: #f6f7f9; }

/* --- Hang thuong hieu + nut Bo loc --- */
.category-page .filter-attributes.category-filter-criteria > .form-label, .category-page .filter-attributes.category-filter-criteria > .item-attribute > #filterModalBtn { display: none !important; }
.category-page .filter-attributes.category-filter-criteria { display: block !important; margin: 8px 0 0 !important; gap: 0 !important; }
.category-page .filter-attributes.category-filter-criteria .item-attribute { display: block; width: 100%; }
.category-page #brandFilterSection, .category-page #brandFilterSection > * { margin: 0 !important; padding: 0 !important; }
.category-page .filter-brands { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; }
.category-page .brand-filter-item { flex: 1 1 96px; max-width: 132px; margin: 0 !important; }
.category-page .brand-filter-item > label {
	width: 100%; height: 40px; margin: 0 !important; padding: 0 8px !important; display: flex !important; align-items: center; justify-content: center;
	border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #fff !important; box-sizing: border-box;
}
.category-page .brand-filter-item > label:hover { border-color: #cbd5e1 !important; }
.category-page .brand-filter-item > label.active { border-color: #0f172a !important; }
.category-page .brand-filter-item img { max-height: 20px !important; width: auto !important; }
.category-page .brand-filter-item > label > span { height: auto !important; }
.dm-loc {
	flex: none; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
	border: 1px solid #e02424; border-radius: 8px; background: #fff; color: #e02424; font-size: 14px; font-weight: 500;
}
.dm-loc:hover { background: #fff5f5; }
.dm-loc svg { width: 16px; height: 16px; }

/* --- Thanh sap xep --- */
.category-page .bg-filter { display: block !important; margin: 16px 0 0 !important; padding: 16px 0 0; border-top: 1px solid #eef0f3; }
.dm-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.dm-tt { font-size: 18px; font-weight: 700; color: #0f172a; }
.dm-dem-sp { font-size: 14px; font-weight: 400; color: #64748b; }
.dm-nut-sx { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-nut-sx button {
	height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
	border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #1f2937; font-size: 14px;
}
.dm-nut-sx button:hover { border-color: #cbd5e1; }
.dm-nut-sx button.on { border-color: #3b82f6; background: #eff6ff; color: #2563eb; font-weight: 500; }
.dm-nut-sx svg { width: 16px; height: 16px; }

/* --- Luoi + the san pham (class rieng dm-*, khong ke thua CSS cu) --- */
.category-page #productList { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.category-page #productList > .dm-o { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.dm-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: border-color .15s; }
.dm-card:hover { border-color: #cbd5e1; }
.dm-nhan { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 4px; }
.dm-nhan-i { padding: 2px 8px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 600; }
.dm-nhan--sale, .dm-nhan--hot { background: #fef2f2; color: #b91c1c; }
.dm-anh { position: relative; display: block; margin: 0 0 8px; padding: 6px; background: #f6f7f9; border-radius: 8px; }
.dm-anh img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
.dm-het { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(15,23,42,.75); color: #fff; font-size: 12px; }
.dm-ten { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.dm-ten a { color: #0f172a; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-gia { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.dm-price { font-size: 17px; font-weight: 800; color: #e02424; }
.dm-lienhe { font-size: 15px; font-weight: 700; color: #64748b; }
.dm-giacu { font-size: 12px; color: #94a3b8; text-decoration: line-through; }
.dm-sao { font-size: 12px; color: #64748b; white-space: nowrap; }
.dm-sao b { color: #f59e0b; }
.dm-tt { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dm-tt-i { max-width: 100%; padding: 2px 6px; border-radius: 8px; background: #f1f5f9; color: #475569; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-nut { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; }
.dm-buy { flex: 1 1 auto; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: #e02424; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.dm-buy:hover { background: #c81e1e; color: #fff; }
.dm-cart { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #fecaca; border-radius: 8px; background: #fff; color: #e02424; }
.dm-cart svg { width: 18px; height: 18px; }
.dm-ss { flex: 1 1 auto; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #334155; font-size: 12px; }
.dm-ss:hover { border-color: #cbd5e1; }
.dm-ss.on { border-color: #e02424; background: #e02424; color: #fff; }

/* --- Khay + popup so sanh nhanh --- */
.dm-tray { position: fixed; left: 50%; bottom: 16px; z-index: 1200; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .3); }
.dm-tray .it { position: relative; width: 56px; height: 56px; border: 1px solid #eef0f3; border-radius: 8px; background: #f6f7f9 center / contain no-repeat; }
.dm-tray .it b { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #334155; color: #fff; font-size: 11px; line-height: 18px; text-align: center; cursor: pointer; }
.dm-tray .emp { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 1px dashed #cbd5e1; border-radius: 8px; color: #94a3b8; font-size: 20px; }
.dm-tray .go { height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: #e02424; color: #fff; font-weight: 700; }
.dm-tray .go:disabled { opacity: .5; }
.dm-tray .x { border: 0; background: none; color: #64748b; font-size: 13px; }
.dm-md { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .5); }
.dm-md > div { width: 100%; max-width: 960px; max-height: 88vh; overflow: auto; padding: 18px; background: #fff; border-radius: 8px; }
.dm-md table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-md td, .dm-md th { padding: 10px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: top; }
.dm-md th { width: 140px; background: #f8fafc; color: #64748b; font-weight: 600; }
.dm-md img { width: 110px; height: 110px; object-fit: contain; }

/* --- Phan duoi 2 cot --- */
.dm-duoi { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; margin: 0 auto 16px; }
.dm-duoi--1 { grid-template-columns: 1fr; }
.dm-duoi .dm-trai { min-width: 0; border-radius: 8px !important; }
.dm-tinlq { position: sticky; top: 120px; padding: 14px; background: #fff; border-radius: 8px; }
.dm-tinlq-t { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.dm-tinlq-t a { font-size: 14px; font-weight: 500; color: #2563eb; text-decoration: none; }
.dm-tin { display: flex; gap: 10px; margin-bottom: 10px; padding: 8px; border: 1px solid #eef0f3; border-radius: 8px; color: #0f172a; text-decoration: none; }
.dm-tin:hover { border-color: #cbd5e1; color: #0f172a; }
.dm-tin img { flex: none; width: 104px; height: 68px; object-fit: cover; border-radius: 8px; }
.dm-tin span { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1199.98px) { .category-page #productList { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) {
	.category-page #productList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dm-duoi { grid-template-columns: 1fr; }
	.dm-tinlq { position: static; }
}
@media (max-width: 767.98px) {
	.dm-head h1 { font-size: 20px !important; }
	.category-page .banner-slider-container { margin-bottom: 12px !important; }
	.category-page .filter-brands { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
	.category-page .brand-filter-item { flex: 0 0 96px; }
	.dm-nut-sx { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
	.dm-nut-sx button { flex: none; }
	.category-page #productList { grid-template-columns: 1fr 1fr; gap: 8px; }
	.dm-card { padding: 8px; }
	.dm-ten { font-size: 13px; }
	.dm-price { font-size: 15px; }
	.dm-tt-i:nth-child(n+2) { display: none; }
	.dm-buy { font-size: 12px; }
	.dm-ss span { display: none; }
	.dm-tray { bottom: 70px; width: calc(100% - 24px); }
	.dm-tray .it, .dm-tray .emp { width: 44px; height: 44px; }
	.dm-md th { width: 90px; }
	.dm-md img { width: 80px; height: 80px; }
}
.dm-duoi > .nr-ssr-slot, .dm-duoi > :not(.dm-trai):not(.dm-tinlq) { grid-column: 1 / -1; }

/* 30/09 (user): banner deu nhau, khe 16px (product_list.js); hang thuong hieu deu; the "Lien he" gon; hover xam */
.category-page .banner-slider-container .swiper-slide img, .category-page .banner-image { display: block; width: 100%; aspect-ratio: 19 / 5; height: auto; object-fit: cover; }
.category-page .brand-filter-item { flex: 1 1 0 !important; min-width: 84px; max-width: none !important; }
.category-page .brand-filter-item > label { width: 100% !important; min-width: 0 !important; }
/* Thang luat inline filters.twig (width:104px!important) -> o logo phu kin o cha, deu nhau. */
.category-page .filter-brands .brand-filter-item > label { width: 100% !important; height: 40px !important; }
.category-page .filter-brands .brand-filter-item > label.active { border-color: #0f172a !important; background: #fff !important; }