@charset "utf-8";
/* CSS Document */

/******************************

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Home
	3.1 Currency
	3.2 Language
	3.3 Account
	3.4 Main Navigation
	3.5 Hamburger Menu
	3.6 Logo
	3.7 Main Slider
4. Banner
5. New Arrivals
	5.1 New Arrivals Sorting
	5.2 New Arrivals Products Grid
6. Deal of the week
7. Best Sellers
	7.1 Slider Nav
8. Benefit
9. Blogs
10. Newsletter
11. Footer



******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,900');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
}
.container {
    max-width: 100% !important;
    width: 100%;
    padding-left: 80px;   /* khoảng cách bên trái */
    padding-right: 80px;  /* khoảng cách bên phải */
}

body
{
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	line-height: 23px;
	font-weight: 400;
	background: #FFFFFF;
	color: #1e1e27;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	line-height: 1.7;
	font-weight: 500;
	color: #989898;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 2px #fde0db;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
p a:hover
{
	color: #FF6347;
	background: #fde0db;
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	background: #fde0db;
	color: #FF6347;
}
p::selection
{
	background: #fde0db;
}
h1{font-size: 72px;}
h2{font-size: 40px;}
h3{font-size: 28px;}
h4{font-size: 24px;}
h5{font-size: 16px;}
h6{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	color: #282828;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection
{

}
::-webkit-input-placeholder
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
:-moz-placeholder /* older Firefox*/
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
::-moz-placeholder /* Firefox 19+ */
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
:-ms-input-placeholder
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
::input-placeholder
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}

/*********************************
3. Home
*********************************/

.header
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	z-index: 10;
}
.top_nav {
    background: #f7f7f7;
    padding: 8px 0;
    font-size: 14px;
}

.top_hotline span {
    font-weight: 700;
    margin-left: 4px;
}

.top_notice {
    font-size: 14px;
}

.top_search_box {
    position: relative;
    max-width: 280px;
    width: 100%;
}

.top_search_input {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    padding: 6px 32px 6px 12px;
    font-size: 14px;
    background: #ffffff;
}

.top_search_input:focus {
    outline: none;
    box-shadow: none;
    border-color: #cccccc;
}

.top_search_btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #999999;
}

/* ===========================
   DROPDOWN DESKTOP – SẢN PHẨM
   =========================== */

/* li có submenu */
.navbar_menu li.menu-item-has-children {
    position: relative;
}

/* hộp dropdown */
.navbar_menu li.menu-item-has-children > ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    list-style: none;
    padding: 0;               /* để border liền nhau */
    margin: 0;
    display: none;
    z-index: 99;
}

/* kẻ ngang giữa các item */
.navbar_menu li.menu-item-has-children > ul.sub-menu > li {
    border-top: 1px solid #eee;
}
.navbar_menu li.menu-item-has-children > ul.sub-menu > li:first-child {
    border-top: none;
}

/* style link trong dropdown */
.navbar_menu li.menu-item-has-children > ul.sub-menu > li > a {
    display: block;
    padding: 8px 18px;
    font-size: 13px;
    text-transform: none;
    color: #111;
    white-space: nowrap;
    font-weight: 600 !important;
}

.navbar_menu li.menu-item-has-children > ul.sub-menu > li > a:hover {
    background: #f5f5f5;
    color: #fe4c50;
}

/* hover vào SẢN PHẨM thì hiện dropdown */
.navbar_menu li.menu-item-has-children:hover > ul.sub-menu {
    display: block;
}




/*********************************
3.1 Currency
*********************************/

.currency
{
	display: inline-block;
	position: relative;
	min-width: 50px;
	border-right: solid 1px #33333b;
	padding-right: 20px;
	padding-left: 20px;
	text-align: center;
	vertical-align: middle;
	background: #1e1e27;
}
.currency > a
{
	display: block;
	color: #b5aec4;
	font-weight: 400;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
	text-transform: uppercase;
}
.currency > a > i
{
	margin-left: 8px;
}
.currency:hover .currency_selection
{
	visibility: visible;
	opacity: 1;
	top: 100%;
}
.currency_selection
{
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.currency_selection li
{
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
}
.currency_selection li a
{
	display: block;
	color: #232530;
	border-bottom: solid 1px #dddddd;
	font-size: 13px;
	text-transform: uppercase;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.currency_selection li a:hover
{
	color: #b5aec4;
}
.currency_selection li:last-child a
{
	border-bottom: none;
}

/*********************************
3.2 Language
*********************************/

.language
{
	display: inline-block;
	position: relative;
	min-width: 50px;
	border-right: solid 1px #33333b;
	padding-right: 20px;
	padding-left: 20px;
	text-align: center;
	vertical-align: middle;
	background: #1e1e27;
}
.language > a
{
	display: block;
	color: #b5aec4;
	font-weight: 400;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
.language > a > i
{
	margin-left: 8px;
}
.language:hover .language_selection
{
	visibility: visible;
	opacity: 1;
	top: 100%;
}
.language_selection
{
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.language_selection li
{
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
}
.language_selection li a
{
	display: block;
	color: #232530;
	border-bottom: solid 1px #dddddd;
	font-size: 13px;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.language_selection li a:hover
{
	color: #b5aec4;
}
.language_selection li:last-child a
{
	border-bottom: none;
}

/*********************************
3.3 Account
*********************************/

.account
{
	display: inline-block;
	position: relative;
	min-width: 50px;
	padding-left: 20px;
	text-align: center;
	vertical-align: middle;
	background: #1e1e27;
}
.account > a
{
	display: block;
	color: #b5aec4;
	font-weight: 400;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
.account > a > i
{
	margin-left: 8px;
}
.account:hover .account_selection
{
	visibility: visible;
	opacity: 1;
	top: 100%;
}
.account_selection
{
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.account_selection li
{
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
}
.account_selection li a
{
	display: block;
	color: #232530;
	border-bottom: solid 1px #dddddd;
	font-size: 14px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.account_selection li a:hover
{
	color: #b5aec4;
}
.account_selection li:last-child a
{
	border-bottom: none;
}
.account_selection li a i
{
	margin-right: 10px;
}

/*********************************
3.4 Main Navigation
*********************************/

.main_nav_container
{
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
}

/* Căn giữa nav trong header, logo vẫn absolute bên trái */
.main_nav_container .col-lg-12 {
    position: relative;
}

/* NAV chính dùng flex để menu + icon nằm cùng 1 hàng và ở giữa */
.navbar {
    width: 100%;              /* chiếm hết ngang container */
    height: 100px;
    float: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;  /* MENU ở giữa */
    position: relative;       /* để navbar_user bám theo */
}


/* MENU GIỮA */
.navbar_menu {
    display: flex;
    align-items: center;
}

.navbar_menu li
{
    display: block; /* flex con, không cần inline-block nữa */
}

.navbar_menu li a
{
    display: block;
    color: #1e1e27;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 20px;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
.navbar_menu li a:hover
{
    color: #e75e0f;
}

/* USER + CART BÊN PHẢI MENU, CÙNG 1 HÀNG */
.navbar_user {
    display: flex;
    align-items: center;

    /* đẩy hẳn qua phải */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    margin-left: 0; /* không cần khoảng cách với menu nữa */
}


.navbar_user li
{
    display: flex;
    text-align: center;
}

.navbar_user li a
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: right;
    position: relative;
    width: 40px;
    height: 40px;
    color: #1e1e27;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
.navbar_user li a:hover
{
    color: #b5aec4;
}

.checkout a
{
    background: #eceff6;
    border-radius: 50%;
}
.checkout_items
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -9px;
    left: 22px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fe4c50;
    font-size: 12px;
    color: #FFFFFF;
}


/*********************************
3.5 Hamburger Menu
*********************************/

.hamburger_container
{
	display: none;
	margin-left: 40px;
}
.hamburger_container i
{
	font-size: 24px;
	color: #1e1e27;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.hamburger_container:hover i
{
	color: #b5aec4;
}
.hamburger_menu
{
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background: rgba(255,255,255,0.95);
	z-index: 10;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.hamburger_menu.active
{
	right: 0;
}
.fs_menu_overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9;
	background: rgba(255,255,255,0);
	pointer-events: none;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.hamburger_close
{
	position: absolute;
	top: 26px;
	right: 10px;
	padding: 10px;
	z-index: 1;
}
.hamburger_close i
{
	font-size: 24px;
	color: #1e1e27;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.hamburger_close:hover i
{
	color: #b5aec4;
}
.hamburger_menu_content
{
	padding-top: 100px;
	width: 100%;
	height: 100%;
	padding-right: 20px;
}
.menu_item
{
	display: block;
	position: relative;
	border-bottom: solid 1px #b5aec4;
	vertical-align: middle;
}
.menu_item > a
{
	display: block;
	color: #1e1e27;
	font-weight: 500;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	text-transform: uppercase;
}
.menu_item > a:hover
{
	color: #b5aec4;
}
.menu_item > a > i
{
	margin-left: 8px;
}
.menu_item.active .menu_selection
{
	display: block;
	visibility: visible;
	opacity: 1;
}
.menu_selection
{
	margin: 0;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	z-index: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.menu_selection li
{
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
}
.menu_selection li a
{
	display: block;
	color: #232530;
	border-bottom: solid 1px #dddddd;
	font-size: 13px;
	text-transform: uppercase;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.menu_selection li a:hover
{
	color: #b5aec4;
}
.menu_selection li:last-child a
{
	border-bottom: none;
}
/* ===== Overlay phía sau ===== */
.fs_menu_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);   /* mặc định trong suốt */
    pointer-events: none;        /* không chặn click khi đang tắt */
    z-index: 9;
    transition: background 0.25s ease;
}
.fs_menu_overlay.active {
    background: rgba(0,0,0,0.35); /* mở menu -> nền mờ */
    pointer-events: auto;
}

/* ===== Panel menu bên phải ===== */
.hamburger_menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;                /* có thể tăng 320–360 nếu muốn rộng hơn */
    max-width: 80%;
    height: 100vh;
    background: #ffffff;
    box-shadow: -4px 0 15px rgba(0,0,0,0.15);
    z-index: 10;
    transform: translateX(100%); /* ẩn ngoài màn hình */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.hamburger_menu.active {
    transform: translateX(0);    /* trượt vào sát lề phải */
}

/* nút X đóng menu */
.hamburger_close {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    padding: 8px;
    z-index: 20;
}
.hamburger_close i {
    font-size: 20px;
    color: #111;
}

/* chữ MENU nhỏ phía trên */
.hamburger_title {
    padding: 14px 20px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #999;
    border-bottom: 1px solid #eee;
}

/* ===== list menu chính trong panel ===== */
.hamburger_menu_content {
    padding: 10px 0 20px;
    overflow-y: auto;
    flex: 1;
}
.menu_top_nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu_top_nav > li {
    border-bottom: 1px solid #f1f1f1;
}
.menu_top_nav > li > a {
    display: block;
    padding: 12px 20px;
    font-size: 14px;
    text-transform: uppercase;
    color: #111;
    font-weight: 700;           /* chữ đen đậm */
}
.menu_top_nav > li > a:hover {
    background: #f7f7f7;
}

/* ===== submenu (danh mục con) ===== */
.hamburger_menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.hamburger_menu .menu-item-has-children.open > .sub-menu {
    max-height: 500px;          /* đủ lớn cho list con */
}
.hamburger_menu .sub-menu li a {
    padding: 8px 20px 8px 30px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    color: #333;
}

/* mũi tên bên phải cho item có submenu */
.hamburger_menu .menu-item-has-children > a {
    position: relative;
    padding-right: 36px;
}
.hamburger_menu .menu-item-has-children > a::after {
    content: "\f107";           /* caret-down */
    font-family: "FontAwesome";
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 12px;
    line-height: 38px;
}
.hamburger_menu .menu-item-has-children.open > a::after {
    content: "\f106";           /* caret-up khi mở */
}

/* chỉ dùng hamburger ở mobile */
@media (max-width: 991.98px) {
    .hamburger_container {
        display: block;
        margin-left: 16px;
    }
    .navbar_menu {
        display: none;
    }
}

/* desktop: tắt hoàn toàn menu mobile */
@media (min-width: 992px) {
    .hamburger_menu,
    .fs_menu_overlay {
        display: none !important;
    }
}

/*********************************
3.6 Logo
*********************************/

/* .logo_container
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 15px;
}
.logo_container a
{
	font-size: 24px;
	color: #1e1e27;
	font-weight: 700;
	text-transform: uppercase;
}
.logo_container a span
{
	color: #fe4c50;
} */

/* ===== FIX LOGO IMAGE ===== */
.logo_container {
    display: flex;
    align-items: center;
}

.logo_container .custom-logo-link {
    display: flex;
    align-items: center;
}

.logo_container .custom-logo {
    max-height: 100px;   /* chỉnh theo header */
    width: auto;
    height: auto;
}

/* Khi dùng logo ảnh thì bỏ style chữ */
.logo_container .custom-logo-link {
    font-size: 0;
}


/*********************************
3.7 Main Slider
*********************************/
/* ===================== MAIN SLIDER ===================== */

/* KHUNG SLIDER – bỏ height 700px của theme cũ */
.main_slider {
    width: 100%;
    margin-top: 150px;
    position: relative;
    height: auto !important; /* quan trọng */
}

/* MỖI SLIDE */
.main_slider_item {
    width: 100%;
    min-height: 700px; /* desktop cao ~700px */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* ===== NAV ARROWS ===== */
.main_slider .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;

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

    transform: translateY(-50%);
}

.main_slider .owl-nav button.owl-prev,
.main_slider .owl-nav button.owl-next {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: none;
    border-radius: 0;
    cursor: pointer;

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

/* reset mọi transform xoay dọc của theme cũ */
.main_slider .owl-nav button,
.main_slider .owl-nav button span,
.main_slider .owl-nav button i {
    transform: none !important;
    writing-mode: horizontal-tb !important;
}

.main_slider .owl-nav i {
    font-size: 20px;
    color: #000;
}

/* ===== DOTS – vòng tròn trắng, active tô trắng ===== */
.main_slider .owl-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.main_slider .owl-dot {
    display: inline-block;
    margin: 0 4px;
}

.main_slider .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: transparent;
    box-sizing: border-box;
}

.main_slider .owl-dot.active span {
    background: #ffffff;
    border: 2px solid #ffffff;
}

/* NỘI DUNG SLIDE */
.main_slider_content {
    width: 60%;
}
.main_slider_content h6 {
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 29px;
}
.main_slider_content h1 {
    font-weight: 400;
    line-height: 1;
}

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

/* Tablet + Mobile: không dùng min-height 700 nữa */
@media (max-width: 991px) {

    .main_slider_item {
        min-height: auto;
        height: auto;
        padding: 60px 15px 80px;   /* trên – trái/phải – dưới */
    }

    /* ép owl theo content, tránh dư trắng */
    .main_slider .owl-stage-outer,
    .main_slider .owl-stage,
    .main_slider .owl-item {
        height: auto !important;
    }

    .main_slider_content {
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .main_slider_content h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .main_slider_content h6 {
        font-size: 11px;
        margin-bottom: 16px;
    }

    /* mũi tên thu nhỏ + sát mép hơn */
    .main_slider .owl-nav button.owl-prev,
    .main_slider .owl-nav button.owl-next {
        width: 28px;
        height: 28px;
    }

    .main_slider .owl-nav i {
        font-size: 14px;
    }

    .main_slider .owl-nav button.owl-prev {
        margin-left: 5px;
    }
    .main_slider .owl-nav button.owl-next {
        margin-right: 5px;
    }

    .main_slider .owl-dots {
        bottom: 15px;
    }
}


.red_button
{
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 40px;
	background: #fe4c50;
	border-radius: 3px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.red_button:hover
{
	background: #FE7C7F !important;
}
.red_button a
{
	display: block;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	line-height: 40px;
	width: 100%;
}
.shop_now_button
{
	width: 140px;
	margin-top: 32px;
}

/*********************************
4. Banner
*********************************/

/* ================= BANNER 3 CARD ĐỎ =================== */

/* khoảng cách phía trên */
.banner {
    width: 100%;
    margin-top: 40px;
}

/* mỗi cột cách nhau chút cho thoáng */
.banner .col-md-4 {
    margin-bottom: 30px;
}

/* card banner – override .banner_item cũ */
.banner .banner_cat_item {
    position: relative;
    display: block;              /* bỏ flex cũ */
    overflow: hidden;
    border-radius: 24px;
    height: 320px;               /* cao giống hình đỏ */
    background: none;            /* không dùng background-image nữa */
}

/* ảnh nền trong card */
.banner .banner_cat_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}

/* link ôm trọn card */
.banner .banner_cat_link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
}

/* khối chữ + nút ở góc dưới trái */
/* vị trí chữ + nút trong card */
.banner .banner_cat_content {
    position: absolute;
    left: 40px;      /* trước là 80px -> sát trái hơn */
    bottom: 35px;    /* trước là 70px -> xuống gần đáy hơn */
    text-align: left;
}


/* “Danh mục” */
.banner .banner_cat_label {
    margin: 0 0 6px;
    font-size: 16px;
    color: #f7c7c8;              /* hồng nhạt giống hình */
}

/* “Sản phẩm mới / Best Seller / Promotion” */
.banner .banner_cat_title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #1e1e27;
}

/* nút XEM THÊM */
.banner .banner_cat_btn {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 46px;
    border-radius: 999px;
    background: #ffffff;
    color: #1e1e27;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: all .25s ease;
}

.banner .banner_cat_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

/* ====== Responsive mobile ====== */
@media (max-width: 767px) {
    .banner .banner_cat_item {
        height: 230px;
    }

    .banner .banner_cat_content {
        left: 30px;
        bottom: 30px;
    }

    .banner .banner_cat_title {
        font-size: 22px;
    }

    .banner .banner_cat_btn {
        margin-top: 18px;
        padding: 9px 30px;
        font-size: 13px;
    }
}

/*********************************
5. New Arrivals
*********************************/

.new_arrivals {
    width: 100%;
    padding: 40px 0 50px;
    background: #f8f8f8;
}

.new_arrivals_title {
    margin-top: 0;
}

.new_arrivals_sub {
    margin-top: 6px;
    font-size: 14px;
    color: #666;
}

/*********************************
5.1 New Arrivals Sorting
*********************************/

.new_arrivals_sorting {
    display: inline-block;
    border-radius: 3px;
    margin-top: 59px;
    overflow: visible;
}

.grid_sorting_button {
    height: 40px;
    min-width: 102px;
    padding-left: 25px;
    padding-right: 25px;
    cursor: pointer;
    border: solid 1px #ebebeb;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    background: #FFFFFF;
    border-radius: 3px;
    margin: 0;
    float: left;
    margin-left: -1px;
}

.grid_sorting_button:first-child {
    margin-left: 0px;
}

.grid_sorting_button:last-child { }

.grid_sorting_button.active:hover {
    background: #FE7C7F !important;
}

.grid_sorting_button.active {
    color: #FFFFFF;
    background: #fe4c50;
}

/*********************************
5.2 New Arrivals Products Grid
*********************************/

/* GRID CHUNG */
.product-grid {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

/* 5 sản phẩm / hàng trên desktop, responsive xuống dần */
.product-item {
    width: 20%;
    padding: 12px;
    box-sizing: border-box;
    cursor: pointer;
}
/* ================================
   Dùng Owl cho New Arrivals
   ================================ */

/* Khi dùng owl, .product-grid đóng vai trò là carousel container */
.product-grid.owl-carousel {
    margin-top: 30px;
    display: block;      /* ghi đè display:flex ở trên */
}

/* Khoảng cách giữa các card sản phẩm */
.product-grid.owl-carousel .owl-item {
    padding: 12px;
    box-sizing: border-box;
}

/* Bên trong owl, mỗi .product-item chiếm full chiều rộng ô,
   số item / hàng do JS owlCarousel(items: 5, ...) quyết định */
.product-grid.owl-carousel .product-item {
    width: 100%;
    padding: 0;          /* padding đã chuyển sang .owl-item */
}


/* responsive */
@media (max-width: 1199px) {
    .product-item { width: 25%; }
}
@media (max-width: 991px) {
    .product-item { width: 33.3333%; }
}
@media (max-width: 767px) {
    .product-item { width: 50%; }
}
@media (max-width: 480px) {
    .product-item { width: 100%; }
}

/* bỏ viền + box-shadow pseudo cũ */
.product-item::after,
.product-item:hover::after {
    content: none;
    box-shadow: none;
    border: none;
}

/* THẺ SẢN PHẨM – khung trắng bo tròn, đổ bóng giống hình Yuumy */
.product {
    width: 100%;
    height: 100%;
    border-right: none;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.13);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* ẢNH SẢN PHẨM + KHUNG PNG */
.product_image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f7f7f7;
}

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

/* nếu bạn dùng thêm div.img-qua-tang như mẫu Yuumy */
.product_image .img-qua-tang {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.product_image .img-qua-tang .imgLoopItem {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* BADGE % GIẢM – dạng pill tròn, góc phải dưới */
.product_bubble {
    position: absolute;
    top: auto;
    left: auto;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: #e02020;
    text-transform: none;
    z-index: 3;
}

.product_bubble span {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

.product_bubble_right::after,
.product_bubble_left::after {
    content: none; /* bỏ “đuôi” tam giác cũ */
}

/* TEXT THÔNG TIN SẢN PHẨM DƯỚI ẢNH */
.product_info {
    text-align: left;
    padding: 14px 18px 16px;
}

/* nhãn New */
.product-news {
    margin-bottom: 6px;
}
.product-news span {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #111;
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
}

/* tên sản phẩm */
.product_name {
    margin: 6px 0 10px;
    line-height: 1.4;
    height: 40px;        /* 2 dòng rồi ẩn bớt giống Yuumy */
    overflow: hidden;
}

.product_name a {
    color: #222;
}

.product_name a:hover {
    color: #c41c1c;
}

/* giá */
/* .product_price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #e02020;
    font-weight: 700;
}

.discount .product_info .product_price {
    font-size: 16px;
}

/* giá cũ */
/* .product_price span {
    font-size: 13px;
    margin-left: 0;
    color: #a0a0a0;
    text-decoration: line-through;
} */
 .product_price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
}

/* Giá đang bán: đỏ, đậm, KHÔNG gạch */
.product_price .product_price_current {
    color: #ff0000;      /* chỉnh lại nếu bạn có màu brand khác */
    font-weight: 700;
    font-size: 16px;
}

/* Giá cũ: xám, gạch ngang */
.product_price .product_price_old {
    color: #9e9e9e;
    font-size: 14px;
    text-decoration: line-through;
    font-weight: 400;
}

/* Tiêu đề danh mục – căn giữa, có khoảng cách trên dưới */
/* ===== TIÊU ĐỀ DANH MỤC + TOPBAR ===== */
.shop-top-header {
    text-align: center;                /* mọi thứ trong header này mặc định căn giữa */
}

.shop-category-title {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin: 32px 0 16px;               /* trên 32px, dưới 16px */
}

/* khoảng cách filter / sắp xếp với grid sản phẩm */
.shop-topbar {
    margin-bottom: 16px;
}

/* ===== BREADCRUMB BAR (thanh xám mỏng) ===== */
/* ===== BREADCRUMB ===== */
.shop-breadcrumb-bar {
    background: #f5f5f5;
    padding: 10px 0;
    margin-top: 130px;        /* dưới header fixed */
    border-bottom: 1px solid #e9e9e9;
}

.shop-breadcrumb-bar .breadcrumbs ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.shop-breadcrumb-bar .breadcrumbs li,
.shop-breadcrumb-bar .breadcrumbs li a {
    display: inline-block;
    color: #555;
    font-weight: 600;         /* in đậm */
}

/* ===== BANNER DANH MỤC ===== */
.shop-hero-banner {
    background: #ffffff;
    padding: 8px 0 16px;
    margin-top: 0;
}

.shop-hero-banner img {
    width: 100%;
    display: block;
    border-radius: 20px;
}

/* ===== TIÊU ĐỀ + FILTER + SORT (DESKTOP) ===== */
.shop-category-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin: 32px 0 16px;
}

.shop-top-header {
    margin-bottom: 8px;
}

.shop-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.shop-filter-toggle {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.shop-filter-toggle i {
    margin-right: 6px;
}

/* select sắp xếp */
.shop-ordering select {
    min-width: 220px;
    font-size: 14px;
    padding: 6px 28px 6px 10px;
}

/* ===== MOBILE RESPONSIVE (giống Yuumy) ===== */
@media (max-width: 480px) {

    /* container bớt padding cho đỡ chật */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .shop-breadcrumb-bar {
        margin-top: 100px;
        padding: 8px 0;
    }

    .shop-breadcrumb-bar .breadcrumbs ul {
        font-size: 12px;
        white-space: nowrap;
        overflow-x: auto;
    }

    .shop-category-title {
        font-size: 24px;
        margin: 18px 0 10px;
        text-align: center;
    }

    .shop-topbar {
        margin-bottom: 12px;
    }

    .shop-filter-toggle {
        font-size: 13px;
    }

    .shop-ordering {
        flex: 0 0 60%;
    }

    .shop-ordering select {
        width: 100%;
        max-width: 100%;
        font-size: 13px;
        padding: 6px 10px;
    }

    .product-grid {
        margin-top: 12px;
    }

    /* 2 sản phẩm / hàng trên mobile */
    .product-item {
        width: 50%;
        padding: 6px;
    }
}









/* Grid sản phẩm cách phía trên 1 chút nữa */
.product-grid {
    margin-top: 24px;
}

/* Ẩn nút add to cart + tim yêu thích cho giống giao diện Yuumy */
.add_to_cart_button {
    display: none;
}

.favorite,
.favorite_left {
    display: none;
}

.fadoda-breadcrumb ul {
    margin: 15px 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}
.fadoda-breadcrumb li {
    display: inline-block;
    color: #666;
}
.fadoda-breadcrumb li a {
    color: #666;
}
.fadoda-category-banner img {
    width: 100%;
    display: block;
    border-radius: 8px;
}
.fadoda-category-title {
    font-size: 32px;
    font-weight: 700;
}
.fadoda-filter-label {
    font-weight: 600;
    font-size: 16px;
}
.fadoda-filter-label i {
    margin-right: 8px;
}
.fadoda-ordering select {
    max-width: 260px;
}
.fadoda-category-description {
    font-size: 15px;
    line-height: 1.7;
}


/*********************************
6. Deal of the week
*********************************/

.deal_ofthe_week
{
	width: 100%;
	margin-top: 41px;
	background: #f2f2f2;
}
.deal_ofthe_week_img
{
	height: 540px;
}
.deal_ofthe_week_img img
{
	height: 100%;
}
.deal_ofthe_week_content
{
	height: 100%;
}
.section_title
{
	display: inline-block;
	text-align: center;
}
.section_title h2
{
	display: inline-block;
}
.section_title::after
{
	display: block;
	position: absolute;
	top: calc(100% + 13px);
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 60px;
	height: 5px;
	background: #fe4c50;
	content: '';
}
.timer
{
	margin-top: 66px;
}
.timer li
{
	display: inline-block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #FFFFFF;
	margin-right: 10px;
}
.timer li:last-child
{
	margin-right: 0px;
}
.timer_num
{
	font-size: 48px;
	font-weight: 600;
	color: #fe4c50;
	margin-top: 10px;
}
.timer_unit
{
	margin-top: 12px;
	font-size: 16px;
	font-weight: 500;
	color: #51545f;
}
.deal_ofthe_week_button
{
	width: 140px;
	background: #1e1e27;
	margin-top: 52px;
}
.deal_ofthe_week_button:hover
{
	background: #2b2b34 !important;
}

/*********************************
7. Best Sellers
*********************************/

.product_slider_container {
    width: 100%;
    margin-top: 73px;
    height: auto;           /* cho cao theo sản phẩm, khỏi cố định 340px */
    position: relative;
}

.product_slider_container::after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #FFFFFF;
    content: '';
    z-index: 1;
}

.product_slider {
    overflow: visible !important;
}

/* MỖI SLIDE: luôn full width của .owl-item */
.product_slider_item {
    width: 100%;            /* bỏ 20% đi */
    height: 100%;
}

/* Card sản phẩm trong slider – cho full width, cao tự nhiên */
.product_slider_item .product-item {
    width: 100% !important;
    height: auto;           /* nếu muốn giữ cao cố định thì đặt lại 340px, nhưng dễ bị cắt chân */
}


/*********************************
7.1 Slider Nav
*********************************/

.product_slider_nav
{
	position: absolute;
	width: 30px;
	height: 70px;
	background: #d3d3d6;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 2;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.product_slider_container:hover .product_slider_nav
{
	visibility: visible;
	opacity: 1;
}
.product_slider_nav i
{
	color: #FFFFFF;
	font-size: 12px;
}
.product_slider_nav_left
{
	top: 50%;
	left: 0;
}
.product_slider_nav_right
{
	top: 50%;
	right: 0;
}

/*********************************
8. Benefit
*********************************/

.benefit
{
	margin-top: 74px;
}
.benefit_row
{
	padding-left: 15px;
	padding-right: 15px;
}
.benefit_col
{
	padding-left: 0px;
	padding-right: 0px;
}
.benefit_item
{
	height: 100px;
	background: #f3f3f3;
	border-right: solid 1px #FFFFFF;
	padding-left: 25px;
}
.benefit_col:last-child .benefit_item
{
	border-right: none;
}
.benefit_icon i
{
	font-size: 30px;
	color: #fe4c50;
}
.benefit_content
{
	padding-left: 22px;
}
.benefit_content h6
{
	text-transform: uppercase;
	line-height: 18px;
	font-weight: 500;
	margin-bottom: 0px;
}
.benefit_content p
{
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 0px;
	color: #51545f;
}

/*********************************
9. Blogs
*********************************/

.blogs
{
	margin-top: 72px;
}
.blogs_container
{
	margin-top: 53px;
}
.blog_item
{
	height: 255px;
	width: 100%;
}
.blog_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.blog_content
{
	position: absolute;
	top: 30px;
	left: 30px;
	width: calc(100% - 60px);
	height: calc(100% - 60px);
	background: rgba(255,255,255,0.9);
	padding-left: 10px;
	padding-right: 10px;
	visibility: hidden;
	opacity: 0;
	transform-origin: center center;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.blog_item:hover .blog_content
{
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}
.blog_title
{
	font-weight: 500;
	line-height: 1.25;
	margin-bottom: 0px;
}
.blog_meta
{
	font-size: 12px;
	line-height: 30px;
	font-weight: 400;
	text-transform: uppercase;
	color: #51545f;
	margin-bottom: 0px;
	margin-top: 3px;
	letter-spacing: 1px;
}
.blog_more
{   
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	color: #fe4c50;
	border-bottom: solid 1px #fe4c50;
	margin-top: 12px;
}
.blog_more:hover
{
	color: #FE7C7F;
}


/* ===============================
   BLOG HEADER – RESPONSIVE
================================ */

/* ===============================
   FIX BLOG HEADER LỆCH CAO THẤP
================================ */

.blog-header {
    display: flex !important;
    align-items: center !important;
}

/* RESET title Coloshop */
.blog-header .section_title {
    margin: 0 !important;
    padding: 0 !important;
}

.blog-header .section_title h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
}

/* TẮT GẠCH ĐỎ TRIỆT ĐỂ */
.blog-header .section_title::after,
.blog-header .section_title h2::after {
    display: none !important;
    content: none !important;
}

/* ÉP nút xem thêm cùng chiều cao */
.blog_view_all_btn {
    display: flex;
    align-items: center;
    line-height: 1 !important;
    height: auto;
}


/* Khoảng cách blog list */
.blogs_container {
    margin-top: 20px !important;
}

/* Nút xem thêm */
.blog_view_all_btn {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.blog_view_all_btn .arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.blog_view_all_btn:hover {
    color: #fe4c50;
}

.blog_view_all_btn:hover .arrow {
    transform: translateX(4px);
}

/* ===============================
   FIX LỆCH BLOG PETLA – XEM THÊM
================================ */

/* Tablet & Mobile */
@media (max-width: 991px) {

    .blog-header {
        display: flex;
        align-items: center;
    }

    .blog-header > div {
        display: flex;
        align-items: center;
    }

    .blog-header .col-md-8,
    .blog-header .col-md-4 {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 575px) {

    .blog-header {
        align-items: center !important;
    }

    .blog-header > div {
        display: flex;
        align-items: center;
    }
}





/*********************************
10. Newsletter
*********************************/

.newsletter
{
	width: 100%;
	background: #f2f2f2;
	margin-top: 81px;
}
.newsletter_text
{
	height: 120px;
}
.newsletter_text h4
{
	margin-bottom: 0px;
	line-height: 24px;
}
.newsletter_text p
{
	margin-bottom: 0px;
	line-height: 1.7;
	color: #51545f;
}
.newsletter_form
{
	height: 120px;
}
#newsletter_email
{
	width: 300px;
	height: 46px;
	background: #FFFFFF;
	border: none;
	padding-left: 20px;
}
#newsletter_email:focus
{
	border: solid 1px #7f7f7f !important;
	box-shadow: none !important;
}
:focus
{
	outline: none !important;
}
#newsletter_email::-webkit-input-placeholder
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
#newsletter_email:-moz-placeholder /* older Firefox*/
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
#newsletter_email::-moz-placeholder /* Firefox 19+ */
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
#newsletter_email:-ms-input-placeholder
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
#newsletter_email::input-placeholder
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
.newsletter_submit_btn
{
	width: 160px;
	height: 46px;
	border: none;
	background: #fe4c50;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
}
.newsletter_submit_btn:hover
{
	background: #FE7C7F;
}

/*********************************
11. Footer
*********************************/

/*********************************
FOOTER – 4 CỘT (THAY FOOTER CŨ)
*********************************/

.footer {
    background: radial-gradient(circle at top, #1a1f24, #0b0f13 70%);
    color: #e5e5e5;
    padding: 60px 0 25px;
    font-size: 14px;
    line-height: 1.7;
}

/* TIÊU ĐỀ CỘT */
.footer .footer-title {
    color: #caa76a;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* ĐOẠN VĂN */
.footer p {
    margin: 0;
    color: #e5e5e5;
}

/* LIST */
.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer ul li {
    margin-bottom: 10px;
}

/* LINK */
.footer ul li a {
    color: #e5e5e5;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer ul li a:hover {
    color: #caa76a;
    padding-left: 6px;
}

/* LIÊN HỆ */
.footer .footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.footer .footer-contact i {
    color: #caa76a;
    margin-top: 4px;
    min-width: 16px;
}

/* SOCIAL */
.footer .footer-social {
    margin-top: 15px;
}

.footer .footer-social a {
    display: inline-block;
    margin-right: 12px;
    font-size: 18px;
    color: #ffffff;
    transition: 0.3s;
}

.footer .footer-social a:hover {
    color: #caa76a;
}

/* FOOTER BOTTOM */
.footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 35px;
    padding-top: 15px;
    text-align: center;
    font-size: 13px;
    color: #cfcfcf;
}

/*********************************
RESPONSIVE
*********************************/

@media (max-width: 991px) {
    .footer {
        padding: 45px 0 20px;
    }
    .footer .footer-title {
        font-size: 17px;
    }
}

@media (max-width: 575px) {
    .footer {
        text-align: center;
    }
    .footer .footer-contact li {
        justify-content: center;
    }
    .footer ul li a:hover {
        padding-left: 0;
    }
}




/* Single product – layout Yuumy */

.single-product-page {
    padding-top: 30px;
    padding-bottom: 60px;
}

/* TOP ROW */
.single-product-top {
    margin-top: 30px;
    margin-bottom: 40px;
}

/* Gallery trái */
.single-product-gallery-inner {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    padding: 18px;
}

/* Woo đã tự CSS cho gallery, bạn chỉ bọc khung thôi */

/* Summary phải */
.single-product-summary-wrapper {
    padding-left: 40px;
}

.single-product-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Tình trạng + SKU */
.single-product-meta-top {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}

.single-product-sku span {
    font-weight: 600;
}

/* Giá */
.single-product-price {
    font-size: 22px;
    font-weight: 700;
    color: #e02020;
    margin-bottom: 16px;
}

/* Mô tả ngắn */
.single-product-short {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Block add to cart */
.single-product-cart-block {
    margin-bottom: 20px;
}

/* Benefit 3 icon */
.single-product-benefits {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 6px;
}

.single-product-benefits .benefit-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #444;
}

.single-product-benefits .benefit-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

/* Tabs mô tả */
.single-product-tabs {
    margin-top: 20px;
}

.single-product-related {
    margin-top: 40px;
}

/* Responsive */
@media (max-width: 991px) {
    .single-product-summary-wrapper {
        padding-left: 0;
        margin-top: 25px;
    }
}

@media (max-width: 575px) {
    .single-product-page {
        padding-top: 20px;
    }
    .single-product-title {
        font-size: 20px;
    }
}
/*********************************
4. Breadcrumbs
*********************************/

/*********************************
5. Single Product Section
*********************************/

/*********************************
 SINGLE PRODUCT – FIX HEIGHT SYNC
*********************************/

/* KHUNG CHI TIẾT SP */
.single_product_container {
    margin-top: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid #ebebeb;
}

/* ========== IMAGE LARGE ========== */

.image_col {
    padding-right: 30px;
}

.single_product_image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;       /* ẢNH LỚN VUÔNG */
    background: #f5f5f5;
    overflow: hidden;
}

.single_product_image_background {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ========== THUMBNAILS ========== */

/* QUAN TRỌNG: KHÔNG CHO CAO HƠN ẢNH LỚN */
.single_product_thumbnails {
    overflow-y: auto;          /* dư thì scroll */
}

.single_product_thumbnails ul {
    margin: 0;
    padding: 0;
}

/* mỗi thumbnail */
.single_product_thumbnails ul li {
    aspect-ratio: 1 / 1;
    margin-bottom: 12px;
    background: #f5f5f5;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display: flex;
}

/* ảnh thumb phủ kín */
.single_product_thumbnails ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* active */
.single_product_thumbnails ul li::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #e24c83;
    opacity: 0;
    pointer-events: none;
}

.single_product_thumbnails ul li.active::after,
.single_product_thumbnails ul li:hover::after {
    opacity: 1;
}

/* scrollbar gọn */
.single_product_thumbnails::-webkit-scrollbar {
    width: 4px;
}
.single_product_thumbnails::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}


/* THÔNG TIN SẢN PHẨM BÊN PHẢI */
.product_details {
    width: 100%;
}

.product_details_title {
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
}

.product_details_title h4 {
    font-size: 30px;
    line-height: 1.3;
    margin: 0 0 6px;
}

/* Giá & giá gạch – SCOPED theo .product_details để không đụng grid */
.product_details .original_price {
    font-weight: 500;
    color: #b9b4c7;
    text-decoration: line-through;
    line-height: 30px;
    margin-top: 15px;
}

.product_details .product_price {
    display: inline-block;
    font-size: 26px;
    color: #fe4c50;
    font-weight: 500;
    line-height: 30px;
    margin-top: 0;
    margin-right: 12px;
}

/* Sao đánh giá */
.product_details .star_rating {
    display: inline-block;
    margin-left: 20px;
}

.product_details .star_rating li {
    display: inline-block;
    margin-right: -2px;
    cursor: pointer;
}

.product_details .star_rating li i {
    color: #fac451;
}

/* Màu sắc (text) */
.product_details .product_color {
    margin-top: 16px;
}

.product_details .product_color ul {
    display: inline-block;
    margin-left: 10px;
}

.product_details .product_color ul li {
    display: inline-block;
    margin-right: 10px;
}

/* =========================
   FORM CART + NÚT + TIM
   ========================= */

/* wrapper chứa form + tim (div.product_actions trong PHP) */
.product_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}

/* form add to cart nằm trong .product_details */
.product_details .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0;
}

/* Woo bọc quantity trong .quantity */
.product_details .cart .quantity {
    margin: 0;
    width: auto;
    height: auto;
}

/* Ô - 1 + */
.fadoda-qty-wrap {
    display: flex;
    align-items: center;
    height: 48px;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

/* input số */
.fadoda-qty-wrap .qty {
    width: 60px;
    height: 48px;
    line-height: 48px;
    border: none;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    background: #ffffff;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 0;
    box-shadow: none;
}

/* bỏ mũi tên mặc định */
.fadoda-qty-wrap .qty::-webkit-outer-spin-button,
.fadoda-qty-wrap .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.fadoda-qty-wrap .qty[type="number"] {
    -moz-appearance: textfield;
}

/* nút - và + hai bên */
.fadoda-qty-btn {
    width: 48px;
    height: 48px;
    border: none;
    background: #f5f5f5;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fadoda-qty-btn:hover {
    background: #e8e8e8;
}

/* Nút THÊM VÀO GIỎ */
.product_details .cart .single_add_to_cart_button {
    height: 48px;
    padding: 0 52px;
    border-radius: 999px;
    background: #f85a2a;
    border: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(248, 90, 42, 0.35);
}

.product_details .cart .single_add_to_cart_button:hover {
    background: #ff6c3a;
}

/* Icon tim */
.product_details .product_favorite {
    width: 48px;
    height: 48px;
    margin-left: 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product_details .product_favorite::after {
    font-family: 'FontAwesome';
    content:'\f08a';
    font-size: 16px;
    color: #555;
}

.product_details .product_favorite:hover::after,
.product_details .product_favorite.active::after {
    content:'\f004';
    color: #fe4c50;
}


/*********************************
7. Tabs
*********************************/

.tabs_section_container {
    width: 100%;
    padding-bottom: 80px;
    border-bottom: solid 1px #ebebeb;
}
.tabs_container {
    margin-top: 66px;
    margin-bottom: 66px;
}
.tab {
    margin-right: 50px;
    cursor: pointer;
}
.tab:last-child {
    margin-right: 0px;
}
.tab span {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #1e1e27;
}
.tab:hover span {
    color: #b5aec4;
}
.tab.active span {
    color: #fe4c50;
    border-bottom: solid 1px #fe4c50;
}
.tab_container {
    width: 100%;
    display: none;
}
.tab_container.active {
    display: block;
}

/*********************************
7.1 Description
*********************************/

.tab_title {
    margin-bottom: 98px;
}
.tab_title h4 {
    display: inline-block;
    color: #fe4c50;
    border-bottom: solid 1px #fe4c50;
}
.tab_text_block {
    margin-bottom: 133px;
}
.tab_text_block p {
    font-weight: 400;
    margin-top: 10px;
}
.tab_image {
    width: 100%;
    margin-bottom: 131px;
}
.tab_image img {
    width: 100%;
}
.desc_last {
    margin-bottom: 0px;
}

/*********************************
7.3 Reviews – WooCommerce
*********************************/

/* Wrapper 2 cột: bên trái danh sách review, bên phải form */
.woocommerce-Reviews {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    margin-top: 40px;
}

/* Cột trái: danh sách review */
.woocommerce-Reviews #comments {
    flex: 0 0 50%;
}

/* Cột phải: form Add Review */
.woocommerce-Reviews #review_form_wrapper {
    flex: 0 0 50%;
}

/* Tiêu đề Reviews */
.woocommerce-Reviews-title,
.woocommerce-Reviews .reviews_title h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #fe4c50;
    border-bottom: 2px solid #fe4c50;
    display: inline-block;
    padding-bottom: 6px;
}

/* Một item review */
.woocommerce-Reviews .commentlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-Reviews .commentlist li {
    list-style: none;
    margin-bottom: 37px;
}

.woocommerce-Reviews .comment_container {
    display: flex;
    align-items: flex-start;
    border: none;
    padding: 0;
    background: transparent;
}

/* Avatar tròn */
.woocommerce-Reviews .comment_container img.avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 25px;
}

/* Nội dung review */
.woocommerce-Reviews .comment-text {
    padding: 0;
    border: none;
}

.woocommerce-Reviews .comment-text .meta {
    margin-bottom: 8px;
}

.woocommerce-Reviews .woocommerce-review__author {
    font-size: 16px;
    font-weight: 500;
    margin-right: 8px;
}

.woocommerce-Reviews .woocommerce-review__published-date {
    color: #fe4c50;
    font-size: 13px;
}

.woocommerce-Reviews .woocommerce-review__dash {
    display: none;
}

/* Sao trong list review */
.woocommerce-Reviews .star-rating {
    margin-top: 5px;
    font-size: 12px;
    color: #f5c136;
}

/* Nội dung text */
.woocommerce-Reviews .description p {
    margin-top: 10px;
    font-weight: 400;
    color: #51545f;
}

/* Khi chưa có review */
.woocommerce-Reviews .woocommerce-noreviews {
    margin-top: 10px;
    color: #9ca3af;
}

/*********************************
8. Add Review – Form bên phải
*********************************/

.woocommerce-Reviews #review_form_wrapper .comment-respond {
    margin-top: 0;
}

.woocommerce-Reviews #review_form_wrapper .comment-reply-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Label "Your Rating" */
.woocommerce-Reviews #review_form_wrapper .comment-form-rating label {
    display: inline-block;
    font-weight: 500;
    margin-bottom: 10px;
    vertical-align: middle;
}

/* Sao trong form */
.woocommerce-Reviews #review_form_wrapper .stars {
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
}

.woocommerce-Reviews #review_form_wrapper .stars a {
    color: #f5c136;
}

/* Input + textarea */
.woocommerce-Reviews #review_form_wrapper .comment-form p {
    margin-bottom: 20px;
}

.woocommerce-Reviews #review_form_wrapper .comment-form input[type="text"],
.woocommerce-Reviews #review_form_wrapper .comment-form input[type="email"],
.woocommerce-Reviews #review_form_wrapper .comment-form textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 2px;
}

/* Textarea review cao hơn một chút */
.woocommerce-Reviews #review_form_wrapper .comment-form textarea {
    min-height: 160px;
    resize: vertical;
}

/* Nút submit */
.woocommerce-Reviews #review_form_wrapper #review_form #submit {
    width: 170px;
    height: 46px;
    border: none;
    border-radius: 3px;
    background: #fe4c50;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 10px;
}

.woocommerce-Reviews #review_form_wrapper #review_form #submit:hover {
    background: #FE7C7F;
}

/* Ghi chú "Email của bạn sẽ không..." */
.woocommerce-Reviews #review_form_wrapper .comment-notes {
    font-size: 13px;
    color: #9ca3af;
}

/* RESPONSIVE: Reviews – mobile xếp dọc */
@media (max-width: 767px) {
    .woocommerce-Reviews {
        flex-direction: column;
        gap: 40px;
    }

    .woocommerce-Reviews #comments,
    .woocommerce-Reviews #review_form_wrapper {
        flex: 0 0 100%;
    }
}

/* =========================
   SINGLE PRODUCT – RESPONSIVE
   ========================= */

/* Tablet & mobile: ảnh lớn co theo màn hình, thumbnail chuyển thành hàng ngang */
@media (max-width: 991px) {

    .single_product_container {
        margin-top: 20px;
        padding-bottom: 40px;
    }

    .image_col {
        padding-right: 15px;
        margin-bottom: 12px;
    }

    .single_product_image {
        height: calc((100vw - 30px) / 1.25);
    }

    .single_product_thumbnails {
        height: auto;
        margin-top: 8px;
    }

    .single_product_thumbnails ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0;
        padding: 0;
    }

    .single_product_thumbnails ul li {
        flex: 0 0 80px;
        max-width: 80px;
        margin-right: 8px;
        margin-bottom: 0;
        aspect-ratio: 1 / 1;
    }

    .single_product_thumbnails ul li:last-child {
        margin-right: 0;
    }

    .product_details_title h4 {
        font-size: 24px;
    }
}

/* MOBILE: layout kiểu Yuumy – trên là - 1 +, dưới là nút full width */
@media (max-width: 575px) {

    /* bọc ngoài quantity + nút + tim */
    .product_actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 16px;
    }

    /* form add to cart: xếp DỌC */
    .product_details .cart {
        display: flex;
        flex-direction: column;   /* hàng 1: quantity, hàng 2: button */
        align-items: stretch;
        gap: 10px;
        width: 100%;
        margin-top: 0;
    }

    /* ô - 1 + chỉ rộng vừa nội dung, nằm trên 1 hàng */
    .product_details .cart .quantity {
        margin: 0;
        align-self: flex-start;
        width: auto;
        height: auto;
    }

    .fadoda-qty-wrap {
        height: 42px;
    }
    .fadoda-qty-wrap .qty {
        height: 42px;
        line-height: 42px;
    }
    .fadoda-qty-btn {
        height: 42px;
    }

    /* nút THÊM VÀO GIỎ full chiều ngang */
    .product_details .cart .single_add_to_cart_button {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    /* icon tim nằm dưới, lệch về bên phải */
    .product_details .product_favorite {
        width: 42px;
        height: 42px;
        align-self: flex-end;
        margin-top: 4px;
    }
}




/*********************************
7. Tabs
*********************************/

.tabs_section_container {
	width: 100%;
	padding-bottom: 80px;
	border-bottom: solid 1px #ebebeb;
}
.tabs_container {
	margin-top: 66px;
	margin-bottom: 66px;
}
.tab {
	margin-right: 50px;
	cursor: pointer;
}
.tab:last-child {
	margin-right: 0px;
}
.tab span {
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	font-weight: 500;
	color: #1e1e27;
}
.tab:hover span {
	color: #b5aec4;
}
.tab.active span {
	color: #fe4c50;
	border-bottom: solid 1px #fe4c50;
}
.tab_container {
	width: 100%;
	display: none;
}
.tab_container.active {
	display: block;
}

/*********************************
7.1 Description
*********************************/

.tab_title {
	margin-bottom: 98px;
}
.tab_title h4 {
	display: inline-block;
	color: #fe4c50;
	border-bottom: solid 1px #fe4c50;
}
.tab_text_block {
	margin-bottom: 133px;
}
.tab_text_block p {
	font-weight: 400;
	margin-top: 10px;
}
.tab_image {
	width: 100%;
	margin-bottom: 131px;
}
.tab_image img {
	width: 100%;
}
.desc_last {
	margin-bottom: 0px;
}
/*********************************
7.3 Reviews – WooCommerce
*********************************/

/* Wrapper 2 cột: bên trái danh sách review, bên phải form */
.woocommerce-Reviews {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    margin-top: 40px;
}

/* Cột trái: danh sách review */
.woocommerce-Reviews #comments {
    flex: 0 0 50%;
}

/* Cột phải: form Add Review */
.woocommerce-Reviews #review_form_wrapper {
    flex: 0 0 50%;
}

/* Tiêu đề "Reviews (0)" / "Đánh giá (0)" giống ColoShop */
.woocommerce-Reviews-title,
.woocommerce-Reviews .reviews_title h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #fe4c50;
    border-bottom: 2px solid #fe4c50;
    display: inline-block;
    padding-bottom: 6px;
}

/* Một item review */
.woocommerce-Reviews .commentlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-Reviews .commentlist li {
    list-style: none;
    margin-bottom: 37px;
}

.woocommerce-Reviews .comment_container {
    display: flex;
    align-items: flex-start;
    border: none;
    padding: 0;
    background: transparent;
}

/* Avatar tròn xám giống demo */
.woocommerce-Reviews .comment_container img.avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 25px;
}

/* Nội dung review */
.woocommerce-Reviews .comment-text {
    padding: 0;
    border: none;
}

.woocommerce-Reviews .comment-text .meta {
    margin-bottom: 8px;
}

.woocommerce-Reviews .woocommerce-review__author {
    font-size: 16px;
    font-weight: 500;
    margin-right: 8px;
}

.woocommerce-Reviews .woocommerce-review__published-date {
    color: #fe4c50;
    font-size: 13px;
}

.woocommerce-Reviews .woocommerce-review__dash {
    display: none;
}

/* Sao trong list review */
.woocommerce-Reviews .star-rating {
    margin-top: 5px;
    font-size: 12px;
    color: #f5c136;
}

/* Nội dung text */
.woocommerce-Reviews .description p {
    margin-top: 10px;
    font-weight: 400;
    color: #51545f;
}

/* Khi chưa có review */
.woocommerce-Reviews .woocommerce-noreviews {
    margin-top: 10px;
    color: #9ca3af;
}

/*********************************
8. Add Review – Form bên phải
*********************************/

.woocommerce-Reviews #review_form_wrapper .comment-respond {
    margin-top: 0;
}

.woocommerce-Reviews #review_form_wrapper .comment-reply-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Label "Your Rating" */
.woocommerce-Reviews #review_form_wrapper .comment-form-rating label {
    display: inline-block;
    font-weight: 500;
    margin-bottom: 10px;
    vertical-align: middle;
}

/* Sao trong form */
.woocommerce-Reviews #review_form_wrapper .stars {
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
}

.woocommerce-Reviews #review_form_wrapper .stars a {
    color: #f5c136;
}

/* Input + textarea */
.woocommerce-Reviews #review_form_wrapper .comment-form p {
    margin-bottom: 20px;
}

.woocommerce-Reviews #review_form_wrapper .comment-form input[type="text"],
.woocommerce-Reviews #review_form_wrapper .comment-form input[type="email"],
.woocommerce-Reviews #review_form_wrapper .comment-form textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 2px;
}

/* Textarea review cao hơn một chút */
.woocommerce-Reviews #review_form_wrapper .comment-form textarea {
    min-height: 160px;
    resize: vertical;
}

/* Nút submit giống demo (màu đỏ) */
.woocommerce-Reviews #review_form_wrapper #review_form #submit {
    width: 170px;
    height: 46px;
    border: none;
    border-radius: 3px;
    background: #fe4c50;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 10px;
}

.woocommerce-Reviews #review_form_wrapper #review_form #submit:hover {
    background: #FE7C7F;
}

/* Ghi chú "Email của bạn sẽ không..." */
.woocommerce-Reviews #review_form_wrapper .comment-notes {
    font-size: 13px;
    color: #9ca3af;
}

/* RESPONSIVE: mobile xếp dọc */
@media (max-width: 767px) {
    .woocommerce-Reviews {
        flex-direction: column;
        gap: 40px;
    }

    .woocommerce-Reviews #comments,
    .woocommerce-Reviews #review_form_wrapper {
        flex: 0 0 100%;
    }
}

/* =========================
   SINGLE PRODUCT – RESPONSIVE
   ========================= */

/* Tablet & mobile: ảnh lớn co theo màn hình,
   thumbnail chuyển thành hàng ngang */
@media (max-width: 991px) {

    .single_product_container {
        margin-top: 20px;
        padding-bottom: 40px;
    }

    /* cột ảnh bên trái bớt padding */
    .image_col {
        padding-right: 15px;
        margin-bottom: 12px;
    }

    /* Ảnh lớn: cao theo tỉ lệ màn hình, không fix 527px nữa */
    .single_product_image {
        height: calc((100vw - 30px) / 1.25); /* chỉnh tỉ lệ cho đẹp */
    }

    /* THUMBNAIL: nằm thành 1 hàng ngang dưới ảnh */
    .single_product_thumbnails {
        height: auto;
        margin-top: 8px;
    }

    .single_product_thumbnails ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0;
        padding: 0;
    }

    .single_product_thumbnails ul li {
        flex: 0 0 80px;
        max-width: 80px;
        margin-right: 8px;
        margin-bottom: 0;
        aspect-ratio: 1 / 1;   /* vẫn giữ ô vuông */
    }

    .single_product_thumbnails ul li:last-child {
        margin-right: 0;
    }

    /* tên sản phẩm nhỏ hơn 1 chút trên màn nhỏ */
    .product_details_title h2 {
        font-size: 24px;
    }
}

/* Mobile nhỏ: thu gọn hơn nữa */
@media (max-width: 575px) {

    /* Ảnh lớn thấp hơn để đỡ chiếm chỗ */
    .single_product_image {
        height: calc((100vw - 30px) / 1.35);
    }

    /* thumbnail nhỏ lại một chút */
    .single_product_thumbnails ul li {
        flex: 0 0 68px;
        max-width: 68px;
        margin-right: 6px;
    }

    .product_details {
        margin-top: 12px;
    }

    /* tiêu đề + giá nhỏ hơn cho đỡ dài */
    .product_details_title h2 {
        font-size: 20px;
        line-height: 1.35;
    }

    .product_price {
        font-size: 22px;
        line-height: 1.4;
    }

    .original_price {
        font-size: 13px;
    }

    /* card số lượng + nút mua xếp dọc, nút full width */
    .product_details .cart {
        flex-direction: column;
        align-items: stretch;
    }

    .product_details .cart .single_add_to_cart_button {
        width: 100%;
        justify-content: center;
    }

    .product_details .product_favorite {
        width: 44px;
        height: 44px;
    }
}
/* ===============================
   FORM CONTACT – PETLA / CF7
================================ */

/* Gói form CF7 trong khối giống form cũ */
.petla-contact-form .wpcf7-form {
    margin: 0;
}

/* 3 ô đầu (name / email / phone) nằm cùng hàng trên desktop */
.petla-contact-3inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.petla-contact-3inputs .form_input {
    flex: 1 1 0;
}

/* Textarea full width */
.petla-contact-message {
    margin-top: 15px;
}

/* Nút gửi */
.petla-contact-submit {
    margin-top: 20px;
}

/* Input CF7 */
.petla-contact-form .wpcf7-form input[type="text"],
.petla-contact-form .wpcf7-form input[type="email"],
.petla-contact-form .wpcf7-form input[type="tel"],
.petla-contact-form .wpcf7-form textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500; /* IN ĐẬM NỘI DUNG NHẬP */
    border-radius: 4px;
}

/*********************************
5. Google Map
*********************************/

.contact_container {
	margin-top: 150px;
	padding-bottom: 10px;
	border-bottom: solid 1px #ebebeb;
}
#google_map {
	width: 100%;
	height: 100%;
	margin-bottom: 10px;
}
.map_container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-shadow: 0px 27px 59px rgba(0, 0, 0, 0.15);
}
#map {
	width: 100%;
	height: calc(100% + 30px);
}

/*********************************
6. Contact Us
*********************************/

.contact_contents {
	padding-right: 30px;
}

/* TIÊU ĐỀ – IN ĐẬM */
.contact_contents h1,
.follow_us_contents h1,
.get_in_touch_contents h1 {
	font-size:28px;
	font-weight: 700; /* IN ĐẬM */
}

/* NỘI DUNG – IN ĐẬM VỪA */
.contact_contents p,
.get_in_touch_contents p {
	font-size: 15px;
	font-weight: 500; /* ĐẬM HƠN MẶC ĐỊNH */
	margin-bottom: 0px;
}

/* Nhãn thông tin (Địa chỉ / Hotline / Email / Website) */
.contact_contents strong {
	font-weight: 600;
	color: #1e1e27;
}

.contact_contents div {
	margin-top: 22px;
}
.contact_contents div:first-of-type {
	margin-top: 39px;
}

/*********************************
7. Follow Us
*********************************/

.follow_us_contents {
	margin-top: 32px;
}
.social {
	margin-top: 20px;
}
.social li {
	margin-right: 12px;
}
.social li:last-child {
	margin-right: 0px;
}
.social li a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: all 300ms ease;
}
.social li a i {
	color: #FFFFFF;
}
.social li:hover a {
	transform: translateY(-5px);
	box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}

/*********************************
8. Contact Form
*********************************/

.form_input {
	display: block;
	width: 100%;
	height: 50px;
	border: solid 1px #e5e5e5;
	padding-left: 20px;
	font-size: 16px;
	font-weight: 500; /* IN ĐẬM TEXT NHẬP */
	margin-bottom: 20px;
}

.input_message {
	width: 100%;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 15px;
}

.form_input:focus {
	border: solid 1px #7f7f7f !important;
	box-shadow: none !important;
}

/* NÚT GỬI – IN ĐẬM */
.message_submit_btn {
	background: #1e1e27;
	color: #FFFFFF;
	text-transform: uppercase;
	width: 165px;
	border: none;
	height: 46px;
	cursor: pointer;
	font-weight: 600; /* IN ĐẬM */
	letter-spacing: 0.5px;
}
.message_submit_btn:hover {
	background: #2b2b34 !important;
}

:focus {
	outline: none !important;
}

/* PLACEHOLDER – IN ĐẬM */
.input_ph::-webkit-input-placeholder {
	font-size: 16px !important;
	font-weight: 500;
	color: #b9b4c7 !important;
}
.input_ph:-moz-placeholder {
	font-size: 16px !important;
	font-weight: 500;
	color: #b9b4c7 !important;
}
.input_ph::-moz-placeholder {
	font-size: 16px !important;
	font-weight: 500;
	color: #b9b4c7 !important;
}
.input_ph:-ms-input-placeholder {
	font-size: 16px !important;
	font-weight: 500;
	color: #b9b4c7 !important;
}
.input_ph::placeholder {
	font-size: 16px !important;
	font-weight: 500;
	color: #b9b4c7 !important;
}

textarea {
	border: solid 1px #e5e5e5;
	padding-left: 20px;
	padding-top: 15px;
	font-weight: 500;
}
textarea:hover {
	border-color: #7f7f7f !important;
}

/*********************************
Breadcrumbs
*********************************/

.breadcrumbs {
	width: 100%;
	height: 60px;
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 10px;
}
.breadcrumbs ul li {
	display: inline-block;
	margin-right: 17px;
}
.breadcrumbs ul li.active a {
	color: #b9b4c7;
	font-weight: 500;
}
.breadcrumbs ul li i {
	margin-right: 17px;
}
.breadcrumbs ul li a {
	color: #51545f;
	font-weight: 500;
}
/* ==========================
   BLOG PAGE PETLA
   ========================== */

.blog-page {
    padding: 40px 0 70px;
    background: #fafafa;
}

/* tiêu đề trang */
.blog-page-header {
    margin-bottom: 24px;
}

.blog-page-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 6px;
}

.blog-page-sub {
    font-size: 15px;
    color: #6b7280;
}

/* CARD BÀI VIẾT */
.blog-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-list > div[class*="col-"] {
    margin-bottom: 32px;
}

.blog-card {
    height: 100%;
}



.blog-card-thumb-wrap { 
    position: relative;
    display: block;
    overflow: hidden;
}

/* khung ảnh tỉ lệ 16:10 */
.blog-card-thumb {
    width: 100%;
    padding-top: 62.5%; /* 16:10 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform .4s ease;
}

/* nhãn danh mục */
.blog-card-category {
    position: absolute;
    left: 18px;
    bottom: 18px;
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 4px 12px;
    border-radius: 999px;
}

.blog-card-body {
    padding: 18px 20px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* meta (ngày đăng) */
.blog-card-meta {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.blog-card-meta i {
    margin-right: 4px;
}

/* tiêu đề bài */
.blog-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.4;
}

.blog-card-title a {
    color: #111827;
}

.blog-card-title a:hover {
    color: #7f81c0;
}

/* trích đoạn */
.blog-card-excerpt {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 12px;
}

/* nút đọc tiếp */
.blog-card-readmore {
    margin-top: auto;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: #040404;
}

.blog-card-readmore i {
    margin-left: 6px;
    font-size: 12px;
}

.blog-card-readmore:hover {
    color: #f97316;
}

/* hover effect */
.blog-card:hover .blog-card-thumb {
    transform: scale(1.06);
}

/* SIDEBAR */
.blog-sidebar {
    margin-top: 35px;
}

@media (min-width: 992px) {
    .blog-sidebar {
        margin-top: 60px;
        padding-left: 24px;
    }
}

.blog-sidebar-widget {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    margin-bottom: 20px;
}

.blog-sidebar-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* categories */
.blog-sidebar-cats {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-sidebar-cats li {
    margin-bottom: 6px;
}

.blog-sidebar-cats a {
    font-size: 14px;
    color: #4b5563;
}

.blog-sidebar-cats a:hover {
    color: #fe4c50;
}

/* recent posts */
.blog-sidebar-recent {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-sidebar-recent li {
    margin-bottom: 8px;
    font-size: 14px;
}

.blog-sidebar-recent a {
    color: #111827;
}

.blog-sidebar-recent a:hover {
    color: #fe4c50;
}

.blog-sidebar-recent-date {
    display: block;
    font-size: 12px;
    color: #9ca3af;
}

.blog-search-box {
    margin-bottom: 28px;
}

.blog-search-form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

.blog-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 14px;
    font-size: 14px;
    background: transparent;
}

.blog-search-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #111827;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.blog-search-btn:hover {
    background: #fe4c50;
}


/* PAGINATION */
.blog-pagination {
    margin-top: 12px;
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-block;
    margin: 0 3px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    color: #4b5563;
    background: #e5e7eb;
}

.blog-pagination .page-numbers.current {
    background: #fe4c50;
    color: #fff;
}

.blog-pagination .page-numbers:hover {
    background: #f97316;
    color: #fff;
}

/* mobile */
@media (max-width: 767px) {
    .blog-page {
        padding-top: 24px;
    }
    .blog-page-title {
        font-size: 24px;
    }
}


/* single post blog */
/* ==========================
   SINGLE BLOG PETLA
   ========================== */

.single-blog-page {
    padding: 80px 40px 70px;
    margin-top: 80px;
    background: #fafafa;
}

/* HERO CARD */
.single-blog-hero {
    background: #f9f9f9;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
    margin-bottom: 24px;
}

.single-blog-thumb {
    position: relative;
    max-height: 440px;
    overflow: hidden;
}

.single-blog-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .4s ease;
}

.single-blog-hero:hover .single-blog-thumb img {
    transform: scale(1.03);
}

/* label trên ảnh */
.single-blog-label {
    position: absolute;
    left: 26px;
    bottom: 24px;
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    padding: 6px 16px;
    border-radius: 999px;
}

/* heading dưới ảnh */
.single-blog-heading {
    padding: 22px 26px 24px;
}

.single-blog-meta {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.single-blog-meta i {
    margin-right: 6px;
}

.single-blog-title {
    font-size: 30px;
    line-height: 1.35;
    font-weight: 700;
    color: #111827;

    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}


/* NỘI DUNG BÀI VIẾT */
.single-blog-content {
    background: #ffffff00;
    border-radius: 24px;
    padding: 26px 28px 28px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    margin-bottom: 22px;
}

.single-blog-content p {
    margin-bottom: 1.1em;
}

/* FOOTER: TAGS + SHARE */
.single-blog-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 16px;
    margin-top: 8px;
    padding: 8px 2px 0;
    border-top: 1px solid #e5e7eb;
}

.single-blog-tags-title {
    font-weight: 600;
    margin-right: 4px;
}

.single-blog-share {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #6b7280;
}

.single-blog-share a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 14px;
}

.single-blog-share a:hover {
    background: #fe4c50;
}

/* BÀI VIẾT LIÊN QUAN */
.single-blog-related {
    margin-top: 38px;
}

.single-blog-related-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 18px;
}

/* mobile */
@media (max-width: 767px) {
    .single-blog-page {
        padding-top: 24px;
    }

    .single-blog-title {
        font-size: 24px;
    }

    .single-blog-heading {
        padding: 18px 18px 20px;
    }

    .single-blog-content {
        padding: 20px 18px 22px;
        border-radius: 18px;
    }
}


/* Khung ảnh sản phẩm đặt tương đối để canh nút */
.product_image {
    position: relative;
}

/* Nút Add to cart tròn nằm giữa cạnh dưới hình */
.fadoda-add-to-cart {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 20px);
    opacity: 0;
    transition: all .3s ease;
    z-index: 5;
}

/* Hover card => hiện nút */
.product-item:hover .fadoda-add-to-cart {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Style nút WooCommerce thành hình tròn, ẩn text */
.fadoda-add-to-cart .button,
.fadoda-add-to-cart .add_to_cart_button {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    border: none !important;
    background: #111 !important;
    color: #fff !important;

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

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

    font-size: 0 !important;      /* Ẩn chữ "Thêm vào giỏ hàng" */
    line-height: 1 !important;
    text-indent: 0 !important;
}

/* Icon giỏ hàng bên trong nút – Font Awesome 5 */
.fadoda-add-to-cart .button::before,
.fadoda-add-to-cart .add_to_cart_button::before {
    content: "\f07a";                           /* shopping-cart */
    font-family: "Font Awesome 5 Free";         /* FA5 */
    font-weight: 900;                           /* solid */
    font-size: 22px;
    display: inline-block;
}

/* Sau khi thêm vào giỏ – đổi icon thành tick (tuỳ thích) */
.fadoda-add-to-cart .button.added::before,
.fadoda-add-to-cart .add_to_cart_button.added::before {
    content: "\f00c";                           /* check */
}

/* Ẩn mọi chữ bên trong nút (phòng khi theme chèn <span>) */
.fadoda-add-to-cart .button span,
.fadoda-add-to-cart .add_to_cart_button span {
    display: none !important;
}

/* Ẩn link "Xem giỏ hàng" mặc định */
.added_to_cart.wc-forward {
    display: none !important;
}


/* ---------- HEADER ICON USER + CART ---------- */

.navbar_user {
    display: flex;
    align-items: center;
    gap: 18px; /* khoảng cách giữa 2 icon */
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar_user_item a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff0f2;  /* đen đậm */
    color: #ffffff;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease;
}

.navbar_user_item a i {
    font-size: 16px;
}

.navbar_user_item a:hover {
    background: #ece7e7;
    transform: translateY(-1px);
    color: #fff;
}

/* Huy hiệu số lượng giỏ hàng */
.checkout_items {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    background: #fe4c50;
    color: #ffffff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

/* Đừng cho badge đẩy icon lệch */
.checkout_items:empty {
    display: none;     /* nếu giỏ = 0 thì ẩn badge luôn */
}


/* ================================
   FIX HEADER ĐÈ CART
================================ */
body.woocommerce-cart {
    padding-top: 160px; /* chỉnh 110–140px nếu header cao/thấp */
}

/* ================================
   CART PAGE WRAPPER
================================ */
.petla-cart-page {
    padding-bottom: 60px;
}

/* ================================
   TIÊU ĐỀ TRANG CART
================================ */
.petla-cart-header {
    text-align: center;
    margin-bottom: 30px;
}

.petla-cart-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}

.petla-cart-sub {
    color: #777;
    font-size: 14px;
}

/* ================================
   TABLE CART
================================ */
.woocommerce-cart table.shop_table {
    border: 1px solid #eee;
    border-radius: 6px;
    border-collapse: collapse;
    width: 100%;
}

/* Header bảng */
.woocommerce-cart table.shop_table thead th {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 12px;
    border-bottom: 2px solid #eee;
    background: #fafafa;
}

/* Body */
.woocommerce-cart table.shop_table td {
    padding: 18px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

/* ================================
   CỘT SẢN PHẨM
================================ */
.woocommerce-cart td.product-name a {
    font-weight: 600;
    color: #111;
    line-height: 1.4;
}

.woocommerce-cart td.product-thumbnail img {
    width: 70px;
    height: auto;
    border-radius: 6px;
}

/* ================================
   GIÁ – TẠM TÍNH (MÀU ĐỎ)
================================ */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
    color: #ff2d2d;
    font-weight: 600;
}

/* ================================
   INPUT SỐ LƯỢNG
================================ */
.woocommerce-cart .quantity input.qty {
    width: 60px;
    height: 36px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* ================================
   NÚT XÓA SẢN PHẨM
================================ */
.woocommerce-cart a.remove {
    color: #ff2d2d !important;
    font-size: 20px;
}

/* ================================
   KHU VỰC COUPON + NÚT
================================ */
.woocommerce-cart .coupon {
    display: flex;
    gap: 10px;
}

.woocommerce-cart .coupon input {
    height: 38px;
    padding: 0 12px;
}

.woocommerce-cart button[name="apply_coupon"] {
    background: #eee;
    color: #111;
    border-radius: 4px;
}

.woocommerce-cart button[name="update_cart"] {
    background: #ddd;
    color: #111;
    border-radius: 4px;
}

/* ================================
   CART TOTALS (BÊN PHẢI)
================================ */
.woocommerce-cart .cart-collaterals {
    margin-top: 0;
}

.woocommerce-cart .cart_totals {
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 6px;
}

.woocommerce-cart .cart_totals h2 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Tổng tiền */
.woocommerce-cart .cart_totals .order-total td {
    color: #ff2d2d;
    font-weight: 700;
    font-size: 16px;
}

/* ================================
   NÚT THANH TOÁN
================================ */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: #7a4fb3; /* tím PETLA */
    color: #fff;
    font-size: 16px;
    padding: 14px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: #623a99;
}

/* ================================
   RESPONSIVE MOBILE
================================ */
@media (max-width: 768px) {
    body.woocommerce-cart {
        padding-top: 90px;
    }

    .woocommerce-cart table.shop_table thead {
        display: none;
    }

    .woocommerce-cart table.shop_table td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    .woocommerce-cart table.shop_table td::before {
        content: attr(data-title);
        position: absolute;
        left: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }
}

/* ==========================
   PETLA CHECKOUT – FIX COL-1/COL-2 BỊ HẸP
   ========================== */

/* Container trang thanh toán cho gọn */
body.woocommerce-checkout .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- CỘT TRÁI & CỘT PHẢI (DESKTOP) --- */
@media (min-width: 992px) {

    /* Form checkout = 2 cột: trái (thông tin), phải (đơn hàng) */
    body.woocommerce-checkout .woocommerce form.checkout {
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }

    /* Cột trái: thông tin thanh toán */
    body.woocommerce-checkout .woocommerce .col2-set#customer_details {
        flex: 0 0 55%;
        max-width: 55%;
    }

    /* Cột phải: đơn hàng */
    body.woocommerce-checkout .woocommerce #order_review,
    body.woocommerce-checkout .woocommerce .woocommerce-checkout-review-order {
        flex: 0 0 45%;
        max-width: 45%;
    }

    /* Ẩn heading cũ nếu có */
    body.woocommerce-checkout .woocommerce h3#order_review_heading {
        display: none;
    }
}

/* Mobile quay về 1 cột như Woo mặc định */
@media (max-width: 991px) {
    body.woocommerce-checkout .woocommerce form.checkout {
        display: block;
    }

    body.woocommerce-checkout .woocommerce .col2-set#customer_details,
    body.woocommerce-checkout .woocommerce #order_review,
    body.woocommerce-checkout .woocommerce .woocommerce-checkout-review-order {
        width: 100%;
        max-width: 100%;
    }
}

/* --- CHÍNH COL-1 / COL-2 BÊN TRÁI CHO FULL WIDTH --- */
/* Đây là chỗ quan trọng để đè bootstrap .col-1, .col-2 */

body.woocommerce-checkout .woocommerce #customer_details .col-1,
body.woocommerce-checkout .woocommerce #customer_details .col-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Wrapper các field billing full width */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Mỗi form-row chiếm hết bề ngang */
body.woocommerce-checkout .woocommerce form.checkout .form-row {
    width: 100%;
    float: none;
    clear: both;
    display: block;
    box-sizing: border-box;
}

/* Label chiếm full width cho dễ đọc */
body.woocommerce-checkout .woocommerce form.checkout .form-row label {
    width: 100%;
    display: block;
    font-weight: 500;
}

/* Input / select / textarea full width */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="text"],
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="tel"],
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="email"],
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="password"],
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="number"],
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper select,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Đẩy nội dung xuống khỏi header fixed một chút */
body.woocommerce-checkout {
    padding-top: 150px;
}
/* ===============================
   PETLA CHECKOUT – THU NHỎ & CĂN GIỮA
================================= */

/* Thu nhỏ toàn bộ khối checkout + căn giữa */
body.woocommerce-checkout .petla-checkout-page .container {
    max-width: 1040px !important;  /* thử 1000–1100 tùy mắt bạn */
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Desktop: chia 2 cột cân hơn */
@media (min-width: 992px) {

    /* Form checkout là flex 2 cột */
    body.woocommerce-checkout .woocommerce form.checkout {
        display: flex !important;
        align-items: flex-start !important;
        gap: 32px !important;        /* khoảng cách giữa 2 cột */
        flex-wrap: nowrap !important;
    }

    /* Cột trái: thông tin khách (50%) */
    body.woocommerce-checkout .woocommerce #customer_details {
        width: 50% !important;
        max-width: 50% !important;
        float: none !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    /* Cột phải: đơn hàng (50%) */
    body.woocommerce-checkout .woocommerce #order_review,
    body.woocommerce-checkout .woocommerce .woocommerce-checkout-review-order {
        width: 50% !important;
        max-width: 50% !important;
        margin-top: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }
}

/* Mobile giữ 1 cột như cũ */
@media (max-width: 991px) {
    body.woocommerce-checkout .woocommerce form.checkout {
        display: block !important;
    }

    body.woocommerce-checkout .woocommerce #customer_details,
    body.woocommerce-checkout .woocommerce #order_review,
    body.woocommerce-checkout .woocommerce .woocommerce-checkout-review-order {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
    }
}

/* trang cam ơn */
/* ===============================
   PETLA – TRANG CẢM ƠN / ORDER RECEIVED
   =============================== */

/* Giới hạn chiều rộng + căn giữa toàn bộ phần WooCommerce */
body.woocommerce-order-received .woocommerce {
    max-width: 1040px;
    margin: 40px auto 80px;
    padding: 0 15px;
}

/* Tiêu đề "THÔNG TIN THANH TOÁN" cho gọn lại */
body.woocommerce-order-received h1,
body.woocommerce-order-received .page-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 10px;
}

/* Đoạn text thông báo ngay dưới tiêu đề */
body.woocommerce-order-received .woocommerce-order > p {
    text-align: center;
    margin-bottom: 24px;
}

/* ---------------- ORDER OVERVIEW (mã đơn, ngày, tổng, phương thức) ---------------- */

body.woocommerce-order-received ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0 32px;
    padding: 18px 20px;
    border-radius: 12px;
    background: #f9fafb;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    list-style: none;
}

body.woocommerce-order-received ul.order_details li {
    flex: 1 1 160px;
    border-right: 1px solid #e5e7eb;
    padding-right: 16px;
    margin: 0;
}

body.woocommerce-order-received ul.order_details li:last-child {
    border-right: none;
}

/* ---------------- BẢNG CHI TIẾT ĐƠN HÀNG ---------------- */

body.woocommerce-order-received .woocommerce-order-details__title {
    font-size: 22px;
    margin: 10px 0 14px;
}

body.woocommerce-order-received .woocommerce-table--order-details {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    border: none;
}

body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce-table--order-details td {
    padding: 10px 16px;
}

body.woocommerce-order-received .woocommerce-table--order-details thead th {
    background: #f3f4f6;
}

body.woocommerce-order-received .woocommerce-table--order-details tfoot {
    background: #f9fafb;
    font-weight: 600;
}

/* ---------------- 2 CỘT ĐỊA CHỈ ---------------- */

body.woocommerce-order-received .woocommerce-columns--addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 32px;
}

body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column {
    flex: 1 1 260px;
}

body.woocommerce-order-received .woocommerce-column__title {
    font-size: 18px;
    margin-bottom: 8px;
}

body.woocommerce-order-received .woocommerce-column address {
    font-style: normal;
    line-height: 1.5;
}

/* Mobile: cho mọi thứ xếp 1 cột cho dễ đọc */
@media (max-width: 767px) {
    body.woocommerce-order-received ul.order_details {
        flex-direction: column;
        gap: 10px;
    }

    body.woocommerce-order-received ul.order_details li {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 8px;
    }

    body.woocommerce-order-received ul.order_details li:last-child {
        border-bottom: none;
    }

    body.woocommerce-order-received .woocommerce-columns--addresses {
        flex-direction: column;
    }
}
/* ===============================
   PETLA – ĐỊA CHỈ THANH TOÁN / GIAO HÀNG – TRANG CẢM ƠN
   =============================== */

/* Reset layout mặc định cho khối địa chỉ */
body.woocommerce-order-received .woocommerce-columns--addresses,
body.woocommerce-order-received .woocommerce-customer-details .col2-set.addresses {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
    margin-bottom: 24px;
    width: 100%;
}

/* Bỏ clearfix ::before / ::after của Woo */
body.woocommerce-order-received .woocommerce-columns--addresses::before,
body.woocommerce-order-received .woocommerce-columns--addresses::after {
    content: none !important;
}

/* Mỗi cột = 1 card, không còn float / width 50% của Woo */
body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column {
    float: none !important;
    width: auto !important;
    max-width: 500px;
    margin: 0 !important;

    background: #ffffff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
}

/* Tiêu đề trong mỗi card */
body.woocommerce-order-received .woocommerce-column__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
}

/* Phần địa chỉ bên trong (bỏ khung mặc định) */
body.woocommerce-order-received .woocommerce-customer-details address {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 6px !important;

    font-style: normal;
    line-height: 1.6;
}

/* Dòng phone / email */
body.woocommerce-order-received .woocommerce-column p {
    margin: 0;
    line-height: 1.6;
}

/* Mobile: 2 card xếp thành 1 cột full width */
@media (max-width: 767px) {
    body.woocommerce-order-received .woocommerce-columns--addresses {
        flex-direction: column;
        gap: 16px;
    }

    body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column {
        max-width: none;
        width: 100% !important;
    }
}
#totop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9995;
  display: block; }
  @media only screen and (max-width: 767px) {
    #totop {
      bottom: 10px;
      right: 10px;
      width: 40px;
      height: 40px; } }
  #totop img {
    width: 100%;
    display: block;
 }