/* ==========================================================================
   1. RESET & THIẾT LẬP HỆ THỐNG
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif}
body { background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
a { text-decoration: none; transition: 0.2s; color: inherit; }
ul { list-style: none; }
.container { width: 95%; max-width: 1350px; margin: 0 auto; }

/* ==========================================================================
   2. HEADER & CÁC THÀNH PHẦN ĐIỀU HƯỚNG
   ========================================================================== */
.site-header { background: var(--white); border-bottom: 1px solid var(--border-color); }
.header-top-wrapper { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; gap: 20px; }
.site-logo { font-size: 26px; font-weight: 800; color: var(--primary-color); }
.site-logo span { color: var(--accent-color); }

/* Search Box */
.search-box { flex: 1; max-width: 500px; }
.search-box form { display: flex; border: 2px solid var(--primary-color); border-radius: var(--radius-base); overflow: hidden; background: var(--white); }
.search-box input { flex: 1; padding: 10px 15px; border: none; outline: none; font-size: 14px; color: var(--text-main); }
.search-box button { background: var(--primary-color); color: var(--white); border: none; padding: 0 22px; font-weight: 600; cursor: pointer; }

/* Actions */
.header-actions { display: flex; align-items: center; gap: 12px; }
.bookmark-btn { background: transparent; border: 1px solid var(--border-color); padding: 10px 16px; border-radius: var(--radius-base); cursor: pointer; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.cart-btn { background: var(--primary-color); color: var(--white); padding: 10px 20px; border-radius: var(--radius-base); font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: var(--shadow-base); }

/* Business Banner trên Header */
.business-banner { background: var(--primary-color); color: var(--white); padding: 35px 0; text-align: center; }
.business-banner h2 { color: var(--accent-color); font-size: 24px; margin-bottom: 6px; font-weight: 700; letter-spacing: 0.5px; }
.business-banner p { font-size: 16px; opacity: 0.85; }

/* Sticky Menu */
.sticky-menu { background: var(--primary-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.nav-links { display: flex; }
.nav-links a { display: block; padding: 15px 22px; color: var(--white); font-weight: 600; font-size: 16px; opacity: 0.85; }
.nav-links a:hover, .nav-links a.active { opacity: 1; background: rgba(0,0,0,0.15); }

/* Breadcrumbs Bar */
.breadcrumbs-bar { background: var(--bg-body); padding: 12px 0; font-size: 13px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--primary-color); }
.crumbs .current { color: var(--text-main); font-weight: 500; }

/* ==========================================================================
   3. KHU VỰC QUẢNG CÁO ADS
   ========================================================================== */
.ads-placement-zone { margin-top: 25px; }
.ads-banner-box { background: var(--white); border: 2px dashed var(--accent-color); padding: 16px; text-align: center; font-weight: 700; border-radius: var(--radius-base); color: var(--accent-color); font-size: 14px; }

/* ==========================================================================
   4. THÂN TRANG & THÀNH PHẦN NỘI DUNG (CORE COMPONENT)
   ========================================================================== */
.page-body-wrapper { display: grid; gap: 30px; margin-top: 30px; margin-bottom: 50px; }

/* Ép Trang Chủ Luôn Không Sidebar */
body.is-home-page .page-body-wrapper { grid-template-columns: 1fr !important; grid-template-areas: "main-core" !important; }
body.is-home-page .sidebar-container { display: none !important; }

/* Thành phần trong Main content */
.main-content-core h1 { font-size: 28px; color: var(--primary-color); margin-bottom: 8px; font-weight: 700; }
.seo-lead-text { color: var(--text-muted); margin-bottom: 30px; font-size: 15px; }

/* Product Grid (Thẻ Sản phẩm & Sản phẩm liên quan) */
.products-grid-section { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-bottom: 45px; }
.product-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-base); overflow: hidden; padding: 20px; position: relative; transition: 0.3s; box-shadow: var(--shadow-base); }
.card-thumb { font-size: 16px; background: var(--bg-body); text-align: center; padding: 35px 0; border-radius: var(--radius-base); margin-bottom: 15px; }
.sale-badge { position: absolute; top: 15px; left: 15px; background: var(--accent-color); color: var(--white); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; }
.product-card h3 { font-size: 16px; color: var(--text-main); margin-bottom: 8px; }
.price { color: var(--accent-color); font-weight: 700; font-size: 18px; margin-bottom: 15px; }
.price del { color: var(--text-muted); font-size: 13px; font-weight: 400; margin-left: 6px; }
.add-to-cart { width: 100%; background: var(--primary-color); color: var(--white); border: none; padding: 10px; font-weight: 700; border-radius: var(--radius-base); cursor: pointer; transition: 0.2s; }

/* Tin Tức Liên Quan (Related News) */
.related-news-section { background: var(--white); border-top: 1px solid var(--border-color); border-radius: var(--radius-base); padding: 30px 20px;}
.related-news-section h2 { font-size: 20px; color: var(--primary-color); margin-bottom: 15px; }
.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-item h4 { font-size: 16px; font-weight: 500; }
.news-item a:hover { color: var(--accent-color); }

/* Sidebar Widgets */
.sidebar-widget { background: var(--white); padding: 22px; border: 1px solid var(--border-color); border-radius: var(--radius-base); margin-bottom: 25px; box-shadow: var(--shadow-base); }
.sidebar-widget h3 { font-size: 16px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid var(--bg-body); color: var(--primary-color); font-weight: 700; }
.sidebar-widget li { margin-bottom: 13px; }
.sidebar-widget a { color: var(--text-main); font-size: 15px; }
.sidebar-widget a:hover { color: var(--accent-color); padding-left: 4px; }

/* ==========================================================================
   5. FOOTER CHUẨN ĐỀ BÀI: 3 CỘT (1 CỘT LỚN - 2 CỘT NHỎ)
   ========================================================================== */
.site-footer { background: var(--primary-color); color: var(--white); padding: 60px 0 0 0; margin-top: auto; border-top: 4px solid var(--accent-color); }
.footer-grid-wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; padding-bottom: 40px; }

.footer-col-large .footer-logo { font-size: 28px; font-weight: 800; color: var(--white); margin-bottom: 15px; }
.footer-col-large .footer-logo span { color: var(--accent-color); }
.footer-col-large .company-desc { font-size: 15px; opacity: 0.8; margin-bottom: 15px; }
.footer-col-large .company-contact { font-size: 15px; opacity: 0.7; margin-bottom: 6px; }

.footer-col-small h4 { font-size: 15px; color: var(--accent-color); margin-bottom: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-col-small li { margin-bottom: 12px; font-size: 15px; }
.footer-col-small a { color: var(--white); opacity: 0.8; }
.footer-col-small a:hover { opacity: 1; color: var(--accent-color); padding-left: 4px; }

.footer-copyright-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 25px 0; font-size: 13px; text-align: center; opacity: 0.6; }

/* ==========================================================================
   6. HỆ THỐNG RESPONSIVE ĐA THIẾT BỊ
   ========================================================================== */
@media (max-width: 1024px) {
    .page-body-wrapper { grid-template-columns: 1fr !important; grid-template-areas: "main-core" "sidebar-zone" !important; }
    .footer-grid-wrapper { grid-template-columns: 1fr 1fr; gap: 30px; padding-left:20px;}
    .footer-col-large { grid-column: span 2; }
}
@media (max-width: 768px) {
    .header-top-wrapper { flex-direction: column; text-align: center; }
    .search-box { width: 100%; }
    .nav-links11 { flex-wrap: wrap; justify-content: center; }
	.nav-links {
	  display: flex;
	  overflow-x: auto;
	  scroll-snap-type: x mandatory;
	  -webkit-overflow-scrolling: touch;
	  margin: 0;
	}
	.nav-links li {
	  scroll-snap-align: center;
	  flex: 0 0 32%;
	  box-sizing: border-box;
	  display: flex;
	  align-items: center;
	}
	.nav-links li::before {
	  content: "";
	  flex-shrink: 0;
	}
    .footer-grid-wrapper { grid-template-columns: 1fr; }
    .footer-col-large { grid-column: span 1; }
}
.logo img{max-height: 70px;border-radius: 5px;box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);}
.banner_box_christ,.banner_box_newyear,.banner_box_default{display:flex;margin:0 auto;width:75%;min-height:400px;background-color:#cccccc;justify-content:center;align-items:center}
.banner_box_christ,.banner_box_newyear{color:red;font-family:Pacifico;font-size:45px;font-weight:700;text-shadow:2px 2px #F0F8FF;}
.banner_box_christ{background-image: url("templates/shop/default/images/christmas.jpg")}
.banner_box_newyear{background-image: url("templates/shop/default/images/chuc-mung-nam-moi.jpg")}
.banner_box_default{background-image: url("templates/shop/default/images/header_bg.jpg")}
.banner_box img{width:95%}
@media(max-width:1024px){.banner_box_christ,.banner_box_newyear,.banner_box_default,.banner_box img{width:98%} .site-logo{display:none} .logo img{max-height: 45px}
.header-actions{justify-content: space-between; gap: 70px;}.info-flex {flex-direction: column; gap: 5px; height: auto;}
}
@media(min-width:1024px){.site-logo-mobile {display:none}}
.card-thumb img{width:100%;min-height:150px;max-height:250px;object-fit:cover}
.nego_box_img {min-height:18px}
/* seach */
.rv-shop-form{display: flex; flex-direction: column; gap: 15px; background: var(--white); padding: 30px; margin-bottom:30px;border: 1px solid var(--border-color); border-radius: var(--radius-base);}
.rv-shop-form input{padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-base); outline: none;}
.rv-shop-form label{font-weight:600}
.textarea_form{padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-base); outline: none; background: var(--white);}
.form-info{background:var(--primary-color); margin-bottom:10px; padding:8px; border: 1px solid var(--border-color);border-radius: var(--radius-base);color: var(--accent-color)}
.form-select,.form-input-flex{display:flex;gap:15px;}
.form-select select,.form-input-flex input{flex:1; padding:10px;border: 1px solid var(--border-color); border-radius: var(--radius-base); outline: none; background: var(--white)}
.form-content-flex{display:flex;flex;gap:15px;}
.search-footer{display:flex;gap:100px}
/* Detail*/
h1{font-size:18px !important}
h2{font-size:18px}
h3{font-size:16px}
.cart-wrapper{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 50px;}
.cart-wrapper div{color:var(--text-main)}
.cart-top{font-size: 12px; background: var(--bg-body); text-align: center; padding: 40px; border-radius: var(--radius-base); border: 1px solid var(--border-color);}
.cart-top img{min-width:300px; max-width:500px}
.cart-bottom {width:100%; padding:10px 2px}
.content_detail {margin-bottom:50px;padding:10px 20px 30px 20px; background: var(--white); border-radius:var(--radius-base); border: 1px solid var(--border-color);}
.content_detail img{max-width:100%;min-width:50%}
.content_detail div{color:var(--text-main)}
.content_detail h2{padding: 20px 0 10px 0; font-size:20px}
.content_detail h3{padding: 20px 0 10px 0; font-size:18px}
.content_detail h4{padding: 20px 0 10px 0; font-size:16px}
.content_detail ul,.content_detail ol{padding-left:20px}
.content_detail li{padding:5px}
.content_detail hr{margin:15px 0 10px 0}
.content_detail table{border-collapse: collapse;margin:10px 0 20px 0px}
.content_detail tr:nth-child(odd) {background: #f4f4f4; }
.content_detail th,.content_detail td{border:0.5px solid #dddddd; padding:10px}
.content_detail p{margin-bottom:16px}
.bb-center {text-align: center;}
.bb-left {text-align: left;}
.bb-right {text-align: right;}
.content-grid {display:flex }
.rv-info-row{
	display:grid;
	padding:2px 0px;
	grid-template-columns:30% 70%;
	gap:15px;
	align-items:flex-start;
}
.rv-info-label{
	font-weight:600;
	color:#475569;
}
.rv-info-value{
	color:#1e293b;
	word-break:break-word;
}
.small-info {font-size:13px}
.vote {color:orange !important}
.card-thumb img{max-width:100%}
.rv-pagination{
	display:flex;
	justify-content:center;
	gap:8px;
	margin:30px;
}
.rv-pagination a{
	min-width:36px;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:6px;
	background: var(--white);
	text-decoration:none;
	color: var(--text-main);
}
.rv-pagination .active{
	color: var(--text-muted);
	border:2px solid var(--border-color);
}
.products-list-section table{border-collapse: collapse;margin:10px 0 20px 0px; width:100%;}
.products-list-section th,.products-list-section td{border:0.5px solid #dddddd; padding:10px}
.products-list-section th {background: var(--accent-color)}
.info-flex{display: flex; gap: 15px;}
.info-flex-inner{flex: 1;}