/*
Theme Name: Flatsome Child
Theme URI: http://flatsome.uxthemes.com
Template: flatsome
Author: UX-Themes
Author URI: https://uxthemes.com
Description: Multi-Purpose Responsive WooCommerce Theme
Version: 3.20.9.1783562161
Updated: 2026-07-09 01:56:01
*/

/* FOOTER CARTON ĐÁ */
/* CF7 – Inquiry form wrapper */

.prodetails-btnlist {
	display: none !important;
}
html body #wrapper #main .newslist.list1 > li:hover .info *, html body #wrapper #main .newslist > li:hover .info *, html body.category #wrapper #main .newslist.list1 > li:hover .info *, html body.archive #wrapper #main .newslist.list1 > li:hover .info * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.header-main .header-nav > li:hover>a::before{
	content: "";
	width: 100%;
	height: 2px;
	background: var(--color);
	position: absolute;
	bottom: 15px;
	left: 0px;
	transition: all .2s linear;
}

section.home-helpcenter {
	padding-top: 30px;
}
div#proSendInquiryBtn {
	min-width: 180px;
	height: 50px;
	padding: 0px 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--borderradius);
	background: #EEEEEE;
	border: 1px solid #D0D0D0;
	text-transform: capitalize;
	transition: all .1s linear;
	font-size: var(--fontsize16);
	font-weight: var(--fontbold5);
	cursor: pointer;
	text-align: center;
	margin-right: 15px;
	margin-bottom: 10px;
}
.prodetails-btnlist-2 {
	display: block !important;
}
.inquiry-form { padding: 10px 0; }
.inquiry-form .wpcf7-form-control { 
	display: block; 
	width: 100%; 
	margin-bottom: 12px; 
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-size: 14px;
	box-shadow: none;
	box-sizing: border-box;
}
div#proSendInquiryBtn {
	color: #000;
}
.inquiry-form input[type="submit"],
.inquiry-form .wpcf7-submit {
	background: #b6d600;
	color: #fff;
	border: none;
	padding: 12px 35px;
	border-radius: 3px;
	font-size: 15px;
	cursor: pointer;
	letter-spacing: 0.5px;
}
.inquiry-form input[type="submit"]:hover,
.inquiry-form .wpcf7-submit:hover {
	background: #006830;
}

.footer-stone-paper{
	position:relative;
	padding:48px 30px 30px;
	text-align:center;
	background:#f7f7f7;
	font-family:"Titillium Web", Arial, sans-serif;
}

.footer-menu{
	display:flex !important;
	justify-content:center !important;
	align-items:center !important;
	flex-wrap:wrap !important;
	gap:18px 70px !important;
	margin-bottom:38px !important;
}

.footer-menu a{
	color:#555 !important;
	font-size:16px !important;
	text-decoration:none !important;
}

.footer-contact-line{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:30px;
	width:fit-content;
	margin:0 auto 28px;
}
.footer-phones,
.footer-email,
.footer-location{
	display:flex;
	align-items:center;
	justify-content:center;
}

.footer-phones,
.footer-email,
.footer-location{
	display:flex !important;
	align-items:center !important;
	color:#666 !important;
	font-size:15px !important;
	line-height:1.5 !important;
	text-decoration:none !important;
}

.footer-phones{
	flex-wrap:nowrap !important;
	white-space:nowrap !important;
	gap:8px !important;
}

.footer-phones a{
	display:inline-block !important;
	color:#666 !important;
	text-decoration:none !important;
	white-space:nowrap !important;
}

.footer-divider{
	display:inline-block !important;
	margin:0 3px !important;
	color:#aaa !important;
}

.footer-email{
	white-space:nowrap !important;
	gap:9px !important;
}

.footer-location{
	min-width:0 !important;
	gap:9px !important;
	text-align:left !important;
}

.footer-icon{
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	flex:0 0 auto !important;
	color:#a8cf00 !important;
	font-size:19px !important;
	font-weight:700 !important;
}

.footer-copyright{
	color:#777 !important;
	font-size:15px !important;
	line-height:1.6 !important;
}

@media (max-width:1100px){
	.footer-contact-line{
		grid-template-columns:1fr !important;
		row-gap:15px !important;
	}

	.footer-phones,
	.footer-email,
	.footer-location{
		justify-content:center !important;
		text-align:center !important;
	}
}

@media (max-width:549px){
	.footer-menu{
		display:grid !important;
		grid-template-columns:repeat(2, 1fr) !important;
		gap:12px 20px !important;
		text-align:left !important;
	}

	.footer-phones{
		flex-wrap:wrap !important;
		justify-content:center !important;
	}

	.footer-divider{
		display:none !important;
	}

	.footer-phones a{
		width:100% !important;
		text-align:center !important;
	}
}
/* ===============================
HEADER CARTON ĐÁ
================================ */

/* Thanh thông tin phía trên */


.header-top,
.header-top a{
	color:#777 !important;
	font-size:13px !important;
	font-weight:400 !important;
}

.header-top .nav{
	gap:14px;
}

.header-top i{
	color:#555 !important;
	font-size:15px !important;
}




.header-main .logo img{
	max-height:65px !important;
	width:auto !important;
}

/* Menu chính */
.header-main .header-nav{
	align-items:center;
	gap:4px;
}

.header-main .header-nav > li{
	margin:0 12px !important;
}
header.is-active a.nav-top-link {
	color: #000;
}

header.is-active .nav>li.active>a {
	color: #b6d600;
}

.header-main .header-nav > li > a{
	position:relative;
	min-height:88px;
	display:flex;
	align-items:center;
	font-size:19px !important;   /* tăng từ 16 lên 19 */
	font-weight:500 !important;  /* đậm hơn */
	line-height:1.3;
	text-transform:none !important;
	letter-spacing:0 !important;
	padding:0 !important;
}

/* Hover menu */
.header-main .header-nav > li > a:hover{
	color:#a8c900 !important;
}

/* Gạch chân mục đang chọn */
.header-main .header-nav > li.active > a:after,
.header-main .header-nav > li.current-menu-item > a:after,
.header-main .header-nav > li.current-menu-ancestor > a:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:15px;
	height:2px;
	background:#b6d600;
}

/* Mũi tên menu con */
.header-main .header-nav > li.has-dropdown > a:after{
	margin-left:7px;
}

/* Nút phản hồi */
.header-main .header-button{
	margin-left:12px !important;
}

.header-main .header-button .button{
	min-height:42px !important;
	padding:0 23px !important;
	margin:0 !important;
	border:none !important;
	border-radius:30px !important;
	background:#b6d600 !important;
	color:#fff !important;
	font-size:16px !important;
	font-weight:500 !important;
	line-height:42px !important;
	text-transform:none !important;
	box-shadow:none !important;
}

.header-main .header-button .button:hover{
	background:#9fbd00 !important;
	color:#fff !important;
}

/* Nút tìm kiếm hình vuông xanh */
.header-main .header-search{
	margin-left:10px !important;
}

.header-main .header-search > a{
	width:36px !important;
	height:36px !important;
	min-height:36px !important;
	display:flex !important;
	align-items:center;
	justify-content:center;
	padding:0 !important;
	border-radius:4px !important;
	background:#b6d600 !important;
	color:#fff !important;
}

.header-main .header-search > a:hover{
	background:#9fbd00 !important;
	color:#fff !important;
}

.header-main .header-search .icon-search{
	font-size:19px !important;
}

/* Menu xổ xuống */
.nav-dropdown{
	border:none !important;
	border-radius:4px;
	box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.nav-dropdown > li > a{
	color:#444 !important;
	font-size:15px !important;
	font-weight:400 !important;
	text-transform:none !important;
}

.nav-dropdown > li > a:hover{
	color:#a8c900 !important;
	background:#f7f7f7 !important;
}

/* Tablet */
@media (max-width:1100px){
	.header-main .header-nav > li{
		margin:0 7px !important;
	}

	.header-main .header-nav > li > a{
		font-size:14px !important;
	}

	.header-main .logo{
		width:205px !important;
	}
}

/* Mobile */
@media (max-width:849px){
	.header-main{
		height:70px !important;
	}

	.header-main .logo{
		width:180px !important;
	}

	.header-main .logo img{
		max-height:52px !important;
	}
}

/* ===============================
HOME-ABOUT: WYSIWYG + Image alt
================================ */

.home-about .about-wysiwyg{
	font-size:15px;
	line-height:1.8;
	color:#555;
}

.home-about .about-wysiwyg p{
	margin-bottom:12px;
}

.home-about .about-wysiwyg ul,
.home-about .about-wysiwyg ol{
	margin:10px 0 14px 20px;
}

.home-about .about-wysiwyg strong{
	color:#333;
}

/* Ảnh thay thế video trong section About */
.home-about .about-image{
	width:100%;
	height:auto;
	max-height:420px;
	object-fit:cover;
	border-radius:8px;
	display:block;
}

/* ===============================
HOME-COMPARE: Bảng So Sánh
================================ */

.home-compare{
	background:#f5f8f0;
	padding:60px 0;
}

.home-compare .home-title{
	font-size:26px;
	font-weight:700;
	color:#2a2a2a;
	text-align:center;
	margin-bottom:10px;
}

.home-compare .home-des{
	text-align:center;
	color:#777;
	margin-bottom:36px;
	font-size:15px;
}

/* Wrapper cuộn ngang trên mobile */
.compare-table-wrap{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	border-radius:10px;
	box-shadow:0 4px 24px rgba(0,0,0,.09);
}

/* Bảng chính */
.compare-table{
	width:100%;
	min-width:680px;
	border-collapse:collapse;
	background:#fff;
	font-size:14px;
	line-height:1.6;
}

/* Header bảng */
.compare-table thead tr{
	background:#2a5f14;
}

.compare-table thead th{
	padding:16px 18px;
	color:#fff;
	font-weight:600;
	font-size:14px;
	text-align:center;
	vertical-align:middle;
	border:none;
}

.compare-table thead th.col-criteria{
	background:#1e4510;
	text-align:left;
	width:20%;
}

.compare-table thead th.col-left{
	background:#5a7330;
	width:40%;
}

/* Cột Carton Đá – nổi bật */
.compare-table thead th.highlight-col{
	background:#a8cf00;
	color:#1e3a00;
	font-size:15px;
	width:40%;
}

/* Các hàng body */
.compare-table tbody tr{
	border-bottom:1px solid #e8eee0;
	transition:background .15s;
}

.compare-table tbody tr:nth-child(even){
	background:#f9fbf5;
}

.compare-table tbody tr:hover{
	background:#eef5d8;
}

/* Hàng nổi bật (cmp_highlight = true) */
.compare-table tbody tr.highlighted-row{
	background:#fffbe6;
	border-left:3px solid #a8cf00;
}

.compare-table tbody tr.highlighted-row td.highlight-col{
	background:#f0fad0;
	color:#2a5f14;
	font-weight:600;
}

.compare-table tbody td{
	padding:13px 18px;
	color:#444;
	vertical-align:top;
	border:none;
}

.compare-table tbody td.col-criteria{
	font-weight:600;
	color:#2a5f14;
	background:#f2f7e8;
	white-space:nowrap;
	font-size:13px;
}

.compare-table tbody td.col-left{
	color:#666;
}

.compare-table tbody td.highlight-col{
	color:#1e4510;
}

/* Nút CTA dưới bảng */
.compare-cta{
	text-align:center;
	margin-top:32px;
}

.compare-cta .home-more{
	display:inline-block;
	padding:13px 38px;
	background:#a8cf00;
	color:#1e3a00 !important;
	font-size:16px;
	font-weight:600;
	border-radius:30px;
	text-decoration:none;
	transition:background .2s, transform .2s;
	box-shadow:0 4px 14px rgba(168,207,0,.35);
}

.compare-cta .home-more:hover{
	background:#92b600;
	transform:translateY(-2px);
	box-shadow:0 6px 18px rgba(168,207,0,.45);
}

/* Responsive bảng */
@media (max-width:768px){
	.home-compare{
		padding:40px 0;
	}

	.home-compare .home-title{
		font-size:20px;
	}

	.compare-table{
		font-size:12px;
	}

	.compare-table thead th,
	.compare-table tbody td{
		padding:10px 12px;
	}

	.compare-table tbody td.col-criteria{
		white-space:normal;
		font-size:11px;
	}
}
/* ==========================================
   FONT CHUNG TOÀN WEBSITE
========================================== */

html,
body,
button,
input,
select,
textarea{
    font-family: 'Stavian', sans-serif !important;
}

body{
    font-size: 18px;
    font-weight: 400;
    color: #424242;
}


/* ==========================================
   MENU CHÍNH
========================================== */

.header-nav-main.nav > li > a,
.header-nav.nav > li > a,
.header-nav > li > a{
    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}


/* ==========================================
   TIÊU ĐỀ LỚN
========================================== */

#main .section-title,
#main .section-title h2,
#main .section-title-main,
#main .cth2,
#main .home-title,
#main .home-title h2{
    font-family: 'Stavian', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #174EA5 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}


/* ==========================================
   TIÊU ĐỀ H1, H2
========================================== */

#main h1,
#main h2{
    font-family: 'Stavian', sans-serif !important;
    font-weight: 700 !important;
    color: #174EA5 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#main h1{
    font-size: 40px !important;
}


/* ==========================================
   TIÊU ĐỀ NHỎ
========================================== */

#main h3{
    font-family: 'Stavian', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #222222 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}


/* ==========================================
   ĐOẠN VĂN NỘI DUNG
========================================== */

#main p,
#main .entry-content p,
#main .section p,
#main .text p,
#main .page-inner p,
#main .product-short-description p{
    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #424242 !important;
    line-height: 1.7 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}


/* ==========================================
   DANH SÁCH TRONG NỘI DUNG
   Không ảnh hưởng menu
========================================== */

#main .entry-content ul li,
#main .entry-content ol li,
#main .section ul li,
#main .section ol li,
#main .product-short-description li{
    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #424242 !important;
    line-height: 1.7 !important;
    text-transform: none !important;
}


/* ==========================================
   MENU CON
========================================== */

.nav-dropdown li a,
.header-nav-main .sub-menu li a{
    font-family: 'Stavian', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #222222 !important;
    text-transform: none !important;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media screen and (max-width: 849px){

    #main h1,
    #main h2,
    #main .section-title,
    #main .section-title h2,
    #main .section-title-main,
    #main .cth2,
    #main .home-title,
    #main .home-title h2{
        font-size: 32px !important;
    }

    #main h3{
        font-size: 22px !important;
    }

    #main p,
    #main .entry-content p,
    #main .section p,
    #main .entry-content li{
        font-size: 18px !important;
    }
}

@media screen and (max-width: 549px){

    #main h1,
    #main h2,
    #main .section-title,
    #main .section-title h2,
    #main .section-title-main,
    #main .cth2,
    #main .home-title,
    #main .home-title h2{
        font-size: 28px !important;
    }

    #main h3{
        font-size: 20px !important;
    }

    #main p,
    #main .entry-content p,
    #main .section p,
    #main .entry-content li{
        font-size: 17px !important;
    }
}
/* Tiêu đề Sản phẩm phổ biến ở trang Tin tức */
#main h5.inquiry-title,
#main .inquiry-title{
    font-family: 'Stavian', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #174EA5 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 30px !important;
}
/* =========================================
   TRANG VỀ CHÚNG TÔI
========================================= */

/* Tiêu đề lớn bên phải */
.banner-title-h1{
    font-family: 'Stavian', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #174EA5 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

/* Thanh danh mục trang con */
.pagenav-catelist{
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 20px !important;
}

/* Từng mục */
.pagenav-catelist li{
    margin: 0 36px 0 0 !important;
    padding: 0 !important;
}

/* Chữ menu trang con */
.pagenav-catelist li a{
    font-family: 'Stavian', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #222222 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 18px 0 !important;
    display: inline-block !important;
}

/* Hover và mục đang chọn */
.pagenav-catelist li a:hover,
.pagenav-catelist li.LocalCurrent a{
    color: #174EA5 !important;
}

/* Nội dung thường */
.about-us article,
.about-us article p,
.about-us article div{
    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #424242 !important;
}

/* Tiêu đề nhỏ trong nội dung */
.about-us article strong{
    font-weight: 700 !important;
    color: #222222 !important;
}

/* Mobile */
@media screen and (max-width: 849px){
    .banner-title-h1{
        font-size: 32px !important;
    }

    .pagenav-catelist{
        padding: 0 15px !important;
    }

    .pagenav-catelist li{
        width: 100% !important;
        margin: 0 !important;
    }

    .pagenav-catelist li a{
        font-size: 17px !important;
        padding: 10px 0 !important;
    }

    .about-us article,
    .about-us article p,
    .about-us article div{
        font-size: 18px !important;
    }
}
/* ==================================================
   SECTION VỀ CHÚNG TÔI
================================================== */

.home-about{
    position: relative;
    padding: 70px 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(36, 153, 93, 0.10),
            transparent 34%
        ),
        #f7f8f8 !important;
}

/* Khung tổng */
.home-about .l-wrap{
    width: 100% !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 1fr) !important;
    gap: 70px !important;
    align-items: stretch !important;

    box-sizing: border-box !important;
}

/* Hai cột */
.home-about .aboutinfo,
.home-about .aboutimg{
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
}

/* ==================================================
   CỘT TRÁI
================================================== */

.home-about .aboutinfo{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Tiêu đề lớn */
.home-about .home-title{
    position: relative !important;

    margin: 0 0 38px !important;
    padding: 0 0 18px !important;

    font-family: 'Stavian', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    color: #174EA5 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Gạch xanh dưới tiêu đề */
.home-about .home-title::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 78px;
    height: 4px;

    border-radius: 10px;
    background: #29975d;
}

/* Nội dung */
.home-about .about-wysiwyg,
.home-about .about-wysiwyg p,
.home-about .about-wysiwyg div{
    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;

    color: #424242 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.home-about .about-wysiwyg p,
.home-about .about-wysiwyg div{
    margin: 0 0 12px !important;
}

.home-about .about-wysiwyg strong{
    color: #222222 !important;
    font-weight: 700 !important;
}

/* Đọc thêm */
.home-about .more{
    display: inline-block !important;
    align-self: flex-start !important;

    margin-top: 12px !important;

    font-family: 'Stavian', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;

    color: #9fbd00 !important;
    text-decoration: underline !important;
    text-transform: none !important;
}

.home-about .more:hover{
    color: #174EA5 !important;
}


/* ==================================================
   CỘT PHẢI - 3 KHỐI GIÁ TRỊ
================================================== */

.home-about .aboutimg{
    display: flex !important;
    align-items: stretch !important;
}

/* Khung chứa 3 ô */
.home-about .about-value-boxes{
    width: 100% !important;

    display: grid !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 18px !important;
}

/* Mỗi ô */
.home-about .about-value-item{
    position: relative !important;
    overflow: hidden !important;

    min-height: 0 !important;
    height: auto !important;
    padding: 22px 28px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    background:
        linear-gradient(
            135deg,
            #202321 0%,
            #282c29 100%
        ) !important;

    border: 1px solid #3d4540 !important;
    border-left: 4px solid #43ad76 !important;
    border-radius: 7px !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13) !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease !important;
}

/* Trang trí góc */
.home-about .about-value-item::before{
    content: "";
    position: absolute;
    top: -48px;
    right: -48px;

    width: 112px;
    height: 112px;

    border-radius: 50%;
    background: rgba(67, 173, 118, 0.13);
}

/* Hover */
.home-about .about-value-item:hover{
    transform: translateX(-8px) !important;
    border-color: rgba(67, 173, 118, 0.75) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.20) !important;
}

/* Tiêu đề xanh trong ô */
section.home-about
.aboutimg
.about-value-boxes
.about-value-item > h3{
    position: relative !important;
    z-index: 2 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin: 0 0 10px !important;
    padding: 0 !important;

    font-family: 'Stavian', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    color: #62c18f !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Nội dung trắng trong ô */
section.home-about
.aboutimg
.about-value-boxes
.about-value-item > p{
    position: relative !important;
    z-index: 2 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: 'Stavian', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;

    color: #f2f4f3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}


/* ==================================================
   HIỆU ỨNG XUẤT HIỆN
================================================== */

.home-about .about-value-item{
    animation: aboutValueIn 0.7s ease both;
}

.home-about .about-value-item:nth-child(1){
    animation-delay: 0.10s;
}

.home-about .about-value-item:nth-child(2){
    animation-delay: 0.22s;
}

.home-about .about-value-item:nth-child(3){
    animation-delay: 0.34s;
}

@keyframes aboutValueIn{
    from{
        opacity: 0;
        transform: translateX(35px);
    }

    to{
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==================================================
   TABLET
================================================== */

@media screen and (max-width: 849px){

    .home-about{
        padding: 50px 0 !important;
    }

    .home-about .l-wrap{
        display: block !important;
        padding: 0 20px !important;
    }

    .home-about .aboutimg{
        margin-top: 35px !important;
    }

    .home-about .about-value-boxes{
        display: flex !important;
        flex-direction: column !important;
    }

    .home-about .about-value-item{
        min-height: 130px !important;
    }

    .home-about .home-title{
        font-size: 32px !important;
        margin-bottom: 30px !important;
    }

    .home-about .about-wysiwyg,
    .home-about .about-wysiwyg p,
    .home-about .about-wysiwyg div{
        font-size: 18px !important;
    }
}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 549px){

    .home-about{
        padding: 40px 0 !important;
    }

    .home-about .l-wrap{
        padding: 0 15px !important;
    }

    .home-about .home-title{
        font-size: 28px !important;
    }

    .home-about .about-wysiwyg,
    .home-about .about-wysiwyg p,
    .home-about .about-wysiwyg div{
        font-size: 17px !important;
        line-height: 1.65 !important;
    }

    .home-about .about-value-item{
        padding: 22px 22px !important;
    }

    section.home-about
    .aboutimg
    .about-value-boxes
    .about-value-item > h3{
        font-size: 21px !important;
    }

    section.home-about
    .aboutimg
    .about-value-boxes
    .about-value-item > p{
        font-size: 16px !important;
    }
}
/* Ép chữ trong 3 khối luôn sáng rõ */
.home-about .about-value-item > h3{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #62c18f !important;
    font-family: 'Stavian', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    filter: none !important;
}

.home-about .about-value-item > p{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: none !important;
}

/* Hiệu ứng nhanh hơn */
.home-about .about-value-item{
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease !important;
    cursor: pointer;
}

/* Hiệu ứng khi rê chuột */
.home-about .about-value-item:hover{
    transform: translateX(-5px) !important;
    border-color: #62c18f !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.18) !important;
}

/* Hiệu ứng khi nhấn */
.home-about .about-value-item:active{
    transform: translateX(-2px) scale(.99) !important;
    transition-duration: .08s !important;
}

/* Tắt animation cũ nếu còn */
.home-about .about-value-item{
    animation: none !important;
}
/* ==================================================
   HỒ SƠ CHẤT LƯỢNG
================================================== */

.quality-profile{
    padding: 65px 0 !important;
    background: #ffffff !important;
}

.quality-profile .l-wrap{
    width: 100% !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

/* Tiêu đề */
.quality-heading{
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid #174EA5;
}

.quality-heading h2{
    margin: 0 !important;
    font-family: 'Stavian', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #174EA5 !important;
    text-transform: none !important;
}

/* Danh sách */
.quality-list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

/* Từng hồ sơ */
.quality-item{
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e5e5e5;
    text-decoration: none !important;

    box-shadow: 0 8px 25px rgba(0,0,0,.08);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.quality-item:hover{
    transform: translateY(-5px);
    border-color: #174EA5;
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

/* Ảnh hồ sơ */
.quality-image{
    height: 390px;
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
}

.quality-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Tên hồ sơ */
.quality-name{
    margin-top: auto;
    padding: 16px 12px;

    background: #eeeeee;

    font-family: 'Stavian', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #26364d !important;
    text-align: center;
    text-transform: none !important;
}

/* Mô tả dưới section */
.quality-description{
    margin-top: 25px;

    font-family: 'Stavian', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: #424242 !important;
}

/* Tablet */
@media screen and (max-width: 849px){

    .quality-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quality-image{
        height: 350px;
    }

    .quality-heading h2{
        font-size: 32px !important;
    }
}

/* Mobile */
@media screen and (max-width: 549px){

    .quality-profile{
        padding: 45px 0 !important;
    }

    .quality-profile .l-wrap{
        padding: 0 15px !important;
    }

    .quality-list{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .quality-image{
        height: auto;
        min-height: 350px;
    }

    .quality-heading h2{
        font-size: 28px !important;
    }
}
/* Danh sách hồ sơ chất lượng */
.quality-list{
    display: grid !important;
    grid-template-columns: repeat(
        auto-fit,
        minmax(260px, 300px)
    ) !important;

    justify-content: center !important;
    gap: 28px !important;
    align-items: stretch !important;
}

/* Từng hồ sơ */
.quality-item{
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
}\
/* ==================================================
   BAO BÌ CARTON THEO NGÀNH
   - 6 thẻ trên desktop
   - ảnh cân đối
   - nút trái/phải đẹp
   - hỗ trợ kéo chuột, autoplay, loop vô hạn
================================================== */

.home-helpcenter{
    position: relative !important;
    width: 100% !important;
    padding: 55px 0 60px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/* Khung tổng */
.home-helpcenter .l-wrap{
    position: relative !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 78px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    cursor: grab !important;
    touch-action: pan-y !important;
}

.home-helpcenter .l-wrap.is-dragging{
    cursor: grabbing !important;
    user-select: none !important;
}

/* ==================================================
   TIÊU ĐỀ
================================================== */

.home-helpcenter .home-title{
    margin: 0 0 6px !important;

    font-family: 'Stavian', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    color: #174EA5 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.home-helpcenter .home-des{
    margin: 0 0 30px !important;

    font-family: 'Stavian', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    color: #424242 !important;
    text-align: center !important;
}

/* ==================================================
   TRACK SLIDER
================================================== */

.home-helpcenter ul.list{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 16px !important;

    width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
    overflow: visible !important;

    will-change: transform !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
}

/* ==================================================
   THẺ NGÀNH
================================================== */

.home-helpcenter ul.list > li{
    flex: 0 0 310px !important;
    width: 310px !important;
    min-width: 310px !important;
    max-width: 310px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    overflow: hidden !important;

    background: #f4f4f4 !important;
    border: 1px solid #eeeeee !important;
    border-radius: 3px !important;

    box-shadow: none !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
}

.home-helpcenter ul.list > li:hover{
    transform: translateY(-4px) !important;
    border-color: #dfe5df !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
}

/* Tên ngành */
.home-helpcenter ul.list > li .info{
    width: 100% !important;
    min-height: 72px !important;
    padding: 18px 18px 10px !important;

    display: flex !important;
    align-items: flex-start !important;

    box-sizing: border-box !important;
    background: #f4f4f4 !important;
}

.home-helpcenter ul.list > li .info,
.home-helpcenter ul.list > li .info a{
    font-family: 'Stavian', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    color: #111111 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Khung ảnh */
.home-helpcenter ul.list > li .img{
    width: 100% !important;
    height: 350px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #f4f4f4 !important;
}

/* Lớp ảnh bên trong */
.home-helpcenter ul.list > li .imgbg{
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    overflow: hidden !important;
}

/* Ảnh */
.home-helpcenter ul.list > li .img img{
    display: block !important;

    width: 100% !important;
    height: 72% !important;

    object-fit: cover !important;
    object-position: center bottom !important;

    transform: none !important;
    transition: none !important;

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* Không zoom ảnh khi hover */
.home-helpcenter ul.list > li:hover .img img{
    transform: none !important;
}
.home-helpcenter ul.list > li .img{
    height: 320px !important;
}

.home-helpcenter ul.list > li .img img{
    width: 100% !important;
    height: 78% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
}
/* ==================================================
   NÚT TRÁI / PHẢI
================================================== */

.industry-arrow{
    position: absolute !important;
    top: 61% !important;
    transform: translateY(-50%) !important;

    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #b7d900 !important;
    color: #ffffff !important;

    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    z-index: 999 !important;

    box-shadow: 0 5px 16px rgba(0,0,0,.18) !important;

    transition:
        background .12s ease,
        transform .12s ease,
        box-shadow .12s ease !important;
}

.industry-prev{
    left: -20px !important;
}

.industry-next{
    right: -20px !important;
}

.industry-arrow:hover{
    background: #174EA5 !important;
    transform: translateY(-50%) scale(1.07) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
}

.industry-arrow:active{
    transform: translateY(-50%) scale(.94) !important;
}

/* ==================================================
   TABLET
================================================== */

@media screen and (max-width: 849px){

    .home-helpcenter{
        padding: 50px 0 55px !important;
    }

    .home-helpcenter .l-wrap{
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    .home-helpcenter .home-title{
        font-size: 32px !important;
    }

    .home-helpcenter .home-des{
        font-size: 17px !important;
        margin-bottom: 28px !important;
    }

    .home-helpcenter ul.list > li{
        flex-basis: 225px !important;
        width: 225px !important;
        min-width: 225px !important;
        max-width: 225px !important;
    }

    .home-helpcenter ul.list > li .img{
        height: 340px !important;
    }

    .industry-prev{
        left: 7px !important;
    }

    .industry-next{
        right: 7px !important;
    }
}

/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 549px){

    .home-helpcenter{
        padding: 40px 0 45px !important;
    }

    .home-helpcenter .l-wrap{
        padding-left: 46px !important;
        padding-right: 46px !important;
    }

    .home-helpcenter .home-title{
        font-size: 28px !important;
    }

    .home-helpcenter .home-des{
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 22px !important;
    }

    .home-helpcenter ul.list{
        gap: 12px !important;
    }

    .home-helpcenter ul.list > li{
        flex-basis: 76vw !important;
        width: 76vw !important;
        min-width: 76vw !important;
        max-width: 76vw !important;
    }

    .home-helpcenter ul.list > li .info{
        min-height: 64px !important;
        padding: 16px 16px 8px !important;
    }

    .home-helpcenter ul.list > li .info,
    .home-helpcenter ul.list > li .info a{
        font-size: 17px !important;
    }

    .home-helpcenter ul.list > li .img{
        height: 335px !important;
    }

    .home-helpcenter ul.list > li .img img{
        height: 74% !important;
    }

    .industry-arrow{
        width: 40px !important;
        height: 40px !important;
        font-size: 22px !important;
    }

    .industry-prev{
        left: 2px !important;
    }

    .industry-next{
        right: 2px !important;
    }
}
/* Bắt buộc khung chứa nút phải có position relative */
.home-helpcenter .l-wrap{
    position: relative !important;
}

/* Nút điều hướng slider ngành */
.home-helpcenter .industry-arrow{
    position: absolute !important;
    top: 61% !important;
    transform: translateY(-50%) !important;

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: #b7d900 !important;
    color: #ffffff !important;

    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 9999 !important;

    box-shadow: 0 5px 16px rgba(0,0,0,.20) !important;

    transition:
        background-color .14s ease,
        transform .14s ease,
        box-shadow .14s ease !important;
}

.home-helpcenter .industry-prev{
    left: 18px !important;
}

.home-helpcenter .industry-next{
    right: 18px !important;
}

.home-helpcenter .industry-arrow:hover{
    background: #174EA5 !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.25) !important;
}

.home-helpcenter .industry-arrow:active{
    transform: translateY(-50%) scale(.92) !important;
}

@media screen and (max-width: 549px){
    .home-helpcenter .industry-arrow{
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 21px !important;
    }

    .home-helpcenter .industry-prev{
        left: 3px !important;
    }

    .home-helpcenter .industry-next{
        right: 3px !important;
    }
}
.home-helpcenter ul.list > li > a{
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

.home-helpcenter ul.list > li .img,
.home-helpcenter ul.list > li .title,
.home-helpcenter ul.list > li .info{
    pointer-events: none;
}

.home-helpcenter .industry-arrow{
    pointer-events: auto !important;
}
/* ==================================================
   HEADER – CHỈ CHỈNH FONT VÀ MÀU SẮC
   Không thay đổi chiều cao, vị trí hoặc cấu trúc
================================================== */

/* --------------------------------------------------
   1. FONT MENU CHÍNH TOÀN WEBSITE
-------------------------------------------------- */

.header-nav-main > li > a,
.header-nav > li > a,
.header-nav-main.nav > li > a,
.header-nav.nav > li > a{
    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
}


/* ==================================================
   HEADER TOÀN WEBSITE
   - đồng nhất font
   - trang chủ chữ đen
   - trang con chữ trắng
   - sticky nền đen
   - active xanh vàng
================================================== */

/* ==================================================
   1. FONT MENU CHÍNH
================================================== */

.header-nav-main > li > a,
.header-nav > li > a,
.header-nav-main.nav > li > a,
.header-nav.nav > li > a{
    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
}


/* ==================================================
   2. TRANG CHỦ
================================================== */

body.home .header-nav-main > li > a,
body.home .header-nav > li > a{
    color: #222222 !important;
}

/* Hover */
body.home .header-nav-main > li > a:hover,
body.home .header-nav > li > a:hover{
    color: #b7d900 !important;
}

/* Mục đang chọn */
body.home .header-nav-main > li.active > a,
body.home .header-nav-main > li.current-menu-item > a,
body.home .header-nav-main > li.current-menu-parent > a,
body.home .header-nav > li.active > a,
body.home .header-nav > li.current-menu-item > a,
body.home .header-nav > li.current-menu-parent > a{
    color: #b7d900 !important;
}


/* ==================================================
   3. TRANG CON
================================================== */

body:not(.home) .header-nav-main > li > a,
body:not(.home) .header-nav > li > a{
    color: #ffffff !important;
}

/* Hover */
body:not(.home) .header-nav-main > li > a:hover,
body:not(.home) .header-nav > li > a:hover{
    color: #b7d900 !important;
}

/* Mục đang chọn */
body:not(.home) .header-nav-main > li.active > a,
body:not(.home) .header-nav-main > li.current-menu-item > a,
body:not(.home) .header-nav-main > li.current-menu-parent > a,
body:not(.home) .header-nav > li.active > a,
body:not(.home) .header-nav > li.current-menu-item > a,
body:not(.home) .header-nav > li.current-menu-parent > a{
    color: #b7d900 !important;
}


/* ==================================================
   4. GẠCH CHÂN ACTIVE
================================================== */

.header-nav-main > li.active > a::after,
.header-nav-main > li.current-menu-item > a::after,
.header-nav-main > li.current-menu-parent > a::after,
.header-nav > li.active > a::after,
.header-nav > li.current-menu-item > a::after,
.header-nav > li.current-menu-parent > a::after{
    background-color: #b7d900 !important;
}


/* ==================================================
   5. MŨI TÊN MENU CON
================================================== */

body.home .header-nav .icon-angle-down,
body.home .header-nav-main .icon-angle-down{
    color: #555555 !important;
}

body:not(.home) .header-nav .icon-angle-down,
body:not(.home) .header-nav-main .icon-angle-down{
    color: #bbbbbb !important;
}


/* ==================================================
   6. TOP BAR
================================================== */

.header-top,
.header-top a,
.header-top span,
.header-top i{
    
    font-size: 14px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Trang chủ */
body.home .header-top,
body.home .header-top a,
body.home .header-top span,
body.home .header-top i{
    color: #666666 !important;
}

/* Trang con */
body:not(.home) .header-top,
body:not(.home) .header-top a,
body:not(.home) .header-top span,
body:not(.home) .header-top i{
    color: #d0d0d0 !important;
}


/* ==================================================
   7. NÚT NHẬN XÉT
================================================== */

.header-button .button,
.header-nav a.button,
.header-nav-main a.button{
    font-family: 'Stavian', sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;

    color: #ffffff !important;
    background-color: #b7d900 !important;
    border-color: #b7d900 !important;
}

.header-button .button:hover,
.header-nav a.button:hover,
.header-nav-main a.button:hover{
    color: #ffffff !important;
    background-color: #174EA5 !important;
    border-color: #174EA5 !important;
}


/* ==================================================
   8. KÍNH LÚP
   Chỉ chỉnh màu, không chỉnh kích thước form
================================================== */

.header-search > a,
.header-search > a i,
.header-search .icon-search{
    color: #111111 !important;
}

.header-search > a{
    background-color: #b7d900 !important;
}

/* Nút bên trong form tìm kiếm */
.header-search-form button,
.searchform-wrapper button,
.live-search-form button{
    color: #111111 !important;
    background-color: #b7d900 !important;
    border-color: #b7d900 !important;
}

/* Ô nhập tìm kiếm */
.header-search-form input,
.searchform-wrapper input,
.live-search-form input{
    font-family: 'Stavian', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.header-search-form input::placeholder,
.searchform-wrapper input::placeholder,
.live-search-form input::placeholder{
    color: #888888 !important;
    opacity: 1 !important;
}


/* ==================================================
   9. MENU THẢ XUỐNG
================================================== */

.nav-dropdown,
.nav-dropdown-default{
    font-family: 'Stavian', sans-serif !important;
}

.nav-dropdown li > a,
.nav-dropdown-default li > a{
    font-family: 'Stavian', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    color: #333333 !important;
    text-transform: none !important;
}

.nav-dropdown li > a:hover,
.nav-dropdown-default li > a:hover{
    color: #b7d900 !important;
}


/* ==================================================
   10. STICKY HEADER KHI CUỘN
================================================== */

/* Nền đen */
.header-wrapper.stuck,
.stuck .header-main,
.header-main.stuck{
    background-color: #121212 !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.18) !important;
}

/* Lớp nền Flatsome */
.header-wrapper.stuck .header-bg-container,
.header-wrapper.stuck .header-bg-color,
.stuck .header-bg-container,
.stuck .header-bg-color{
    background-color: #121212 !important;
    opacity: 1 !important;
}

/* Menu sticky màu trắng */
.header-wrapper.stuck .header-nav-main > li > a,
.header-wrapper.stuck .header-nav > li > a,
.stuck .header-nav-main > li > a,
.stuck .header-nav > li > a{
    color: #ffffff !important;

    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Hover sticky */
.header-wrapper.stuck .header-nav-main > li > a:hover,
.header-wrapper.stuck .header-nav > li > a:hover,
.stuck .header-nav-main > li > a:hover,
.stuck .header-nav > li > a:hover{
    color: #b7d900 !important;
}

/* Active sticky */
.header-wrapper.stuck .header-nav-main > li.active > a,
.header-wrapper.stuck .header-nav-main > li.current-menu-item > a,
.header-wrapper.stuck .header-nav-main > li.current-menu-parent > a,
.header-wrapper.stuck .header-nav > li.active > a,
.header-wrapper.stuck .header-nav > li.current-menu-item > a,
.header-wrapper.stuck .header-nav > li.current-menu-parent > a,
.stuck .header-nav-main > li.active > a,
.stuck .header-nav-main > li.current-menu-item > a,
.stuck .header-nav-main > li.current-menu-parent > a,
.stuck .header-nav > li.active > a,
.stuck .header-nav > li.current-menu-item > a,
.stuck .header-nav > li.current-menu-parent > a{
    color: #b7d900 !important;
}

/* Mũi tên sticky */
.header-wrapper.stuck .icon-angle-down,
.stuck .icon-angle-down{
    color: #bbbbbb !important;
}

/* Top bar sticky */
.header-wrapper.stuck .header-top,
.stuck .header-top{
    background-color: #121212 !important;
}

.header-wrapper.stuck .header-top,
.header-wrapper.stuck .header-top a,
.header-wrapper.stuck .header-top span,
.header-wrapper.stuck .header-top i,
.stuck .header-top,
.stuck .header-top a,
.stuck .header-top span,
.stuck .header-top i{
    color: #d0d0d0 !important;
}

/* Logo sticky rõ hơn */
.header-wrapper.stuck .logo img,
.stuck .logo img{
    opacity: 1 !important;
    filter: brightness(1.08) contrast(1.04) !important;
}

/* Nút nhận xét sticky */
.header-wrapper.stuck .header-button .button,
.header-wrapper.stuck .nav > li > a.button,
.stuck .header-button .button,
.stuck .nav > li > a.button{
    color: #ffffff !important;
    background-color: #b7d900 !important;
    border-color: #b7d900 !important;
}

/* Kính lúp sticky */
.header-wrapper.stuck .header-search > a,
.stuck .header-search > a{
    color: #111111 !important;
    background-color: #b7d900 !important;
}


/* ==================================================
   11. MOBILE
================================================== */

@media screen and (max-width: 849px){

    .header-nav-main > li > a,
    .header-nav > li > a{
        font-size: 18px !important;
    }

    .nav-sidebar li > a{
        font-family: 'Stavian', sans-serif !important;
        font-size: 17px !important;
        font-weight: 600 !important;

        text-transform: none !important;
    }
}
/* =========================================
   STICKY HEADER NỀN ĐEN + CHỮ TRẮNG
========================================= */

/* Nền đen khi header sticky */
.header-wrapper.stuck,
.header-wrapper.stuck #masthead,
.header-wrapper.stuck .header-main,
.stuck #masthead,
.stuck .header-main{
    background: #121212 !important;
    background-color: #121212 !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.20) !important;
}

/* Lớp nền của Flatsome */
.header-wrapper.stuck .header-bg-container,
.header-wrapper.stuck .header-bg-color,
.stuck .header-bg-container,
.stuck .header-bg-color{
    background: #121212 !important;
    opacity: 1 !important;
}

/* Tất cả menu thành trắng khi sticky */
.header-wrapper.stuck .header-nav-main > li > a,
.header-wrapper.stuck .header-nav > li > a,
.header-wrapper.stuck a.nav-top-link,
.stuck .header-nav-main > li > a,
.stuck .header-nav > li > a,
.stuck a.nav-top-link{
    color: #ffffff !important;
    opacity: 1 !important;

    font-family: 'Stavian', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Hover */
.header-wrapper.stuck .header-nav-main > li > a:hover,
.header-wrapper.stuck .header-nav > li > a:hover,
.header-wrapper.stuck a.nav-top-link:hover,
.stuck .header-nav-main > li > a:hover,
.stuck .header-nav > li > a:hover,
.stuck a.nav-top-link:hover{
    color: #b7d900 !important;
}

/* Mục đang chọn */
.header-wrapper.stuck .current-menu-item > a,
.header-wrapper.stuck .current-menu-parent > a,
.header-wrapper.stuck .current_page_item > a,
.header-wrapper.stuck li.active > a,
.stuck .current-menu-item > a,
.stuck .current-menu-parent > a,
.stuck .current_page_item > a,
.stuck li.active > a{
    color: #b7d900 !important;
}

/* Mũi tên dropdown */
.header-wrapper.stuck .icon-angle-down,
.stuck .icon-angle-down{
    color: #ffffff !important;
}

/* Top bar */
.header-wrapper.stuck .header-top,
.stuck .header-top{
    background: #121212 !important;
}

.header-wrapper.stuck .header-top,
.header-wrapper.stuck .header-top a,
.header-wrapper.stuck .header-top span,
.header-wrapper.stuck .header-top i,
.stuck .header-top,
.stuck .header-top a,
.stuck .header-top span,
.stuck .header-top i{
    color: #d0d0d0 !important;
}

/* Nút kính lúp */
.header-wrapper.stuck .header-search > a,
.stuck .header-search > a{
    background: #b7d900 !important;
    color: #111111 !important;
}

/* Nút nhận xét */
.header-wrapper.stuck .header-button .button,
.stuck .header-button .button{
    background: #b7d900 !important;
    border-color: #b7d900 !important;
    color: #ffffff !important;
}
/* Khi cuộn xuống: chữ menu chuyển thành màu đen */
body.header-is-scrolled .header-nav-main.nav > li > a,
body.header-is-scrolled .header-nav > li > a,
body.header-is-scrolled a.nav-top-link{
    color: #222222 !important;
    opacity: 1 !important;
}

/* Mục đang chọn vẫn xanh vàng */
body.header-is-scrolled .header-nav-main.nav > li.active > a,
body.header-is-scrolled .header-nav-main.nav > li.current-menu-item > a,
body.header-is-scrolled .header-nav-main.nav > li.current-menu-parent > a,
body.header-is-scrolled .header-nav > li.active > a,
body.header-is-scrolled .header-nav > li.current-menu-item > a,
body.header-is-scrolled .header-nav > li.current-menu-parent > a{
    color: #b7d900 !important;
}

/* Mũi tên dropdown khi cuộn */
body.header-is-scrolled .header-nav-main .icon-angle-down,
body.header-is-scrolled .header-nav .icon-angle-down{
    color: #555555 !important;
}
/* ==================================================
   CĂN ĐỒNG BỘ TOÀN BỘ NỘI DUNG TRANG CHỦ
================================================== */

:root{
    --home-max-width: 1380px;
    --home-padding: 20px;
}

/* Khung nội dung dùng chung */
.home #main .l-wrap{
    width: 100% !important;
    max-width: var(--home-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--home-padding) !important;
    padding-right: var(--home-padding) !important;
    box-sizing: border-box !important;
}

/* ==================================================
   HỒ SƠ CHẤT LƯỢNG
================================================== */

.home .quality-profile{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.home .quality-profile > .l-wrap{
    width: 100% !important;
    max-width: var(--home-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--home-padding) !important;
    padding-right: var(--home-padding) !important;
    box-sizing: border-box !important;
}

.home .quality-heading,
.home .quality-list{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ==================================================
   VÌ SAO NÊN CHỌN CARTON ĐÁ
================================================== */

.home .home-choose .info{
    text-align: left !important;
}

.home .home-choose .info .p1{
    text-align: left !important;
}

.home .home-choose .info .p2{
    text-align: justify !important;
    text-justify: inter-word;
}

/* ==================================================
   BAO BÌ CARTON THEO NGÀNH
================================================== */

.home .home-helpcenter{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 30px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Khung trực tiếp bên trong section */
.home .home-helpcenter > .l-wrap,
.home .home-helpcenter > .container,
.home .home-helpcenter > div:first-child{
    width: 100% !important;
    max-width: var(--home-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--home-padding) !important;
    padding-right: var(--home-padding) !important;
    box-sizing: border-box !important;
}

/* Tiêu đề và mô tả */
.home .home-helpcenter h2,
.home .home-helpcenter .home-title,
.home .home-helpcenter .title,
.home .home-helpcenter > div > p{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Slider */
.home .home-helpcenter .swiper,
.home .home-helpcenter .swiper-container,
.home .home-helpcenter .helpcenter-list{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.home .home-helpcenter .swiper-wrapper{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Không ép các lớp con về calc gây co khung */
.home .home-helpcenter > div > div{
    max-width: none;
}

/* ==================================================
   TABLET
================================================== */

@media screen and (max-width: 849px){

    :root{
        --home-padding: 15px;
    }

    .home .home-helpcenter{
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }
}

/* ==================================================
   ĐIỆN THOẠI
================================================== */

@media screen and (max-width: 549px){

    :root{
        --home-padding: 12px;
    }

    .home .quality-heading h2,
    .home .home-helpcenter h2{
        font-size: 24px !important;
    }
}
/* Hiệu ứng hover toàn bộ phần text */
.products .product-small{
    transition: all .3s ease;
}

/* Phần dưới ảnh */
.products .product-small .box-text-products{
    transition: all .3s ease;
}

/* Hover */
.products .product-small:hover .box-text-products{
    background: #b7dc00 !important;
}

/* Danh mục */
.products .product-small:hover .category,
.products .product-small:hover .category a{
    color: #4f4f4f !important;
}

/* Tên sản phẩm */
.products .product-small:hover .product-title,
.products .product-small:hover .product-title a{
    background: transparent !important;
    color: #222 !important;
}

/* Giá */
.products .product-small:hover .price,
.products .product-small:hover .woocommerce-Price-amount{
    color: #222 !important;
    font-weight: 700 !important;
}

/* Padding cho toàn khối */
.products .product-small .box-text-products{
    padding: 12px 15px !important;
}
/* Ẩn hoàn toàn Quick View */
.products .quick-view,
.products .quick-view-button,
.products .quick-view-overlay{
    display: none !important;
}
/* =====================================
   CONTACT FORM 7 - CTA TOÀN WEBSITE
===================================== */

/* Căn giữa khung chứa nút */
.wpcf7 form p:last-child,
.wpcf7 .submit-wrap,
.wpcf7 .wpcf7-form-control-wrap + br + input,
.wpcf7 form .has-spinner{
    text-align: center !important;
}

/* Khung chứa nút */
.wpcf7 form p:last-child{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 25px 0 0 !important;
}

/* Nút Submit */
.wpcf7 input[type="submit"]{
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 190px !important;
    height: 48px !important;

    margin: 0 auto !important;
    padding: 0 30px !important;

    background: #b7d800 !important;
    color: #222 !important;

    border: none !important;
    border-radius: 0 !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Hover */
.wpcf7 input[type="submit"]:hover{
    background: #a8c800 !important;
}
/* =====================================
   CĂN GIỮA NÚT GỬI YÊU CẦU TOÀN WEBSITE
===================================== */

/* Khung Contact Form 7 */
.wpcf7,
.wpcf7 form{
    width: 100% !important;
}

/* Mọi khung chứa nút submit */
.wpcf7 .submit-wrap,
.wpcf7 form p:has(input[type="submit"]){
    width: 100% !important;
    max-width: none !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 25px 0 0 !important;
    padding: 0 !important;

    float: none !important;
    text-align: center !important;
    clear: both !important;
}

/* Nút gửi */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit{
    display: block !important;

    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    height: 48px !important;

    margin: 0 auto !important;
    padding: 0 20px !important;

    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    background: #b8d800 !important;
    color: #111 !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 48px !important;
    text-align: center !important;
}

/* Spinner không làm lệch nút */
.wpcf7 .wpcf7-spinner{
    position: absolute !important;
}
/* ===== Nút Gửi yêu cầu ===== */

.submit-wrap{
    width: 100% !important;
    text-align: center !important;
    margin-top: 25px !important;
}

.submit-wrap input[type="submit"],
.submit-wrap .wpcf7-submit,
#wmkcfb-submit{
    display: inline-block !important;
    width: 170px !important;
    height: 44px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: #b8d800 !important;
    color: #111 !important;

    border: none !important;
    border-radius: 3px !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 44px !important;
    text-align: center !important;

    float: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: .3s;
}

.submit-wrap input[type="submit"]:hover,
.submit-wrap .wpcf7-submit:hover,
#wmkcfb-submit:hover{
    background: #a6c600 !important;
}
/* =========================================
   CĂN GIỮA MENU CON: LIÊN HỆ + VỀ CHÚNG TÔI
========================================= */

#main .pagenav-catelist{
    width: 100% !important;
    max-width: none !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;

    margin: 0 !important;
    padding: 0 20px !important;

    list-style: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Từng mục */
#main .pagenav-catelist > li{
    display: block !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Link trong menu */
#main .pagenav-catelist > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 52px !important;
    padding: 0 24px !important;

    text-align: center !important;
    white-space: nowrap !important;
}
/* =========================================
   TAB DANH MỤC Ở TRANG SẢN PHẨM
========================================= */

/* Chỉ áp dụng trên trang archive sản phẩm */
body.archive.tax-product_cat #main .pagenav-catelist{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 1380px !important;
    margin: 0 auto 24px !important;
    padding: 14px 18px !important;

    background: #fff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 12px !important;
    box-shadow: 0 7px 20px rgba(0,0,0,.06) !important;

    list-style: none !important;
    box-sizing: border-box !important;
}

/* Từng mục */
body.archive.tax-product_cat #main .pagenav-catelist > li{
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    float: none !important;
    list-style: none !important;
}

/* Link danh mục */
body.archive.tax-product_cat #main .pagenav-catelist > li > a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    padding: 10px 18px !important;

    background: #f7f7f7 !important;
    color: #222 !important;

    border: 1px solid #e7e7e7 !important;
    border-radius: 7px !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: nowrap !important;

    transition: all .25s ease !important;
}

/* Hover */
body.archive.tax-product_cat #main .pagenav-catelist > li > a:hover{
    background: #b8d800 !important;
    color: #111 !important;
    border-color: #b8d800 !important;

    transform: translateY(-3px) !important;
    box-shadow: 0 7px 14px rgba(0,0,0,.12) !important;
}

/* Danh mục đang chọn */
body.archive.tax-product_cat #main .pagenav-catelist > li.current-cat > a,
body.archive.tax-product_cat #main .pagenav-catelist > li.active > a{
    background: #b8d800 !important;
    color: #111 !important;
    border-color: #b8d800 !important;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.12) !important;
}

/* Khung thông báo không có sản phẩm */
body.archive.tax-product_cat .spc-cat-layout{
    margin-bottom: 24px !important;
}

body.archive.tax-product_cat .woocommerce-info,
body.archive.tax-product_cat .woocommerce-no-products-found{
    margin: 0 !important;
    padding: 22px 24px !important;

    background: #fff !important;
    border: 0 !important;
    border-left: 4px solid #b8d800 !important;
    border-radius: 10px !important;

    color: #666 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}
/* ==================================================
   ĐỒNG BỘ KHOẢNG CÁCH GIỮA CÁC KHUNG
================================================== */

body.tax-product_cat{
    --product-block-gap: 32px;
    --product-box-padding: 20px;
}

/* Khoảng cách chung giữa menu, nội dung, danh sách */
body.tax-product_cat #main .csp-cat-sidebar,
body.tax-product_cat #main .woocommerce-no-products-found,
body.tax-product_cat #main .woocommerce-info,
body.tax-product_cat #main .csp-cat-content h2,
body.tax-product_cat #main .csp-cat-content .pro-title,
body.tax-product_cat #main .csp-cat-content .popular-title{
    margin-bottom: var(--product-block-gap) !important;
}

/* Danh sách sản phẩm dùng gap thay vì margin lệch từng item */
body.tax-product_cat #main .pro-list{
    display: grid !important;
    gap: var(--product-block-gap) !important;
    margin: 0 0 var(--product-block-gap) !important;
}

/* Từng sản phẩm bỏ margin riêng để khoảng cách đều */
body.tax-product_cat #main .pro-list > li{
    margin: 0 !important;
}

/* Padding trong các khung cũng đồng đều */
body.tax-product_cat #main .pagenav-catelist,
body.tax-product_cat #main .woocommerce-no-products-found,
body.tax-product_cat #main .woocommerce-info{
    padding: var(--product-box-padding) !important;
}

/* Mobile */
@media screen and (max-width: 849px){
    body.tax-product_cat{
        --product-block-gap: 22px;
        --product-box-padding: 14px;
    }
}
/* ==================================================
   SỬA KHUNG DANH MỤC BỊ NHỎ LẠI
================================================== */

body.tax-product_cat #main .csp-cat-sidebar{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ép ul danh mục bung full khung cha */
body.tax-product_cat #main .csp-cat-sidebar .pagenav-catelist{
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    box-sizing: border-box !important;
}

/* Nếu theme đang đặt max-width cho menu */
body.tax-product_cat #main .pagenav-catelist,
body.tax-product_cat #main .pagenav-catelist ul{
    max-width: none !important;
}
/* ==================================================
   CĂN CHUẨN TẤT CẢ FORM CONTACT FORM 7
================================================== */

/* Khung form chung */
.wpcf7,
.wpcf7 form,
.wpcf7 .inquiry-form{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Hàng gồm Họ tên + Email */
.wpcf7 .form-row{
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 28px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Hai cột phải rộng bằng nhau */
.wpcf7 .form-row > .form-col{
    display: block !important;
    flex: 1 1 0 !important;

    width: 50% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Thẻ p và span bọc input phải đầy cột */
.wpcf7 .form-col > p,
.wpcf7 .form-col .wpcf7-form-control-wrap{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Input hai ô trên */
.wpcf7 .form-col input[type="text"],
.wpcf7 .form-col input[type="email"],
.wpcf7 .form-col input[type="tel"]{
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    box-sizing: border-box !important;
}

/* Textarea rộng bằng cả hàng */
.wpcf7 .inquiry-form > p,
.wpcf7 .inquiry-form > .wpcf7-form-control-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.wpcf7 textarea{
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;

    margin: 0 !important;
    padding: 14px 16px !important;

    box-sizing: border-box !important;
}

/* Nút gửi nằm giữa */
.wpcf7 .submit-wrap{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 36px 0 0 !important;
    padding: 0 !important;

    text-align: center !important;
    clear: both !important;
}

/* Nút */
.wpcf7 .submit-wrap input[type="submit"],
.wpcf7 input.wpcf7-submit{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 46px !important;

    margin: 0 auto !important;
    padding: 0 20px !important;

    float: none !important;
    position: static !important;

    background: #b8d800 !important;
    color: #111 !important;
    border: 0 !important;
    border-radius: 5px !important;

    text-align: center !important;
    line-height: 46px !important;
    box-sizing: border-box !important;
}

/* Điện thoại: chuyển thành 1 cột */
@media screen and (max-width: 549px){
    .wpcf7 .form-row{
        display: block !important;
    }

    .wpcf7 .form-row > .form-col{
        width: 100% !important;
        margin-bottom: 14px !important;
    }
}
/* ==================================================
   CHỨNG NHẬN - GIÃN TIÊU ĐỀ VỚI FILE PDF
================================================== */

body.page-id-378 .about-us article h2{
    margin: 0 0 22px !important;
    color: #1553a8 !important;
    line-height: 1.25 !important;
}

/* Khoảng cách giữa PDF thứ nhất và tiêu đề chứng nhận thứ hai */
body.page-id-378 .about-us article .df-lite,
body.page-id-378 .about-us article ._df_book{
    margin-bottom: 42px !important;
}

/* Nếu plugin bọc thêm khung bên ngoài */
body.page-id-378 .about-us article .df-ui-wrapper,
body.page-id-378 .about-us article .df-container{
    margin-top: 0 !important;
    margin-bottom: 42px !important;
}

@media screen and (max-width: 549px){
    body.page-id-378 .about-us article h2{
        margin-bottom: 16px !important;
    }

    body.page-id-378 .about-us article .df-lite,
    body.page-id-378 .about-us article ._df_book,
    body.page-id-378 .about-us article .df-ui-wrapper,
    body.page-id-378 .about-us article .df-container{
        margin-bottom: 30px !important;
    }
}
/* Khối có tiêu đề BAO BÌ CARTON THEO NGÀNH */
.home #main h2:has(+ p),
.home #main h2{
    max-width: 1380px !important;
}

/* Ép vùng ngay sau bảng so sánh về cùng khung */
.home #main .home-compare + section,
.home #main .comparison-section + section,
.home #main .home-table + section{
    width: 100% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ==================================================
   CARTON DA - PDF TEXT COLORS ONLY
   Doi mau chu tieu de/noi dung theo Brand Guidelines.
   Giu nguyen mau bang home-compare va footer.
================================================== */

:root{
    --carton-pdf-heading: #16663A;
    --carton-pdf-heading-soft: #2E7D4F;
    --carton-pdf-text: #1A1A1A;
    --carton-pdf-muted: #6E6E6E;
    --carton-pdf-subtle: #8A8A8A;
}

/* Tieu de chung - khong tac dong bang so sanh va footer */
html body :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .home-title,
    .home-title h1,
    .home-title h2,
    .banner-title-h1,
    .entry-title,
    .page-title,
    .section-title,
    .pro-title,
    .popular-title,
    .product-title,
    .woocommerce-loop-product__title,
    .csp-cat-content h2,
    .about-us article h1,
    .about-us article h2,
    .about-us article h3
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    color: var(--carton-pdf-heading) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--carton-pdf-heading) !important;
    text-shadow: none !important;
}

/* Diem nhan trong tieu de */
html body :where(
    h1 strong,
    h2 strong,
    h3 strong,
    .home-title strong,
    .entry-title strong,
    .page-title strong
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    color: var(--carton-pdf-heading-soft) !important;
    -webkit-text-fill-color: var(--carton-pdf-heading-soft) !important;
}

/* Noi dung chinh - khong tac dong bang so sanh va footer */
html body :where(
    p,
    .home-des,
    .text,
    .desc,
    .description,
    .entry-content,
    .about-us article,
    .csp-cat-content,
    .single-post .entry-content,
    .news-d-main,
    .pro-d-main
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    color: var(--carton-pdf-muted) !important;
}

/* Chu noi dung quan trong */
html body :where(
    article strong,
    article b,
    .entry-content strong,
    .entry-content b,
    .about-us article strong,
    .about-us article b,
    .csp-cat-content strong,
    .csp-cat-content b
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    color: var(--carton-pdf-text) !important;
}

/* Ten san pham, bai viet, card */
html body :where(
    .home-mainpro .title,
    .home-mainpro .title p,
    .home-helpcenter .title,
    .home-helpcenter .title p,
    .home-news .title,
    .home-news .title a,
    .pro-list .pro-name,
    .pro-list .title,
    .box-text .title,
    .post-title,
    .product-title a
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    color: var(--carton-pdf-text) !important;
    -webkit-text-fill-color: var(--carton-pdf-text) !important;
}

html body :where(
    .home-mainpro a:hover .title,
    .home-mainpro a:hover .title p,
    .home-helpcenter a:hover .title,
    .home-helpcenter a:hover .title p,
    .home-news a:hover .title,
    .pro-list a:hover .pro-name,
    .pro-list a:hover .title,
    .product-title a:hover,
    .post-title:hover
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    color: var(--carton-pdf-heading-soft) !important;
    -webkit-text-fill-color: var(--carton-pdf-heading-soft) !important;
}

/* Link trong noi dung */
html body :where(
    .entry-content a,
    .about-us article a,
    .csp-cat-content a,
    .single-post .entry-content a
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    color: var(--carton-pdf-heading-soft) !important;
}

html body :where(
    .entry-content a:hover,
    .about-us article a:hover,
    .csp-cat-content a:hover,
    .single-post .entry-content a:hover
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    color: var(--carton-pdf-heading) !important;
}

/* Gach nho duoi tieu de theo mau PDF, tru bang va footer */
html body :where(
    .home-title::after,
    .section-title::after,
    .home-about .home-title::after
):not(.home-compare *):not(.compare-table *):not(.footer *):not(.footer-wrapper *):not(.footer-stone-paper *):not(.absolute-footer *){
    background: var(--carton-pdf-heading-soft) !important;
}

/* Dam bao khu bang so sanh va footer giu nguyen mau da khai bao phia tren */
html body .home-compare,
html body .home-compare *,
html body .compare-table,
html body .compare-table *,
html body .footer-wrapper,
html body .footer-wrapper *,
html body .footer,
html body .footer *,
html body .footer-stone-paper,
html body .footer-stone-paper *,
html body .absolute-footer,
html body .absolute-footer *{
    -webkit-text-fill-color: currentColor;
}

/* ==================================================
   SYNC HOME COMPARE HEADER AND CHOOSE ICONS
   Doi rieng tieu de khu so sanh va icon tron ve mau PDF.
   Khong doi mau cac o trong bang va footer.
================================================== */

html body .home-compare > .l-wrap > .home-title,
html body .home-compare .l-wrap > .home-title,
html body .home-service.home-compare > .l-wrap > .home-title{
    color: var(--carton-pdf-heading) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--carton-pdf-heading) !important;
    text-shadow: none !important;
}

html body .home-compare > .l-wrap > .home-des,
html body .home-compare .l-wrap > .home-des,
html body .home-service.home-compare > .l-wrap > .home-des{
    color: var(--carton-pdf-muted) !important;
    -webkit-text-fill-color: var(--carton-pdf-muted) !important;
}

html body .home #main .home-choose .chooseinfo > .home-title{
    color: var(--carton-pdf-heading) !important;
    -webkit-text-fill-color: var(--carton-pdf-heading) !important;
}

html body .home #main .home-choose .chooseinfo > .text{
    color: var(--carton-pdf-muted) !important;
    -webkit-text-fill-color: var(--carton-pdf-muted) !important;
}

html body .home #main .home-choose .chooseinfo ul li .icon{
    background: var(--carton-pdf-heading-soft) !important;
    border-color: var(--carton-pdf-heading-soft) !important;
    box-shadow: 0 8px 20px rgba(46,125,79,.18) !important;
}

html body .home #main .home-choose .chooseinfo ul li:hover .icon{
    background: var(--carton-pdf-heading) !important;
    border-color: var(--carton-pdf-heading) !important;
}

html body .home #main .home-choose .chooseinfo ul li .icon img{
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

html body .home #main .home-choose .chooseinfo ul li .info p.p1{
    color: var(--carton-pdf-text) !important;
    -webkit-text-fill-color: var(--carton-pdf-text) !important;
}

html body .home #main .home-choose .chooseinfo ul li .info p.p2{
    color: var(--carton-pdf-muted) !important;
    -webkit-text-fill-color: var(--carton-pdf-muted) !important;
}

/* ==================================================
   SYNC HEADER, TOP NAV, PAGE TABS TO PDF COLORS
   Doi cac mau con sot lai o header va thanh tab noi bo.
================================================== */

html body .header-main .nav > li > a:hover,
html body .header-main .nav > li.active > a,
html body .header-main .nav > li.current > a,
html body .header-main .nav > li.current-menu-item > a,
html body .header-main .nav > li.current-menu-ancestor > a,
html body .header-nav-main > li.active > a,
html body .header-nav-main > li.current-menu-item > a,
html body .header-nav-main > li.current-menu-parent > a,
html body .header-nav-main > li.current-menu-ancestor > a{
    color: var(--carton-pdf-heading-soft) !important;
    -webkit-text-fill-color: var(--carton-pdf-heading-soft) !important;
}

html body .header-main .header-nav > li:hover > a::before,
html body .header-main .header-nav > li.active > a::after,
html body .header-main .header-nav > li.current-menu-item > a::after,
html body .header-main .header-nav > li.current-menu-ancestor > a::after,
html body .header-nav-main > li.active > a::after,
html body .header-nav-main > li.current-menu-item > a::after,
html body .header-nav-main > li.current-menu-parent > a::after,
html body .header-nav-main > li.current-menu-ancestor > a::after,
html body .nav-line-bottom > li > a:before,
html body .nav-line-grow > li > a:before,
html body .nav-line > li > a:before{
    background: var(--carton-pdf-heading-soft) !important;
    background-color: var(--carton-pdf-heading-soft) !important;
}

html body .header-main .header-button .button,
html body .header-button .button,
html body .header-main .header-search > a.nav-top-link,
html body .header-search .icon-search,
html body .ux-search-submit,
html body button.ux-search-submit{
    background: var(--carton-pdf-heading-soft) !important;
    background-color: var(--carton-pdf-heading-soft) !important;
    border-color: var(--carton-pdf-heading-soft) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .header-main .header-button .button:hover,
html body .header-button .button:hover,
html body .header-main .header-search > a.nav-top-link:hover,
html body .ux-search-submit:hover,
html body button.ux-search-submit:hover{
    background: var(--carton-pdf-heading) !important;
    background-color: var(--carton-pdf-heading) !important;
    border-color: var(--carton-pdf-heading) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .header-main .header-search > a.nav-top-link i,
html body .header-search .icon-search:before,
html body .ux-search-submit i,
html body .ux-search-submit i:before{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .banner-breadcrumbs,
html body .banner-breadcrumbs a,
html body .breadcrumbs,
html body .breadcrumbs a{
    color: var(--carton-pdf-muted) !important;
    -webkit-text-fill-color: var(--carton-pdf-muted) !important;
}

html body .banner-breadcrumbs a:hover,
html body .breadcrumbs a:hover{
    color: var(--carton-pdf-heading-soft) !important;
    -webkit-text-fill-color: var(--carton-pdf-heading-soft) !important;
}

html body .pagenav-catelist li.LocalCurrent > a,
html body .pagenav-catelist li.active > a,
html body .pagenav-catelist li.current-menu-item > a,
html body .pagenav-catelist li.current_page_item > a,
html body .page-nav .pagenav-catelist li.LocalCurrent > a,
html body .page-nav .pagenav-catelist li.active > a,
html body .page-nav .pagenav-catelist li.current-menu-item > a,
html body .page-nav .pagenav-catelist li.current_page_item > a{
    color: var(--carton-pdf-heading-soft) !important;
    -webkit-text-fill-color: var(--carton-pdf-heading-soft) !important;
}

html body .pagenav-catelist li a:hover,
html body .page-nav .pagenav-catelist li a:hover{
    color: var(--carton-pdf-heading) !important;
    -webkit-text-fill-color: var(--carton-pdf-heading) !important;
}

/* ==================================================
   FORCE ICON COLORS TO PDF PALETTE
   Anh icon webp can filter/background, icon font/SVG can use color/fill.
================================================== */

html body .home-choose .chooseinfo ul li .icon,
html body #main .home-choose .chooseinfo ul li .icon,
html body.home #main .home-choose .chooseinfo ul li .icon,
html body .home #main .home-choose .chooseinfo ul li .icon{
    background: var(--carton-pdf-heading-soft) !important;
    background-color: var(--carton-pdf-heading-soft) !important;
    border-color: var(--carton-pdf-heading-soft) !important;
    box-shadow: 0 8px 20px rgba(46,125,79,.18) !important;
}

html body .home-choose .chooseinfo ul li:hover .icon,
html body #main .home-choose .chooseinfo ul li:hover .icon,
html body.home #main .home-choose .chooseinfo ul li:hover .icon,
html body .home #main .home-choose .chooseinfo ul li:hover .icon{
    background: var(--carton-pdf-heading) !important;
    background-color: var(--carton-pdf-heading) !important;
    border-color: var(--carton-pdf-heading) !important;
}

html body .home-choose .chooseinfo ul li .icon img,
html body #main .home-choose .chooseinfo ul li .icon img,
html body.home #main .home-choose .chooseinfo ul li .icon img,
html body .home #main .home-choose .chooseinfo ul li .icon img{
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

html body .top-bar-nav i,
html body .top-bar-nav em,
html body .header-top i,
html body .header-top em,
html body .header-main .icon-angle-down,
html body .banner-breadcrumbs em,
html body .breadcrumbs em,
html body .iconfont:not(.footer-wrapper *):not(.footer *):not(.footer-stone-paper *):not(.absolute-footer *):not(.compare-table *){
    color: var(--carton-pdf-heading-soft) !important;
    -webkit-text-fill-color: var(--carton-pdf-heading-soft) !important;
}

html body .top-bar-nav svg,
html body .header-top svg,
html body .banner-breadcrumbs svg,
html body .breadcrumbs svg{
    fill: var(--carton-pdf-heading-soft) !important;
    color: var(--carton-pdf-heading-soft) !important;
}

html body .top-bar-nav svg path,
html body .header-top svg path,
html body .banner-breadcrumbs svg path,
html body .breadcrumbs svg path{
    fill: var(--carton-pdf-heading-soft) !important;
}

html body .header-main .header-search > a.nav-top-link,
html body .header-main .header-search > a.nav-top-link i,
html body .header-main .header-search > a.nav-top-link i:before{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Tiêu đề Hồ sơ chất lượng */
.quality-heading{
    width: 100%;
    text-align: center;
    margin: 0 auto 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quality-heading h2{
    width: 100%;
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #3b7b8e;
    margin: 0;
    padding: 0;
    border: none;
}

/* Xóa toàn bộ nền và đường kẻ */
.quality-heading{
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.quality-heading::before,
.quality-heading::after,
.quality-heading h2::before,
.quality-heading h2::after{
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

.quality-heading h2{
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    text-align: center !important;
}


/* Link "Đọc thêm >>" */
.home-about a.more{
    color: #1f6d4b !important;   /* Cùng màu với "Về Chúng Tôi" */
    font-size: 20px !important;
    font-weight: 600;
    text-decoration: none;
}

.home-about a.more:hover{
    color: #145436 !important;
}
#main .home-choose .chooseinfo ul li .info > p.p2{
    font-size: 20px !important;
    line-height: 1.8 !important;
}
/* Ép chữ mô tả phần Vì sao nên chọn Carton Đá lên 20px */
body.home #main section.home-choose .chooseinfo ul li .info p.p2{
    font-size: 20px !important;
    line-height: 1.7 !important;
}
/* ==========================================
   ĐỒNG BỘ MÔ TẢ DƯỚI TIÊU ĐỀ TRANG CHỦ
========================================== */

.home #main .home-des{
    font-family: 'Stavian', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #6e6e6e !important;
    text-align: center !important;

    margin: 10px auto 35px !important;
    max-width: 900px !important;
}
/* ==================================================
   00. BRAND COLOR SYSTEM
================================================== */

:root,
html body{
    --primary-color: #16663A !important;
    --fs-color-primary: #16663A !important;
    --fs-color-secondary: #16663A !important;
    --wp--preset--color--primary: #16663A !important;
    --wp--preset--color--secondary: #16663A !important;

    --brand-title: #16663A;
    --brand-hover: #2E7D4F;
    --brand-text: #6E6E6E;
    --brand-light: #EAF3EE;
}

/* ==================================================
   01. HEADER / TOPBAR
================================================== */

html body .header-contact,
html body .header-contact a,
html body .header-contact span,
html body .header-top,
html body .header-top a,
html body .header-top span{
    color: var(--brand-text) !important;
    -webkit-text-fill-color: var(--brand-text) !important;
}

html body .header-contact i,
html body .header-contact i:before,
html body .header-top i,
html body .header-top i:before,
html body .icon-angle-down:before{
    color: var(--brand-title) !important;
    -webkit-text-fill-color: var(--brand-title) !important;
}

/* Nút search header */
html body .header-main .header-search > a.nav-top-link,
html body .header-search-dropdown .ux-search-submit{
    background: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
}

html body .header-main .header-search > a.nav-top-link i,
html body .header-main .header-search > a.nav-top-link i:before,
html body .header-search-dropdown .ux-search-submit i,
html body .header-search-dropdown .ux-search-submit i:before{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ==================================================
   02. BUTTONS
================================================== */

html body .button,
html body button,
html body input[type="submit"],
html body .submit-button,
html body .wpcf7-submit,
html body .btn-leave-msg,
html body .home-more,
html body .quick-view-button,
html body .header-button .button,
html body .product-info .button{
    background: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .button:hover,
html body button:hover,
html body input[type="submit"]:hover,
html body .submit-button:hover,
html body .wpcf7-submit:hover,
html body .btn-leave-msg:hover,
html body .home-more:hover,
html body .quick-view-button:hover,
html body .header-button .button:hover,
html body .product-info .button:hover{
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ==================================================
   03. CONTACT PAGE ICONS
================================================== */

html body .contactinfo .pro-ulli1 li .icon{
    background: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
}

html body .contactinfo .pro-ulli1 li .icon em,
html body .contactinfo .pro-ulli1 li .icon em:before{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .contactinfo .pro-ulli1 li .p1{
    color: #111 !important;
}

html body .contactinfo .pro-ulli1 li .p2,
html body .contactinfo .pro-ulli1 li .p2 a{
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

/* ==================================================
   04. SLIDER ARROWS + DOTS
================================================== */

html body .flickity-prev-next-button,
html body .bannerswiper-prev,
html body .bannerswiper-next,
html body .customswiper-prev,
html body .customswiper-next,
html body .industry-arrow,
html body .product-thumbnails .flickity-prev-next-button,
html body .woocommerce-product-gallery .flickity-prev-next-button{
    background: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
}

html body .flickity-prev-next-button:hover,
html body .bannerswiper-prev:hover,
html body .bannerswiper-next:hover,
html body .customswiper-prev:hover,
html body .customswiper-next:hover,
html body .industry-arrow:hover{
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}

html body .flickity-prev-next-button svg,
html body .flickity-prev-next-button svg path,
html body .flickity-prev-next-button .arrow,
html body .bannerswiper-prev em,
html body .bannerswiper-next em,
html body .customswiper-prev em,
html body .customswiper-next em,
html body .industry-arrow{
    color: #fff !important;
    fill: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .swiper-pagination-bullet,
html body .flickity-page-dots .dot{
    background: #ddd !important;
    opacity: 1 !important;
}

html body .swiper-pagination-bullet-active,
html body .flickity-page-dots .dot.is-selected{
    background: var(--brand-title) !important;
}

/* ==================================================
   05. PRODUCT PAGE
================================================== */

html body .product-thumbnails .flickity-prev-next-button,
html body .product-gallery .flickity-prev-next-button{
    background: var(--brand-title) !important;
}

html body .product-footer .nav > li.active > a,
html body .product-footer .nav > li > a:hover,
html body .woocommerce-tabs .nav > li.active > a,
html body .woocommerce-tabs .nav > li > a:hover{
    background: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ==================================================
   06. FOOTER
   Lưu ý: footer icon chỉ đổi màu chữ, không có nền.
================================================== */

html body .footer-icon,
html body .footer-icon *,
html body .footer-phones .footer-icon,
html body .footer-email .footer-icon,
html body .footer-location .footer-icon{
    background: transparent !important;
    border: 0 !important;
    color: var(--brand-title) !important;
    -webkit-text-fill-color: var(--brand-title) !important;
}

html body .footer-menu a:hover,
html body .footer-contact-line a:hover{
    color: var(--brand-title) !important;
    -webkit-text-fill-color: var(--brand-title) !important;
}
/* ==================================================
   FIX CÁC MÀU XANH NÕN CÒN SÓT
================================================== */

:root,
html body{
    --brand-title: #16663A;
    --brand-hover: #2E7D4F;
}

/* Slider ngành trên trang chủ */
html body .home-helpcenter .industry-arrow,
html body .home-helpcenter .industry-prev,
html body .home-helpcenter .industry-next{
    background: var(--brand-title) !important;
    background-color: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .home-helpcenter .industry-arrow:hover,
html body .home-helpcenter .industry-prev:hover,
html body .home-helpcenter .industry-next:hover{
    background: var(--brand-hover) !important;
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}

/* Slider khách hàng */
html body .customswiper-prev,
html body .customswiper-next,
html body #customswiper .customswiper-prev,
html body #customswiper .customswiper-next{
    background: var(--brand-title) !important;
    background-color: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .customswiper-prev em,
html body .customswiper-next em,
html body #customswiper .customswiper-prev em,
html body #customswiper .customswiper-next em{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Trang chi tiết sản phẩm: nút lên/xuống thumbnail */
html body .prodetails-top .prodetails-img .swiper-button-prev,
html body .prodetails-top .prodetails-img .swiper-button-next,
html body .prodetails-top .gallery-thumbs .swiper-button-prev,
html body .prodetails-top .gallery-thumbs .swiper-button-next,
html body .prodetails-top .product-thumbnails .flickity-prev-next-button{
    background: var(--brand-title) !important;
    background-color: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
}

/* Nếu nút thumbnail là div mũi tên thường */
html body .prodetails-top .prodetails-img .iconfont,
html body .prodetails-top .gallery-thumbs .iconfont{
    color: var(--brand-title) !important;
    -webkit-text-fill-color: var(--brand-title) !important;
}

/* Tab Mô tả / Gửi yêu cầu */
html body .prodetails-tabs .prodetails-tabs-item.act,
html body .prodetails-tabs .prodetails-tabs-item:hover{
    background: var(--brand-title) !important;
    background-color: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Prev / Next cuối trang sản phẩm */
html body .pagelink .pagelink-item .icon,
html body .pagelink .pagelink-item .icon em{
    background: var(--brand-title) !important;
    background-color: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .pagelink .pagelink-item:hover .icon,
html body .pagelink .pagelink-item:hover .icon em{
    background: var(--brand-hover) !important;
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Nút gửi form còn xanh nõn */
html body .submit-wrap .wpcf7-submit.btn-leave-msg,
html body #wmkcfb-submit,
html body input#wmkcfb-submit{
    background: var(--brand-title) !important;
    background-color: var(--brand-title) !important;
    border-color: var(--brand-title) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .submit-wrap .wpcf7-submit.btn-leave-msg:hover,
html body #wmkcfb-submit:hover,
html body input#wmkcfb-submit:hover{
    background: var(--brand-hover) !important;
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Mũi tên banner: trắng và căn giữa */
html body .bannerswiper-prev,
html body .bannerswiper-next{
    background: #16663A !important;
    border-color: #16663A !important;
    color: #fff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .bannerswiper-prev em,
html body .bannerswiper-next em,
html body .bannerswiper-prev em:before,
html body .bannerswiper-next em:before{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;

    font-size: 22px !important;
    line-height: 1 !important;
    display: block !important;
}

/* Nếu muốn nút rõ hơn một chút */
html body .bannerswiper-prev,
html body .bannerswiper-next{
    width: 48px !important;
    height: 48px !important;
    border-radius: 6px !important;
}
/* Mũi tên ảnh phụ sản phẩm */
html body .prodetails-button-prev,
html body .prodetails-button-next{
    background: #16663A !important;
    background-color: #16663A !important;
    border-color: #16663A !important;
    color: #fff !important;

    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .prodetails-button-prev em,
html body .prodetails-button-next em,
html body .prodetails-button-prev em:before,
html body .prodetails-button-next em:before{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    font-size: 16px !important;
}

/* 2 nút prev/next dưới trang sản phẩm */
html body .pagelink .pagelink-item .icon{
    background: #16663A !important;
    background-color: #16663A !important;
    border-color: #16663A !important;
    color: #fff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .pagelink .pagelink-item .icon em,
html body .pagelink .pagelink-item .icon em:before{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    font-size: 18px !important;
}

html body .pagelink .pagelink-item:hover .icon{
    background: #2E7D4F !important;
    background-color: #2E7D4F !important;
}
/* Tăng cỡ chữ bảng so sánh trang chủ */
html body .home-compare .compare-table{
    font-size: 18px !important;
    line-height: 1.55 !important;
}

/* Header bảng */
html body .home-compare .compare-table thead th{
    font-size: 18px !important;
    line-height: 1.4 !important;
    padding: 18px 20px !important;
}

/* Nội dung từng ô */
html body .home-compare .compare-table tbody td{
    font-size: 18px !important;
    line-height: 1.55 !important;
    padding: 16px 20px !important;
}

/* Cột tiêu chí bên trái */
html body .home-compare .compare-table tbody td.col-criteria{
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

/* Cột nổi bật bên phải */
html body .home-compare .compare-table tbody td.highlight-col{
    font-size: 18px !important;
    line-height: 1.5 !important;
}

/* Mobile giữ vừa màn hình */
@media screen and (max-width: 768px){
    html body .home-compare .compare-table{
        font-size: 14px !important;
    }

    html body .home-compare .compare-table thead th,
    html body .home-compare .compare-table tbody td{
        font-size: 14px !important;
        padding: 12px 14px !important;
    }
}
.home-helpcenter .list li[data-app-link]{
    cursor: pointer !important;
}

.home-helpcenter .list li[data-app-link] a{
    pointer-events: auto !important;
}

.home-helpcenter .list li[data-app-link] .title{
    color: #222 !important;
}
/* ===== Tiêu đề sản phẩm ===== */
.prodetails-name,
.prodetails-name h1{
    color:#000 !important;          /* Chữ đen */
    text-align:center !important;   /* Căn giữa */
    font-size:48px;
    font-weight:700;
    width:100%;
}

/* Căn giữa khu vực bên phải */
.prodetails-info{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ===== Tiêu đề Thông số kỹ thuật ===== */
.prodetails-content h3{
    text-align:center !important;
    color:#16663A;
    font-size:42px;
    font-weight:700;
    margin-bottom:20px;
}

/* ===== Header bảng ===== */
.table-wrap table th{
    text-align:center !important;
    vertical-align:middle;
    font-size:22px;
    font-weight:700;
}

/* ===== Cột Hạng mục ===== */
.table-wrap table td:first-child{
    text-align:center !important;
    vertical-align:middle;
    font-size:20px;
    font-weight:600;
}

/* ===== Cột Thông số ===== */
.table-wrap table td:last-child{
    text-align:center !important;
    vertical-align:middle;
    font-size:20px;
}
/* Tiêu đề sản phẩm */
.prodetails-name,
.prodetails-name h1{
    text-align:center;
    margin-bottom:30px !important; /* Tăng khoảng cách xuống nút */
}

/* Nút Gửi yêu cầu */
.pro-btn.send{
    margin-top:10px !important;    /* Hoặc tăng lên 15-20px nếu muốn */
}
/* Cố định lại tỷ lệ 3 cột */
.home-compare .compare-table{
    width:100% !important;
    table-layout:fixed !important;
}

/* Cột tiêu chí thu nhỏ */
.home-compare .compare-table .col-criteria{
    width:20% !important;
}


/* =========================
   BẢNG SO SÁNH CARTON
========================= */

.home-compare .compare-table{
    width:100% !important;
    table-layout:fixed !important;
}

/* Tỷ lệ 3 cột */
.home-compare .compare-table th:nth-child(1),
.home-compare .compare-table td:nth-child(1){
    width:20% !important;
}

.home-compare .compare-table th:nth-child(2),
.home-compare .compare-table td:nth-child(2){
    width:37% !important;
}

.home-compare .compare-table th:nth-child(3),
.home-compare .compare-table td:nth-child(3){
    width:43% !important;
}

/* Giữ chữ đủ lớn */
.home-compare .compare-table tbody td{
    font-size:18px !important;
    line-height:1.45 !important;
    padding:14px 10px !important;
    letter-spacing:-0.1px;
}

/* Cột carton đá */
.home-compare .compare-table td:nth-child(3),
.home-compare .compare-table th:nth-child(3){
    padding-left:10px !important;
    padding-right:8px !important;
}

/* Hai ô dài ở cột carton giấy */
.home-compare .compare-table tbody tr:nth-child(4) td:nth-child(2),
.home-compare .compare-table tbody tr:nth-child(6) td:nth-child(2){
    font-size:18px !important;
    line-height:1.4 !important;
    letter-spacing:-0.2px !important;
    padding-left:8px !important;
    padding-right:6px !important;
}
/* Căn giữa theo chiều dọc tất cả các ô */
.home-compare .compare-table td,
.home-compare .compare-table th{
    vertical-align: middle !important;
}

/* Cột tiêu chí */
.home-compare .compare-table td.col-criteria{
    vertical-align: middle !important;
    font-weight:700;
}

/* Hai cột nội dung */
.home-compare .compare-table td.col-left,
.home-compare .compare-table td.col-right{
    vertical-align: middle !important;
    line-height:1.5 !important;
    padding:16px 12px !important;
}
/* Tiêu đề màu đen */
body.home #main section.home-choose .chooseinfo ul li .info p.p1{
    font-size:22px !important;
    font-weight:700 !important;
    color:#000 !important;
    line-height:1.3 !important;
    margin-bottom:8px !important;
}

/* Nội dung */
body.home #main section.home-choose .chooseinfo ul li .info p.p2{
    color:#555 !important;
    font-size:20px !important;
    line-height:1.7 !important;
    text-align:justify !important;
    text-justify:inter-word;
    margin:0 !important;
    padding:0 !important;
}
body.home #main section.home-choose .chooseinfo ul li .info{
    width:calc(100% - 70px);
}
/* ==================================
   CÂN LẠI KHỐI VÌ SAO CHỌN CARTON ĐÁ
================================== */

body.home #main section.home-choose > .l-wrap{
    display:grid !important;
    grid-template-columns:minmax(0, 48%) minmax(0, 52%) !important;
    column-gap:30px !important;
    align-items:start !important;
}

/* Cột ảnh */
body.home #main section.home-choose .chooseimg{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}

body.home #main section.home-choose .chooseimg img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
}

/* Cột chữ */
body.home #main section.home-choose .chooseinfo{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}

/* Từng dòng */
body.home #main section.home-choose .chooseinfo ul li{
    display:grid !important;
    grid-template-columns:50px minmax(0, 1fr) !important;
    column-gap:14px !important;
    align-items:start !important;
}

/* Icon */
body.home #main section.home-choose .chooseinfo ul li .icon{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    margin:0 !important;
}

/* Khối chữ */
body.home #main section.home-choose .chooseinfo ul li .info{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
}

/* Tiêu đề đen 22px */
body.home #main section.home-choose .chooseinfo ul li .info .p1{
    color:#000 !important;
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    margin:0 0 6px !important;
}

/* Nội dung */
body.home #main section.home-choose .chooseinfo ul li .info .p2{
    color:#666 !important;
    font-size:20px !important;
    line-height:1.55 !important;
    letter-spacing:-0.25px !important;
    text-align:justify !important;
    text-align-last:left !important;
    margin:0 !important;
    padding:0 !important;
}
/* ==================================
   CÂN LẠI KHỐI VÌ SAO CHỌN CARTON ĐÁ
================================== */

body.home #main section.home-choose > .l-wrap{
    display:grid !important;
    grid-template-columns:minmax(0, 48%) minmax(0, 52%) !important;
    column-gap:30px !important;
    align-items:start !important;
}

/* Cột ảnh */
body.home #main section.home-choose .chooseimg{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}

body.home #main section.home-choose .chooseimg img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
}

/* Cột chữ */
body.home #main section.home-choose .chooseinfo{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}

/* Từng dòng */
body.home #main section.home-choose .chooseinfo ul li{
    display:grid !important;
    grid-template-columns:50px minmax(0, 1fr) !important;
    column-gap:14px !important;
    align-items:start !important;
}

/* Icon */
body.home #main section.home-choose .chooseinfo ul li .icon{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    margin:0 !important;
}

/* Khối chữ */
body.home #main section.home-choose .chooseinfo ul li .info{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
}

/* Tiêu đề đen 22px */
body.home #main section.home-choose .chooseinfo ul li .info .p1{
    color:#000 !important;
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    margin:0 0 6px !important;
}

/* Nội dung */
body.home #main section.home-choose .chooseinfo ul li .info .p2{
    color:#666 !important;
    font-size:20px !important;
    line-height:1.55 !important;
    letter-spacing:-0.25px !important;
    text-align:justify !important;
    text-align-last:left !important;
    margin:0 !important;
    padding:0 !important;
}
/* Cân chiều cao phần chữ với ảnh bên trái */
body.home #main section.home-choose .l-wrap{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 0.9fr) !important;
    align-items: center !important;
    gap: 70px !important;
}

body.home #main section.home-choose .chooseimg,
body.home #main section.home-choose .chooseinfo{
    height: 100% !important;
}

body.home #main section.home-choose .chooseimg img{
    width: 100% !important;
    height: 100% !important;
    max-height: 520px !important;
    object-fit: cover !important;
}

/* Khối chữ phân bổ đều theo chiều cao ảnh */
body.home #main section.home-choose .chooseinfo{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    max-width: 620px !important;
}

body.home #main section.home-choose .chooseinfo ul{
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin: 0 !important;
}

/* Từng dòng text ổn định, không kéo khung lộn xộn */
body.home #main section.home-choose .chooseinfo ul li{
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
}

body.home #main section.home-choose .chooseinfo ul li .info{
    flex: 1 !important;
    min-width: 0 !important;
}

body.home #main section.home-choose .chooseinfo ul li .info p.p2{
    font-size: 19px !important;
    line-height: 1.55 !important;
    text-align: justify !important;
    text-align-last: left !important;
    margin: 0 !important;
}
/* ==================================================
   HOME CHOOSE - Layout giống mẫu tham chiếu
================================================== */

body.home #main section.home-choose{
    padding: 70px 0 !important;
    background: #fff !important;
}

body.home #main section.home-choose .l-wrap{
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr) !important;
    gap: 70px !important;
    align-items: center !important;
}

/* Ảnh bên trái */
body.home #main section.home-choose .chooseimg{
    width: 100% !important;
}

body.home #main section.home-choose .chooseimg img{
    width: 100% !important;
    height: 560px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Nội dung bên phải */
body.home #main section.home-choose .chooseinfo{
    width: 100% !important;
    max-width: 560px !important;
    padding: 0 !important;
}

body.home #main section.home-choose .chooseinfo .home-title{
    font-size: 40px !important;
    line-height: 1.15 !important;
    margin: 0 0 14px !important;
    color: #111 !important;
    text-align: left !important;
}

body.home #main section.home-choose .chooseinfo > .text,
body.home #main section.home-choose .chooseinfo > .text p{
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: #777 !important;
    text-align: left !important;
    margin: 0 0 28px !important;
}

/* Danh sách lý do */
body.home #main section.home-choose .chooseinfo ul{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
}

body.home #main section.home-choose .chooseinfo ul li{
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    margin: 0 !important;
}

/* Icon tròn */
body.home #main section.home-choose .chooseinfo ul li .icon{
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;

    background: #16663A !important;
    border: 0 !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.home #main section.home-choose .chooseinfo ul li .icon img{
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

/* Text từng dòng */
body.home #main section.home-choose .chooseinfo ul li .info{
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.home #main section.home-choose .chooseinfo ul li .info p.p1{
    font-size: 19px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 5px !important;
    text-align: left !important;
}

body.home #main section.home-choose .chooseinfo ul li .info p.p2{
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: #555 !important;
    margin: 0 !important;
    text-align: left !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Responsive */
@media screen and (max-width: 849px){
    body.home #main section.home-choose .l-wrap{
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    body.home #main section.home-choose .chooseimg img{
        height: auto !important;
    }

    body.home #main section.home-choose .chooseinfo{
        max-width: 100% !important;
    }

    body.home #main section.home-choose .chooseinfo .home-title{
        font-size: 32px !important;
    }
}
/* HOME CHOOSE - ảnh to hơn, chữ dễ đọc hơn */
body.home #main section.home-choose{
    padding: 80px 0 !important;
    background: #fff !important;
}

body.home #main section.home-choose .l-wrap{
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(520px, 0.82fr) !important;
    gap: 72px !important;
    align-items: center !important;
}

/* Ảnh bên trái to hơn */
body.home #main section.home-choose .chooseimg img{
    width: 100% !important;
    height: 640px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Nội dung bên phải */
body.home #main section.home-choose .chooseinfo{
    max-width: 640px !important;
    padding: 0 !important;
}

/* Tiêu đề */
body.home #main section.home-choose .chooseinfo .home-title{
    font-size: 46px !important;
    line-height: 1.15 !important;
    margin: 0 0 16px !important;
    color: #16663A !important;
    text-align: left !important;
}

/* Đoạn mô tả dưới tiêu đề */
body.home #main section.home-choose .chooseinfo > .text,
body.home #main section.home-choose .chooseinfo > .text p{
    font-size: 20px !important;
    line-height: 1.65 !important;
    color: #555 !important;
    text-align: left !important;
    margin: 0 0 32px !important;
}

/* Danh sách lý do */
body.home #main section.home-choose .chooseinfo ul{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

body.home #main section.home-choose .chooseinfo ul li{
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
    margin: 0 !important;
}

/* Icon */
body.home #main section.home-choose .chooseinfo ul li .icon{
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 50% !important;

    background: #16663A !important;
    border: 0 !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.home #main section.home-choose .chooseinfo ul li .icon img{
    width: 27px !important;
    height: 27px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

/* Tiêu đề từng ý */
body.home #main section.home-choose .chooseinfo ul li .info p.p1{
    font-size: 22px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 6px !important;
    text-align: left !important;
}

/* Mô tả từng ý */
body.home #main section.home-choose .chooseinfo ul li .info p.p2{
    font-size: 20px !important;
    line-height: 1.55 !important;
    color: #555 !important;
    margin: 0 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Mobile */
@media screen and (max-width: 849px){
    body.home #main section.home-choose .l-wrap{
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    body.home #main section.home-choose .chooseimg img{
        height: auto !important;
    }

    body.home #main section.home-choose .chooseinfo{
        max-width: 100% !important;
    }

    body.home #main section.home-choose .chooseinfo .home-title{
        font-size: 34px !important;
    }

    body.home #main section.home-choose .chooseinfo ul li .info p.p1{
        font-size: 20px !important;
    }

    body.home #main section.home-choose .chooseinfo ul li .info p.p2{
        font-size: 18px !important;
    }
}
/* Tinh chỉnh lại section Vì sao nên chọn cho cân ảnh/chữ */
body.home #main section.home-choose .l-wrap{
    grid-template-columns: minmax(0, 1.08fr) minmax(500px, 0.92fr) !important;
    gap: 56px !important;
    align-items: center !important;
}

body.home #main section.home-choose .chooseimg img{
    height: 575px !important;
    object-fit: cover !important;
}

body.home #main section.home-choose .chooseinfo{
    max-width: 590px !important;
}

body.home #main section.home-choose .chooseinfo .home-title{
    font-size: 42px !important;
    line-height: 1.12 !important;
    margin-bottom: 16px !important;
}

body.home #main section.home-choose .chooseinfo > .text,
body.home #main section.home-choose .chooseinfo > .text p{
    font-size: 18px !important;
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
}
/* HOME CHOOSE - chỉnh font theo yêu cầu */
body.home #main section.home-choose .l-wrap{
    grid-template-columns: minmax(0, 1fr) minmax(620px, 0.95fr) !important;
    gap: 48px !important;
    max-width: 1480px !important;
}

body.home #main section.home-choose .chooseinfo{
    max-width: 680px !important;
}

/* Tiêu đề: 40px */
body.home #main section.home-choose .chooseinfo .home-title{
    font-size: 40px !important;
    line-height: 1.18 !important;
    margin: 0 0 18px !important;
    color: #16663A !important;
    text-align: left !important;
}

/* Chữ thường: 18px */
body.home #main section.home-choose .chooseinfo > .text,
body.home #main section.home-choose .chooseinfo > .text p,
body.home #main section.home-choose .chooseinfo ul li .info p.p2{
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #666 !important;
    text-align: left !important;
}

/* Chữ đen/tên từng ý: 20px */
body.home #main section.home-choose .chooseinfo ul li .info p.p1{
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 5px !important;
    text-align: left !important;
}

/* Khoảng cách danh sách */
body.home #main section.home-choose .chooseinfo ul{
    gap: 21px !important;
}

body.home #main section.home-choose .chooseinfo ul li{
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 16px !important;
}

/* Mobile giữ vừa màn hình */
@media screen and (max-width: 849px){
    body.home #main section.home-choose .l-wrap{
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    body.home #main section.home-choose .chooseinfo{
        max-width: 100% !important;
    }

    body.home #main section.home-choose .chooseinfo .home-title{
        font-size: 30px !important;
    }

    body.home #main section.home-choose .chooseinfo > .text,
    body.home #main section.home-choose .chooseinfo > .text p,
    body.home #main section.home-choose .chooseinfo ul li .info p.p2{
        font-size: 16px !important;
    }

    body.home #main section.home-choose .chooseinfo ul li .info p.p1{
        font-size: 18px !important;
    }
}
/* ABOUT - chỉnh cỡ chữ các box Bảo vệ / Kết nối / Phát triển */
body.home #main section.home-about .about-value-item h3{
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #16663A !important;
    margin: 0 0 14px !important;
}

body.home #main section.home-about .about-value-item p{
    font-size: 18px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #fff !important;
    margin: 0 !important;
}

/* Mobile */
@media screen and (max-width: 849px){
    body.home #main section.home-about .about-value-item h3{
        font-size: 19px !important;
    }

    body.home #main section.home-about .about-value-item p{
        font-size: 16px !important;
        line-height: 1.65 !important;
    }
}
/* ABOUT - chữ nội dung bên trái 18px */
body.home #main section.home-about .about-wysiwyg,
body.home #main section.home-about .about-wysiwyg p,
body.home #main section.home-about .aboutinfo p{
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: #555 !important;
}

body.home #main section.home-about .about-wysiwyg strong,
body.home #main section.home-about .aboutinfo strong{
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #222 !important;
}

/* Link Đọc thêm */
body.home #main section.home-about a.more{
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

body.home #main section.home-choose .chooseinfo ul{
    gap: 22px !important;
}

body.home #main section.home-choose .chooseinfo ul li{
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 16px !important;
}

body.home #main section.home-choose .chooseinfo ul li .icon{
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
}

body.home #main section.home-choose .chooseinfo ul li .info p.p1{
    font-size: 19px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
}

body.home #main section.home-choose .chooseinfo ul li .info p.p2{
    font-size: 17px !important;
    line-height: 1.55 !important;
}
/* ==========================
   Dong bo mau effect xanh
   San pham + Tin tuc
========================== */

:root{
    --brand-green: #16663A;
    --brand-green-hover: #2E7D4F;
}

/* Link hover chung */
body a:hover,
body .entry-content a:hover,
body .breadcrumb a:hover,
body .breadcrumbs a:hover{
    color: var(--brand-green-hover) !important;
}

/* Nut chung */
body .button,
body button,
body input[type="submit"],
body .button.primary,
body a.button.primary{
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

body .button:hover,
body button:hover,
body input[type="submit"]:hover,
body .button.primary:hover,
body a.button.primary:hover{
    background-color: var(--brand-green-hover) !important;
    border-color: var(--brand-green-hover) !important;
    color: #fff !important;
}

/* Nut nhan xet + search header */
.header-main .button,
.header-main a.button,
.header-main .header-search a,
.header-main .header-search .icon-search{
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

.header-main .button:hover,
.header-main a.button:hover,
.header-main .header-search a:hover{
    background-color: var(--brand-green-hover) !important;
    border-color: var(--brand-green-hover) !important;
    color: #fff !important;
}

/* Menu active / hover */
.header-main .nav > li > a:hover,
.header-main .nav > li.active > a,
.header-main .nav > li.current-menu-item > a,
.header-main .nav > li.current-menu-parent > a{
    color: var(--brand-green) !important;
}

.header-main .nav > li > a:before,
.header-main .nav > li.active > a:before,
.header-main .nav > li.current-menu-item > a:before,
.header-main .nav > li.current-menu-parent > a:before{
    background-color: var(--brand-green) !important;
}

/* Tin tuc - card hover */
.blog-wrapper .post-item .box,
.archive .post-item .box,
.category .post-item .box,
.blog .post-item .box{
    transition: all .25s ease !important;
}

.blog-wrapper .post-item:hover .box-text,
.archive .post-item:hover .box-text,
.category .post-item:hover .box-text,
.blog .post-item:hover .box-text{
    background-color: var(--brand-green-hover) !important;
}

.blog-wrapper .post-item:hover .box-text *,
.archive .post-item:hover .box-text *,
.category .post-item:hover .box-text *,
.blog .post-item:hover .box-text *{
    color: #fff !important;
}

.blog-wrapper .post-item:hover .box-text .is-divider,
.archive .post-item:hover .box-text .is-divider,
.category .post-item:hover .box-text .is-divider{
    background-color: #fff !important;
}

/* Icon ngay thang trong bai viet */
.post-item .box-text i,
.post-item .box-text .icon,
.post-meta i,
.entry-meta i{
    color: var(--brand-green) !important;
}

.post-item:hover .box-text i,
.post-item:hover .box-text .icon{
    color: #fff !important;
}

/* San pham - card hover */
.woocommerce .product-small .box,
.products .product-small .box,
.product-small.box{
    transition: all .25s ease !important;
}

.woocommerce .product-small:hover .box-text,
.products .product-small:hover .box-text,
.product-small.box:hover .box-text{
    background-color: var(--brand-green-hover) !important;
}

.woocommerce .product-small:hover .box-text *,
.products .product-small:hover .box-text *,
.product-small.box:hover .box-text *{
    color: #fff !important;
}

/* Gia, tieu de san pham */
.product-title a:hover,
.woocommerce-loop-product__title:hover,
.product-small:hover .product-title a{
    color: #fff !important;
}

/* Badge / sale / hot */
.badge-inner,
.badge .badge-inner,
.product-small .badge-inner{
    background-color: var(--brand-green) !important;
    color: #fff !important;
}

/* Pagination */
.nav-pagination > li > a,
.nav-pagination > li > span,
.page-numbers li a,
.page-numbers li span{
    color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
}

.nav-pagination > li > a:hover,
.nav-pagination > li > span.current,
.page-numbers li a:hover,
.page-numbers li span.current{
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

/* Tabs san pham / bai viet */
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover,
.product-tabs li.active a,
.product-tabs li a:hover{
    color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
}

/* Mui ten slider / carousel */
.flickity-button,
.slider-nav-circle .flickity-prev-next-button,
.swiper-button-prev,
.swiper-button-next,
.customswiper-prev,
.customswiper-next,
.industry-prev,
.industry-next{
    background-color: var(--brand-green) !important;
    color: #fff !important;
}

.flickity-button:hover,
.slider-nav-circle .flickity-prev-next-button:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover,
.customswiper-prev:hover,
.customswiper-next:hover,
.industry-prev:hover,
.industry-next:hover{
    background-color: var(--brand-green-hover) !important;
    color: #fff !important;
}

/* Cham slider */
.flickity-page-dots .dot.is-selected,
.swiper-pagination-bullet-active{
    background-color: var(--brand-green) !important;
}
/* Giảm khoảng cách dưới phần Sản phẩm chính */
.home-mainpro{
    padding-bottom:40px !important;
    margin-bottom:0 !important;
}

/* Giảm khoảng cách trên phần Hồ sơ chất lượng */
.home-logo{
    padding-top:20px !important;
    margin-top:0 !important;
}
.home-mainpro{
    padding:80px 0 20px !important;
}

.home-logo{
    padding:20px 0 60px !important;
}
/* ==========================
   Fix hover vang -> xanh
   Tin tuc + San pham pho bien
========================== */

:root{
    --brand-green: #16663A;
    --brand-green-hover: #2E7D4F;
}

/* Card tin tuc / category */
html body #wrapper #main .newslist.list1 > li:hover .info,
html body #wrapper #main .newslist > li:hover .info,
html body.category #wrapper #main .newslist.list1 > li:hover .info,
html body.archive #wrapper #main .newslist.list1 > li:hover .info{
    background: var(--brand-green-hover) !important;
    background-color: var(--brand-green-hover) !important;
}

html body #wrapper #main .newslist.list1 > li:hover .info *,
html body #wrapper #main .newslist > li:hover .info *,
html body.category #wrapper #main .newslist.list1 > li:hover .info *,
html body.archive #wrapper #main .newslist.list1 > li:hover .info *{
    color: #fff !important;
}

html body #wrapper #main .newslist.list1 > li:hover .info .date em,
html body #wrapper #main .newslist > li:hover .info .date em{
    color: #fff !important;
}

/* Vien / line hover neu co */
html body #wrapper #main .newslist.list1 > li:hover,
html body #wrapper #main .newslist > li:hover{
    border-color: var(--brand-green-hover) !important;
}

/* San pham pho bien ben duoi trang tin tuc */
html body #wrapper #main .pro-maylink #maylinkswiper .swiper-slide:hover .pro-info,
html body #wrapper #main .pro-maylink .maylink-list .swiper-slide:hover .pro-info{
    background: var(--brand-green-hover) !important;
    background-color: var(--brand-green-hover) !important;
}

html body #wrapper #main .pro-maylink #maylinkswiper .swiper-slide:hover .pro-info *,
html body #wrapper #main .pro-maylink .maylink-list .swiper-slide:hover .pro-info *{
    color: #fff !important;
}

html body #wrapper #main .pro-maylink #maylinkswiper .swiper-slide:hover .pro-info .title,
html body #wrapper #main .pro-maylink .maylink-list .swiper-slide:hover .pro-info .title{
    color: #fff !important;
}

/* Cham slider / nut slider */
html body #wrapper #main .pro-maylink .swiper-pagination-bullet-active,
html body #wrapper #main .swiper-pagination-bullet-active{
    background: var(--brand-green) !important;
}

html body #wrapper #main .pro-maylink .swiper-button-prev,
html body #wrapper #main .pro-maylink .swiper-button-next{
    background: var(--brand-green) !important;
    color: #fff !important;
}
/* ==========================
   Fix mau hover menu san pham + tab category
========================== */

:root{
    --brand-green: #16663A;
    --brand-green-hover: #2E7D4F;
}

/* Dropdown menu san pham */
html body .header-main .nav-dropdown li.active > a,
html body .header-main .nav-dropdown li.current-menu-item > a,
html body .header-main .nav-dropdown li > a:hover,
html body .header-main .nav-dropdown li:hover > a,
html body .nav-dropdown li.active > a,
html body .nav-dropdown li.current-menu-item > a,
html body .nav-dropdown li > a:hover,
html body .nav-dropdown li:hover > a{
    color: var(--brand-green) !important;
    background-color: rgba(22, 102, 58, 0.08) !important;
}

/* Vien / mui ten dropdown neu co */
html body .header-main .nav-dropdown,
html body .nav-dropdown{
    border-color: var(--brand-green) !important;
}

html body .header-main .nav-dropdown:before,
html body .nav-dropdown:before{
    border-bottom-color: var(--brand-green) !important;
}

/* Tab danh muc san pham */
html body #wrapper #main .product-categories a:hover,
html body #wrapper #main .product-categories .active a,
html body #wrapper #main .product-cats a:hover,
html body #wrapper #main .product-cats .active a,
html body #wrapper #main .cat-list a:hover,
html body #wrapper #main .cat-list .active a,
html body #wrapper #main .cate-list a:hover,
html body #wrapper #main .cate-list .active a{
    background-color: var(--brand-green-hover) !important;
    border-color: var(--brand-green-hover) !important;
    color: #fff !important;
}

/* Dung cho bo tab dang nut trong anh */
html body #wrapper #main a[href*="/danh-muc-san-pham/"]:hover,
html body #wrapper #main a[href*="/product-category/"]:hover,

    color: var(--brand-green) !important;
}

/* Neu nut tab co class rieng */
html body #wrapper #main .product-tab a:hover,
html body #wrapper #main .product-tab a.active,
html body #wrapper #main .pro-tab a:hover,
html body #wrapper #main .pro-tab a.active,
html body #wrapper #main .tabs a:hover,
html body #wrapper #main .tabs .active a,
html body #wrapper #main .tabs a.active{
    background-color: var(--brand-green-hover) !important;
    border-color: var(--brand-green-hover) !important;
    color: #fff !important;
}

/* Nut active dang mau vang */
html body #wrapper #main .product-tab .active,
html body #wrapper #main .pro-tab .active,
html body #wrapper #main .tabs .active{
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}
/* ==========================
   Fix nut danh muc san pham vang -> xanh
========================== */

:root{
    --brand-green: #16663A;
    --brand-green-hover: #2E7D4F;
}

/* Trang danh sach san pham - nut category custom */
html body #wrapper #main .page-main .category-list a:hover,
html body #wrapper #main .page-main .category-list a.active,
html body #wrapper #main .page-main .category-list li.cur a,
html body #wrapper #main .page-main .category-list li.active a,
html body #wrapper #main .page-main .category-list .current a,
html body #wrapper #main .page-main .catelist a:hover,
html body #wrapper #main .page-main .catelist a.active,
html body #wrapper #main .page-main .catelist li.cur a,
html body #wrapper #main .page-main .catelist li.active a,
html body #wrapper #main .page-main .catelist .current a{
    background: var(--brand-green) !important;
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

/* Neu theme dung class procat / productcat */
html body #wrapper #main .procat a:hover,
html body #wrapper #main .procat a.active,
html body #wrapper #main .procat li.cur a,
html body #wrapper #main .procat li.active a,
html body #wrapper #main .productcat a:hover,
html body #wrapper #main .productcat a.active,
html body #wrapper #main .productcat li.cur a,
html body #wrapper #main .productcat li.active a{
    background: var(--brand-green) !important;
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

/* Bat tat ca nut dang nam trong khung danh muc san pham */
html body #wrapper #main .page-main ul li.current-cat > a,
html body #wrapper #main .page-main ul li.current-menu-item > a,
html body #wrapper #main .page-main ul li.current > a,
html body #wrapper #main .page-main ul li.cur > a,
html body #wrapper #main .page-main ul li.active > a{
    background: var(--brand-green) !important;
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}



/* Neu link dang active bi gan style mau vang */
html body #wrapper #main a[style*="#b7d900"],
html body #wrapper #main a[style*="#bdd600"],
html body #wrapper #main a[style*="#c4df00"],
html body #wrapper #main a[style*="rgb(183, 217, 0)"]{
    background: var(--brand-green) !important;
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}
/* ==========================
   Product category nav - xanh dung mau, khong mat chu
========================== */

:root{
    --brand-green: #16663A;
    --brand-green-hover: #2E7D4F;
}

/* Nut mac dinh */
html body #wrapper #main .pagenav-list li > a,
html body #wrapper #main .pagenav-catelist li > a{
    background: #f8f8f8 !important;
    background-color: #f8f8f8 !important;
    border: 1px solid #e2e2e2 !important;
    color: #111 !important;
}

/* Hover + active */
html body #wrapper #main .pagenav-list li > a:hover,
html body #wrapper #main .pagenav-list li.cur > a,
html body #wrapper #main .pagenav-list li.active > a,
html body #wrapper #main .pagenav-list li.current > a,
html body #wrapper #main .pagenav-catelist li > a:hover,
html body #wrapper #main .pagenav-catelist li.cur > a,
html body #wrapper #main .pagenav-catelist li.active > a,
html body #wrapper #main .pagenav-catelist li.current > a{
    background: var(--brand-green) !important;
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

/* Tat ca chu ben trong nut active/hover */
html body #wrapper #main .pagenav-list li > a:hover *,
html body #wrapper #main .pagenav-list li.cur > a *,
html body #wrapper #main .pagenav-list li.active > a *,
html body #wrapper #main .pagenav-list li.current > a *,
html body #wrapper #main .pagenav-catelist li > a:hover *,
html body #wrapper #main .pagenav-catelist li.cur > a *,
html body #wrapper #main .pagenav-catelist li.active > a *,
html body #wrapper #main .pagenav-catelist li.current > a *{
    color: #fff !important;
}

/* Neu theme gan mau vang truc tiep vao nut */
html body #wrapper #main .pagenav-list li > a[style],
html body #wrapper #main .pagenav-catelist li > a[style]{
    color: #111 !important;
}

html body #wrapper #main .pagenav-list li.cur > a[style],
html body #wrapper #main .pagenav-list li.active > a[style],
html body #wrapper #main .pagenav-catelist li.cur > a[style],
html body #wrapper #main .pagenav-catelist li.active > a[style]{
    background: var(--brand-green) !important;
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

/* Sub menu dropdown neu co */
html body #wrapper #main .pagenav-catelist .sub-menu{
    border-top-color: var(--brand-green) !important;
}

html body #wrapper #main .pagenav-catelist .sub-menu li > a:hover,
html body #wrapper #main .pagenav-catelist .sub-menu li.cur > a{
    background: rgba(22, 102, 58, .08) !important;
    color: var(--brand-green) !important;
}
/* ==========================
   Fix day nut danh muc san pham
   Khong mat chu + active xanh dam
========================== */

html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1 > a{
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #e2e2e2 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover */
html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1 > a:hover{
    background: #2E7D4F !important;
    background-color: #2E7D4F !important;
    border-color: #2E7D4F !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Nut dang active */
html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1.cur > a,
html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1.current-cat > a,
html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1.active > a{
    background: #16663A !important;
    background-color: #16663A !important;
    border-color: #16663A !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Chu trong nut active/hover neu co span/em */
html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1 > a:hover *,
html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1.cur > a *{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* ==================================================
   MOBILE OPTIMIZE - CARTON DA
   Dan cuoi cung CSS
================================================== */

html, body{
    overflow-x: hidden !important;
}

@media screen and (max-width: 849px){

    main#main{
        margin-top: 70px !important;
    }

    .container,
    .row,
    .l-wrap,
    .home #main .l-wrap{
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .header-main{
        height: 70px !important;
    }

    #logo img{
        max-height: 56px !important;
    }

    .header .flex-row{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .home-title,
    .inquiry-title,
    .banner-title-h1{
        font-size: 30px !important;
        line-height: 1.22 !important;
        text-align: center !important;
    }

    /* Ve chung toi */
    body.home #main section.home-about .l-wrap{
        display: block !important;
    }

    body.home #main section.home-about .aboutinfo,
    body.home #main section.home-about .aboutimg{
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home #main section.home-about .about-wysiwyg,
    body.home #main section.home-about .about-wysiwyg p,
    body.home #main section.home-about .aboutinfo p{
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    /* Vi sao nen chon */
    body.home #main section.home-choose{
        padding: 45px 0 !important;
    }

    body.home #main section.home-choose .l-wrap{
        display: block !important;
    }

    body.home #main section.home-choose .chooseimg,
    body.home #main section.home-choose .chooseinfo{
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home #main section.home-choose .chooseimg img{
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
    }

    body.home #main section.home-choose .chooseinfo{
        margin-top: 24px !important;
    }

    body.home #main section.home-choose .chooseinfo .home-title{
        font-size: 30px !important;
        line-height: 1.22 !important;
        text-align: left !important;
    }

    body.home #main section.home-choose .chooseinfo > .text,
    body.home #main section.home-choose .chooseinfo > .text p,
    body.home #main section.home-choose .chooseinfo ul li .info p.p2{
        font-size: 16px !important;
        line-height: 1.65 !important;
        text-align: left !important;
    }

    body.home #main section.home-choose .chooseinfo ul{
        gap: 16px !important;
    }

    body.home #main section.home-choose .chooseinfo ul li{
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    body.home #main section.home-choose .chooseinfo ul li .icon{
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    body.home #main section.home-choose .chooseinfo ul li .info p.p1{
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    /* Bang so sanh */
    .home-compare,
    .compare-table-wrap,
    .compare-scroll{
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .home-compare table,
    .home-compare .compare-table{
        min-width: 760px !important;
    }

    /* Tin tuc */
    .newslist,
    .newslist.list1{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .newslist > li{
        width: 100% !important;
        margin: 0 !important;
    }

    .newslist > li .img img{
        width: 100% !important;
        height: auto !important;
    }

    /* Danh muc san pham */
    html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist{
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 10px 0 12px !important;
        border: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1{
        flex: 0 0 auto !important;
        border: 0 !important;
    }

    html body.tax-product_cat #wrapper #main .pagenav-cate .pagenav-catelist .LiLevel1 > a{
        padding: 10px 14px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    .pagenav-cate .pagenav-menu{
        display: none !important;
    }

    /* List san pham */
    .pro-list.list0 li{
        display: block !important;
        width: 100% !important;
        margin-bottom: 18px !important;
    }

    .pro-list.list0 li .pro-img,
    .pro-list.list0 li .pro-info{
        width: 100% !important;
    }

    .pro-list.list0 li .pro-img img{
        width: 100% !important;
        height: auto !important;
    }

    /* Form */
    .inquiry-form .form-row{
        display: block !important;
    }

    .inquiry-form .form-col,
    .inquiry-form input,
    .inquiry-form textarea{
        width: 100% !important;
    }

    /* Footer */
    .footer-wrapper,
    .footer-wrapper p,
    .footer-wrapper a,
    .footer-wrapper span{
        text-align: center !important;
    }
}

@media screen and (max-width: 549px){

    .container,
    .row,
    .l-wrap,
    .home #main .l-wrap{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .home-title,
    .inquiry-title,
    .banner-title-h1{
        font-size: 26px !important;
    }

    body.home #main section.home-choose .chooseinfo .home-title{
        font-size: 27px !important;
    }

    .button,
    button,
    input[type="submit"]{
        min-height: 42px !important;
    }
}
/* Mobile page tabs: chia 2 cot, khong xep bac thang */
@media screen and (max-width: 849px){

    body:not(.off-canvas-active) .pagenav,
    body:not(.off-canvas-active) .page-nav,
    body:not(.off-canvas-active) .pagenav-cate{
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px auto !important;
        padding: 0 12px !important;
        position: static !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body:not(.off-canvas-active) .pagenav-list{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    body:not(.off-canvas-active) .pagenav-list li{
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    body:not(.off-canvas-active) .pagenav-list li a{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        width: 100% !important;
        padding: 10px 8px !important;
        white-space: normal !important;
        text-align: center !important;
        border: 1px solid #e5e5e5 !important;
        background: #fff !important;
        color: #111 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    body:not(.off-canvas-active) .pagenav-list li.cur a,
    body:not(.off-canvas-active) .pagenav-list li.active a{
        color: #16663A !important;
    }

    /* Mobile menu accordion */
    .off-canvas .nav-sidebar li.menu-item-has-children,
    .mfp-content .nav-sidebar li.menu-item-has-children{
        position: relative !important;
    }

    .off-canvas .nav-sidebar li.menu-item-has-children > a,
    .mfp-content .nav-sidebar li.menu-item-has-children > a{
        padding-right: 48px !important;
    }

    .off-canvas .nav-sidebar li.menu-item-has-children > ul,
    .mfp-content .nav-sidebar li.menu-item-has-children > ul{
        display: none !important;
        padding: 4px 0 8px 14px !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .off-canvas .nav-sidebar li.menu-item-has-children.is-open > ul,
    .mfp-content .nav-sidebar li.menu-item-has-children.is-open > ul{
        display: block !important;
    }

    .mobile-sub-toggle{
        position: absolute !important;
        right: 8px !important;
        top: 7px !important;
        width: 34px !important;
        height: 34px !important;
        border: 0 !important;
        background: transparent !important;
        z-index: 50 !important;
    }

    .mobile-sub-toggle::before{
        content: "" !important;
        display: block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #16663A !important;
        border-bottom: 2px solid #16663A !important;
        transform: rotate(45deg) !important;
        margin: 9px auto 0 !important;
    }

    .menu-item-has-children.is-open > .mobile-sub-toggle::before{
        transform: rotate(225deg) !important;
        margin-top: 13px !important;
    }

    .off-canvas .nav-sidebar .toggle,
    .mfp-content .nav-sidebar .toggle{
        display: none !important;
    }
}
@media screen and (max-width: 849px){
    .nav-sidebar li.menu-item-has-children{
        position: relative !important;
    }

    .nav-sidebar li.menu-item-has-children > a{
        padding-right: 48px !important;
    }

    .nav-sidebar li.menu-item-has-children > ul{
        display: none !important;
    }

    .nav-sidebar li.menu-item-has-children.is-open > ul{
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 999px !important;
        overflow: visible !important;
        padding-left: 14px !important;
    }

    .mobile-sub-toggle{
        position: absolute !important;
        right: 8px !important;
        top: 7px !important;
        width: 34px !important;
        height: 34px !important;
        border: 0 !important;
        background: transparent !important;
        z-index: 999 !important;
    }

    .mobile-sub-toggle::before{
        content: "" !important;
        display: block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #16663A !important;
        border-bottom: 2px solid #16663A !important;
        transform: rotate(45deg) !important;
        margin: 8px auto 0 !important;
    }

    .menu-item-has-children.is-open > .mobile-sub-toggle::before{
        transform: rotate(225deg) !important;
        margin-top: 13px !important;
    }

    .nav-sidebar li.menu-item-has-children > .toggle{
        opacity: 0 !important;
        z-index: 1000 !important;
    }
}
@media screen and (max-width: 849px){
    .nav-sidebar li.menu-item-has-children{
        position: relative !important;
    }

    .nav-sidebar li.menu-item-has-children > a{
        padding-right: 48px !important;
    }

    .nav-sidebar li.menu-item-has-children > ul{
        display: none !important;
    }

    .nav-sidebar li.menu-item-has-children.is-open > ul{
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 999px !important;
        overflow: visible !important;
        padding-left: 14px !important;
    }

    .mobile-sub-toggle{
        position: absolute !important;
        right: 8px !important;
        top: 7px !important;
        width: 34px !important;
        height: 34px !important;
        border: 0 !important;
        background: transparent !important;
        z-index: 999 !important;
    }

    .mobile-sub-toggle::before{
        content: "" !important;
        display: block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #16663A !important;
        border-bottom: 2px solid #16663A !important;
        transform: rotate(45deg) !important;
        margin: 8px auto 0 !important;
    }

    .menu-item-has-children.is-open > .mobile-sub-toggle::before{
        transform: rotate(225deg) !important;
        margin-top: 13px !important;
    }

    .nav-sidebar li.menu-item-has-children > .toggle{
        opacity: 0 !important;
        z-index: 1000 !important;
    }
}
/* ==================================================
   MOBILE MENU - Dung co che mac dinh Flatsome
   Khong khoa submenu bang display:none!important
================================================== */

@media screen and (max-width: 849px){

    /* Item cha */
    .off-canvas .nav-sidebar li.menu-item-has-children,
    .mfp-content .nav-sidebar li.menu-item-has-children{
        position: relative !important;
    }

    .off-canvas .nav-sidebar li.menu-item-has-children > a,
    .mfp-content .nav-sidebar li.menu-item-has-children > a{
        padding-right: 48px !important;
    }

    /* Quan trong: KHONG dung !important o display none */
    .off-canvas .nav-sidebar li.menu-item-has-children > ul,
    .mfp-content .nav-sidebar li.menu-item-has-children > ul{
        display: none;
        padding: 4px 0 8px 14px !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Khi Flatsome them class active thi hien menu con */
    .off-canvas .nav-sidebar li.menu-item-has-children.active > ul,
    .off-canvas .nav-sidebar li.menu-item-has-children.current-menu-parent > ul,
    .off-canvas .nav-sidebar li.menu-item-has-children.current-menu-ancestor > ul,
    .mfp-content .nav-sidebar li.menu-item-has-children.active > ul,
    .mfp-content .nav-sidebar li.menu-item-has-children.current-menu-parent > ul,
    .mfp-content .nav-sidebar li.menu-item-has-children.current-menu-ancestor > ul{
        display: block;
    }

    /* Nut mui ten mac dinh cua Flatsome */
    .off-canvas .nav-sidebar li.menu-item-has-children > .toggle,
    .mfp-content .nav-sidebar li.menu-item-has-children > .toggle{
        display: flex !important;
        position: absolute !important;
        right: 6px !important;
        top: 5px !important;
        width: 38px !important;
        height: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 20 !important;
    }

    .off-canvas .nav-sidebar li.menu-item-has-children > .toggle i,
    .mfp-content .nav-sidebar li.menu-item-has-children > .toggle i{
        display: block !important;
        color: #16663A !important;
        font-size: 16px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Nếu icon font lỗi thì vẽ mũi tên bằng CSS */
    .off-canvas .nav-sidebar li.menu-item-has-children > .toggle i:before,
    .mfp-content .nav-sidebar li.menu-item-has-children > .toggle i:before{
        content: "" !important;
        display: block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #16663A !important;
        border-bottom: 2px solid #16663A !important;
        transform: rotate(45deg) !important;
    }

    .off-canvas .nav-sidebar li.menu-item-has-children.active > .toggle i:before,
    .mfp-content .nav-sidebar li.menu-item-has-children.active > .toggle i:before{
        transform: rotate(225deg) !important;
    }

    /* Menu con */
    .off-canvas .nav-sidebar li.menu-item-has-children > ul li a,
    .mfp-content .nav-sidebar li.menu-item-has-children > ul li a{
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #444 !important;
        padding: 9px 16px !important;
        line-height: 1.35 !important;
        background: transparent !important;
    }

    .off-canvas .nav-sidebar li.current-menu-item > a,
    .off-canvas .nav-sidebar li.current-menu-parent > a,
    .mfp-content .nav-sidebar li.current-menu-item > a,
    .mfp-content .nav-sidebar li.current-menu-parent > a{
        color: #16663A !important;
        background: rgba(22,102,58,.08) !important;
    }
}
/* ==================================================
   FIX CUOI - MOBILE MENU XỔ DANH MỤC
   Dán cuối cùng CSS
================================================== */

@media screen and (max-width: 849px){

    /* Mặc định vẫn ẩn menu con */
    html body .off-canvas .nav-sidebar li.menu-item-has-children > ul,
    html body .mfp-content .nav-sidebar li.menu-item-has-children > ul{
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 0 0 14px !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Bắt tất cả trạng thái mở của Flatsome */
    html body .off-canvas .nav-sidebar li.menu-item-has-children.active > ul,
    html body .off-canvas .nav-sidebar li.menu-item-has-children.open > ul,
    html body .off-canvas .nav-sidebar li.menu-item-has-children.toggled > ul,
    html body .off-canvas .nav-sidebar li.menu-item-has-children.current-menu-parent > ul,
    html body .off-canvas .nav-sidebar li.menu-item-has-children.current-menu-ancestor > ul,
    html body .off-canvas .nav-sidebar li.menu-item-has-children:has(> a[aria-expanded="true"]) > ul,
    html body .off-canvas .nav-sidebar li.menu-item-has-children:has(> .toggle[aria-expanded="true"]) > ul,
    html body .mfp-content .nav-sidebar li.menu-item-has-children.active > ul,
    html body .mfp-content .nav-sidebar li.menu-item-has-children.open > ul,
    html body .mfp-content .nav-sidebar li.menu-item-has-children.toggled > ul,
    html body .mfp-content .nav-sidebar li.menu-item-has-children.current-menu-parent > ul,
    html body .mfp-content .nav-sidebar li.menu-item-has-children.current-menu-ancestor > ul,
    html body .mfp-content .nav-sidebar li.menu-item-has-children:has(> a[aria-expanded="true"]) > ul,
    html body .mfp-content .nav-sidebar li.menu-item-has-children:has(> .toggle[aria-expanded="true"]) > ul{
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: 1000px !important;
        overflow: visible !important;
        padding: 4px 0 8px 14px !important;
    }

    /* Nút mũi tên mặc định */
    html body .off-canvas .nav-sidebar li.menu-item-has-children > .toggle,
    html body .mfp-content .nav-sidebar li.menu-item-has-children > .toggle{
        display: flex !important;
        position: absolute !important;
        right: 6px !important;
        top: 5px !important;
        width: 38px !important;
        height: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 999 !important;
        color: #16663A !important;
    }

    html body .off-canvas .nav-sidebar li.menu-item-has-children,
    html body .mfp-content .nav-sidebar li.menu-item-has-children{
        position: relative !important;
    }

    html body .off-canvas .nav-sidebar li.menu-item-has-children > a,
    html body .mfp-content .nav-sidebar li.menu-item-has-children > a{
        padding-right: 48px !important;
    }

    /* Vẽ mũi tên nếu icon lỗi */
    html body .off-canvas .nav-sidebar li.menu-item-has-children > .toggle::after,
    html body .mfp-content .nav-sidebar li.menu-item-has-children > .toggle::after{
        content: "" !important;
        display: block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #16663A !important;
        border-bottom: 2px solid #16663A !important;
        transform: rotate(45deg) !important;
        margin-top: -4px !important;
    }

    html body .off-canvas .nav-sidebar li.menu-item-has-children.active > .toggle::after,
    html body .off-canvas .nav-sidebar li.menu-item-has-children.open > .toggle::after,
    html body .off-canvas .nav-sidebar li.menu-item-has-children.toggled > .toggle::after,
    html body .mfp-content .nav-sidebar li.menu-item-has-children.active > .toggle::after,
    html body .mfp-content .nav-sidebar li.menu-item-has-children.open > .toggle::after,
    html body .mfp-content .nav-sidebar li.menu-item-has-children.toggled > .toggle::after{
        transform: rotate(225deg) !important;
        margin-top: 4px !important;
    }

    html body .off-canvas .nav-sidebar li.menu-item-has-children > .toggle i,
    html body .mfp-content .nav-sidebar li.menu-item-has-children > .toggle i{
        display: none !important;
    }
}