.form-flat input:not([type=submit]) {
	background: #fff !important;
	padding: 20px;
}
.icon-search:before {
	color: var(--fs-color-secondary) !important
}

.header-nav.header-nav-main.nav.nav-left {
	justify-content: center
}

.header-cart-title {
	color: #fff
}

.header-nav .icon-shopping-cart:before {
	color: #fff
}



/* 1. Đổi màu chữ, tắt viết HOA cho toàn bộ menu */
.header-bottom-nav.nav > li > a.nav-top-link {
	color: var(--primary-color) !important;      /* Màu xanh navy đậm chuẩn như ảnh */
	font-size: 20px;     /* Kích thước chữ thanh thoát */
	font-weight: 800 !important;    /* Độ dày vừa phải */
	text-transform: none !important;/* TẮT CHỮ HOA mặc định của Flatsome */
	letter-spacing: 0 !important;   /* Khoảng cách chữ tự nhiên */
	display: inline-flex !important;
	align-items: center;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}



/* 3. Tinh chỉnh icon mũi tên nhỏ gọn và cùng màu chữ */
.header-bottom-nav.nav > li > a.nav-top-link i.icon-angle-down {
	color: #000 !important;      /* Màu icon trùng màu chữ */
	font-size: 11px !important;     /* Mũi tên nhỏ nhắn, sắc nét */
	margin-left: 6px !important;    /* Khoảng cách với chữ */
	line-height: 1 !important;
	transition: transform 0.25s ease;
}

/* 4. Hiệu ứng: Khi rê chuột vào, mũi tên tự động xoay ngược lên */
.header-bottom-nav.nav > li:hover > a.nav-top-link i.icon-angle-down {
	transform: rotate(180deg);
}



#wide-nav .flex-row.container{
	width: 100%
}

#wide-nav .flex-col.hide-for-medium.flex-left {
	width: 100%;
}

#wide-nav .nav.header-nav.header-bottom-nav.nav-left {
	justify-content: center;
	gap: 50px;
}

.banner-homepage .img-inner {
	border-radius: 20px;
}

.banner-image .img-inner {
	border-radius: 20px 0 0 20px
}

.product-small .col-inner,
.product-small .col-inner .box{
	border-radius: 14px;
}
.product-small .col-inner .box .box-image {
	border-radius: 14px 14px 0 0;
}

.product-small .col-inner .product-title a {
	font-size: 1.1rem;
	color: #000;
	font-weight: 800;
	margin-bottom: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 2;          /* Số dòng tối đa */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-small .col-inner .woocommerce-Price-amount bdi {
	color: var(--primary-color);
	font-size: 1rem;
}


/* Khoảng cách từ giá sản phẩm xuống nút bấm bên trong box-text */
.box-text-products .custom-cart-btn-wrapper {
	margin-top: 25px;
	margin-bottom: 5px;
	text-align: center;
	width: 100%;
}

/* Nút bấm tự co giãn đẹp trong khung box-text */
.box-text-products .custom-cart-btn-wrapper a.button {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 3px 4px 3px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border: none !important;
    box-shadow: 0 3px 8px rgba(239, 39, 45, 0.2) !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 180px !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 1.2 !important;
    margin: 0 auto !important;
}

.box-text-products .custom-cart-btn-wrapper .custom-cart-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background-color: #ffffff;
	border-radius: 50%;
	margin-left: 8px;
	flex-shrink: 0;
}

.box-text-products .custom-cart-btn-wrapper .custom-cart-icon svg {
	width: 15px;
	height: 15px;
}
/* Ẩn link 'Xem giỏ hàng' xuất hiện sau khi bấm mua */
.product-small .added_to_cart,
.custom-cart-btn-wrapper .added_to_cart {
	display: none !important;
}


@media(max-width: 549px){
	.product-homepage  .row-small>.flickity-viewport>.flickity-slider>.col {
		padding: 0 4.8px 19.6px;
	}
	.product-homepage .product-small .col-inner .product-title a {
		font-size: 1rem;
		margin-bottom: 10px;
	}
	.product-homepage .box-text-products .custom-cart-btn-wrapper a.button {
		font-size: 13px !important
	}
	.product-homepage .box-text-products .custom-cart-btn-wrapper {
		margin-top: 20px !important;
	}
	.product-homepage .custom-cat-header {
		margin-bottom: 10px;
	}
	.product-homepage .custom-cat-section {
		margin-bottom: 30px;
	}
}


.post-item .col-inner,
.post-item .col-inner .box {
	border-radius: 14px;
}
.post-item .col-inner .box .box-image {
	border-radius: 14px 14px 0 0;
}

.post-item .col-inner .box .post-title a,
.post-item .col-inner .box .from_the_blog_excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;          /* Giới hạn đúng 2 dòng */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;       /* Thêm dấu 3 chấm (...) ở cuối */
	word-break: break-word; 
	color: var(--primary-color)
}

.post-item .col-inner .box .post-meta {
	color: var(--primary-color);
	margin-bottom: 10px;
}

.post-item .col-inner .box .is-divider {
	display: none
}
.custom-cat-header p {
	margin-bottom: 0
}

@media(max-width: 549px){
	.blog-homepage  .row-small>.flickity-viewport>.flickity-slider>.col {
		padding: 0 4.8px 19.6px;
	}
}



#respond {
	display: none
}
.blog-wrapper .is-divider {
	display: none
}

.blog-wrapper .archive-page-header .page-title  span {
	font-size: 1.5em;
	color: #000;
}
.article-inner .entry-header-text {
	padding-bottom: 0;
}

.article-inner .entry-title {
	color: var(--primary-color);
	margin-bottom: 0
}

.article-inner h2,.article-inner h5,.article-inner h3,.article-inner h4 {
	color: var(--primary-color)
}

.article-inner p {
	text-align: justify
}

@media(max-width: 549px){
	.article-inner.has-shadow .entry-content {
		padding-left: 1em !important;
		padding-right: 1em !important;
	}
	.news-page .row-small>.col {
		padding: 0 4.8px 19.6px;
	}
}










/* Khung viền ngoài */
.box-chinh-sach {
	border: 1.5px solid #e53935; /* Màu viền đỏ */
	border-radius: 8px;           /* Bo góc */
	padding: 16px 18px;          /* Khoảng cách trong */
	background-color: #fff;       /* Nền trắng */
	display: flex;
	flex-direction: column;
	gap: 14px;                   /* Khoảng cách giữa các dòng */
}

/* Từng dòng chính sách */
.box-chinh-sach .policy-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Icon */
.box-chinh-sach .policy-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box-chinh-sach .policy-icon svg {
	width: 22px;
	height: 22px;
	stroke: #e53935; /* Màu icon đỏ */
}

/* Nội dung chữ */
.box-chinh-sach .policy-text {
	font-size: 15px;
	line-height: 1.2;
	color: var(--primary-color); /* Toàn bộ chữ mang tông màu đỏ */
}

.box-chinh-sach .policy-text strong em {
	font-weight: 700;
	font-style: italic;
}

/* Link số điện thoại */
.box-chinh-sach .policy-text a {
	color: inherit;
	text-decoration: none;
}
.box-chinh-sach .policy-text a:hover {
	text-decoration: underline;
}

/* Khung tổng thể có nền hồng phấn nhẹ */
.box-dac-quyen {
	background-color: #fcf0f0;  /* Màu nền hồng nhạt */
	border-radius: 8px;          /* Bo góc khung */
	padding: 16px;              /* Khoảng cách viền bên trong */
	display: flex;
	flex-direction: column;
	gap: 10px;                  /* Khoảng cách giữa các dòng */
	max-width: 380px;           /* Độ rộng tối đa của box */
}

/* Từng dòng */
.box-dac-quyen .quyen-item {
	display: flex;
	align-items: flex-start;    /* Canh hàng theo đầu dòng */
	gap: 10px;                  /* Khoảng cách giữa ô số và chữ */
}

/* Ô số màu đỏ bo góc */
.box-dac-quyen .quyen-num {
	background-color: #e52828;  /* Màu đỏ của ô số */
	color: #ffffff;             /* Màu chữ trắng */
	font-size: 13px;
	font-weight: 700;
	width: 22px;
	height: 22px;
	border-radius: 4px;         /* Bo góc ô vuông */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;             /* Giữ nguyên kích thước không bị méo */
	margin-top: 1px;            /* Căn đều với dòng chữ đầu tiên */
}

/* Phần chữ */
.box-dac-quyen .quyen-text {
	font-size: 14px;
	line-height: 1.4;
	color: #1a1a1a;             /* Màu chữ thường */
}

/* Đoạn in đậm + nghiêng */
.box-dac-quyen .quyen-text strong em {
	font-weight: 700;
	font-style: italic;
	color: #000000;
}

.simple-products-1 .row {
	background: #fff;
	padding: 20px;
	border-radius: 5px;
}

.simple-products-1 .product-title {
	color: var(--primary-color)
}

.simple-products-1 .title-2 .woocommerce-Price-amount bdi{
	font-size: 22px;
	color: var(--primary-color)
}


















/* --- TÃ¡Â»â€NG THÃ¡Â»â€š GIÃ¡Â»Å½ HÃƒâ‚¬NG --- */
.cart-container.page-checkout {
	background-color: #f8fafc; /* NÃ¡Â»Ân xÃƒÂ¡m nhÃ¡ÂºÂ¡t hiÃ¡Â»â€¡n Ã„â€˜Ã¡ÂºÂ¡i */
	padding-top: 10px;
	padding-bottom: 40px;
}

/* --- CÃ¡Â»ËœT TRÃƒÂI: DANH SÃƒÂCH SÃ¡ÂºÂ¢N PHÃ¡ÂºÂ¨M --- */
.woocommerce-cart-form {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	padding: 24px;
	border: 1px solid #e2e8f0;
}

/* Ã„ÂÃ¡Â»â€¹nh dÃ¡ÂºÂ¡ng bÃ¡ÂºÂ£ng sÃ¡ÂºÂ£n phÃ¡ÂºÂ©m */
.shop_table.cart {
	border-collapse: collapse;
	width: 100%;
	border: none !important;
}

/* TiÃƒÂªu Ã„â€˜Ã¡Â»Â bÃ¡ÂºÂ£ng */
.shop_table.cart thead th {
	background-color: #f1f5f9;
	color: #475569;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	padding: 14px 16px;
	border: none;
}

/* CÃƒÂ¡c hÃƒÂ ng sÃ¡ÂºÂ£n phÃ¡ÂºÂ©m */
.shop_table.cart tbody tr.cart_item {
	border-bottom: 1px solid #f1f5f9;
}

.shop_table.cart tbody td {
	padding: 20px 16px;
	vertical-align: middle;
}

/* NÃƒÂºt xÃƒÂ³a sÃ¡ÂºÂ£n phÃ¡ÂºÂ©m (x) */
.shop_table.cart td.product-remove a.remove {
	color: #94a3b8 !important;
	font-size: 1.4rem !important;
	font-weight: 300;
	transition: color 0.2s ease, transform 0.2s ease;
	display: inline-block;
}

.shop_table.cart td.product-remove a.remove:hover {
	color: #ef4444 !important; /* Ã„ÂÃ¡Â»â€¢i sang mÃƒÂ u Ã„â€˜Ã¡Â»Â khi hover */
	background-color: transparent !important;
	transform: scale(1.1);
}

/* HÃƒÂ¬nh Ã¡ÂºÂ£nh sÃ¡ÂºÂ£n phÃ¡ÂºÂ©m */
.product-thumbnail img {
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	max-width: 75px;
	height: auto;
}

/* TÃƒÂªn sÃ¡ÂºÂ£n phÃ¡ÂºÂ©m */
.product-name a {
	font-weight: 600;
	color: #1e293b;
	text-decoration: none;
	transition: color 0.2s;
}

.product-name a:hover {
	color: #3b82f6; /* MÃƒÂ u xanh khi hover */
}

/* GiÃƒÂ¡ vÃƒÂ  tÃ¡ÂºÂ¡m tÃƒÂ­nh */
.product-price, .product-subtotal {
	font-weight: 500;
	color: #334155;
}

.product-subtotal .amount {
	color: #2563eb !important; /* NhÃ¡ÂºÂ¥n mÃ¡ÂºÂ¡nh giÃƒÂ¡ tiÃ¡Â»Ân tÃ¡ÂºÂ¡m tÃƒÂ­nh */
	font-weight: 600;
}



.ux-quantity__button {
	background: #f1f5f9 !important;
	color: #475569 !important;
	border: none !important;
	width: 32px !important;
	height: 32px !important;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.2s;
	line-height: 1;
}

.ux-quantity__button:hover {
	background: #e2e8f0 !important;
}

.ux-quantity input.qty {
	width: 42px !important;
	height: 32px !important;
	border: none !important;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	color: #1e293b;
}

/* --- KHU VÃ¡Â»Â°C HÃƒâ‚¬NH Ã„ÂÃ¡Â»ËœNG DÃ†Â¯Ã¡Â»Å¡I BÃ¡ÂºÂ¢NG --- */
.shop_table.cart td.actions {
	padding-top: 24px !important;
	border-top: 1px solid #e2e8f0;
}

/* NÃƒÂºt TiÃ¡ÂºÂ¿p tÃ¡Â»Â¥c mua sÃ¡ÂºÂ¯m */
.continue-shopping .button-continue-shopping {
	border-radius: 6px !important;
	border: 1px solid #cbd5e1 !important;
	background: #ffffff !important;
	color: #475569 !important;
	text-transform: none !important;
	font-weight: 500;
	padding: 10px 18px;
	font-size: 0.9rem;
	box-shadow: none;
	transition: all 0.2s;
}

.continue-shopping .button-continue-shopping:hover {
	background: #f8fafc !important;
	color: #1e293b !important;
	border-color: #94a3b8 !important;
}

/* NÃƒÂºt CÃ¡ÂºÂ­p nhÃ¡ÂºÂ­t giÃ¡Â»Â hÃƒÂ ng */
button[name="update_cart"] {
	border-radius: 6px !important;
	background: #f1f5f9 !important;
	color: #94a3b8 !important;
	border: 1px solid #e2e8f0 !important;
	text-transform: none !important;
	font-weight: 500;
	padding: 10px 18px !important;
	font-size: 0.9rem;
}

button[name="update_cart"]:not(:disabled) {
	background: #3b82f6 !important;
	color: #ffffff !important;
	border-color: #3b82f6 !important;
	cursor: pointer;
}

/* --- CÃ¡Â»ËœT PHÃ¡ÂºÂ¢I: THÃƒâ€NG TIN Ã„ÂÃ†Â N HÃƒâ‚¬NG (SIDEBAR) --- */
.cart-sidebar {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	padding: 24px;
	border: 1px solid #e2e8f0;
}

/* TiÃƒÂªu Ã„â€˜Ã¡Â»Â tÃƒÂ³m tÃ¡ÂºÂ¯t Ã„â€˜Ã†Â¡n hÃƒÂ ng */
.cart_totals h2, .cart_totals table thead {
	display: none; /* Ã¡ÂºÂ¨n tiÃƒÂªu Ã„â€˜Ã¡Â»Â cÃ…Â© */
}

.cart_totals::before {
	content: "Tóm tắt đơn hàng";
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 20px;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 12px;
}

/* BÃ¡ÂºÂ£ng tÃƒÂ­nh tÃ¡Â»â€¢ng */
.cart_totals .shop_table {
	width: 100%;
	border: none !important;
	margin-bottom: 20px;
}

.cart_totals .shop_table tr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px dashed #e2e8f0;
}

.cart_totals .shop_table tr.order-total {
	border-bottom: none;
	padding-top: 16px;
}

.cart_totals .shop_table th {
	font-weight: 500;
	color: #64748b;
	text-align: left;
	padding: 0;
}

.cart_totals .shop_table td {
	text-align: right;
	padding: 0;
	font-weight: 600;
	color: #1e293b;
}

/* SÃ¡Â»â€˜ tiÃ¡Â»Ân tÃ¡Â»â€¢ng cÃ¡Â»â„¢ng */
.cart_totals .shop_table tr.order-total td .amount {
	font-size: 1.3rem;
	color: #ef4444 !important; /* Ã„ÂÃ¡Â»â€¢i sang mÃƒÂ u Ã„â€˜Ã¡Â»Â/cam nÃ¡Â»â€¢i bÃ¡ÂºÂ­t */
}

/* NÃƒÂºt TiÃ¡ÂºÂ¿n hÃƒÂ nh thanh toÃƒÂ¡n */
.wc-proceed-to-checkout .checkout-button {
	display: block;
	text-align: center;
	background-color: var(--primary-color) !important; /* MÃƒÂ u xanh lÃƒÂ¡ hiÃ¡Â»â€¡n Ã„â€˜Ã¡ÂºÂ¡i */
	color: #ffffff !important;
	font-size: 1rem;
	font-weight: 600;
	padding: 14px !important;
	border-radius: 8px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: background 0.2s ease, transform 0.1s ease;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
	border: none !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
	background-color: var(--fs-color-secondary) !important;
	transform: translateY(-1px);
}

/* --- KHU VÃ¡Â»Â°C NHÃ¡ÂºÂ¬P MÃƒÆ’ GIÃ¡ÂºÂ¢M GIÃƒÂ (COUPON) --- */
.ux-cart-coupon {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #f1f5f9;
}

.ux-cart-coupon .coupon h3 {
	font-size: 0.9rem;
	font-weight: 600;
	color: #475569;
	margin-bottom: 12px;
}

.ux-cart-coupon .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ux-cart-coupon input#coupon_code {
	flex: 1;
	min-width: 140px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 0.85rem;
	outline: none;
	transition: border-color 0.2s;
	height: 40px;
}

.ux-cart-coupon input#coupon_code:focus {
	border-color: #3b82f6;
}

.ux-cart-coupon button[name="apply_coupon"] {
	border-radius: 6px !important;
	background: #1e293b !important; /* MÃƒÂ u tÃ¡Â»â€˜i lÃ¡Â»â€¹ch lÃƒÂ£m */
	color: #ffffff !important;
	padding: 8px 16px !important;
	font-weight: 500;
	font-size: 0.85re;
	margin: 0;
}















/* 1. Bố cục Form: Cho phép tự động xuống dòng */
form.cart {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px 10px !important; /* Khoảng cách hàng và cột */
}

/* 2. Ô số lượng: Độc chiếm 1 dòng ở trên */
form.cart .ux-quantity {
	width: 100% !important;
	display: flex !important;
	margin: 0 !important;
}

/* Định dạng viền ô số lượng (- 1 +) */
form.cart .ux-quantity input {
	border-radius: 0 !important;        /* Góc vuông theo hình */
	border: 1px solid #ccc !important;  /* Viền xám */
	box-shadow: none !important;
	background: #fff !important;
	color: #111 !important;
	font-weight: 700;
	height: 40px !important;
}

form.cart .ux-quantity .qty {
	border-left: none !important;
	border-right: none !important;
	max-width: 50px !important;
}

/* 3. Hai nút bấm: Chia đôi 50/50 nằm ngang hàng */
form.cart .single_add_to_cart_button,
form.cart .ux-buy-now-button {
	flex: 1 1 0% !important;            /* Chia đều mỗi nút 50% */
	margin: 0 !important;                /* Xóa margin mặc định của theme */
	border: none !important;
	border-radius: 0 !important;        /* Góc vuông */
	color: #ffffff !important;           /* Chữ trắng */
	font-weight: 700 !important;         /* Chữ đậm */
	text-transform: uppercase !important;/* In hoa toàn bộ */
	font-size: 14px !important;
	height: 44px !important;             /* Chiều cao nút */
	line-height: 44px !important;
	padding: 0 5px !important;
	text-align: center;
	box-shadow: none !important;
	transition: all 0.2s ease;
	border-radius: 5px !important;
}

/* Hiệu ứng khi rê chuột vào nút */
form.cart .single_add_to_cart_button:hover {
	background-color: var(--primary-color) !important; /* Đỏ đậm hơn khi hover */
}
form.cart .ux-buy-now-button:hover {
	background-color: var(--fs-color-secondary) !important; /* Đỏ đậm hơn khi hover */

}
.simple-products-2 .row {
	background: #fff;
	padding: 20px;
	border-radius: 5px;
}

#tab-title-reviews {
	display: none
}

.simple-products-2 .woocommerce-tabs ul li a {
	font-size: 1rem;
	color: var(--fs-color-secondary)
}

.simple-products-2 .woocommerce-tabs .tab-panels {
	padding-top: 0
}

.related-products .product-small .col-inner{
	box-shadow: 0 1px 3px -2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}

.related-products .product-small .col-inner .box-text {
	padding-left: 1.2em;
	padding-right: 1.2em;
	padding-bottom: 1.4em;
	padding-top: .7em;
	background: #fff;
	border-radius: 0 0 14px 14px;
}

.simple-products-3 .row {
	padding: 15px;
	background: #fff;
	border-radius: 5px;
}

.simple-products-3 .product-section {
	border-top: 0px !important;
}

.simple-products-3 .product-section-title {
	padding-top: 0px;
	padding-bottom: 0;
	color: var(--fs-color-secondary);
}


@media(max-width: 549px){
	.simple-products-3 .row,
	.simple-products-2 .row,
	.simple-products-1 .row{
		padding: 0px;
		padding-top: 10px;
	}
	.simple-products-3 .row-small>.flickity-viewport>.flickity-slider>.col {
		padding: 0 4.8px 19.6px;
	}

	.custom-cart-text {
		font-size: 13px !important;
	}
	.product-small .col-inner .product-title a {
		margin-bottom: 10px;
		font-size: 1rem;
	}
	.box-text-products .custom-cart-btn-wrapper {
		margin-top: 20px;
	}
}
















/* --- TÃ¡Â»â€NG THÃ¡Â»â€š TRANG THANH TOÃƒÂN --- */
.cart-container.page-checkout {
	background-color: #f8fafc; /* TÃƒÂ´ng nÃ¡Â»Ân xÃƒÂ¡m nhÃ¡ÂºÂ¡t tÃ¡Â»â€˜i giÃ¡ÂºÂ£n */
	padding-top: 10px;
	padding-bottom: 40px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- CÃ¡Â»ËœT TRÃƒÂI: THÃƒâ€NG TIN KHÃƒÂCH HÃƒâ‚¬NG --- */
#customer_details {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	padding: 30px;
	border: 1px solid #e2e8f0;
}

#customer_details h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1e293b;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 12px;
	margin-bottom: 24px;
}

/* CÃƒÂ¡c trÃ†Â°Ã¡Â»Âng nhÃ¡ÂºÂ­p liÃ¡Â»â€¡u (Form fields) */
.form-row {
	margin-bottom: 18px !important;
}

.form-row label {
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
	color: #475569;
	margin-bottom: 6px;
}

.form-row .required {
	color: #ef4444 !important;
	text-decoration: none;
}

/* Ãƒâ€ nhÃ¡ÂºÂ­p dÃ¡Â»Â¯ liÃ¡Â»â€¡u */
.form-row input.input-text, 
.form-row textarea {
	width: 100%;
	height: 44px;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 0.95rem;
	color: #1e293b;
	background-color: #ffffff;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
	outline: none;
}

/* HiÃ¡Â»â€¡u Ã¡Â»Â©ng khi nhÃ¡ÂºÂ¥p vÃƒÂ o ÃƒÂ´ nhÃ¡ÂºÂ­p */
.form-row input.input-text:focus, 
.form-row textarea:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* --- CÃ¡Â»ËœT PHÃ¡ÂºÂ¢I: CHI TIÃ¡ÂºÂ¾T Ã„ÂÃ†Â N HÃƒâ‚¬NG (SIDEBAR) --- */
.large-5.col .col-inner.has-border {
	border: 1px solid #e2e8f0 !important;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	padding: 30px;
}

#order_review_heading {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1e293b;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 12px;
	margin-top: 0;
	margin-bottom: 20px;
}

/* BÃ¡ÂºÂ£ng thÃƒÂ´ng tin Ã„â€˜Ã¡ÂºÂ·t hÃƒÂ ng */
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.woocommerce-checkout-review-order-table th, 
.woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	border-bottom: 1px dashed #e2e8f0;
	color: #334155;
}

.woocommerce-checkout-review-order-table th {
	font-weight: 600;
	color: #475569;
	text-align: left;
}

.woocommerce-checkout-review-order-table td.product-total {
	text-align: right;
	font-weight: 500;
}

.woocommerce-checkout-review-order-table .product-quantity {
	color: #64748b;
	font-weight: 400;
}

/* PhÃ¡ÂºÂ§n tÃ¡Â»â€¢ng tiÃ¡Â»Ân (tfoot) */
.woocommerce-checkout-review-order-table tfoot th {
	font-weight: 500;
	color: #64748b;
}

.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	font-weight: 600;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th {
	color: #1e293b;
	font-weight: 700;
	font-size: 1.1rem;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	color: #ef4444; /* LÃƒÂ m nÃ¡Â»â€¢i bÃ¡ÂºÂ­t tÃ¡Â»â€¢ng tiÃ¡Â»Ân */
	font-weight: 700;
	font-size: 1.25rem;
}

/* --- KHU VÃ¡Â»Â°C PHÃ†Â¯Ã†Â NG THÃ¡Â»Â¨C THANH TOÃƒÂN --- */
#payment {
	background-color: #f8fafc;
	border-radius: 8px;
	padding: 16px;
	margin-top: 20px;
	border: 1px solid #f1f5f9;
}

#payment ul.payment_methods {
	padding: 0;
	list-style: none;
	margin: 0 0 16px 0;
}

/* Khung thÃƒÂ´ng bÃƒÂ¡o khÃƒÂ´ng cÃƒÂ³ phÃ†Â°Ã†Â¡ng thÃ¡Â»Â©c thanh toÃƒÂ¡n (Warning box) */
#payment .woocommerce-info.message-wrapper {
	background-color: #fffbeb !important; /* MÃƒÂ u vÃƒÂ ng cam nhÃ¡ÂºÂ¡t an toÃƒÂ n */
	border: 1px solid #fde68a !important;
	border-radius: 6px;
	padding: 12px 16px;
	color: #b45309;
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0;
}

#payment .woocommerce-info.message-wrapper .message-container {
	text-align: left !important;
}

/* --- NÃƒÅ¡T Ã„ÂÃ¡ÂºÂ¶T HÃƒâ‚¬NG --- */
#place_order {
	width: 100%;
	display: block;
	background-color: var(--fs-color-secondary) !important; /* MÃƒÂ u xanh lÃƒÂ¡ tÃ¡ÂºÂ¡o Ã„â€˜Ã¡Â»â„¢ tin cÃ¡ÂºÂ­y khi nhÃ¡ÂºÂ¥n mua */
	color: #ffffff !important;
	font-size: 1.05rem;
	font-weight: 600;
	padding: 14px !important;
	border-radius: 8px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border: none !important;
	cursor: pointer;
	margin-top: 15px;
	transition: background-color 0.2s, transform 0.1s;
}

#place_order:hover {
	background-color: var(--primary-color) !important;
	transform: translateY(-1px);
}

#place_order:active {
	transform: translateY(1px);
}

/* --- CHÃƒÂNH SÃƒÂCH RIÃƒÅ NG TÃ†Â¯ & LIÃƒÅ N KÃ¡ÂºÂ¾T --- */
.woocommerce-privacy-policy-text {
	margin-top: 20px;
	font-size: 0.8rem;
	color: #64748b;
	line-height: 1.6;
}

.woocommerce-privacy-policy-text a {
	color: #3b82f6;
	text-decoration: underline;
}

.woocommerce-privacy-policy-text a:hover {
	color: #2563eb;
}
.woocommerce-additional-fields {
	display: none
}
.woocommerce-mini-cart .woocommerce-mini-cart-item  a {
	color: #000 !important
}

/* --- THIÃ¡ÂºÂ¾T BÃ¡Â»Å  DI Ã„ÂÃ¡Â»ËœNG --- */
@media (max-width: 849px) {
	#customer_details, 
	.large-5.col .col-inner.has-border {
		padding: 20px;
	}
}
@media (max-width: 549px){
	.shop_table.cart tbody td {
		padding: 5px;
	}
	.shop-container .row-small>.col {
		padding: 0 4.8px 19.6px;
	}
}

.icon-search:before {
	color: #fff;
}












/* ==========================================
BỘ LỌC TÌM KIẾM SẢN PHẨM FLATSOME
========================================== */

/* Khung bọc ngoài */
.custom-shop-filter-widget {
	background: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* 1. Tiêu đề chính "Tìm kiếm sản phẩm" */
.custom-shop-filter-widget .shop-sidebar-title {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: #222222;
	margin: 0 0 16px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #f0f0f0;
	position: relative;
	letter-spacing: 0.5px;
}

.custom-shop-filter-widget .shop-sidebar-title span {
	position: relative;
}

/* Đường gạch chân màu đỏ cam thương hiệu */
.custom-shop-filter-widget .shop-sidebar-title span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12px;
	width: 45px;
	height: 2px;
	background: #e84524; /* Màu cam/đỏ theo header của bạn */
}

/* 2. Nhóm từng bộ lọc (Giá, Danh mục, Nhãn hàng) */
.custom-shop-filter-widget .filter-group {
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px dashed #e8e8e8;
}

.custom-shop-filter-widget .filter-group:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Tiêu đề mục con (KHOẢNG GIÁ, DANH MỤC...) */
.custom-shop-filter-widget .filter-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #333333;
	margin-bottom: 12px;
	letter-spacing: 0.3px;
}

/* 3. Danh sách các ô lựa chọn & Tùy biến thanh cuộn (Scrollbar) */
.custom-shop-filter-widget .filter-items {
	max-height: 210px;
	overflow-y: auto;
	padding-right: 6px;
}

/* Tùy chỉnh thanh cuộn siêu mỏng đẹp mắt */
.custom-shop-filter-widget .filter-items::-webkit-scrollbar {
	width: 4px;
}
.custom-shop-filter-widget .filter-items::-webkit-scrollbar-track {
	background: #f5f5f5;
	border-radius: 4px;
}
.custom-shop-filter-widget .filter-items::-webkit-scrollbar-thumb {
	background: #cccccc;
	border-radius: 4px;
}
.custom-shop-filter-widget .filter-items::-webkit-scrollbar-thumb:hover {
	background: #e84524;
}

/* 4. Từng dòng lựa chọn (Item) */
.custom-shop-filter-widget .filter-item {
	display: flex;
	align-items: center;
	padding: 6px 8px;
	margin-bottom: 2px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13.5px;
	color: #4f4f4f;
	font-weight: 500;
	line-height: 1.4;
	transition: all 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào dòng */
.custom-shop-filter-widget .filter-item:hover {
	background-color: #fff4f2; /* Nền hồng cam rất nhạt */
	color: #e84524; /* Chữ chuyển sang màu cam */
}

/* Tùy chỉnh ô Checkbox & Radio */
.custom-shop-filter-widget .filter-item input {
	margin: 0 10px 0 0 !important;
	width: 16px;
	height: 16px;
	accent-color: #e84524; /* Màu tick cam/đỏ đồng bộ web */
	cursor: pointer;
	flex-shrink: 0;
}

/* Chữ hiển thị và số đếm */
.custom-shop-filter-widget .filter-item span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Badge số lượng sản phẩm: (7), (1)... */
.custom-shop-filter-widget .filter-item small {
	font-size: 11px;
	color: #8c8c8c;
	background: #f0f0f0;
	padding: 2px 7px;
	border-radius: 12px;
	font-weight: 600;
	margin-left: 8px;
	transition: all 0.2s ease;
}

/* Đổi màu badge khi hover */
.custom-shop-filter-widget .filter-item:hover small {
	background: #ffe3de;
	color: #e84524;
}


#footer h3 {
	text-transform: uppercase;
	color: var(--primary-color)
}



.contact-box-fa {
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.6;
}

.contact-box-fa .item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
}

.contact-box-fa .item:last-child {
	margin-bottom: 0;
}

/* Chỉnh màu đỏ và vị trí của Icon Font Awesome */
.contact-box-fa .item i {
	color: var(--primary-color); /* Màu đỏ nổi bật giống ảnh mẫu */
	font-size: 18px;
	min-width: 24px;
	margin-top: 3px;
	margin-right: 10px;
	text-align: center;
}

.contact-box-fa .item strong {
	font-weight: 700;
}

.contact-box-fa .item a {
	text-decoration: none;
	transition: opacity 0.2s;
}

.contact-box-fa .item a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

.banner-homepage .img-inner{
	border-radius: 20px;
}


@media(max-width: 859px){
	.icon-menu:before,
	.icon-shopping-cart:before{
		color: #fff
	}
	.off-canvas:not(.off-canvas-center) .nav-vertical li>a {
		font-size: 1.1rem;
		color: var(--fs-color-secondary);
	}
	.banner-homepage .img-inner {
		border-radius: 8px;
	}
	.banner-homepage .col {
		padding: 0 10px 30px !important;
	}
}


.thuong-hieu-homepage {
	padding-left: 0 !important;
}
.banner-image {
	padding-right: 0 !important
}

.custom-cat-title {
	font-size: 27px !important;
}

@media(max-width: 849px){
	.thuong-hieu-homepage {
		padding-left: 15px !important;
	}
	.custom-brand-slider-wrapper, .custom-brand-slider, .custom-brand-slider .flickity-viewport {
		border-top-right-radius: 5px !important;
    	border-bottom-right-radius: 5px !important;
	}
}









.sub-menu.nav-dropdown.nav-dropdown-default > li {
	position: relative;
	overflow: visible;
	min-width: 260px;
	padding: .6em 20px;
}


.sub-menu.nav-column.nav-dropdown-default {
	position: absolute;
	top: 0;
	left: 100%; 
	background: #fff;
	min-width: max-content;
	z-index: 9999;
	transition: opacity ease-in .3s;
	display: none;
}
.nav-dropdown-has-border .nav-dropdown {
	border: none !important;
	border-radius: 10px;
}


.nav-dropdown > li.menu-item-has-children:hover > .sub-menu {
	display: block !important;
}

.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a {
	text-transform: unset !important;
	font-weight: unset !important;
}
.nav-dropdown li{
	margin-bottom: 0px !important;
	border: none !important;
}


.header-nav .has-dropdown{
	position: relative;
}

.header-nav.header-bottom-nav .has-dropdown > .nav-dropdown{
	display: table;               
	left: -99999px;
	opacity: 0;
	visibility: hidden;
	max-height: 0;
	overflow: visible !important;   
	padding: 5px 0;
	transition: opacity .25s, visibility .25s, transform .3s;
	transform-origin: 50% 0;
	transform: scaleY(0);
	z-index: 9;
	min-width: 300px !important
}

.header-nav .has-dropdown:hover > .nav-dropdown,
.header-nav .has-dropdown:focus-within > .nav-dropdown{
	left: 0;                        
	opacity: 1;
	visibility: visible;
	max-height: 1000px;             
	transform: scaleY(1);
}

.header-nav .nav-dropdown-col{
	position: relative !important;
}

.header-nav .nav-dropdown-col > ul.sub-menu.nav-column{
	position: absolute !important;
	top: 0 !important;
	left: -99999px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	display: block !important;
	min-width: 260px;
	background: #fff;
	transform-origin: 0 0;
	transform: scaleY(0);
	transition: transform .25s ease, opacity .2s ease, visibility .2s ease;
	z-index: 99;
}

.header-nav .nav-dropdown-col:hover > ul.sub-menu.nav-column,
.header-nav .nav-dropdown-col:focus-within > ul.sub-menu.nav-column{
	left: 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scaleY(1);
}


.header-nav>li>a {
	color: var(--color-main) !important
}

.header-nav>li:hover>a,
.header-nav>li.active>a{
	color: var(--fs-color-secondary)!important
}

.nav-dropdown-has-arrow li.has-dropdown:after,
.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before{
	display: none
}


.sub-menu.nav-dropdown.nav-dropdown-default > li > a {
	color: #364153 !important;
	font-weight: 550!important;
}
.nav-dropdown.nav-dropdown-default>li>a {
	border-bottom: 0px !important;
	margin: 0 0px !important;
	padding: 0 !important;
}
.sub-menu.nav-dropdown.nav-dropdown-default > li:hover {
	background: #fff7ed
}
.sub-menu.nav-dropdown.nav-dropdown-default > li:hover > a{
	color: var(--fs-color-secondary) !important
}











.mobile-filter-sort-group .inline-block {
	display: none
}



:root {
  --main-color: #3d73f0; /* Màu chủ đạo */
}

/* ====================================
   1. GIAO DIỆN MÁY TÍNH (DESKTOP)
==================================== */
.bg-collection-combo {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--main-color);
  height: 40px;
  border-radius: 6px;
  padding-left: 60px;          /* Tăng nhẹ lên 60px để vòng tròn 60px không bị đè chữ */
  margin-left: 15px;
  box-sizing: border-box;
}

/* Vòng tròn chứa số */
.bg-collection-combo::before {
  content: attr(data-count);
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: #ffffff;
  border: 5px solid var(--main-color);
  border-radius: 50%;
  color: var(--main-color);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 2;
}

/* Tiêu đề chữ */
.bg-collection-combo .title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1;
  font-family: inherit;
}


/* ====================================
   2. TỐI ƯU CHO ĐIỆN THOẠI (MOBILE < 768px)
==================================== */
@media (max-width: 767px) {
  .bg-collection-combo {
    height: 34px;              /* Giảm chiều cao thanh cho thanh thoát */
    padding-left: 45px;        /* Thu nhỏ khoảng cách chữ */
    margin-left: 10px;         /* Đỡ tốn diện tích lề trái */
  }

  .bg-collection-combo::before {
    width: 46px;               /* Thu nhỏ vòng tròn */
    height: 46px;
    left: -8px;                /* Căn lại vị trí nhô ra */
    border-width: 4px;         /* Viền mỏng hơn chút */
    font-size: 16px;           /* Số nhỏ lại cho cân đối */
  }

  .bg-collection-combo .title {
    font-size: 15px;           /* Chữ vừa vặn, không bị rớt dòng trên màn hình bé */
    letter-spacing: 0;
  }
}


@media(max-width: 549px){
	.product-flash-sale .col{
		padding: 0 4.8px 19.6px !important
	}
}












.info-page .col-inner{
	height: 100%;
}
/* ========================================================
   KHUNG BỌC NGOÀI (NỀN TRẮNG DẠNG HỘP / CARD)
======================================================== */
.contact-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    background: #ffffff;                       /* Nền trắng */
    padding: 24px;                             /* Khoảng đệm trong */
    border-radius: 12px;                       /* Bo tròn góc */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);/* Đổ bóng nhẹ sang trọng */
    box-sizing: border-box;
	height: 100%;
}

/* Ẩn các thẻ p trống do WordPress tự sinh */
.contact-container p:empty {
    display: none;
}

/* ========================================================
   TIÊU ĐỀ "THÔNG TIN LIÊN HỆ"
======================================================== */
.contact-main-title {
    color: var(--primary-color, #e54625);      /* Màu cam */
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 6px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;          /* Gạch phân cách mờ */
    letter-spacing: 0.5px;
}

/* ========================================================
   CÁC DÒNG LIÊN HỆ & ICON MÀU CAM (BỎ HOÀN TOÀN MÀU XANH)
======================================================== */
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: all 0.25s ease-in-out;
}

.contact-item:hover {
    background-color: #fff9f6;                 /* Nền hàng ngả màu ấm nhẹ khi hover */
}

/* Khối tròn Icon: Mặc định MÀU CAM */
.contact-item .icon-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: #fff0eb;                       /* Nền cam nhạt dịu mắt */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #e54625);      /* Icon MÀU CAM ĐẬM */
    font-size: 18px;
    transition: all 0.25s ease;
}

/* Khi rê chuột: Nền cam đậm, icon trắng */
.contact-item:hover .icon-box {
    transform: scale(1.08);
    background: var(--primary-color, #e54625); /* Nền cam đậm */
    color: #ffffff;                            /* Icon trắng */
}

/* ========================================================
   NỘI DUNG CHỮ
======================================================== */
.contact-item .text-box {
    flex: 1;
}

.contact-item .text-box h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.contact-item .text-box p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* Link số điện thoại và email */
.contact-item .text-box a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-item .text-box a:hover {
    color: var(--primary-color, #e54625);      /* Hover link màu cam */
    text-decoration: underline;
}

/* ========================================================
   RESPONSIVE MOBILE (< 768px)
======================================================== */
@media (max-width: 767px) {
    .contact-container {
        padding: 16px;
    }

    .contact-main-title {
        font-size: 17px;
        padding-bottom: 10px;
    }

    .contact-item {
        padding: 6px 0;
        gap: 12px;
    }

    .contact-item .icon-box {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 16px;
    }
}

.wpcf7  form {
	margin-bottom: 0 !important
}








/* ========================================================
   KHUNG BỌC FORM NỀN TRẮNG
======================================================== */
.custom-cf7-form {
    background: #ffffff;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

/* Tiêu đề & mô tả form */
.custom-cf7-form .form-main-title {
    color: var(--primary-color, #e54625);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 6px 0;
    letter-spacing: 0.5px;
}

.custom-cf7-form .form-desc {
    color: #64748b;
    font-size: 14px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Bố cục 2 cột trên 1 hàng */
.custom-cf7-form .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.custom-cf7-form .form-group {
    margin-bottom: 16px;
}

/* Nhãn (Label) */
.custom-cf7-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
}

/* ========================================================
   CÁC Ô NHẬP LIỆU (INPUT & TEXTAREA)
======================================================== */
.custom-cf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.custom-cf7-form input[type="text"],
.custom-cf7-form input[type="email"],
.custom-cf7-form input[type="tel"],
.custom-cf7-form textarea {
    width: 100% !important;
    background-color: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 14px;
    color: #334155;
    transition: all 0.25s ease;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
}

/* Hiệu ứng khi bấm vào ô nhập liệu (Focus) */
.custom-cf7-form input[type="text"]:focus,
.custom-cf7-form input[type="email"]:focus,
.custom-cf7-form input[type="tel"]:focus,
.custom-cf7-form textarea:focus {
    background-color: #ffffff;
    border-color: var(--primary-color, #e54625);
    box-shadow: 0 0 0 3.5px rgba(229, 70, 37, 0.12);
}

.custom-cf7-form textarea {
    min-height: 100px;
    resize: vertical;
}

/* ========================================================
   NÚT GỬI (CĂN GIỮA)
======================================================== */
.custom-cf7-form .form-submit {
    margin-top: 10px;
    text-align: center; /* ĐÃ THÊM: Căn nút ra chính giữa */
}

.custom-cf7-form input[type="submit"] {
    background: var(--primary-color, #e54625);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 36px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    width: auto;
    display: inline-block;
}

.custom-cf7-form input[type="submit"]:hover {
    background: var(--fs-color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 70, 37, 0.25);
}

/* Thông báo phản hồi của CF7 */
.custom-cf7-form .wpcf7-response-output {
    border-radius: 8px !important;
    font-size: 14px;
    margin: 15px 0 0 0 !important;
    padding: 10px 15px !important;
    text-align: center;
}

/* ========================================================
   RESPONSIVE CHO ĐIỆN THOẠI (< 768px)
======================================================== */
@media (max-width: 767px) {
    .custom-cf7-form {
        padding: 18px;
    }

    .custom-cf7-form .form-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .custom-cf7-form input[type="submit"] {
        width: 100%; /* Trên điện thoại nút sẽ tự bung 100% để bấm dễ hơn */
    }
}


#masthead {
	background: var(--primary-color);
}


























/* ===== SAO VÀ SỐ LƯỢNG ĐÃ BÁN ===== */

.box-text-products .custom-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    margin: 8px 0 10px;
}

/* 5 sao vàng */
.box-text-products .custom-product-stars {
    font-size: 15px;
    color: #ffb400;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
}

/* Đã bán */
.box-text-products .custom-product-sold {
    font-size: 12px;
    color: #777;
    font-weight: 500;
    white-space: nowrap;
}

/* ===== NÚT THÊM VÀO GIỎ ===== */

.box-text-products .custom-cart-btn-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 5px;
}


/* Nút thêm vào giỏ lớn hơn */
.box-text-products .custom-cart-btn-wrapper a.button {
    background-color: #fff !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 50px !important;
    padding: 6px 7px 6px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: none !important;

    width: 100% !important;
    max-width: 240px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
    margin: 0 auto !important;

    transition: all 0.25s ease !important;
}

/* Icon giỏ hàng */
.box-text-products .custom-cart-btn-wrapper .custom-cart-icon svg {
    width: 19px !important;
    height: 19px !important;
    stroke: var(--primary-color) !important;
}

/* Hover */
.box-text-products .custom-cart-btn-wrapper a.button:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: none !important;
	color: #fff !important;
}

/* Mobile */
@media (max-width: 549px) {
    .box-text-products .custom-cart-btn-wrapper a.button {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 13px !important;
        padding: 5px 6px 5px 12px !important;
        gap: 6px;
    }

    .box-text-products .custom-cart-btn-wrapper .custom-cart-icon svg {
        width: 17px !important;
        height: 17px !important;
    }
}


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

@media (max-width: 549px) {

    .box-text-products .custom-product-meta {
        gap: 4px;
        margin: 6px 0 8px;
    }

    .box-text-products .custom-product-stars {
        font-size: 12px;
        letter-spacing: 0;
    }

    .box-text-products .custom-product-sold {
        font-size: 11px;
    }

    .box-text-products .custom-cart-btn-wrapper a.button {
        font-size: 12px !important;
        padding-left: 9px !important;
        max-width: 160px !important;
    }
}
