/* =========================================================
   BASE & UTILITIES
   ========================================================= */
:root{
--primary:#e51515;
--secondary:#ff6700;
--text:#333;
--white:#fff;
--gray:#cccccc;
--border:#e5e5e5;
--radius:6px;
--gutter:10px;
--container:1200px;
--primary: #d70018; 
--primary-dark: #c40016;
--text-main: #333;
--gray-bg: #f3f3f3;
--border-color: #e0e0e0;
--radius-box: 8px;
--flash-bg: linear-gradient(90deg, #ff0000 0%, #ff5e00 100%);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.4;color:var(--text);background:var(--gray);}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;transition:.2s;}
a:hover{color:var(--secondary);}
ul{list-style:none;}
.page-wrapper{width:100%;padding-top: 0 !important;}
.container{width:100%;max-width:var(--container);padding:var(--gutter);margin:auto;}
.site-main{margin:0 auto;background:var(--white);}
.section{padding:10px 0;}
.padt10{ padding-top:10px}
.padb10{ padding-bottom:10px}
.row{display:flex;flex-wrap:wrap;margin:0 calc(var(--gutter)*-1);}
[class*="col-"]{padding:0 var(--gutter);}
.col-xs-12{width:100%;}
.col-xs-6{width:50%;}
/*.hidden-xs{display:none!important;}
.visible-sm{display:none;}*/
.visible-xs, .visible-sm, .hidden, .hidden-sm-down{display:none!important;}
.clear{clear:both; height:0; line-height:0; font-size:0;}
.description img {height: auto !important;max-width: 100% !important;}
.sort-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 13px; }
/* 1. Global Overlay (Lớp phủ dùng chung toàn website) */
#global-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:900;opacity:0;visibility:hidden;transition:all 0.3s ease;}
#global-overlay.active{opacity:1;visibility:visible;}
/* 2. Class chung cho các khối ẩn (Menu, Popup, Sidebar...) */
.toggle-target{position:fixed;z-index:999;transition:all 0.3s ease;box-shadow:0 0 15px rgba(0,0,0,0.2);visibility:hidden;}
.btn-close-over{background:none;border:none;font-size:1.5rem;cursor:pointer;float:right;color:#FFFFFF;}

/* =========================================================
   GRID
   ========================================================= */
/* SM ≥ 768px */
@media (min-width:768px){.col-sm-4{width:33.333%;}.col-sm-6{width:50%;}.col-sm-8{width:66.666%;}.col-sm-12{width:100%;}.visible-sm{display:block;}.hidden-sm{display:none!important;}}
/* MD ≥ 992px */
@media (min-width:992px){.col-md-3{width:25%;}.col-md-4{width:33.333%;}.col-md-6{width:50%;}.col-md-8{width:66.666%;}.col-md-12{width:100%;}.hidden-md{display:none!important;}.hidden-sm-down{display:block!important;}}
/* LG ≥ 1200px */
@media (min-width:1200px){.col-lg-1{width:8.33333%;}.col-lg-2{width:16.66667%;}.col-lg-2-4{width:20%;}.col-lg-1-5{width:20%;}.col-lg-3{width:25%;}.col-lg-4{width:33.33333%;}.col-lg-5{width:41.66667%;}.col-lg-6{width:50%;}.col-lg-7{width:58.33333%;}.col-lg-8{width:66.66667%;}.col-lg-9{width:75%;}.col-lg-9-6{width:80%;}.col-lg-10{width:83.33333%;}.col-lg-11{width:91.66667%;}.col-lg-12{width:100%;}.hidden-lg{display:none!important;}.visible-lg{display:block!important;}.site-main{max-width:var(--container);margin:0 auto;background:var(--white);}}

/* =========================================================
   HEADER FIXED + MOBILE 2 LINES
   .site-header{ height:65px; background:var(--primary); color:#fff; padding:10px 0 6px; position:fixed; top:0; left:0; right:0; z-index:1000;}
   ========================================================= */
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;width:100%;height:auto;min-height:55px;box-shadow:0 2px 10px rgba(0,0,0,0.1);} 
.site-header-bg{background:var(--primary);width:100%;padding:6px 0;}
.header-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;}
.header-left{display:flex;align-items:center;}
.logo img{height:48px;}
.header-right{display:flex; gap:16px;}
.header-actions .item{display:flex; align-items:center; gap:8px; color:#fff; font-size:12px; white-space:nowrap;}
.header-actions .item i{font-size:18px;}
.header-actions .item span{font-size:11px;display:block;}
.header-actions .item strong{font-size:13px;display:block;}
.header-center{flex:1; display:flex; align-items:center; gap:12px;}
.cat-btn{display:inline-flex;align-items:center; gap:6px;background:var(--secondary); color:#fff; border-radius:var(--radius); padding:8px 16px; font-weight:600; cursor:pointer; border:0; white-space:nowrap;}
.cat-btn-mobile{display:none;align-items:center; gap:6px;background:var(--secondary); color:#fff; border-radius:var(--radius); padding:8px 16px; font-weight:600; cursor:pointer; border:0; white-space:nowrap;}

.search-box{flex:1;}
/* 
=========================================================
   MOBILE HEADER (2 HÀNG)
   ========================================================= */
@media(max-width:991px){.page-wrapper{padding-top:120px;}.header-left{order:1;flex:1;}.header-right{order:2;flex:0 0 auto;}.header-center{order:3;width:100%;display:flex;align-items:center;gap:8px;}.header-center .search-box{order:1;flex:1;}.header-center .cat-btn{order:2;padding:8px 12px;display:none;}.header-center .cat-btn-mobile{order:2;padding:8px 12px;display:inline-flex;}.hidden-sm-down{display:none!important;}}
@media(max-width:767px){.header-actions .item .txt span{display:none;}.header-actions .item strong{font-size:12px;}.visible-xs{display:block!important;}}


/* =========================================================
   Danh sách sản phẩm (NEW - BLOCK A & B & GRID)
   ========================================================= */

/* --- BLOCK B: WRAPPER CHO SWIPER --- */
.product-slider-container{position:relative;padding:0 5px;}
/* THÊM CSS DƯỚI ĐÂY: Xử lý khoảng cách giữa các hàng trong Swiper Grid */
.swiper-wrapper .swiper-slide{padding-bottom:14px;}
/* Đảm bảo hàng cuối cùng trong Swiper Grid không bị padding dư thừa */
.swiper-wrapper[style*="height"] .swiper-slide:nth-child(2n + 1){
/* Áp dụng cho các slide ở hàng 1 (các slide có chỉ số 1, 3, 5, ...) 
   Swiper dùng CSS Grid để tính toán chiều cao container (swiper-wrapper), 
   cách này giúp hàng cuối cùng không bị dư padding khi swiper tính chiều cao.
   Tuy nhiên, do cách tính phức tạp của Swiper Grid/Loop, cách tốt nhất là 
   để padding-bottom 14px cho tất cả slide và chấp nhận khoảng trống nhỏ 
   ở cuối Swiper nếu bạn không thấy lỗi hiển thị.
*/
/* Để đơn giản và tránh lỗi, ta chỉ cần padding-bottom 14px cho tất cả các slide */
/* padding-bottom: 0; */
}
/* Nút điều hướng custom nằm giữa mép */
.swiper-btn-prev-custom,.swiper-btn-next-custom{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,0.15);display:flex;align-items:center;justify-content:center;z-index:20;cursor:pointer;color:#555;transition:0.3s;opacity:0.8;}
.swiper-btn-prev-custom:hover,.swiper-btn-next-custom:hover{background:var(--primary);color:#fff;opacity:1;}
.swiper-btn-prev-custom{left:0px;}
.swiper-btn-next-custom{right:0px;}
.swiper-btn-disabled{opacity:0;pointer-events:none;} /* Ẩn khi hết slide */

/* Universal Swiper */
.universal-swiper-wrapper{position:relative;width:100%;overflow:hidden;padding:0;margin-bottom:30px;}
.universal-swiper{width:100%;height:100%;}
.universal-swiper .swiper-slide{height:auto;display:flex;justify-content:center;align-items:center;}
.universal-swiper .swiper-slide img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block;}
.swiper-btn-prev-custom,.swiper-btn-next-custom{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;background:rgba(255,255,255,.9);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;z-index:20;cursor:pointer;color:#555;transition:.3s;}
.swiper-btn-prev-custom:hover,.swiper-btn-next-custom:hover{background:var(--primary);color:#fff;}
.swiper-btn-prev-custom{left:10px;}
.swiper-btn-next-custom{right:10px;}
.swiper-button-disabled{opacity:0;pointer-events:none;}
.universal-swiper-wrapper.mode-vertical .swiper-btn-prev-custom{top:5px;left:50%;transform:translateX(-50%) rotate(90deg);}
.universal-swiper-wrapper.mode-vertical .swiper-btn-next-custom{top:auto;bottom:5px;left:50%;transform:translateX(-50%) rotate(90deg);}


/* =========================================================
   BREADCRUMB STYLE (ĐỔ BÓNG & ICON CHUẨN)
   ========================================================= */
/* 1. LỚP VỎ NGOÀI (.breadcrumb) */
.breadcrumb{width:100%;background-color:#ffffff;border-bottom:1px solid #f0f0f0;box-shadow:0 5px 15px rgba(0,0,0,0.15);position:relative;z-index:9;}
/* 2. LỚP NỘI DUNG (.breadcrumbs) */
.breadcrumbs{max-width:var(--container,1200px);margin:0 auto;padding:5px 10px;display:flex;align-items:center;min-height:35px;flex-wrap:wrap;}
/* 3. CÁC ITEM CON (.fl-left) */
.breadcrumb .fl-left{float:none!important;display:inline-flex;align-items:center;}
/* Style cho Link và Text */
.breadcrumb .fl-left a,.breadcrumb .fl-left span{font-size:13px;text-decoration:none;font-weight:500;line-height:1.5;transition:color 0.2s;display:flex;align-items:center;}
/* --- TRANG CHỦ (MỤC ĐẦU TIÊN) --- */
.breadcrumb .fl-left:first-child a::before{content:"\f015";font-family:"FontAwesome";font-weight:900;margin-right:6px;font-size:14px;color:#e51515;}
/* Hover vào link */
.breadcrumb .fl-left a:hover{color:#e51515!important;}
.breadcrumb .fl-left:first-child a:hover::before{color:var(--secondary,#ee4d2d);}
/* MỤC CUỐI CÙNG (Trang hiện tại) */
.breadcrumb .fl-left:last-child span{color:#999;font-weight:400;cursor:default;}
/* 4. MŨI TÊN NGĂN CÁCH (.breadcrumbs_sepa) */
.breadcrumbs_sepa{display:flex;align-items:center;justify-content:center;margin:0 8px;color:#ccc;}
.breadcrumbs_sepa i{font-size:10px;opacity:0.8;color:#e51515;}
/* 5. Ẩn thẻ clear */
.breadcrumb .clear{display:none;}
/* =========================================================
   RESPONSIVE MOBILE (VUỐT NGANG)
   ========================================================= */
@media(max-width:768px){.breadcrumbs{display:flex;flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:0;scrollbar-width:none;-ms-overflow-style:none;}.breadcrumbs::-webkit-scrollbar{display:none;}.breadcrumb .fl-left{flex-shrink:0;white-space:nowrap;}.breadcrumb .fl-left a,.breadcrumb .fl-left span{font-size:12px;}.breadcrumbs::after{content:'';padding-right:15px;}}

/* =========================================================
   CUSTOM CATEGORY HEADER (Home Block)
   ========================================================= */
/* Container chính */
.cat-header-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:10px;border-bottom:1px solid #eee;gap:10px;padding:5px;}

/* Phần Tiêu đề bên trái */
.cat-header-title{display:flex;align-items:center;gap:10px;position:relative;padding-left:12px;}
.cat-header-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:24px;background-color:var(--primary);border-radius:2px;}
.cat-header-title i{font-size:20px;color:var(--primary);}
.cat-header-title h1,.cat-header-title h2{font:700 20px/1.2 var(--font-family,inherit);text-transform:uppercase;color:var(--text);margin:0;}
/* Phần Danh sách nút bên phải */
.cat-header-tags{display:flex;flex-wrap:wrap;gap:8px;}
/* Style chung cho từng nút - TRẠNG THÁI MẶC ĐỊNH */
.tag-link{display:inline-block;padding:6px 12px;background-color:#f3f3f3;border:1px solid #e5e5e5;border-radius:var(--radius);font-size:13px;font-weight:500;color:#555;white-space:nowrap;transition:all .2s;}
/* HIỆU ỨNG RÊ CHUỘT (Áp dụng cho TẤT CẢ nút) */
.tag-link:hover{background-color:var(--primary);color:var(--white);border-color:var(--primary);transform:translateY(-1px);box-shadow:0 3px 6px rgba(0,0,0,0.1);}
/* Style riêng cho nút 'Xem tất cả' - TRẠNG THÁI MẶC ĐỊNH */
.tag-link.view-all{background-color:var(--primary);color:var(--white);border-color:var(--primary);}
/* Style riêng cho nút 'Xem tất cả' - HIỆU ỨNG RÊ CHUỘT */
.tag-link.view-all:hover{background-color:#cc0000;color:#fff;box-shadow:0 4px 10px rgba(229,21,21,0.6);}

/* =========================================================
   RESPONSIVE danh sách tiêu đề danh mục
   ========================================================= */
/* Tablet & Mobile (dưới 992px) */
@media(max-width:991px){
.cat-header-row{align-items:flex-start;flex-direction:column;gap:12px;}
.cat-header-tags{width:100%;}
.cat-header-title h2{font-size:18px;}
}
/* 🚀 CẬP NHẬT: Màn hình RẤT NHỎ (Mobile Portrait - dưới 768px) */
@media(max-width:767px){.tag-link{font-size:12px;padding:5px 10px;border-radius:4px;}}
/* --- THÊM KHỐI GRID DẠNG LƯỚI KHÔNG SLIDE --- */
	.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px;}
	/* Responsive cho Product Grid */
	@media(min-width:576px){.product-grid{grid-template-columns:repeat(3,1fr);gap:15px;}}
	@media(min-width:992px){.product-grid{grid-template-columns:repeat(4,1fr);}}
	@media(min-width:1200px){
	/* 1. Mặc định Full màn hình thì hiện 5 cột (như cũ) */
	.product-grid{grid-template-columns:repeat(5,1fr);}
	/* 2. [MỚI - KHẮC PHỤC LỖI] 
		   Nếu lưới nằm trong khung col-lg-9 (có cột sidebar) 
		   thì ép xuống còn 4 cột cho thoáng */
	.col-lg-9 .product-grid{grid-template-columns:repeat(4,1fr);}
	/* (Tùy chọn) Nếu bạn dùng col-md-8 trên màn to thì cũng ép về 4 cột */
	.col-md-8 .product-grid{grid-template-columns:repeat(4,1fr);}
	}
/* --- END KHỐI GRID --- */
/* --- BLOCK A: THẺ SẢN PHẨM (GIỐNG ẢNH MỚI) --- */
.product-item{background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:10px;position:relative;transition:box-shadow .3s,transform .2s;height:100%;display:flex;flex-direction:column;}
.product-item:hover{box-shadow:0 4px 15px rgba(0,0,0,.1);transform:translateY(-2px);border-color:#ddd;z-index:2;}
.pi-badge{position:absolute;top:0;right:0;background:#00bf00;color:#fff;font-size:11px;font-weight:bold;padding:2px 6px;border-bottom-left-radius:8px;border-top-right-radius:8px;z-index:5;}
.pi-thumb{position:relative;margin-bottom:10px;text-align:center;overflow:hidden;}
.pi-thumb img{width:100%;height:160px;object-fit:contain;transition:transform .3s;}
.product-item:hover .pi-thumb img{transform:scale(1.05);}
.pi-gift-icon{position:absolute;bottom:0;right:0;width:24px;height:24px;object-fit:contain;z-index:4;}
.pi-content{flex:1;display:flex;flex-direction:column;}
.pi-name{font-size:13px;font-weight:500;color:#333;line-height:1.4;height:38px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:6px;}
.pi-name:hover{color:var(--secondary);text-decoration:underline;}
.pi-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.pi-price-new{color:#d70018;font-weight:700;font-size:15px;}
.pi-price-old{color:#999;text-decoration:line-through;font-size:12px;}
.pi-timer{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid #ff9f00;color:#ff9f00;font-size:11px;padding:2px 8px;border-radius:12px;margin-bottom:8px;width:fit-content;}
.pi-timer i{font-size:12px;}
.pi-timer span strong{color:#d70018;}
.pi-status{position:relative; width:100%; height:16px;background:#60bb22;border-radius:10px;overflow:hidden;margin-bottom:8px;font-size:10px;line-height:16px;text-align:center;color:#fff;text-shadow:0 0 2px rgba(0,0,0,.5);}
.pi-status-bar{position:absolute;top:0;left:0;bottom:0;background:#f9920f;z-index:1;border-radius:10px;}
.pi-status-text{position:relative;z-index:2;display:block;width:100%;}
.pi-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:11px;}
.pi-rating{color:#ff9f00;}
.pi-compare{color:#2e7d32;display:flex;align-items:center;gap:4px;font-weight:500;}
.pi-compare:hover{color:var(--secondary);}
/* --- 4. Nội dung bài viết (Entry Content) --- */
.entry-content{font-size:16px;line-height:1.6;color:#333;text-align:justify}
.entry-content h2{font-size:20px;font-weight:700;margin:25px 0 15px;color:#222;scroll-margin-top:80px}
.entry-content h3{font-size:18px;font-weight:600;margin:20px 0 10px;scroll-margin-top:80px}
.entry-content p{margin-bottom:15px}
.entry-content img{border-radius:6px;margin:10px auto;box-shadow:0 2px 8px rgba(0,0,0,0.1)}

/* TABLE SẢN PHẨM TRONG BÀI VIẾT */
.article-product-table{margin:20px 0;border-radius:8px;overflow:hidden;border:1px solid #eee}
.apt-table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.apt-table thead th{background:#e51515;color:#fff;padding:10px;text-align:center;font-weight:700}
.apt-table tbody tr{border-bottom:1px solid #f2f2f2}
.apt-table td{padding:10px;vertical-align:middle}
.apt-name a{color:#333;font-weight:600;line-height:1.4;display:block}
.apt-name a:hover{color:#ff6700}
.apt-price span{color:#d70018;font-weight:700;font-size:15px}
.apt-detail a{color:#0066ff;font-weight:600}
.apt-detail a:hover{text-decoration:underline}
/* Mobile ẩn cột "Xem thêm" */
@media(max-width:768px){
.hide-mobile{display:none}
.apt-table td,.apt-table th{font-size:13px;padding:8px}
}
/* --- Khung Menu Chính --- */
#menu-mobile-drawer { position:fixed; top:134px; left:0; width:280px; height:calc(100vh - 200px); background:#fff; z-index:9999; transform:translateX(-100%); /* Ẩn sang bên trái */ transition:transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); /* Chuyển động mượt */ box-shadow:2px 0 10px rgba(0,0,0,0.1); display:flex; flex-direction:column; }
#menu-mobile-drawer.active { transform:translateX(0); /* Trượt ra */ opacity:1; visibility:visible; }
/* 1. Header Menu */
.mm-header { height:50px; background:#E51515; /* Màu đỏ chủ đạo của web */ display:flex; align-items:center; justify-content:space-between; padding:0 15px; color:#fff; flex-shrink:0; }
.mm-title { font-weight:bold; text-transform:uppercase; font-size:16px; }
/* 2. Body Menu (Danh sách) */
.mm-body { flex-grow:1; overflow-y:auto; /* Cho phép cuộn nếu danh sách dài */ padding:10px 0; }
.mm-list { margin:0; padding:0; list-style:none; }
.mm-list li { border-bottom:1px solid #eee; /* Gạch ngang ngăn cách */ }
.mm-list li a { display:flex; align-items:center; padding:12px 15px; color:#333; text-decoration:none; font-size:14px; font-weight:500; transition:background 0.2s; }
.mm-list li a:hover { background-color:#f9f9f9; color:#E51515; }
/* Icon trong menu (từ code PHP bước trước) */
.mm-list li a img.img-lv { margin-right:10px; width:20px; height:20px; object-fit:contain; }
/* 3. Footer Tiện ích (Bottom) */
.mm-footer { background:#f8f8f8; border-top:1px solid #ddd; padding:15px; flex-shrink:0; }
.mm-utility-title { font-size:12px; color:#888; text-transform:uppercase; margin-bottom:10px; font-weight:bold; }
.mm-utility-grid { display:grid; grid-template-columns:1fr 1fr; /* Chia 2 cột */ gap:10px; }
.mm-util-item { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px; border-radius:4px; text-decoration:none; font-size:13px; font-weight:600; color:#fff; transition:opacity 0.2s; }
.mm-util-item:hover { opacity:0.9; color:#fff; }
/* Màu sắc từng nút tiện ích */
.mm-util-item.call { background:#28a745; } /* Gọi màu xanh lá */
.mm-util-item.zalo { background:#0068ff; } /* Zalo màu xanh dương */
.mm-util-item.map { background:#ff9800; } /* Map màu cam */
.mm-util-item.warranty { background:#6c757d; } /* Bảo hành màu xám */


/* Bảng trong vùng mô tả */
.description table{width:100%;border-collapse:collapse;border-spacing:0;margin:15px 0;font-size:14px;color:#333;background:#fff;}
.description table td{border:1px solid #ccc;padding:8px 10px;vertical-align:middle;line-height:1.5;}
.description table tr:first-child td{font-weight:700;background:#fff;font-size:15px;}
.description{overflow-x:auto;}


/* =========================================================
   STYLE CHO PHÂN TRANG (PAGINATION) - DÙNG CHUNG CHO LAYOUT
   ========================================================= */
.pagination { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:35px; padding-top:20px; border-top:1px solid #eee; /* Đường kẻ phân cách */ margin-bottom:20px; }
/* Style chung cho tất cả các nút/liên kết */
.pagination a, .pagination font.current { display:inline-flex; justify-content:center; align-items:center; min-width:38px; height:38px; font-size:14px; font-weight:600; border-radius:var(--radius); transition:all 0.2s; text-decoration:none; padding:0 5px; cursor:pointer; }
/* Trang hiện tại (Current Page) - dùng thẻ <font> */
.pagination font.current { background:var(--primary); /* Màu đỏ chủ đạo */ color:var(--white); border:1px solid var(--primary); cursor:default; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
/* Các trang khác (other-page) */
.pagination a.other-page { background:#fff; color:var(--text); border:1px solid #ddd; }
.pagination a.other-page:hover { background:var(--secondary); color:var(--white); border-color:var(--secondary); }
/* Nút Điều hướng (First, Previous, Next, Last) */
.pagination a.first-page, .pagination a.pre-page, .pagination a.next-page, .pagination a.last-page { background:#f7f7f7; color:#555; border:1px solid #ddd; font-size:16px; /* Icon điều hướng lớn hơn */ font-weight:bold; padding:0 10px; min-width:45px; }
.pagination a.first-page:hover, .pagination a.pre-page:hover, .pagination a.next-page:hover, .pagination a.last-page:hover { background:var(--primary); color:var(--white); border-color:var(--primary); }
/* Dấu ba chấm (...) - dùng thẻ <b> */
.pagination b { background:transparent; border:none; color:#999; font-size:16px; font-weight:normal; padding:0 5px; }
/* --- RESPONSIVE CHO PHÂN TRANG (Mobile) --- */
@media (max-width:768px){ .pagination { gap:3px; padding-top:15px; margin-bottom:10px; } .pagination a, .pagination font.current { min-width:30px; height:30px; font-size:13px; border-radius:4px; } .pagination a.other-page, .pagination b { display:none; } }

/* =========================================================
   NEW FOOTER STYLE (THAY THẾ HOÀN TOÀN FOOTER CŨ)
   ========================================================= */
.site-footer{background-color:#fff;border-top:1px solid #e5e5e5;color:#333;font-size:13px;margin-top:30px;}
/* --- Footer Top (Phần liên kết chính) --- */
.footer-top{padding:30px 0;}
.footer-col{margin-bottom:20px;}
.footer-title{font-size:16px;font-weight:700;margin-bottom:15px;color:#222;text-transform:uppercase;}
.footer-title.sm-title{font-size:14px;margin-bottom:10px;text-transform:none;}

/* 🚀 CẬP NHẬT MỚI: Hiệu ứng hover và Icon cho Menu Footer */
.footer-list li{margin-bottom:8px;}
.footer-list li a{color:#555;display:flex;align-items:center;gap:6px;transition:all .2s ease;transform:translateX(0);}
.footer-list li a::before{content:"›";font-family:sans-serif;font-size:18px;color:#ccc;font-weight:300;line-height:1;margin-top:-2px;transition:all .2s ease;}
.footer-list li a:hover{color:var(--primary);transform:translateX(5px);}
.footer-list li a:hover::before{color:var(--primary);}
/* 🚀 HẾT PHẦN CẬP NHẬT MỚI */

/* Hotline style */
.footer-hotline li{margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;color:#555;}
.footer-hotline strong a{color:var(--primary);font-size:16px;font-weight:700;}
.footer-hotline .time{font-size:12px;color:#777;}

/* Social Icons */
.footer-social{display:flex;gap:10px;margin-bottom:15px;}
.social-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;transition:transform .2s;}
.social-icon:hover{transform:translateY(-3px);}
.social-icon img{width:20px;height:auto;}
.social-icon.zalo{background-color:#0068ff;}
.social-icon.fb{background-color:#1877f2;}
.social-icon.insta{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);}
.social-icon.youtube{background-color:#ff0000;}
.social-icon.tiktok{background-color:#000;}

/* --- Footer Bottom (Phần Tags & Copyright) --- */
.footer-bottom{background-color:#f8f8f8;padding:20px 0;border-top:1px solid #eee;}
.footer-tags-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #e5e5e5;}
.footer-tag-col{flex:1 1 200px;font-size:12px;}
.footer-tag-col strong{display:block;margin-bottom:5px;color:#333;}
.footer-tag-col a{display:inline-block;color:#666;margin-right:8px;margin-bottom:4px;}
.footer-tag-col a:hover{color:var(--secondary);text-decoration:underline;}
.footer-copyright-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;font-size:12px;color:#666;}
.copyright-text p{margin-bottom:5px;}
.copyright-logos{display:flex;gap:10px;}
.copyright-logos img{height:40px;width:auto;}

/* --- Responsive cho Footer --- */
@media(max-width:767px){
.footer-hotline li{flex-direction:column;align-items:flex-start;gap:2px;}
.footer-copyright-row{flex-direction:column;align-items:center;text-align:center;}
}

/* Tùy chỉnh thanh cuộn cho đẹp */
.scroll-bar::-webkit-scrollbar { width: 4px; }
.scroll-bar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }



/* =========================================================
CSS CHO KHỐI THU GỌN (CORE)
 ========================================================= */
.wrapper-box { background:#fff; border-radius:8px;padding-bottom:60px; /* Chừa chỗ cho nút bấm ở dưới */ position:relative; /* Để định vị nút bấm */ box-shadow:0 4px 6px rgba(0,0,0,0.05); overflow:hidden; /* Ẩn phần thừa */ transition:all 0.3s ease; /* Hiệu ứng mượt mà */ }
.content-body {overflow:hidden; transition:max-height 0.5s ease-in-out; position:relative; }
.content-gradient { position:absolute; bottom:0; left:0; width:100%; height:100px; background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); pointer-events:none; /* Cho phép click xuyên qua nếu cần */ transition:opacity 0.3s; }
.wrapper-box.expanded .content-body { max-height:none; /* Mở khóa chiều cao */ }
.wrapper-box.expanded .content-gradient { opacity:0; visibility:hidden; }
.toggle-btn-container { position:absolute; bottom:15px; /* Sát viền dưới */ left:0; width:100%; text-align:center; z-index:10; background:rgba(255,255,255,0.9); /* Nền nhẹ phòng trường hợp đè chữ */ padding-top:5px; }
.toggle-btn { display:inline-block; cursor:pointer; padding:8px 30px; border-radius:20px; /* Bo tròn nút */ font-size:14px; font-weight:bold; text-decoration:none; transition:all 0.3s; color:#d32f2f; /* Màu chữ đỏ đậm */ background-color:#ffebee; /* Màu nền hồng nhạt */ border:1px solid #ffcdd2; /* Viền đỏ nhạt */ }
.toggle-btn:hover { background-color:#ffcdd2; color:#b71c1c; }
.toggle-btn span { display:inline-flex; align-items:center; gap:5px; }
.arrow-icon::after { content:''; display:inline-block; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-bottom:2px; transition:transform 0.3s; }
.wrapper-box.expanded .arrow-icon::after { transform:rotate(-135deg); margin-bottom:-2px; }
/* =========================================================
END CSS CHO KHỐI THU GỌN (CORE)
 ========================================================= */
 
/* CSS CHO BOX LIÊN HỆ */
.giuseart-nav{position:fixed; bottom:200px; right:5px;background:rgba(255,255,255,.8);border-radius:5px;width:auto;z-index:9999;padding:10px 0;border:1px solid #f2f2f2}
.giuseart-nav ul{list-style:none;padding:0;margin:0;position:relative;z-index:10000}
.giuseart-nav ul li{list-style:none!important;position:relative;z-index:10000}
.giuseart-nav ul>li a{border:none;padding:3px;display:block;border-radius:5px;text-align:center;font-size:10px;line-height:15px;color:#515151;font-weight:700;max-width:72.19px;max-height:54px;text-decoration:none;position:relative;z-index:10000}
.giuseart-nav ul>li .chat_animation{display:none}
.giuseart-nav ul>li a i.ticon-heart{background:url(/images/location.png) no-repeat;background-size:contain;width:36px;height:36px;display:block;position:relative;z-index:10000}
.giuseart-nav ul>li a i.ticon-zalo-circle2{background:url(/images/img_zalo_chuan.png) no-repeat;background-size:contain;width:36px;height:36px;display:block;position:relative;z-index:10000}
.giuseart-nav li .button{background:transparent}
.giuseart-nav ul>li i.ticon-angle-up{cursor:pointer; background:url(/images/scroll-top-icon.svg) no-repeat;background-size:contain;width:36px;height:36px;display:block;margin-left:18px;position:relative;z-index:10000}
.giuseart-nav ul>li a i{width:33px;height:33px;display:block;margin:auto;position:relative;z-index:10000}
.giuseart-nav ul li .button .btn_phone_txt{position:relative;top:5px;font-size:10px;font-weight:bold;text-transform:none;z-index:10000}
.giuseart-nav ul li .button .phone_animation i{display:block;width:36px;font-size:26px;margin-top:0;position:relative;z-index:10000}
.giuseart-nav ul>li a.chat_animation svg{margin:-13px 0 -20px;position:relative;z-index:10000}
.giuseart-nav ul>li a i.ticon-messenger{background:url(/images/img_mess-chuan.png) no-repeat;background-size:contain;width:36px;height:36px;display:block;position:relative;z-index:10000}
.giuseart-nav ul>li a i.icon-phone-w{background:url(/images/icon-hotline.gif) no-repeat;background-size:contain;position:relative;z-index:10000}
.giuseart-nav ul li .button .btn_phone_txt{position:relative;z-index:10000}
@media only screen and (max-width:600px){
.giuseart-nav li .chat_animation{display:block!important}
.giuseart-nav ul li .button .btn_phone_txt{position:relative;top:35px;font-size:10px;font-weight:bold;text-transform:none;z-index:10000}
.giuseart-nav ul li .button .phone_animation i{display:inline-block;width:27px;font-size:26px;margin-top:7px;position:relative;z-index:10000}
.giuseart-nav li .button .phone_animation{box-shadow:none;position:absolute;top:-6px;left:50%;transform:translate(-50%,0);width:45px;height:45px;border-radius:100%;background:#6cb917;line-height:15px;border:2px solid #fff;z-index:10000}
.giuseart-nav ul>li a{padding:0;margin:0 auto;z-index:10000}
.giuseart-nav{background:rgba(255,255,255,.7);width:100%;border-radius:0;color:#fff;height:60px;line-height:50px;position:fixed;bottom:0;left:0;z-index:9999;padding:5px;margin:0;box-shadow:0 4px 10px 0 #000;overflow-x:hidden}
.giuseart-nav li{float:left;width:20%;list-style:none;height:50px;position:relative;z-index:10000}
.phone-mobile{display:block!important}
}
.to-top-pc a{cursor:pointer}

/* =========================================================
   STYLE CHUNG BỔ SUNG: MỤC LỤC BÀI VIẾT (TOC)
   (Chuyển từ news.css sang)
   ========================================================= */
.toc-box{background:#f9f9f9;border:1px solid #ddd;border-radius:4px;padding:15px;margin-bottom:25px;display:inline-block;width:100%}
.toc-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:700;color:#333}
.toc-header i{transition:transform 0.3s}
.toc-header.active i{transform:rotate(180deg)}
.toc-list{margin-top:10px;padding-left:20px;list-style-type:decimal;display:block;border-top:1px solid #eee;padding-top:10px;list-style-position:inside}
.toc-list li{margin-bottom:8px}
.toc-list li.toc-h3{padding-left:30px;font-size:13px;list-style-type:lower-alpha} /* Đánh số a, b, c,... cho H3 */
.toc-list a{color:#007bff;font-weight:500;font-size:14px}
.toc-list a:hover{color:var(--secondary);text-decoration:underline}
/* =========================================================
   STYLE CHUNG BỔ SUNG: NÚT MỤC LỤC NỔI (FLOATING TOC)
   ========================================================= */
.toc-float-btn{position:fixed;top:150px;right:15px;background:#fff;color:#333;border:1px solid #ddd;box-shadow:0 4px 10px rgba(0,0,0,0.15);border-radius:30px;padding:8px 16px;z-index:999;cursor:pointer;font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;transition:all 0.3s ease;opacity:0;visibility:hidden;transform:translateY(20px)}
.toc-float-btn.show{opacity:1;visibility:visible;transform:translateY(0)}
.toc-float-btn:hover{background:var(--secondary);color:#fff;border-color:var(--secondary)}
.toc-float-btn i{font-size:14px}
.toc-float-panel{position:fixed;top:185px;right:15px;width:300px;max-height:400px;background:#fff;border:1px solid #ddd;box-shadow:0 5px 20px rgba(0,0,0,0.2);border-radius:8px;z-index:999;padding:15px;overflow-y:auto;opacity:0;visibility:hidden;transform:scale(0.9);transform-origin:bottom right;transition:all 0.2s ease}
.toc-float-panel.active{opacity:1;visibility:visible;transform:scale(1)}
.toc-float-panel h4{font-size:14px;font-weight:700;margin-bottom:10px;border-bottom:1px solid #eee;padding-bottom:8px;color:var(--secondary)}
.toc-float-panel .toc-list{border:none;padding-top:0;margin-top:0}
.toc-float-panel .toc-list li.toc-h3{padding-left:15px}
.toc-float-panel .toc-list a{font-size:13px;color:#333}
.toc-float-panel .toc-list a:hover{color:var(--secondary)}
/* Responsive cho mobile: Thu nhỏ bảng popup nếu màn hình bé */
@media (max-width:480px){.toc-float-panel{width:85%;right:10px}}
/* =======================================================
   GLOBAL DROPDOWN BOX (.dropdown_box)
   Dùng chung cho toàn website
   ======================================================= */
   /* --- KIỂU MENU RỘNG (Dành cho Lọc tổng hợp) --- */
.dropdown_menu_large {min-width: 650px; /* Độ rộng lớn cho PC */ padding: 15px;}
/* Responsive cho Mobile: Giữ nó không bị tràn màn hình */
@media (max-width: 768px) {.dropdown_menu_large {min-width: 300px;width: 90vw; /* Chiếm 90% màn hình điện thoại */max-height: 80vh; /* Giới hạn chiều cao */overflow-y: auto; /* Cho phép cuộn nếu dài */left: 0;right: auto;}}
/* 1. Khung bao ngoài */
.dropdown_box{position:relative;display:inline-block;z-index:100;}
/* 2. Nút bấm (Giao diện mặc định) */
.dropdown_toggle{background-color:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:6px 15px;font-size:13px;color:#333;cursor:pointer;display:flex;align-items:center;gap:6px;height:36px;transition:all 0.2s ease;white-space:nowrap;}
/* Hiệu ứng khi Hover hoặc Đang mở */
.dropdown_box:hover .dropdown_toggle,.dropdown_box.open .dropdown_toggle{border-color:var(--primary);color:var(--primary);}
/* 3. Menu sổ xuống */
.dropdown_menu{display:block;opacity:0;visibility:hidden;transform:translateY(10px);position:absolute;top:100%;right:0;min-width:200px;background:#fff;border:1px solid #eee;border-radius:6px;padding:8px 0;margin-top:10px;list-style:none;transition:all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);box-shadow:0 5px 20px rgba(0,0,0,0.15);}
/* 4. Kỹ thuật "Cầu nối" (Bridge) 
   Giúp chuột di chuyển từ Nút -> Menu không bị mất hover */
.dropdown_box::after{content:'';position:absolute;top:100%;left:0;width:100%;height:15px;background:transparent;}
/* Mũi tên nhọn chỉ lên (Trang trí) */
.dropdown_menu::before{content:"";position:absolute;top:-6px;right:15px;border-width:0 6px 6px;border-style:solid;border-color:transparent transparent #fff;filter:drop-shadow(0 -2px 2px rgba(0,0,0,0.05));}
/* 5. Trạng thái hiện menu (Khi Hover HOẶC có class .open) */
.dropdown_box:hover .dropdown_menu,.dropdown_box.open .dropdown_menu{opacity:1;visibility:visible;transform:translateY(0);}
/* 6. Style cho các Link bên trong */
.dropdown_menu li a{display:block;padding:8px 15px;font-size:13px;color:var(--text);transition:background 0.2s,color 0.2s;text-align:left;}
.dropdown_menu li a:hover{background-color:#f9f9f9;color:var(--primary);}