/**
 * Production Customizer CSS reconstructed from thiepcuo_demo.sql.
 * Presentation-only. Raw Customizer JavaScript and unrelated database content
 * are intentionally excluded. One stray unmatched closing brace from the
 * source Custom CSS was removed without changing the effective declarations.
 */

@keyframes tcgk-announcement-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.tcgk-announcement__link,
.tcgk-announcement__cta {
  animation: tcgk-announcement-blink 2s infinite;
}
.tcgk-announcement__link {
  color: #8f0005;
  text-decoration: none;
}


/* === Flatsome Advanced > Custom CSS (production DB) === */
/* Paragraph */
#top-bar .flex-center p{
	font-weight:600;
	font-size:14px;
	
}


.header-bottom{
    padding-top: 30px;
}
/* Nav top link */
.nav-spacing-xlarge .menu-item .nav-top-link{
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #222;
}
/* Thêm khoảng cách 10px ở dưới mỗi dòng */
.clean-list li {
    margin-bottom: 20px !important;
}
/* ================================================== */
/* === CODE HOÀN CHỈNH CHO MEGA MENU FULL-WIDTH === */
/* ================================================== */

/* Bước 1: Cho phép menu con "thoát" ra khỏi mục cha */
.nav-spacing-xlarge .menu-item {
  position: static;
}

/* Bước 2: Cho khung menu tràn ra toàn bộ màn hình */
.nav-spacing-xlarge .menu-item .nav-dropdown {
  /* Cho menu rộng bằng đúng màn hình */
  width: 100vw;

  /* Căn lề trái của menu với lề trái của màn hình */
  left: 50%;
  transform: translateX(-50%);

  /* Reset các giá trị cũ có thể gây lỗi */
  max-width: none;
  right: auto;
}

/* Bước 3: Giới hạn nội dung bên trong theo layout 1350px */
.nav-dropdown .row.menu-thiepcuoi {
  max-width: 1350px; /* Chiều rộng tối đa của nội dung */
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px; /* Thêm chút đệm 2 bên cho đẹp */
  box-sizing: border-box;
}
/* --- BỐ CỤC (LAYOUT) CHO CÁC CỘT - GỌN HƠN --- */

/* Giảm khoảng cách giữa các trường nhập liệu theo chiều dọc */
.wpcf7-form .wpcf7-form-control-wrap {
    margin-bottom: 10px; /* Giảm từ 15px xuống 10px */
}

/* Giảm khoảng cách giữa các cột theo chiều ngang */
.wpcf7-form .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;  /* Giảm từ -10px */
    margin-right: -5px; /* Giảm từ -10px */
}

.wpcf7-form .col {
    padding-left: 5px;  /* Giảm từ 10px */
    padding-right: 5px; /* Giảm từ 10px */
    box-sizing: border-box;
}

/* Bố cục cho màn hình lớn (desktop) */
@media (min-width: 768px) {
    .wpcf7-form .large-6 {
        width: 50%;
    }
    .wpcf7-form .large-12 {
        width: 100%;
    }
}

/* Bố cục cho màn hình nhỏ (mobile) */
@media (max-width: 767px) {
    .wpcf7-form .small-12 {
        width: 100%;
    }
}
/* 849px and smaller screen sizes */
@media (max-width: 849px){

	.medium-logo-center .mobile-nav i.icon-menu{
		position: relative;
		display: block;
		width: 24px;
		height: 2px;
		background-color: #333;
	}
	
	.medium-logo-center .mobile-nav i.icon-menu::before{
		content: '' !important;
		position: absolute;
		top: -8px;
		left: 0;
		display: block;
		width: 100%;
		height: 2px;
		background-color: #333;
	}
	
	.medium-logo-center .mobile-nav i.icon-menu::after{
		content: '';
		position: absolute;
		top: 8px;
		left: 0;
		right: 0;
		display: block;
		width: 60%;
		height:2px;
		background-color: #333;
	}
	
	/* Strong Tag */
	.medium-logo-center .mobile-nav strong{
		background-color:#222;
		border: none;
	}
	.cart-icon strong:after {
    border: 1px solid #222;}
.cart-icon strong {
    border: 2px solid #222;}
}
.cart-icon strong {
    border: 2px solid #222;}
.cart-icon strong:after {
    border: 1px solid #222;}
.off-canvas:not(.off-canvas-center) .nav-vertical li>a {
    padding-left: 20px;
    color: white !important;
    font-size: 11px;
}
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content i.icon-angle-down {
    color: white;
}
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
    background-color: #222;}
nav.woocommerce-breadcrumb.breadcrumbs {
    text-align: center;
    font-weight: 500;
    color: #6d6d6d;
    font-size: 15px;
    font-weight: 500;
    color: #6d6d6d;
    font-size: 15px;
    height: 82px;
    background: #f4f4f4;
    display: flex
;
    align-items: center;
    justify-content: center;
}
.cart-popup-inner--sticky {
        background: white !important;
    }
.contact-section {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-section h2 {
    font-size: 24px;
    margin-bottom: 5px;
    border-left: 5px solid #28a745; /* Đường viền xanh bên trái như trong hình */
    padding-left: 10px;
    display: inline-block;
}

.contact-section p {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Khoảng cách giữa các icon */
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Chiều rộng */
    height: 50px; /* Chiều cao */
    border-radius: 50%; /* Làm tròn */
    color: #fff;
    font-size: 24px;
    text-decoration: none; /* Bỏ gạch chân */
    transition: transform 0.3s ease; /* Hiệu ứng khi di chuột vào */
}

.icon:hover {
    transform: scale(1.1);
}

.phone-icon {
    background-color: #28a745; /* Màu xanh lá cây của điện thoại */
}

.messenger-icon {
    background-color: #007bff; /* Màu xanh dương của Messenger */
}

.zalo-icon {
    background-color: #0088ff; /* Màu xanh dương của Zalo */
}

.tiktok-icon {
    background-color: #000; /* Màu đen của TikTok */
}

/* === Flatsome Advanced > Mobile CSS (production DB) === */
@media (max-width: 550px) {
.variations tr .ux-swatch--label {
        padding: 10px 20px !important;
    }
.search-image-wrapper{
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}
}

/* === WordPress Additional CSS (production DB) === */
/* Nav top link */
.nav-spacing-xlarge .menu-item .nav-top-link{
	color:#222 !important;
	
}

/* Absolute footer */
#footer .absolute-footer{
	background-color:#ffffff;
	
}


.name.product-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.image-tools{
	display: none;
}
span.onsale {
    font-family: Maven Pro;
    font-size: 14px;
    font-weight: 700;
    color: #e72e5d;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    padding: 0;
}
 /*  Bdi */
.phieuquacuoi-trangchu ins bdi{
	display: none;
}
span.custom-price-suffix {
    color: #e72e5d;
    font-size: 16px;
}

/* Tắt dấu chấm và padding mặc định của danh sách */
.clean-list {
    list-style: none;
    padding-left: 0;
}
/* Ẩn mũi tên SVG mặc định của Flatsome */
.flickity-button.previous svg,
.flickity-button.next svg {
    display: none !important; /* Quan trọng để đảm bảo ẩn */
}

/* Thêm biểu tượng Font Awesome cho nút PREVIOUS */
.flickity-button.previous::before {
    font-family: "Font Awesome 5 Free"; /* Hoặc "Font Awesome 5 Pro" tùy phiên bản */
    font-weight: 900; /* Đối với các icon solid (fas) */
    content: "\f060"; /* Mã Unicode cho fa-arrow-left. Bạn muốn mũi tên sang phải, nên sẽ cần fa-arrow-left ở đây */
    font-size: 20px; /* Điều chỉnh kích thước */
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    /* Điều chỉnh vị trí nếu cần */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
}

/* Thêm biểu tượng Font Awesome cho nút NEXT */
.flickity-button.next::before {
    font-family: "Font Awesome 5 Free"; /* Hoặc "Font Awesome 5 Pro" tùy phiên bản */
    font-weight: 900; /* Đối với các icon solid (fas) */
    content: "\f061"; /* Mã Unicode cho fa-arrow-right */
    font-size: 20px; /* Điều chỉnh kích thước */
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}
/* Ẩn mũi tên SVG mặc định của nút PREVIOUS */
.flickity-button.previous svg {
    display: none !important;
}

/* Thêm biểu tượng Font Awesome cho nút PREVIOUS */
.flickity-button.previous::before {
    font-family: "Font Awesome 5 Free"; /* Hoặc "Font Awesome 5 Pro" tùy phiên bản */
    font-weight: 900; /* Đối với các icon solid (fas) */
    content: "\f061"; /* Mã Unicode cho fa-arrow-right */
    font-size: 20px; /* Điều chỉnh kích thước nếu cần */
    line-height: 1; /* Đảm bảo căn chỉnh tốt */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    transform: rotate(180deg); /* Xoay 180 độ để nó chỉ sang trái, mặc dù icon gốc là fa-arrow-right */
}

/* Nếu bạn cũng muốn đổi mũi tên NEXT thành fa-arrow-right */
.flickity-button.next svg {
    display: none !important;
}

.flickity-button.next::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061"; /* Mã Unicode cho fa-arrow-right */
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    /* Không cần xoay cho mũi tên NEXT */
}

/* Tùy chỉnh thêm về màu sắc, vị trí nếu cần */
.flickity-button.previous,
.flickity-button.next {
    /* background: rgba(0,0,0,0.5) !important;  Ví dụ: đổi màu nền nút */
    /* color: #fff !important;  Ví dụ: đổi màu icon */
}
/* Flickity prev next button */
.slider-wrapper .slider-nav-dots-dashes-spaced .flickity-prev-next-button{
	color:#020202;
	background-color:#ffffff;
}
/* --- Ép Banner Grid ra full chiều rộng (Giải pháp cuối) --- */
.gid-trangchu {
    width: 100vw; /* Chiều rộng bằng 100% màn hình */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: none !important; /* Ghi đè mọi giới hạn max-width khác */
}
/* --- PHẦN CSS TẠO KIỂU CHO SLIDER --- */
/* --- PHẦN CSS TẠO KIỂU CHO SLIDER --- */
.review-slider-container {
    position: relative;
    width: 100%;
    max-width: 1400px; /* Tăng chiều rộng tối đa */
    margin: 2em auto;
    padding: 0 40px; 
    box-sizing: border-box;
}
.review-slider-track-container {
    overflow: hidden;
}
.review-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.review-slide {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 8px; /* Khoảng cách giữa các cột */
}

/* Thiết lập số cột hiển thị trên các màn hình */
:root { --slides-to-show: 6; } /* Mặc định 6 cột cho màn hình rất lớn */
.review-slide { width: calc(100% / var(--slides-to-show)); }

@media (max-width: 1600px) { :root { --slides-to-show: 5; } }
@media (max-width: 1200px) { :root { --slides-to-show: 4; } }
@media (max-width: 1024px) { :root { --slides-to-show: 3; } }
@media (max-width: 767px) { :root { --slides-to-show: 2; } }
@media (max-width: 480px) { :root { --slides-to-show: 1; } }


/* --- CSS CHO THẺ ĐÁNH GIÁ (GIỐNG MẪU) --- */
.review-card-item {
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.review-card-header {
    display: flex;
    align-items: center;
    font-size: 13px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.recommend-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
        color: rgb(243, 107, 127);
    fill: currentColor;
}
.recommends-text { color: #385898; font-weight: 600; }
.page-name { color: #385898; font-weight: 600; text-decoration: none; margin-left: 4px; }
.verified-icon { width: 16px; height: 16px; margin-left: 6px; color: #385898; fill: currentColor; }
.source-icon { width: 16px; height: 16px; margin-left: auto; color: #1877F2; fill: currentColor; }

.review-card-text {
    flex-grow: 1;
    font-size: 14px;
    color: #1c1e21;
    line-height: 1.4;
    margin: 0 0 10px 0;
    /* Mặc định rút gọn văn bản */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Số dòng hiển thị mặc định */
    -webkit-box-orient: vertical;
}
.review-card-text.expanded {
    -webkit-line-clamp: unset; /* Gỡ bỏ giới hạn dòng */
    overflow: visible;
}

.show-more {
    font-size: 13px;
    color: #65676b;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.show-more:hover { text-decoration: underline; }
.show-more.hidden { display: none; } /* Class để ẩn nút */

.review-card-footer {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.reviewer-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; }
.reviewer-name { font-weight: 600; font-size: 14px; color: #1c1e21; }
.review-date { font-size: 13px; color: #65676b; margin-left: auto; }


/* --- CSS CHO NÚT BẤM SLIDER --- */
.slider-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.slider-arrow:hover { background-color: #f5f5f5; }
.prev-arrow { left: 10px; }
.next-arrow { right: 10px; }
/* Tùy chỉnh cho danh sách */
.clean-list {
    list-style: none; /* Bỏ dấu chấm đầu dòng */
    padding-left: 0;  /* Bỏ phần đệm mặc định */
}
/* Strong Tag */
#footer h3 strong{
	font-weight:600;
	font-size:14px;
}

/* --- TÙY CHỈNH CHO KHỐI ĐỊA CHỈ CUỐI TRANG --- */

/* 1. Tạo nền và khoảng cách cho toàn bộ khối */
#powered {
    background-color: #f8f8f8; /* Màu nền xám nhạt */
    padding: 25px 15px;      /* Khoảng đệm trên-dưới và trái-phải */
    border-top: 1px solid #eeeeee; /* Đường kẻ mỏng phía trên */
    font-size: 14px;         /* Cỡ chữ chung */
    position: relative;
}

/* 2. Căn chỉnh icon và văn bản trong mỗi cột */
#powered .powered_left {
    display: flex;
    align-items: center; /* Căn icon và chữ thẳng hàng dọc */
    margin-bottom: 10px; /* Thêm khoảng cách khi 2 địa chỉ nằm trên-dưới ở màn hình nhỏ */
}

/* 3. Tùy chỉnh cho icon bản đồ */
#powered .fa-map {
    margin-right: 8px; /* Khoảng cách giữa icon và chữ */
    color: #555555;    /* Màu của icon */
}

/* 4. Tùy chỉnh cho đường link địa chỉ */
#powered .powered_left a {
    color: #555555;          /* Màu chữ */
    text-decoration: none;   /* Bỏ gạch chân */
    line-height: 1.5;        /* Giãn cách dòng cho dễ đọc */
}

/* 5. Thêm hiệu ứng khi di chuột vào link */
#powered .powered_left a:hover {
    color: #000000; /* Đổi màu chữ khi di chuột */
}

/* Media query cho màn hình lớn hơn (desktop) */
@media (min-width: 768px) {
    #powered .powered_left {
        margin-bottom: 0; /* Bỏ khoảng cách dưới khi 2 địa chỉ nằm ngang hàng */
    }
}
/* --- CSS CHO NÚT LÊN ĐẦU TRANG --- */
/* --- CSS CHO NÚT LÊN ĐẦU TRANG --- */
#back-to-top-btn {
    position: fixed; /* Giữ nút cố định khi cuộn trang */
    bottom: 30px;    /* Cách lề dưới 30px */
    right: 30px;     /* Cách lề phải 30px */
    z-index: 999;    /* Đảm bảo nút luôn nổi lên trên */

    /* ----- Phần tạo kiểu ----- */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 22px;
    color: #555;
    
    /* ----- Căn giữa icon mũi tên ----- */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ----- Hiệu ứng ẩn/hiện và con trỏ chuột ----- */
    text-decoration: none;
    cursor: pointer;
    visibility: hidden; /* Mặc định ẩn nút đi */
    opacity: 0;         /* Mặc định trong suốt */
    transition: opacity 0.4s, visibility 0.4s; /* Tạo hiệu ứng mượt */
}

/* Lớp CSS để hiện nút lên */
#back-to-top-btn.visible {
    visibility: visible;
    opacity: 1;
}

#back-to-top-btn:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

/* Heading */
.custom-product-page h2{
	font-weight:500;
}

/* Heading */
.custom-product-page .ts-addon-item h4{
	font-weight:500;
	color:#ff4850;
}


/* Label */
.custom-product-page .ts-addon-item label{
	font-weight:500;
}

/* Label */
.variations tr label{
	font-weight:600;
	font-size:12px;
	text-transform:uppercase;
	
}

/* 550px and larger screen sizes */
@media (min-width:550px){

	/* Heading */
	.custom-product-page h2{
		font-size:15px;
	}
	
	/* Heading */
	.custom-product-page .ts-addon-item h4{
		font-size:15px;
	}
	
}
/*MENU*//* Nav top link */
.nav-spacing-xlarge .menu-item .nav-top-link{
  padding: 35px 15px;
    padding-left: 22px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  background-color: transparent;
  letter-spacing: .05em;
  color: #222;
  -webkit-transition: all .35s ease-out;
  transition: all .35s ease-out;
}

/* Link */
#tab-title-additional_information a{
	padding: 5px 35px;
}

#tab-title-description a{
	font-size:14px;
}
/* === CODE ÉP FULL WIDTH === */
/* 1. Ép cái row chính phải full width */
.row.category-page-row {
    max-width: none !important;
}
/* 2. Ép shop-container bên trong cũng phải full width và không có padding */
.row.category-page-row .shop-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* === CÁC STYLE KHÁC GIỮ NGUYÊN === */
.product-small .box-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}
.grid-view-switcher {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 6px;
}
.grid-view-switcher strong {
	margin-right: 10px;
}
.grid-view-switcher button {
	padding: 6px 12px;
	border: 1px solid #ccc;
	background-color: #f2f2f2;
	cursor: pointer;
	font-weight: bold;
	border-radius: 3px;
	transition: all 0.2s ease;
}
.grid-view-switcher button:hover {
	background-color: #ddd;
}
.grid-view-switcher button.active {
	background-color: #111;
	border-color: #111;
	color: #fff;
}
/* Row */
.category-page-row .products{
	max-width:1270px;
	
}

/* Tạo dải nền màu xám full-width với chiều cao cố định */
.custom-breadcrumb-container {
    background-color: #f5f5f5;
    width: 100%;
    max-width: none !important;
    
    /* Thêm các thuộc tính mới */
    height: 82px;
    display: flex;
    align-items: center;
}

/* Căn giữa phần text bên trong */
.custom-breadcrumb-container .woocommerce-breadcrumb {
    width: 100%; /* Cần thêm để hoạt động tốt với flex */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
/* Navigation */
#main nav{
	text-align:center;
	font-weight:500;
	color:#6d6d6d;
	font-size:15px;
}
/* Căn giữa toolbar bằng cách cho 2 bên cao bằng nhau */
.my-new-toolbar-wrapper .orderby {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}
/* Sub Menu */
.nav-spacing-xlarge .menu-item .nav-dropdown{
	width:1352px !important;
	
}
/* Màu mặc định trái tim */
.wishlist-inline .fa-heart-o {
    color: #555; /* màu xám nhạt mặc định */
    transition: color 0.3s ease;
    font-size: 18px; /* tùy chỉnh kích thước */
}

/* Hover đổi sang màu hồng */
.wishlist-inline .fa-heart-o:hover {
    color: #e91e63; /* màu hồng */
}
/* ========================================================================= */
/* CSS cho phần Add-on sản phẩm "Bút Kim Tuyến" */
/* ========================================================================= */

.ts-addon-item {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    margin-bottom: 20px;
    font-family: 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ts-addon-item .ts-addon-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    /* Có thể thêm border nếu cần: border: 1px solid #e0e0e0; */
}

.ts-addon-item .ts-addon-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ts-addon-item .ts-addon-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ts-addon-item .ts-addon-title {
    font-size: 16px;
    font-weight: 600;
    color: #ff4d6d;
    margin: 0 0 10px 0;
}

.ts-addon-item .ts-addon-variations-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ts-addon-item .ts-addon-variation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.ts-addon-item .ts-addon-variation label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin-right: 10px;
}

.ts-addon-item .addon-variation-select {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    width: 150px; /* Điều chỉnh chiều rộng của select box */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%204%205%22%3E%3Cpath%20fill%3D%22%23999%22%20d%3D%22M2%200L0%202h4zm0%205L0%203h4z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 10px center / 8px 10px;
    cursor: pointer;
}

.ts-addon-item .ts-addon-price-wrapper {
    flex-shrink: 0;
    margin-left: auto; /* Đẩy giá ra phía ngoài cùng bên phải */
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #ff4d6d;
}

.ts-addon-item .ts-addon-action {
    flex-shrink: 0;
    margin-left: 20px;
}

.ts-addon-item .ts_ajax_add_to_cart {
    background-color: #ff4d6d;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.ts-addon-item .ts_ajax_add_to_cart:hover {
    background-color: #e6395b;
}

/* responsive */
@media (max-width: 768px) {
    .ts-addon-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .ts-addon-item .ts-addon-image {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .ts-addon-item .ts-addon-details {
        width: 100%;
        margin-bottom: 15px;
    }
    .ts-addon-item .ts-addon-price-wrapper {
        margin-left: 0;
        margin-right: 20px;
    }
    .ts-addon-item .ts-addon-action {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
    .ts-addon-item .ts_ajax_add_to_cart {
        width: 100%;
    }
}
/* Container for variations */
.variations {
    width: 100%;
}

/* Row for each variation type (Loại giấy, Thép ép kim) */
.variations tr {
    display: block;
    margin-bottom: 20px;
}

/* Label (e.g., "LOẠI GIẤY") */
.variations th {
    display: block;
    text-align: left;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

/* Container for the swatch buttons */
.variations td {
    display: block;
    padding: 0;
}

/* Main style for all swatch buttons */
.ux-swatch--label {
    float: left;
    margin-right: 10px; /* Space between buttons */
    margin-bottom: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover effect for buttons */
.ux-swatch--label:hover {
    border-color: #000;
}

/* Selected state for buttons */
/* The class `selected` or similar is usually added by JavaScript */
.ux-swatch--label.selected {
    border-color: #000;
    font-weight: bold;
    color: #000;
}

/* Specific styling for the second row of options (ép kim) to match the layout */
.variations tr:nth-child(2) .ux-swatch--label {
    margin-bottom: 0;
}

/* Price adjustment for "Thêm ép kim" label */
/* The text "Thêm ép kim ( + 2.000đ)" should be handled by the HTML structure,
   but if you need to style the price part, you might need a span around it. */
.variations th label[for="pa_thep-ep-kim-2-000d"] {
    color: #333;
}
.variations th label[for="pa_thep-ep-kim-2-000d"] span {
    font-size: 14px;
    color: #888;
}

/* Hide the original select dropdowns */
.variation-selector {
    display: none;
}
.ux-swatch--label {
    padding: 0 50px !important;
}

/* Span Tag */
.variations tr span{
	font-size: 13px;
}
/* Khoảng cách 10px từ lề trái của container */
.header-nav-main.nav-left {
    padding-left: 10px;
}

/* Khoảng cách giữa các icon */
/* Chọn các thẻ li bên trong ul, ngoại trừ thẻ li cuối cùng */
.header-nav-main.nav-left > li:not(:last-child) {
    margin-right: 40px;
}

/* Đảm bảo icon cuối cùng không có margin-right */
.header-nav-main.nav-left > li:last-child {
    margin-right: 0;
}
/* Title wrapper */
.box .title-wrapper{
	font-size:16px;
	font-weight:400;
}

.product-title a{
	color:#777;
	text-transform:uppercase;
}

bdi{
	font-weight:400;
	color:#777;
	font-size:16px;
}
.tabbed-content.tab-trangchu .nav-simple.nav-uppercase.nav-size-small.nav-center li {
    margin-right: 20px; /* Điều chỉnh khoảng cách giữa các tab */
}

.tabbed-content.tab-trangchu .nav-simple.nav-uppercase.nav-size-small.nav-center li a span {
    font-size: 13px; /* Đặt kích thước chữ */
    font-weight: 600; /* Đặt độ đậm của chữ */
    text-transform: uppercase; /* Đảm bảo chữ viết hoa nếu chưa có */
}
/* CSS cho nút "XEM THÊM" */
.xemthem-trangchu {
    color: #e72e5d; /* Màu chữ hồng */
    background-color: #fff; /* Nền trắng */
    border: 1px solid #e5e5e5; /* Viền xám nhạt */
    padding: 10px 50px; /* Thêm padding để nút có kích thước hợp lý */
    text-decoration: none; /* Bỏ gạch chân nếu có */
    font-weight: 600; /* Độ đậm của chữ */
    text-transform: uppercase; /* Chữ in hoa */
    font-size: 12px; /* Kích thước chữ 12px */
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà khi hover */
    
    /* Các thuộc tính để căn giữa nút */
    display: block; /* Quan trọng: Biến nút thành block element để margin: auto hoạt động */
    width: fit-content; /* Đặt chiều rộng bằng với nội dung của nó */
    margin: 30px auto; /* Căn giữa theo chiều ngang và thêm khoảng cách trên/dưới */
}

/* CSS khi hover vào nút "XEM THÊM" */
.xemthem-trangchu:hover {
    background-color: #000; /* Nền đen khi hover */
    color: #fff; /* Chữ trắng khi hover */
    border-color: #000; /* Viền cũng đen cho đồng bộ */
}
/* CSS cho tiêu đề trang chủ */
.tieude-trangtru {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #222; /* Màu chữ đen đậm */
    text-align: center; /* Căn giữa toàn bộ tiêu đề */
    margin-bottom: 30px; /* Khoảng cách dưới tiêu đề */
    
    /* Sử dụng Flexbox để căn chỉnh nội dung và pseudo-elements */
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: baseline; /* Quan trọng: Căn chỉnh các mục theo đường cơ sở của text */
    /* Hoặc có thể thử align-items: center; nếu baseline vẫn chưa ổn định */
}

/* Pseudo-element ::before cho tiêu đề */
.tieude-trangtru::before {
    content: "x"; /* Nội dung là chữ "x" */
    font-size: 8px; /* Kích thước chữ "x" */
    /* Không cần display: inline-block; vì đã là flex item */
    margin-right: 8px; /* Khoảng cách từ 'x' đến chữ tiêu đề */
    color: #777; /* Màu xám cho chữ "x" */
    line-height: 1; /* Đảm bảo line-height của 'x' không làm lệch */
    /* LOẠI BỎ: vertical-align: middle; nếu dùng flexbox và align-items */
}

/* Pseudo-element ::after cho tiêu đề */
.tieude-trangtru::after {
    content: "x"; /* Nội dung là chữ "x" */
    font-size: 8px; /* Kích thước chữ "x" */
    /* Không cần display: inline-block; vì đã là flex item */
    margin-left: 8px; /* Khoảng cách từ chữ tiêu đề đến 'x' */
    color: #777; /* Màu xám cho chữ "x" */
    line-height: 1; /* Đảm bảo line-height của 'x' không làm lệch */
    /* LOẠI BỎ: vertical-align: middle; nếu dùng flexbox và align-items */
}
/* CSS cho các tab */
.tabbed-content.tab-trangchu .nav-simple.nav-uppercase.nav-size-small.nav-center li {
    margin-right: 20px; /* Khoảng cách giữa các tab */
    /* Không cần position: relative; cho li nữa nếu dùng cách này */
    /* Tuy nhiên, bạn cần đảm bảo không có padding-right quá lớn trên li làm 'x' bị đẩy ra xa */
}

.tabbed-content.tab-trangchu .nav-simple.nav-uppercase.nav-size-small.nav-center li a span {
    font-size: 13px; /* Kích thước chữ */
    font-weight: 600; /* Độ đậm của chữ */
    text-transform: uppercase; /* Chữ in hoa */
    /* Không cần position: relative; hay padding cho span nếu chỉ muốn 'x' giữa các tab */
}

/* Thêm chữ "x" vào giữa các tab (sau mỗi tab trừ tab cuối cùng) */
.tabbed-content.tab-trangchu .nav-simple.nav-uppercase.nav-size-small.nav-center li:not(:last-child)::after {
    content: "x"; /* Nội dung là chữ "x" */
    font-size: 8px; /* Kích thước chữ "x" */
    display: inline-block; /* Quan trọng: để có thể dùng vertical-align và margin */
    margin-left: 10px; /* Khoảng cách từ tab đến 'x' */
    margin-right: 10px; /* Khoảng cách từ 'x' đến tab tiếp theo */
    color: #777; /* Màu xám cho chữ "x" */
    vertical-align: middle; /* Căn giữa 'x' theo chiều dọc của dòng text */
    /* LOẠI BỎ: position: absolute; left; top; transform; */ /* Không cần nếu dùng vertical-align */
    pointer-events: none; /* Đảm bảo chữ "x" không chặn click vào tab */
}

.blog-trangchu .post-item .box-text-bottom .box-text{
	text-align: left !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	border-top-right-radius: 15px;
	background-color: #fff;
	z-index: 9999;
}

.blog-trangchu .post-item .box-image{
	position: relative;
	overflow: hidden;
}

.blog-trangchu .post-item .box-image::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 2;
}

.blog-trangchu .post-item .box-image::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	background-color: #fff;
	border-radius: 5px;
	display: inline-block;
	opacity: 0;
	box-shadow: 9px 0 #fff, -9px 0 #fff;
	transition: all 0.3s ease;
	transform: translate(-50%, -50%);
	z-index: 3;
}

.blog-trangchu .post-item .box-image:hover::before,.blog-trangchu .post-item .box-image:hover::after{
	opacity: 1;
}

.blog-trangchu .box-text-bottom .box-text .button{
	padding: 0;
	font-weight: 500;
	background-color: transparent;
	font-size: 11px;
	letter-spacing: .2em;
	color: #e72e5d;
	font-family: "Maven Pro";
	border: none;
}

.blog-trangchu .box-text-bottom .post-title a{
	margin-bottom: 25px;
	margin-top: 3px;
	font-size: 21px;
	font-weight: 400;
	line-height: 24px;
}

.blog-trangchu .box-text-bottom .box-text p{
	margin-bottom: 17.5px;
	font-size: 14px;
	color: #777;
}

/* Paragraph */
.blog-trangchu .box-text p{
	
}
/* 549px and smaller screen sizes */
@media (max-width: 549px){

	.custom-product-page .ts-addon-item{
		display: flex !important;
		flex-flow: row wrap !important;
		align-items: center !important;
		margin-bottom: 20px !important;
		padding-bottom: 20px !important;
		border-bottom: 1px solid #f0f0f0 !important;
		padding-top: 10px;
	}
	
	.custom-product-page .ts-addon-item .ts-addon-image{
		flex: 0 0 80px !important;
		width: 80px !important;
		margin: 0 15px 0 0 !important;
	}
	
	/* Addon details */
	.custom-product-page .ts-addon-item .ts-addon-details{
		flex: 1 1 auto !important;
		width: auto !important;
	}
	
	.custom-product-page .ts-addon-details .ts-addon-variations-wrapper{
		padding: 0 !important;
	}
	
	.custom-product-page .ts-addon-variation{
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		margin-bottom: 8px !important;
	}
	
	.custom-product-page .ts-addon-variation select{
		flex-grow: 1;
		margin-bottom: 0 !important;
	}
	
}

/* 360px and larger screen sizes */
@media (min-width:360px){

	/* Addon details */
	#wrapper #main .shop-container .product .custom-product-page .row-full-width .col .col-inner .ts-product-addons-container .ts-addon-item .ts-addon-details{
		width:61% !important;
	}
	
	/* Button */
	.single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button{
		
	}
	
}

/* 366px and larger screen sizes */
@media (min-width: 366px){

	/* Addon details */
	#wrapper #main .shop-container .product .custom-product-page .row-full-width .col .col-inner .ts-product-addons-container .ts-addon-item .ts-addon-details{
		width: 186px !important;
	}
	
	.custom-product-page .ts-addon-item .ts-addon-price-wrapper{
		position: relative;
	}
	
}

/* 366px and larger screen sizes */
@media (min-width:366px){

	/* Addon price */
	.custom-product-page .ts-addon-item .ts-addon-price{
		position:relative;
		top:-4px;
	}
	
}

/* Italic Tag */
.header-wishlist-icon .wishlist-link i{
	color:#222;
}

/* Italic Tag */
.medium-logo-center .account-item i{
	color:#222;
}

/* Strong Tag */
.medium-logo-center .header-nav-main .image-icon strong{
	color:#e72e5d;
	background-color:#222;
}

/* Span Tag */
.medium-logo-center .header-nav-main .off-canvas-toggle span{
	background-color:transparent;
	border-style:none;
}

/* Italic Tag */
.medium-logo-center .flex-right .nav-icon i{
	background-color:transparent;
	color:#222;
	
}
/*
 * CSS Tăng độ ưu tiên bằng selector bạn cung cấp
 * Yêu cầu: 3 thanh, thanh cuối ngắn hơn
 */

/* Thanh ở giữa */
.medium-logo-center .flex-right .nav-icon i.icon-menu {
    position: relative;
    display: block;
    width: 24px;  /* Chiều rộng của thanh dài nhất */
    height: 3px;   /* Độ dày của các thanh */
    background-color: #333; /* Màu của thanh giữa */
}

/* Thanh ở trên (đầy đủ chiều rộng) */
.medium-logo-center .flex-right .nav-icon i.icon-menu::before {
    content: '' !important; /* Ghi đè icon của theme */
    position: absolute;
    top: -8px; /* Khoảng cách */
    left: 0;
    display: block;
    width: 100%; /* Rộng 100% bằng thanh giữa */
    height: 3px;
    background-color: #333;
}

/* Thanh ở dưới (ngắn hơn và căn phải) */
.medium-logo-center .flex-right .nav-icon i.icon-menu::after {
    content: '';
    position: absolute;
    top: 8px; /* Khoảng cách */
    left: auto;   /* Tắt căn trái */
    right: 0;     /* Bật căn phải */
    display: block;
    width: 60%;  /* Rộng 60% so với thanh giữa */
    height: 3px;
    background-color: #333;
}
/* Style popup nền đen chữ trắng */
#popup-search-image {
    background: #000;
    color: #fff;
    border-radius: 10px;
}

#popup-search-image h3,
#popup-search-image p,
#popup-search-image label {
    color: #fff;
}

#popup-search-image button.button.primary {
      background-color: var(--fs-color-primary);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
}

#popup-search-image button.button.primary:hover {
    background-color: #f1f1f1;
}
.search-image-wrapper {
    display: flex;
    align-items: center;
    background: #f1f1f1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer; /* để biết click được */
}

.search-image-wrapper input {
    border: none;
    padding: 10px 12px;
    flex: 1;
    font-size: 14px;
    background: transparent;
    outline: none;
    color: #333;
    cursor: pointer;
}

.search-image-icon {
    background: #e3342f;
    color: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-image-icon i {
    font-size: 16px;
}

.contact-price {
    color: #e72e5d;
    font-weight: 400;
    letter-spacing: -.05em;
    font-size: 24px;
}

.contact-price a {
    color: #e72e5d; /* Ensure the link inherits the same color */
    text-decoration: none; /* Optional: Remove the default underline */
}

.contact-price a:hover {
    color: #c1274a; /* Optional: Slightly darker shade for hover effect */
    text-decoration: underline; /* Optional: Add underline on hover */
}