/*------------------------------------------
Teamplate: 
Author: Thanh Nguyen
Create_at: 04/05/2019
--------------------------------------------*/
.z-index-on {
    position: relative;
    z-index: 2;
}
/* Khung nội dung rộng theo thiết kế (1185px) trên màn hình lớn */
@media (min-width: 1280px){
    .container{
        max-width: 1215px;
    }
}
/* Ảnh giữ chỗ (ctitsea_placeholder_image) cho những vị trí chưa có ảnh thật */
.img-placeholder{
    display: block;
    height: auto;
    max-width: 100%;
}
.img-placeholder rect{
    fill: #e9e9e9;
}
.img-placeholder text{
    fill: #b0b0b0;
    font-weight: 500;
}
.header-area{
    background-color: #fff;
    z-index: 5;
}
.header-top-inner{
    align-items: center;
    border-bottom: 1px #e5e5e5 solid;
    display: flex;
    font-size: .8125rem;
    justify-content: flex-end;
    padding: .7rem 0;
}
.contact-address, .widget ul,
.bg-opacity {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
}
.widget ul, .single-shadow {
    box-shadow: 0px 3px 3px #c1c1c1;
}
.top-info{
    margin: 0;
}
.top-info li{
	display: inline-block;
	margin-right: 2rem;
}
.top-info li:last-child{
	margin-right: 0;
}
.top-info li a {
	color: #252525;
}
.top-info li a:hover {
	color: var(--ctitsea-primary);
}
.top-info li i{
    margin-right: .25rem;
}
.header-contact-text{
    display: inline;
}
.header-contact-text span{
    margin-right: .25rem;
}
.header-middle-area{
    background-color: #fff;
    padding: 1.9rem 0;
}
.logo-area img{
	max-height: 3.5rem;
	width: auto;
}
.site-logo{
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 2.5rem;
	font-weight: bold;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.site-logo a{
    color: #252525;
}
@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
.header-sticky.is-sticky {
    -webkit-animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
    background: rgba(255, 255, 255, 0.95) none repeat scroll 0 0;
    -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
    left: 0;
    margin: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.header-middle-area.is-sticky{
    padding: .6rem 0;
}
/* Desktop: menu nằm cùng hàng với logo. Chiều cao hàng do padding của link menu quyết định,
   nhờ vậy menu con luôn mở sát mép dưới header (kể cả khi header thu gọn lúc dính trên cùng) */
@media (min-width: 992px){
    .header-middle-area,
    .header-middle-area.is-sticky{
        padding: 0;
    }
    .logo-area{
        padding: .6rem 0;
    }
}

.main-menu-area{
    text-align: center;
}
.main-menu-area ul > li {
    display: inline-block;
    position: relative;
}
.main-menu-area ul > li > a {
    color: #252525;
    display: block;
    padding: 2.75rem 1.1rem;
    position: relative;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.header-middle-area.is-sticky .main-navigation > ul > li > a {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}
.main-menu-area ul > li:hover > a {
    color: var(--ctitsea-primary);
}
.main-menu-area ul > li.menu-item-has-children > a:after {
    content: "\eab2";
    font-family: "IcoFont";
    font-size: .75rem;
    margin-left: .5rem;
}
.main-menu-area ul > li:hover .sub-menu{
    visibility: visible;
    opacity: 1;
    -ms-filter: 1;
    top: 100%;
}
.main-menu-area .sub-menu {
    background: #ffffff;
    -webkit-box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
    left: 0;
    position: absolute;
    text-align: left;
    width: 15rem;
    z-index: 99;
    top: 120%;
    visibility: hidden;
    opacity: 0;
    padding: .5rem 1rem;
    -ms-filter: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.main-menu-area .sub-menu > li {
    padding: 0;
    display: block;
}
.main-menu-area .sub-menu > li > a {
    border-bottom: 1px #e1e1e1 dashed;
    font-size: .875rem;
    padding: .5rem 0;
    text-transform: capitalize;
}
.main-menu-area .sub-menu > li:last-child > a{
    border-bottom: 0;
}
.right-blok-box {
    align-items: center;
    justify-content: flex-end;
    margin: 0px 0;
}
.search-wrap,
.shopping-cart-wrap,
.mobile-menu-btn{
    font-size: 1.4rem;
    margin-left: 1.25rem;
}
.trigger-search {
    display: inline-block;
}
.off-canvas-btn{
    cursor: pointer;
}
.shopping-cart-wrap {
    position: relative;
}
.shopping-cart-wrap a{
    align-items: center;
    color: #252525;
    display: flex;
}
.cart-icon{
    color: var(--ctitsea-primary);
    line-height: 1;
    position: relative;
}
.cart-label{
    font-size: .9375rem;
    white-space: nowrap;
}
#cart-total {
    background: var(--ctitsea-primary);
    border-radius: 100%;
    color: #fff;
    font-size: .6875rem;
    font-weight: 500;
    height: 1.25rem;
    line-height: 1.25rem;
    position: absolute;
    right: -.7rem;
    text-align: center;
    top: -.6rem;
    width: 1.25rem;
}
#cart-amount .woocommerce-Price-currencySymbol{
    margin-left: 0;
}
/* Desktop: giỏ hàng là một ô có viền, số lượng nằm ở góc trên bên trái ô */
@media (min-width: 992px){
    .shopping-cart-wrap{
        margin-left: 2.25rem;
    }
    .shopping-cart-wrap a{
        border: 1px #e5e5e5 solid;
        height: 2.8rem;
        padding: 0 1rem 0 .8rem;
    }
    .cart-icon{
        border-right: 1px #e5e5e5 solid;
        font-size: 1.5rem;
        margin-right: .8rem;
        padding-right: .8rem;
        position: static;
    }
    #cart-total {
        height: 1.5rem;
        left: -.75rem;
        line-height: 1.5rem;
        right: auto;
        top: -.75rem;
        width: 1.5rem;
    }
}

.off-canvas-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    z-index: 9999;
}
.open {
    width: 473px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-animation-name: open;
    animation-name: open;
    margin: 0 auto;
    overflow: hidden;
}
.off-canvas-wrapper.open {
    opacity: 1;
    visibility: visible;
}
.off-canvas-wrapper .off-canvas-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.off-canvas-wrapper .off-canvas-inner-content {
    background-color: #fff;
    width: 70%;
    padding: 1.5rem;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(calc(-100% - 50px));
    -ms-transform: translateX(calc(-100% - 50px));
    transform: translateX(calc(-100% - 50px));
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.off-canvas-wrapper.open .off-canvas-inner-content {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.off-canvas-wrapper .btn-close-off-canvas {
    background-color: #ff5151;
    color: #fff;
    top: 0;
    left: 100%;
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 1.5rem;
    text-align: center;
    cursor: pointer;
    position: absolute;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.off-canvas-wrapper .btn-close-off-canvas i {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    display: block;
    line-height: 45px;
}
.off-canvas-wrapper .off-canvas-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: auto;
    height: 100%;
}
.mobile-navigation nav {
    height: 100%;
}
.mobile-menu .has-children, 
.mobile-menu .menu-item-has-children {
    position: relative;
}
.mobile-menu .has-children .menu-expand i, 
.mobile-menu .menu-item-has-children .menu-expand i {
    cursor: pointer;
    position: absolute;
    left: 90%;
    top: 0;
    height: 35px;
    line-height: 35px;
    transform: rotate(45deg);
    text-align: center;
    width: 35px;
    z-index: 10;
}
.mobile-menu li > a,
.off-canvas-contact-widget ul li a {
    border-bottom: 1px #e1e1e1 dashed;
    display: inline-block;
    position: relative;
    padding: .6rem 0;
    text-transform: capitalize;
    width: 100%;
}
.dropdown {
    position: relative;
}
.mobile-menu li ul li a {
    padding: .5rem 1.5rem;
}
/*--------------------------------------------------------
                Style Breadcrumbs Attribute
----------------------------------------------------------*/
.breadcrumb-area{
    padding: 1rem 0;
}
.breadcrumb-area ul{
    list-style: none;
}
.breadcrumb-area ul li{
    display: inline;
}
/*--------------------------------------------------------
					Style Main Search
----------------------------------------------------------*/
.main-search-active {
    background: rgba(0, 0, 0, 0.92) none repeat scroll 0 0;
    width: 100%;
    min-height: 100vh;
    padding: 32px 46px 39px;
    position: fixed;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    visibility: hidden;
    opacity: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 9999;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.main-search-active.inside {
    visibility: visible;
    opacity: 1;
    z-index: 99999;
    /* Lúc mở chỉ chuyển động opacity: khung hiện ngay nên ô nhập nhận được focus */
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.sidebar-search-icon {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    border-radius: 100%;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 20px;
}
.sidebar-search-icon button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    transition: all 0.3s ease 0s;
}
.sidebar-search-input {
    -ms-flex-item-align: center;
    align-self: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
}
.sidebar-search-input form{
    width: 100%;
}
.sidebar-search-input .form-search {
    position: relative;
}
.sidebar-search-input .form-search input {
    background-color: rgba(0, 0, 0, 0);
    border: 1px #e1e1e1 solid;
    border-radius: 3rem;
    color: #fff;
    display: block;
    padding: 1rem 3.5rem 1rem 1.5rem;
    width: 100%;
}
.sidebar-search-input .form-search button {
    background-color: rgba(0, 0, 0, 0);
    border: medium none;
    color: #ffffff;
    cursor: pointer;
    padding: 1rem;
    position: absolute;
    right: .5rem;
    top: .1rem;
    transition: all 0.3s ease 0s;
}
/*----------------------------------------------
				Style Banner Area
------------------------------------------------*/
.full-banner-area{
	clear: both;
	width: 100%;
}
.border-hover a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    vertical-align: top;
}
.border-hover:hover img{
	-webkit-transform: scale(1.2);
	   -moz-transform: scale(1.2);
	    -ms-transform: scale(1.2);
	     -o-transform: scale(1.2);
	        transform: scale(1.2);
}
.border-hover a:before {
    border: 1px solid #f1317b;
    content: "";
    opacity: 0;
    position: absolute;
    transform: scale3d(1.4, 1.4, 1);
    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    z-index: 9;
}
.border-hover a:after {
    border: 1px solid #00AC1F;
    content: "";
    opacity: 0;
    position: absolute;
    transform: scale3d(1.4, 1.4, 1);
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
    z-index: 9;
}
.border-hover a:hover:after {
    bottom: 15px;
    left: 25px;
    opacity: 1;
    right: 15px;
    top: 25px;
    transform: scale3d(1, 1, 1);
}
.border-hover a:hover:before {
    bottom: 25px;
    left: 15px;
    opacity: 1;
    right: 25px;
    top: 15px;
    transform: scale3d(1, 1, 1);
}
.product-price{
	align-items: center;
	display: flex;
	line-height: normal;
	padding: 1rem 0; 
}
.product-price .price-new,
.product-price .price-old{
	display: inline-block;
	width: 50%;
}
.product-price .price-new{
	color: #f00;
	font-weight: 600;
	text-align: left;
}
.product-price .price-old{
	color: #b8b8b8;
	text-align: right;
	text-decoration: line-through;
}
.btn-order{
	background-color: #f1317b;
	border-radius: 2.5rem;
	border: none;
	color: #fff;
	overflow: hidden;
	padding: .6rem 0 .6rem 2.8rem;
	position: relative;
    width: 100%;
}
.btn-order:hover{
	color: #fff;
}
.btn-order i{
	background-color: #00AC1F;
	border-radius: 3rem 0 0 3rem;
    font-size: 1.2rem;
    top: -1px;
    left: 0;
    padding: .65rem 1rem;
    position: absolute;
}
.btn-order > i:after {
    content: "";
    border: 8px solid;
    border-color: transparent transparent transparent #00AC1F;
    position: absolute;
    top: 13px;
    right: -16px;
}

hr {
    border: 0;
    margin: 1.5rem auto;
    max-width: 100%;
    background-position: 50%;
    box-sizing: border-box;
}
/*----------------------------------------------
                    Style Blog 
------------------------------------------------*/
.single-are,
.swapper-area {
    padding: 2rem 0;
}
.description-area{
    margin: 2rem auto;
}
.content-area{
    background-color: #fff;
    border-radius: 12px;
    padding: 1rem;
}
.content-area .wp-block-heading{
    font-size: 125%;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.content-area .wp-block-paragraph {
    margin-bottom: 1rem;
}
.meta-entry{
    margin: 1rem auto;
    margin-top: 0;
}
.meta-entry li{
    color: #666;
    display: inline-block;
    font-size: .95rem;
    margin-right: 1rem;
}
.meta-entry li:last-child{
    margin-right: 0;
}
.tags{
    clear: both;
    padding: 1rem 0;
    position: relative;
    width: 100%;
}
.tags a{
    color: #f1317b;
}
.blog-item{
    background-color: #fff;
    border-radius: 12px;
    clear: both;
    display: flex;
    margin-bottom: 2rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.blog-item .blog-thumbnail{
    height: 180px;
    overflow: hidden;
    position: relative;
    width: 35%;
}
.blog-item .blog-thumbnail img{
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.blog-item .blog-thumbnail:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.blog-item .blog-content h3.blog-title{
    font-size: 100%;
    font-weight: 500;
    margin-bottom: .5rem;
}
/* Danh sách bài viết chia hai cột (trang chuyên mục); từ 991px trở xuống còn một cột.
   Lưới có 6 cột con: thẻ thường chiếm 3, còn ba bài đầu (khối nổi bật bên dưới) chia 4 + 2. */
.blog-grid{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 2.5rem 0;
}
.blog-grid .blog-item{
    grid-column: span 3;
    margin-bottom: 0;
}
/* Ảnh đại diện có tỉ lệ không đều nên cắt cho vừa khung 4:3; khung cao theo thẻ khi phần chữ dài hơn */
.blog-grid .blog-thumbnail{
    aspect-ratio: 4 / 3;
    flex: 0 0 40%;
    height: auto;
}
.blog-grid .blog-thumbnail img{
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.blog-grid .blog-thumbnail:hover img{
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.blog-grid .blog-content{
    flex: 1;
    min-width: 0;
    padding: 1rem;
    width: 65%;
}
/* Tiêu đề và mô tả tối đa ba dòng để các thẻ trong một hàng cao đều nhau */
.blog-grid .blog-content h3.blog-title,
.blog-grid .blog-content p{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
            line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
}
.blog-grid .blog-content h3.blog-title{
    line-height: 1.4;
}
.blog-grid .blog-content p{
    color: #666;
    font-size: .9375rem;
    line-height: 1.6;
}
/* Khối nổi bật: ba bài đầu tiên. Thẻ lớn bên trái cao bằng hai thẻ nhỏ xếp chồng bên phải;
   ảnh phủ kín thẻ, phần chữ màu trắng nằm trên dải nền tối ở đáy ảnh. */
.blog-grid .blog-item:nth-child(-n+3){
    flex-direction: column;
    justify-content: flex-end;
}
.blog-grid .blog-item:first-child{
    grid-column: span 4;
    grid-row: span 2;
    min-height: 20rem;
}
.blog-grid .blog-item:nth-child(2),
.blog-grid .blog-item:nth-child(3){
    aspect-ratio: 10 / 7;
    grid-column: span 2;
}
.blog-grid .blog-item:nth-child(-n+3) .blog-thumbnail{
    aspect-ratio: auto;
    background-color: #e9e9e9;
    border: 0;
    flex: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.blog-grid .blog-item:nth-child(-n+3):hover .blog-thumbnail img{
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.blog-grid .blog-item:nth-child(-n+3) .blog-content{
    align-self: stretch;
    background-color: rgba(0, 0, 0, .55);
    color: #fff;
    flex: none;
    margin: 0;
    padding: .75rem 1rem .9rem;
    position: relative;
    width: auto;
}
.blog-grid .blog-item:nth-child(-n+3) .blog-content h3.blog-title{
    -webkit-line-clamp: 2;
            line-clamp: 2;
    font-size: .9375rem;
    font-weight: 600;
    margin-bottom: .35rem;
}
.blog-grid .blog-item:nth-child(-n+3) .blog-title a{
    color: #fff;
}
/* Bấm vào đâu trên dải chữ cũng mở bài viết (phần ảnh phía trên đã là liên kết) */
.blog-grid .blog-item:nth-child(-n+3) .blog-title a:after{
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.blog-grid .blog-item:nth-child(-n+3) .blog-content p{
    -webkit-line-clamp: 2;
            line-clamp: 2;
    color: rgba(255, 255, 255, .9);
    font-size: .8125rem;
    line-height: 1.5;
}
.blog-grid .blog-item:first-child .blog-content{
    padding: 1.25rem 1.6rem 1.4rem;
}
.blog-grid .blog-item:first-child .blog-content h3.blog-title{
    font-size: 1.375rem;
    margin-bottom: .5rem;
}
.blog-grid .blog-item:first-child .blog-content p{
    -webkit-line-clamp: 3;
            line-clamp: 3;
    font-size: .875rem;
}
/* Tác giả và nút "Đọc ngay" (chỉ có ở thẻ lớn) */
.blog-meta{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.blog-author{
    align-items: center;
    display: flex;
    font-size: .875rem;
    min-width: 0;
}
.blog-author svg{
    background-color: var(--ctitsea-primary);
    border-radius: 50%;
    flex: none;
    height: 1.75rem;
    margin-right: .6rem;
    padding: .375rem;
    width: 1.75rem;
}
.blog-author svg,
.blog-more svg{
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
/* position + z-index để nút nằm trên lớp liên kết phủ dải chữ */
.blog-more{
    align-items: center;
    background-color: var(--ctitsea-primary);
    border-radius: 3rem;
    color: #fff;
    display: flex;
    flex: none;
    font-size: .875rem;
    margin-left: 1rem;
    padding: .4rem 1rem;
    position: relative;
    z-index: 1;
}
.blog-more:hover{
    background-color: var(--ctitsea-primary-dark);
    color: #fff;
}
.blog-more svg{
    height: 1rem;
    margin-left: .4rem;
    width: 1rem;
}
/*----------------------------------------------
                Style Pagination
------------------------------------------------*/
.pagination-area{
    margin: 2.5rem 0 3rem;
}
.pagination-area ul{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin: 0;
}
.pagination-area li a{
    align-items: center;
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    border-radius: 8px;
    color: #252525;
    display: flex;
    font-size: .875rem;
    height: 2.5rem;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0 .4rem;
}
.pagination-area li a:hover,
.pagination-area li.active a{
    background-color: var(--ctitsea-primary);
    border-color: var(--ctitsea-primary);
    color: #fff;
}
.pagination-area li.active a{
    font-weight: 500;
}
/* common.css bỏ viền focus trên toàn trang nên thêm lại cho người dùng bàn phím */
.pagination-area li a:focus-visible{
    outline: 2px var(--ctitsea-primary) solid;
    outline-offset: 2px;
}
.pagination-area li.prev a,
.pagination-area li.next a{
    padding: 0 .9rem;
}
.pagination-area li.prev i{
    margin-right: .35rem;
}
.pagination-area li.next i{
    margin-left: .35rem;
}
.pagination-area li.dots{
    color: #999;
    min-width: 1.5rem;
    text-align: center;
}
/* Điện thoại: nút "Trang trước" / "Trang sau" chỉ còn mũi tên (chữ ẩn bằng d-none d-sm-inline), các ô nhỏ lại cho vừa một hàng */
@media (max-width: 575.98px){
    .pagination-area ul{
        gap: .25rem;
    }
    .pagination-area li a{
        height: 2.25rem;
        min-width: 2.25rem;
    }
    .pagination-area li.prev a,
    .pagination-area li.next a{
        padding: 0;
    }
    .pagination-area li.prev i,
    .pagination-area li.next i{
        margin: 0;
    }
    .pagination-area li.dots{
        min-width: 1.25rem;
    }
}
/*----------------------------------------------
            Style Single Post
    (trang chi tiết bài viết: content-single.php)
------------------------------------------------*/
/* Bài viết là một khung trắng bo góc: phần đầu bài trên nền màu chủ đạo nhạt có họa tiết như banner khuyến mãi,
   ảnh đại diện, rồi thân bài (mục lục, nội dung, thẻ, chia sẻ, lời mời ghé cửa hàng). .content-area còn dùng ở trang
   tĩnh nên mọi kiểu ở đây đều gắn với .single-article */
.single-article{
    overflow: hidden;
    padding: 0;
}
/* Phần đầu bài: nền loang từ hai góc, nhành hoa rủ ở góc phải trên, đồi lượn sóng ở đáy */
.article-hero{
    background-image: radial-gradient(circle at 0 0, rgba(var(--ctitsea-primary-rgb), .12), transparent 55%),
                      radial-gradient(circle at 100% 100%, rgba(var(--ctitsea-primary-rgb), .1), transparent 50%),
                      linear-gradient(rgba(var(--ctitsea-primary-rgb), .04), rgba(var(--ctitsea-primary-rgb), .04));
    isolation: isolate;
    padding: 2.5rem 2.75rem 4.5rem;
    position: relative;
}
.article-hero::before{
    background-color: var(--ctitsea-primary);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    -webkit-mask: var(--ctitsea-decor-sprig-hanging) right top / auto 9rem no-repeat,
                  var(--ctitsea-decor-waves) center bottom / 100% 3.5rem no-repeat;
    mask: var(--ctitsea-decor-sprig-hanging) right top / auto 9rem no-repeat,
          var(--ctitsea-decor-waves) center bottom / 100% 3.5rem no-repeat;
}
.article-cats{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: 0;
}
.article-cats li{
    list-style: none;
}
.article-cats a{
    background-color: #fff;
    border: 1px rgba(var(--ctitsea-primary-rgb), .25) solid;
    border-radius: 2rem;
    color: var(--ctitsea-primary);
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    padding: .35rem .85rem;
    text-transform: uppercase;
}
.article-cats a:hover{
    background-color: var(--ctitsea-primary);
    border-color: var(--ctitsea-primary);
    color: #fff;
}
/* Chừa chỗ bên phải cho nhành hoa rủ */
.article-title{
    color: #252525;
    font-family: inherit;
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1rem;
    padding-right: 5rem;
}
.article-lead{
    color: #555;
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 0 1.5rem;
    max-width: 46rem;
}
.article-meta{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0;
}
.article-meta li{
    align-items: center;
    color: #666;
    display: inline-flex;
    font-size: .875rem;
    gap: .45rem;
    line-height: 1.4;
    list-style: none;
}
.article-meta svg{
    color: var(--ctitsea-primary);
    height: 1.1rem;
    width: 1.1rem;
}
/* Ảnh đại diện rộng hết khung, cắt theo tỉ lệ 16:9 */
.article-cover{
    margin: 0;
    padding: 2rem 2.75rem 0;
}
.article-cover img{
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}
.article-body{
    padding: 2rem 2.75rem 2.5rem;
}
/* Mục lục: khung nền nhạt viền nét đứt, đánh số, bấm tiêu đề để thu gọn; hai cột khi khung đủ rộng */
.article-toc{
    background-color: rgba(var(--ctitsea-primary-rgb), .04);
    border: 1px rgba(var(--ctitsea-primary-rgb), .25) dashed;
    border-radius: 12px;
    margin-bottom: 2rem;
    padding: 1.1rem 1.4rem;
}
.article-toc summary{
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    gap: .55rem;
    list-style: none;
}
.article-toc summary::-webkit-details-marker{
    display: none;
}
.article-toc summary svg{
    color: var(--ctitsea-primary);
    height: 1.2rem;
    width: 1.2rem;
}
/* Mũi tên ở cuối dòng tiêu đề, quay lên khi mục lục đang mở */
.article-toc summary::after{
    border: solid #999;
    border-width: 0 1.5px 1.5px 0;
    content: "";
    height: .45rem;
    margin-left: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: .45rem;
}
.article-toc[open] summary::after{
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.article-toc ol{
    column-gap: 2rem;
    columns: 2;
    counter-reset: article-toc;
    margin: .9rem 0 0;
    padding: 0;
}
.article-toc li{
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    counter-increment: article-toc;
    font-size: .875rem;
    line-height: 1.5;
    list-style: none;
    padding: .3rem 0 .3rem 1.9rem;
    position: relative;
}
.article-toc li::before{
    color: var(--ctitsea-primary);
    content: counter(article-toc, decimal-leading-zero);
    font-weight: 700;
    left: 0;
    position: absolute;
}
.article-toc a{
    color: #252525;
}
.article-toc a:hover{
    color: var(--ctitsea-primary);
}
/* Nội dung: chữ to, dòng thoáng (common.css đặt line-height: normal cho mọi p và li nên phải đặt lại) */
.article-content{
    color: #383838;
    font-size: 1rem;
    line-height: 1.8;
}
.article-content p,
.article-content li{
    line-height: inherit;
}
.article-content p{
    margin: 0 0 1.15rem;
}
.article-content > :first-child{
    margin-top: 0;
}
.article-content strong{
    color: #252525;
    font-weight: 600;
}
.article-content a{
    color: var(--ctitsea-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.article-content a:hover{
    color: var(--ctitsea-primary-dark);
}
.article-content h2{
    border-left: 4px var(--ctitsea-primary) solid;
    color: #252525;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 2.25rem 0 1rem;
    padding-left: .85rem;
    scroll-margin-top: 6.5rem;
}
.article-content h3,
.article-content h4{
    color: #252525;
    font-family: inherit;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 1.75rem 0 .75rem;
}
.article-content h4{
    font-size: 1.0625rem;
}
/* Danh sách chấm: chấm tròn màu chủ đạo có viền nhạt; danh sách số: số trắng trong vòng tròn màu chủ đạo */
.article-content ul,
.article-content ol{
    margin: 0 0 1.25rem;
    padding: 0;
}
.article-content ol{
    counter-reset: article-list;
}
.article-content li{
    list-style: none;
    margin-bottom: .55rem;
    padding-left: 1.75rem;
    position: relative;
}
.article-content ul > li::before{
    background-color: var(--ctitsea-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(var(--ctitsea-primary-rgb), .15);
    content: "";
    height: .4rem;
    left: .4rem;
    position: absolute;
    top: .75rem;
    width: .4rem;
}
.article-content ol > li{
    counter-increment: article-list;
    padding-left: 2.1rem;
}
.article-content ol > li::before{
    align-items: center;
    background-color: var(--ctitsea-primary);
    border-radius: 50%;
    color: #fff;
    content: counter(article-list);
    display: flex;
    font-size: .75rem;
    font-weight: 700;
    height: 1.4rem;
    justify-content: center;
    left: 0;
    line-height: 1;
    position: absolute;
    top: .25rem;
    width: 1.4rem;
}
.article-content li > ul,
.article-content li > ol{
    margin: .55rem 0 0;
}
.article-content blockquote{
    background-color: rgba(var(--ctitsea-primary-rgb), .05);
    border-left: 3px var(--ctitsea-primary) solid;
    border-radius: 0 12px 12px 0;
    color: #444;
    font-style: italic;
    margin: 1.75rem 0;
    padding: 1.1rem 1.4rem;
}
.article-content blockquote p:last-child{
    margin-bottom: 0;
}
.article-content figure{
    margin: 1.75rem 0;
}
.article-content img{
    border-radius: 12px;
    height: auto;
    max-width: 100%;
}
.article-content figcaption{
    color: #888;
    font-size: .8125rem;
    margin-top: .5rem;
    text-align: center;
}
.article-content table{
    border-collapse: collapse;
    font-size: .9375rem;
    margin: 1.5rem 0;
    width: 100%;
}
.article-content th,
.article-content td{
    border: 1px #eee solid;
    padding: .65rem .8rem;
    text-align: left;
}
.article-content th{
    background-color: rgba(var(--ctitsea-primary-rgb), .08);
    font-weight: 600;
}
.article-content hr{
    border: 0;
    border-top: 1px #ececec solid;
    margin: 2rem 0;
}
/* Cuối bài: thẻ dạng nút bo tròn, nút chia sẻ tròn */
.article-footer{
    border-top: 1px #ececec solid;
    display: grid;
    gap: 1.1rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
}
.article-tags,
.article-share{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.article-footer-label{
    align-items: center;
    color: #252525;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: .4rem;
    margin-right: .25rem;
    min-width: 5.5rem;
}
.article-footer-label svg{
    color: var(--ctitsea-primary);
    height: 1.1rem;
    width: 1.1rem;
}
.article-tags ul{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
}
.article-tags li{
    list-style: none;
}
.article-tags a{
    background-color: #f5f6f8;
    border: 1px transparent solid;
    border-radius: 2rem;
    color: #444;
    display: inline-block;
    font-size: .8125rem;
    line-height: 1.3;
    padding: .4rem .9rem;
}
.article-tags a::before{
    color: var(--ctitsea-primary);
    content: "#";
    margin-right: .15rem;
}
.article-tags a:hover{
    background-color: #fff;
    border-color: var(--ctitsea-primary);
    color: var(--ctitsea-primary);
}
.article-share .product-share{
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
}
.article-share .product-share li{
    list-style: none;
}
.article-share .product-share a{
    align-items: center;
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    border-radius: 50%;
    color: #252525;
    display: flex;
    height: 2.4rem;
    justify-content: center;
    width: 2.4rem;
}
.article-share .product-share a:hover{
    background-color: var(--ctitsea-primary);
    border-color: var(--ctitsea-primary);
    color: #fff;
}
/* Lời mời ghé cửa hàng: thẻ nền màu chủ đạo, nhành hoa trắng mờ rủ ở góc phải như thẻ liên hệ trang Hướng dẫn mua hàng */
.article-cta{
    align-items: center;
    background-color: var(--ctitsea-primary);
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    isolation: isolate;
    justify-content: space-between;
    margin-top: 2rem;
    overflow: hidden;
    padding: 1.75rem 2rem;
    position: relative;
}
.article-cta::before{
    background-color: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: .3;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    -webkit-mask: var(--ctitsea-decor-sprig-hanging) right top / auto 7rem no-repeat;
    mask: var(--ctitsea-decor-sprig-hanging) right top / auto 7rem no-repeat;
}
.article-cta-text{
    flex: 1 1 18rem;
}
.article-cta-title{
    color: #fff;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 .4rem;
}
.article-cta-text p{
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
    opacity: .9;
}
.article-cta-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.article-cta-btn{
    align-items: center;
    border: 1px rgba(255, 255, 255, .6) solid;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 500;
    gap: .45rem;
    padding: .75rem 1.25rem;
}
.article-cta-btn svg{
    height: 1.05rem;
    width: 1.05rem;
}
.article-cta-btn.is-light{
    background-color: #fff;
    border-color: #fff;
    color: var(--ctitsea-primary);
}
.article-cta-btn:hover{
    background-color: rgba(255, 255, 255, .15);
    border-color: #fff;
    color: #fff;
}
.single-article .fb-comments{
    margin-top: 1.5rem;
}
/* Desktop: cột bên phải (bài viết cùng chuyên mục) đứng yên dưới header dính khi đọc bài dài */
@media (min-width: 992px) and (min-height: 760px){
    .single-are .slidebar-area{
        position: -webkit-sticky;
        position: sticky;
        top: 6.25rem;
    }
}
@media (max-width: 767.98px){
    .article-hero{
        padding: 1.75rem 1.25rem 3.5rem;
    }
    .article-hero::before{
        -webkit-mask-size: auto 6.5rem, 100% 2.5rem;
        mask-size: auto 6.5rem, 100% 2.5rem;
    }
    .article-title{
        font-size: 1.5rem;
        padding-right: 2.5rem;
    }
    .article-lead{
        font-size: 1rem;
    }
    .article-cover{
        padding: 1.5rem 1.25rem 0;
    }
    .article-body{
        padding: 1.5rem 1.25rem 1.75rem;
    }
    .article-toc ol{
        columns: 1;
    }
    .article-content h2{
        font-size: 1.3rem;
    }
    .article-footer-label{
        min-width: 0;
        width: 100%;
    }
    .article-cta{
        padding: 1.5rem 1.25rem;
    }
}
/*----------------------------------------------
            Style Tag Archive
    (trang thẻ bài viết: tag.php)
------------------------------------------------*/
/* Phần đầu trang dùng lại .article-hero, .article-title, .article-lead, .article-meta và .article-tags của trang chi
   tiết bài viết; ở đây chỉ thêm khung bo góc (vì không nằm trong khung bài viết) và các chi tiết riêng */
.tag-hero{
    background-color: #fff;
    border-radius: 12px;
    margin-top: .5rem;
    overflow: hidden;
}
.tag-hero-eyebrow{
    align-items: center;
    color: var(--ctitsea-primary);
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 600;
    gap: .4rem;
    letter-spacing: .08em;
    margin-bottom: .6rem;
    text-transform: uppercase;
}
.tag-hero-eyebrow svg{
    height: 1.05rem;
    width: 1.05rem;
}
.tag-hero-title span{
    color: var(--ctitsea-primary);
    margin-right: .1rem;
}
.tag-hero .article-lead{
    margin-bottom: 1rem;
}
.tag-related{
    margin-top: 1.4rem;
}
.tag-related .article-footer-label{
    min-width: 0;
}
.tag-related a{
    background-color: #fff;
}
.tag-hero-btn{
    align-items: center;
    background-color: var(--ctitsea-primary);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 500;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: .8rem 1.3rem;
}
.tag-hero-btn svg{
    height: 1.05rem;
    width: 1.05rem;
}
.tag-hero-btn:hover{
    background-color: var(--ctitsea-primary-dark);
    color: #fff;
}
.tag-hero + .blog-grid{
    margin-top: 1.5rem;
}
/* Bài chưa có ảnh đại diện (template-parts/blog-grid-item.php): nền màu chủ đạo nhạt, nhành hoa ở giữa */
.blog-thumb-placeholder{
    background-image: radial-gradient(circle at 0 0, rgba(var(--ctitsea-primary-rgb), .14), transparent 60%),
                      linear-gradient(rgba(var(--ctitsea-primary-rgb), .06), rgba(var(--ctitsea-primary-rgb), .06));
    display: block;
    height: 100%;
    min-height: 6rem;
    position: relative;
    width: 100%;
}
.blog-thumb-placeholder::before{
    background-color: var(--ctitsea-primary);
    bottom: 0;
    content: "";
    left: 0;
    opacity: .7;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-mask: var(--ctitsea-decor-sprig) center / auto 60% no-repeat;
    mask: var(--ctitsea-decor-sprig) center / auto 60% no-repeat;
}
@media (max-width: 767.98px){
    .tag-related .article-footer-label{
        width: 100%;
    }
}
/*----------------------------------------------
            Style Related Posts
    (sidebar trang chi tiết bài viết: template-parts/related-posts.php)
------------------------------------------------*/
.related-posts{
    background-color: #fff;
    border-radius: 12px;
    padding: 1rem;
}
.related-posts-title{
    border-bottom: 1px #e5e5e5 solid;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
}
.related-posts ul{
    margin: 0;
}
.related-posts li{
    border-bottom: 1px dashed #e5e5e5;
    display: flex;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.related-posts li:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.related-post-thumb{
    border-radius: 8px;
    flex: 0 0 5rem;
    height: 3.75rem;
    overflow: hidden;
}
.related-post-thumb img,
.related-post-thumb .img-placeholder{
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.related-post-thumb:hover img{
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.related-post-content{
    flex: 1;
    min-width: 0;
    padding-left: .75rem;
}
/* Tiêu đề tối đa ba dòng */
.related-post-title{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
            line-clamp: 3;
    color: #252525;
    display: -webkit-box;
    font-size: 90%;
    line-height: 1.4;
    overflow: hidden;
}
.related-post-content time{
    color: #999;
    display: block;
    font-size: .8125rem;
    margin-top: .25rem;
}
.related-posts-more{
    border-top: 1px #e5e5e5 solid;
    color: var(--ctitsea-primary);
    display: block;
    font-size: .875rem;
    font-weight: 500;
    padding-top: .75rem;
}
.related-posts-more:hover{
    color: var(--ctitsea-primary-dark);
}
/* Sidebar hẹp nhất ở màn 992-1199px: thu nhỏ ảnh để còn chỗ cho tiêu đề */
@media (min-width: 992px) and (max-width: 1199.98px){
    .related-post-thumb{
        flex-basis: 4rem;
        height: 3rem;
    }
}
/* Dưới 992px sidebar nằm dưới bài viết: cách bài viết một khoảng, danh sách chia hai cột trên tablet */
@media (max-width: 991.98px){
    .single-are .content-area{
        margin-bottom: 2rem;
    }
    .related-posts ul{
        display: grid;
        gap: 1rem 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 1rem;
    }
    .related-posts li{
        margin-bottom: 0;
    }
}
@media (max-width: 767.98px){
    .related-posts ul{
        grid-template-columns: minmax(0, 1fr);
    }
}
/*----------------------------------------------
            Style Attribute Title
------------------------------------------------*/
.meta-title h3,
.widget h3{
    background-color: #f1317b;
    border-radius: 0 .35rem 0 0;
    color: #fff;
    display: inline-block;
    font-size: 1.25rem;
    margin-bottom: 0;
    padding: .6rem 1rem;
    position: relative;
    text-transform: uppercase;
    width: 100%;
}
.meta-title h3:before,
.widget h3:before {
    background: #f1317b;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 1;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); 
}
.meta-title h3:after,
.widget h3:after {
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 15px solid #bc074c;
    bottom: 1px;
    content: '';
    left: -15px;
    position: absolute;
    z-index: 1;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%); 
}
/*----------------------------------------------
            Style SiderBar
------------------------------------------------*/
.widget ul {
    padding: 1rem;
}
.widget ul li a{
    border-bottom: 1px #e1e1e1 dashed;
    display: inline-block;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    width: 100%;
}
.widget ul li:last-child a{
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
/*----------------------------------------------
            Style Detail Product Page
------------------------------------------------*/
.product-detials-rows {
    clear: both;
    display: flex;
    overflow: hidden;
    position: relative;
    padding: .8rem;
    width: 100%;
}
.product-detials-rows .product-detials-left {
    margin-right: 1.5rem;
}
.product-detials-rows .product-detials-left, 
.product-detials-rows .product-detials-right {
    width: 50%;
}
.product-detials-area .product-details-list ul li {
    border-top: 1px #e1e1e1 solid;
    box-shadow: inset 0 1px 0 0 #fff;
    display: block;
    line-height: normal;
    padding: .8rem 0;
    width: 100%;
}
.product-detials-area .product-details-list ul li:first-child {
    border-top: 0;
    box-shadow: none;
    padding-top: 0;
}

.product-detials-area .product-details-list h3 {
    font-size: 1.3rem;
    line-height: normal;
    margin: 0 auto;
}
.product-details-list .product-price .price-new, 
.product-details-list .product-price .price-old{
    margin: 0 1rem;
    width: auto;
}
.product-details-list form .add-cart-product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.product-details-list form input {
    border: 1px solid #e1e1e1;
    border-radius: .25rem;
    outline: none;
    margin-right: 1rem;
    padding: .6rem 0;
    padding-left: 1rem;
    text-align: center;
    width: 6rem;
}
.product-details-list form .btn-order{
    width: 50%;
}

.ubislider-image-container, 
.ubislider.ecommerce {
    margin-top: 0;
}
.description-content{
    padding: 1rem;
}
.products-related-area{
    padding: 1rem 0;
}
/*----------------------------------------------
                Style Contact Page
------------------------------------------------*/
.contact-row{
    clear: both;
    display: flex;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.contact-row .contact-form{
    background: rgba(241, 49, 123, .1) none repeat scroll 0 0;
}
.contact-row .contact-address,
.contact-row .contact-form {
    padding: 2.5rem;
    width: 50%;
}
.contact-title {
    color: #f1317b;
    font-size: 1.5rem;
    line-height: normal;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.wpcf7-form-control-wrap {
    position: relative;
}
.contact-form form .wpcf7-form-control-wrap input, 
.contact-form form .wpcf7-form-control-wrap textarea {
    background: #fbfbfb none repeat scroll 0 0;
    border: 1px solid #ececeb;
    border-radius: 2rem;
    font-size: 1rem;
    margin-bottom: 1rem;
    height: auto;
    line-height: normal;
    padding: .6rem 1.2rem;
    width: 100%;
}
.contact-form form .wpcf7-form-control-wrap textarea{
    border-radius: .8rem;
}
.contact-form form .wpcf7-submit {
    background: #00AC1F none repeat scroll 0 0;
    border: 1px solid #ececeb;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    color: #fff;
    line-height: normal;
    padding: .6rem 1.5rem;
}
/*----------------------------------------------
                Style Woocommerce
------------------------------------------------*/
.cart-subtotal .amount,
.order-total .amount {
    display: inline-block;
    text-align: right;
    width: 100%;
}
.cart-subtotal th,
.order-total th{
    text-align: left !important;
}
#customer_details .form-row{
    margin-bottom: 1rem;
}
/* Bootstrap cũng có class .col-1/.col-2 (rộng tối đa 8.33% và 16.67%), làm 2 cột của trang thanh toán bị bóp hẹp */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2{
    max-width: none;
}
.wprls_slider_effect1{
    box-shadow: none;
}
.woocommerce table.shop_table{
    background-color: #fff;
}
.woocommerce table.shop_table th {
    font-weight: normal;
    line-height: normal !important;
    padding: .8rem 1rem;
    text-align: center;
}
.woocommerce .quantity .qty {
    border: 1px #e1e1e1 solid;
    border-radius: .25rem;
    font-size: .9rem;
    padding: .3rem;
    width: 5rem;
}
.woocommerce-Price-currencySymbol {
    margin-left: .5rem;
}
.woocommerce form.checkout_coupon{
    background-color: #fff;
    border-radius: .5rem;
    border: 1px solid #e1e1e1;
    padding: 1rem;
    margin: 2rem 0;
}
.woocommerce form .form-row-first{
    width: 53%;
}
.woocommerce form .form-row .woocommerce-input-wrapper{
    width: 100%;
}
.woocommerce form .form-row{
    margin: 0 auto;
    padding: 0;
}
.woocommerce form .form-row.form-row-last button{
    border-radius: 0 .25rem .25rem 0;
}
.woocommerce form .form-row input.input-text{
    border-radius: .25rem 0 0 .25rem;
    border: 1px #e1e1e1 solid;
    line-height: normal;
    padding: .42rem 1rem;
}
.woocommerce form .form-row .woocommerce-input-wrapper input{
    border: 1px #e1e1e1 solid;
    border-radius: 3rem;
    font-size: .9rem;
    line-height: normal;
    padding: .5rem 1rem;
    width: 100%;
}
.woocommerce form .form-row textarea {
    border-radius: .5rem;
    height: 8rem;
    padding: 1rem;
}
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading,
.woocommerce-order-details h2,
.woocommerce-customer-details h2{
    font-size: 1.25rem;
    text-transform: uppercase;
}
#add_payment_method #payment, 
.woocommerce-cart #payment, 
.woocommerce-checkout #payment {
    background: #fff;
    border-radius: .5rem;
}
#add_payment_method #payment div.payment_box, 
.woocommerce-cart #payment div.payment_box, 
.woocommerce-checkout #payment div.payment_box{
    background-color: #d4edda;
    border-color: #c3e6cb;
    border-radius: .5rem;
}
#add_payment_method #payment div.payment_box::before, 
.woocommerce-cart #payment div.payment_box::before, 
.woocommerce-checkout #payment div.payment_box::before{
    border-bottom: 1em solid #d4edda;
}
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table th,
.order-total strong {
    font-weight: 500;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: #12be1f;
    border-radius: 50px;
    font-weight: 500;
}

.woocommerce-info,
.woocommerce-message {
    border-top-color: #12be1f;
}

.woocommerce-message::before {
    color: #12be1f;
}

.woocommerce-message {
    background-color: #d4edda;
    border-color: #c3e6cb;
    border-width: 0;
    border-radius: .25rem;
    color: #155724;
    line-height: normal;
    margin: 1rem 0;
    padding: .8em 2em .8em 3.5em;
}

.woocommerce a.button:hover {
    background-color: transparent;
}

.woocommerce a.button {
    background-color: transparent;
    color: #155724;
    font-weight: normal;
    padding: 0;
}

.woocommerce-ordering .orderby {
    background: #fbfbfb none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    border-radius: .5rem;
    color: #333;
    height: auto;
    margin-bottom: 0;
    line-height: normal;
    padding: .5rem 1rem;
    width: 100%;
}

.woocommerce a.button.alt {
    font-size: 1.25em;
    font-family: unset;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 0;
    padding: .8rem 1em;
}

.woocommerce button.button {
    border-radius: .25rem;
    font-size: .9rem;
    font-weight: normal;
    line-height: normal;
    padding: .5rem 1rem;
}

.woocommerce button.button,
.woocommerce button.button:hover {
    background-color: #12be1f;
    color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: #12be1f;
    color: #fff;
}
/*---------------------------------------
        Style Page Order Received
----------------------------------------*/
.woocommerce-order-details table tr th{
    text-align: left !important;
}
.woocommerce ul.order_details {
    background-color: #fff;
    border-radius: .5rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 1rem;
}
.woocommerce ul.order_details li{
    font-size: .95rem;
    line-height: normal;
    margin-right: 1.5rem;
    padding-right: 1.5rem;
    text-transform: unset;
}
.woocommerce ul.order_details li strong{
    font-size: 1.05rem;
    font-weight: normal;
    margin-top: .5rem;
}
.woocommerce .woocommerce-customer-details address{
    background-color: #fff;
    border-radius: .5rem;
    padding: 1rem;
}
.woocommerce .woocommerce-customer-details address p{
    margin-bottom: .5rem !important;
}
.woocommerce .woocommerce-customer-details address p:last-child{
    margin-bottom: 0 !important;
}
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email, 
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone{
    padding-left: 0;
}
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before{
    content: "";
}
/*----------------------------------------------
				Style Footer
------------------------------------------------*/
.footer-wrapper{
    background-color: #fff;
}
.footer-top {
    border-bottom: 1px #e5e5e5 solid;
    padding: 2rem 0;
}
.footer-widget-area{
    clear: both;
    padding: 5.6rem 0 3.2rem;
    width: 100%;
}
.footer-widget-item{
    margin-bottom: 2rem;
}
.footer-about .site-logo{
    margin-bottom: 1.4rem;
}
.footer-about .site-logo img {
    max-width: 50%;
}
.footer-widget-title{
	margin-bottom: 1.5rem;
}
.footer-widget-title h4{
    font-family: inherit;
    font-size: 1.375rem;
    font-weight: 500;
}
.footer-features-inner{
    align-items: center;
    display: flex;
    width: 100%;
}
.footer-feature-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 2.5rem;
    border-right: 1px solid #e1e1e1;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.footer-features-inner .footer-feature-item:last-child{
    border-right: 0;
}
.footer-feature-item .features-icon {
    color: var(--ctitsea-primary);
    font-size: 3rem;
    padding-right: 1rem;
}
.footer-feature-item .features-icon i {
    line-height: 1;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    display: block;
}
.footer-feature-item .features-content p {
    font-size: 1.15rem;
    margin-bottom: .3rem;
}
.footer-feature-item .features-content p:last-child {
    font-size: 1rem;
    margin-bottom: 0;
}

.footer-list li{
	margin-bottom: 1rem;
}
.footer-list li a{
    color: #252525;
    font-size: .9375rem;
}
.footer-list li a:hover {
    color: var(--ctitsea-primary);
}
/*----------------------------------------------
			Style Footer Contact
	(khối "Liên hệ" ở cột đầu: template-parts/footer-contact.php)
------------------------------------------------*/
.footer-contact{
    margin-bottom: 2rem;
}
.footer-contact ul{
    margin: 0;
}
.footer-contact li{
    align-items: center;
    color: #333;
    display: flex;
    line-height: 1.5;
    margin-bottom: .75rem;
}
.footer-contact li:last-child{
    margin-bottom: 0;
}
/* Icon nét mảnh màu trắng trong ô vuông 40px tô màu chủ đạo; padding quyết định cỡ hình vẽ bên trong */
.footer-contact svg{
    background-color: var(--ctitsea-primary);
    border-radius: 8px;
    box-sizing: border-box;
    color: #fff;
    fill: none;
    flex: none;
    height: 2.5rem;
    margin-right: .9rem;
    padding: .625rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 2.5rem;
}
.footer-contact a{
    color: inherit;
    line-height: inherit;
    overflow-wrap: anywhere;
}
.footer-contact a:hover{
    color: var(--ctitsea-primary);
}
.footer-contact a[href^="mailto:"]{
    text-decoration: underline;
}
/*----------------------------------------------
			Style Footer Newsletter
------------------------------------------------*/
.footer-newsletter p{
    font-size: .9375rem;
    margin-bottom: 1rem;
}
.newsletter-form{
    display: flex;
    max-width: 29.75rem;
}
.newsletter-form input{
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    border-radius: 12px 0 0 12px;
    border-right: 0;
    flex: 1;
    font-size: .9375rem;
    height: 3.125rem;
    min-width: 0;
    padding: 0 1.25rem;
}
.newsletter-form button{
    background-color: var(--ctitsea-primary);
    border-radius: 0 12px 12px 0;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 1.25rem;
    height: 3.125rem;
    width: 3.125rem;
}
.newsletter-form button:hover{
    background-color: #252525;
}
.newsletter-form input:disabled,
.newsletter-form button:disabled{
    cursor: not-allowed;
}
.newsletter-form button:disabled:hover{
    background-color: var(--ctitsea-primary);
}
/*----------------------------------------------
			Style Footer Bottom Area
------------------------------------------------*/
.footer-bottom-area {
    background-color: var(--ctitsea-primary);
    padding: 1rem 0;
}
.bg-icon{
	background-color: #00AC1F;
}
.color-icon{
	color: #00AC1F;
}
.social-icon{
	border: 3px #fff double;
	height: 40px;
    line-height: 34px;
    max-width: 40px;
    text-align: center;
    width: 100%;
}
/*----------------------------------------------
			Style Footer Info Area
------------------------------------------------*/
.footer-widget-body p,
.footer-info .textwidget p {
    align-items: center;
    clear: both;
    color: #333;
    display: flex;
    margin-bottom: .8rem;
    line-height: normal;
}
.footer-widget-body p i,
.footer-info .textwidget p i {
    color: #fff;
    margin-right: .8rem;
}
.social-link{
	text-align: center;
}
.footer-wrapper .social-link{
    margin-top: 1.5rem;
    text-align: left;
}
.social-link a{
	color: #fff;
	margin: 0 .25rem;
	display: inline-block;
}
.social-link a:first-child{
	margin-left: 0;
}
.social-link a:last-child{
	margin-right: 0;
}
/*----------------------------------------------
			Style Footer Copyright Area
------------------------------------------------*/
.copyright-text{
    text-align: center;
}
.copyright-text p {
    color: #fff;
    font-size: 90%;
}
.copyright-text p a {
    color: #fff;
}
.copyright-text p a:hover {
    color: #fff;
}

/*----------------------------------------------
			Style Button Scroll Up
------------------------------------------------*/
#scrollUp {
	background-color: var(--ctitsea-primary);
    border-radius: 8px;
    color: #fff;
    font-size: 1.5rem;
    height: 40px;
    line-height: 40px;
    right: 1.5rem;
    bottom: 4rem;
    overflow: hidden;
    text-align: center;
    width: 40px;
}
#scrollUp:hover {
    background-color: var(--ctitsea-primary);
    color: #fff;
}

/*----------------------------------------------
				Style Mini Cart
	Khung giỏ hàng thu gọn (#mini-cart ở footer.php, nội dung ở woocommerce/cart/mini-cart.php).
	Là một modal của Bootstrap, đổi thành khung cao hết màn hình trượt ra từ cạnh phải.
------------------------------------------------*/
.mini-cart .modal-dialog{
    height: 100%;
    margin: 0 0 0 auto;
    max-width: 28.125rem;
}
.mini-cart.fade .modal-dialog{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.mini-cart.show .modal-dialog{
    -webkit-transform: none;
    transform: none;
}
.mini-cart .modal-content{
    border: 0;
    border-radius: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4.375rem 3.75rem 2.5rem;
}
/* Nền tối sau khung do Bootstrap thêm vào cuối <body>, tức là sau khung này */
.mini-cart ~ .modal-backdrop.show{
    opacity: .75;
}
/* Nút cuộn lên đầu trang nổi trên mọi thứ, kể cả nền tối của khung */
.modal-open #scrollUp{
    visibility: hidden;
}
.mini-cart-close{
    background: none;
    border: 0;
    color: #252525;
    cursor: pointer;
    font-size: 1.5rem;
    height: 2.5rem;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 1rem;
    top: 1.125rem;
    width: 2.5rem;
}
.mini-cart-close:hover,
.mini-cart-remove:hover,
.mini-cart a.mini-cart-item-name:hover{
    color: var(--ctitsea-primary);
}
.mini-cart-title{
    font-family: inherit;
    font-size: 1.625rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
}
.mini-cart-list{
    list-style: none;
    margin: 0;
    padding: 0;
}
.mini-cart-list li{
    align-items: flex-start;
    display: flex;
    margin-bottom: 1.875rem;
}
.mini-cart-thumb{
    border: 1px #e5e5e5 solid;
    flex-shrink: 0;
    margin-right: 1.25rem;
    width: 4.5rem;
}
.mini-cart .mini-cart-thumb img{
    display: block;
    height: 4.375rem;
    object-fit: cover;
    width: 100%;
}
.mini-cart-item-info{
    flex: 1;
    min-width: 0;
    padding-top: .25rem;
}
/* Tên sản phẩm tối đa hai dòng */
.mini-cart-item-name{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #252525;
    display: -webkit-box;
    line-height: 1.4;
    overflow: hidden;
}
.mini-cart-item-info .variation{
    color: #757575;
    font-size: .875rem;
    margin: .25rem 0 0;
}
.mini-cart-item-info .variation dt,
.mini-cart-item-info .variation dd,
.mini-cart-item-info .variation p{
    display: inline;
    font-weight: normal;
    margin: 0;
}
.mini-cart-item-info .quantity{
    display: block;
    font-weight: 500;
    margin-top: .75rem;
}
.mini-cart .woocommerce-Price-currencySymbol{
    margin-left: 0;
}
.mini-cart-remove{
    color: #252525;
    flex-shrink: 0;
    font-size: .75rem;
    margin: .125rem -.375rem 0 .75rem;
    padding: .375rem;
}
.mini-cart-total{
    display: flex;
    font-weight: 500;
    justify-content: space-between;
    margin: 0 0 1.875rem;
}
.mini-cart-total strong{
    font-weight: 500;
}
.mini-cart-buttons{
    margin: 0;
}
/* Ghi đè nút .button của WooCommerce và của phần "Style Woocommerce" phía trên, vốn chỉ có ở các trang cửa hàng */
.mini-cart .mini-cart-buttons a.button{
    background-color: #252525;
    border-radius: 2rem;
    color: #fff;
    display: block;
    float: none;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2.8125rem;
    margin: 0 0 1rem;
    padding: 0 1rem;
    text-align: center;
    text-transform: uppercase;
}
.mini-cart .mini-cart-buttons a.button:hover{
    background-color: var(--ctitsea-primary);
    color: #fff;
}
.mini-cart .woocommerce-mini-cart__empty-message{
    margin: 0;
}
@media (max-width: 575.98px){
    .mini-cart .modal-dialog{
        max-width: 22.5rem;
        width: calc(100% - 2.5rem);
    }
    .mini-cart .modal-content{
        padding: 3.75rem 1.25rem 1.5rem;
    }
    .mini-cart-close{
        right: .5rem;
        top: .625rem;
    }
}
/*----------------------------------------------
			Style Shop Components
	(dùng chung cho trang chủ, trang danh sách và trang chi tiết sản phẩm)
------------------------------------------------*/
.page-section{
    padding-top: 5.9rem;
}
/*----------------------------------------------
			Style Section Heading
------------------------------------------------*/
.section-heading{
    align-items: center;
    display: flex;
    margin-bottom: 2.75rem;
}
/* Đường kẻ sau tiêu đề kéo dài tới các tab / nút mũi tên */
.section-heading-title{
    align-items: center;
    display: flex;
    flex: 1;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}
.section-heading-title:after{
    background-color: #e5e5e5;
    content: '';
    flex: 1;
    height: 1px;
    margin: 0 1.6rem;
}
.section-nav{
    display: flex;
}
.section-nav button{
    background-color: #fff;
    border: 0;
    border-radius: 50%;
    color: #252525;
    cursor: pointer;
    font-size: .75rem;
    height: 2.5rem;
    margin-left: .6rem;
    padding: 0;
    width: 2.5rem;
}
.section-nav button:first-child{
    margin-left: 0;
}
.section-nav button:hover{
    background-color: var(--ctitsea-primary);
    color: #fff;
}
/*----------------------------------------------
				Style Carousel
------------------------------------------------*/
.product-carousel,
.best-seller-carousel{
    margin: 0 -15px;
}
.product-slide-item{
    padding: 0 15px;
}

.blog-slide-item {
    background-color: #fff;
    border-radius: 12px;
}
/* Tin tức: mỗi trang của carousel là lưới 2 hàng x 2 cột (slick tự gói các thẻ thành trang > hàng),
   các thẻ cách nhau 1rem theo cả hai chiều */
.blog-carousel .slick-slide > div{
    display: flex;
    gap: 1rem;
}
.blog-carousel .slick-slide > div + div{
    margin-top: 1rem;
}
/* Thay cho width: 50% slick gán thẳng vào thẻ, để hàng chỉ có một thẻ vẫn thẳng cột với hàng trên */
.blog-carousel .slick-slide .blog-slide-item{
    flex: 0 0 calc(50% - .5rem);
}
/* Hai trang kề nhau cũng cách nhau 1rem trong lúc trượt */
.blog-carousel .slick-list{
    margin: 0 -.5rem;
}
.blog-carousel .slick-slide{
    margin: 0 .5rem;
}
/* Trước khi slick chạy (script nạp defer): xếp sẵn các thẻ trên một hàng đúng số cột
   để trang không bị giật khi carousel khởi tạo */
.product-carousel:not(.slick-initialized),
.best-seller-carousel:not(.slick-initialized),
.blog-carousel:not(.slick-initialized){
    display: flex;
    overflow: hidden;
}
.product-carousel:not(.slick-initialized) > *{
    flex: 0 0 25%;
    max-width: 25%;
}
.best-seller-carousel:not(.slick-initialized) > *{
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
/* Tin tức: hiện sẵn đúng bốn thẻ của trang đầu, xếp 2 hàng x 2 cột */
.blog-carousel:not(.slick-initialized){
    flex-wrap: wrap;
    gap: 1rem;
}
.blog-carousel:not(.slick-initialized) > *{
    flex: 0 0 calc(50% - .5rem);
    max-width: calc(50% - .5rem);
}
.blog-carousel:not(.slick-initialized) > :nth-child(n+5){
    display: none;
}
/* Các thẻ trong cùng một carousel cao bằng nhau */
.page-section .slick-track{
    display: flex;
    margin-left: 0;
}
.page-section .slick-slide{
    float: none;
    height: auto;
}
/*----------------------------------------------
				Style Product Card
------------------------------------------------*/
/* Thẻ xếp theo cột: ảnh ở trên, phần nội dung chiếm hết chiều cao còn lại để nút thêm vào giỏ nằm sát đáy thẻ */
.product-card{
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-card-thumb{
    border-radius: 12px 12px 0 0;
    flex: 0 0 auto;
    overflow: hidden;
    position: relative;
}
.product-card-content{
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem;
}
.product-card-thumb img{
    aspect-ratio: 1 / 1;
    object-fit: contain;
    width: 100%;
}
.product-card:hover .product-card-thumb img{
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
/* Nhãn: nền đen nằm góc phải (mũi nhọn bên trái), nền đỏ nằm góc trái (mũi nhọn bên phải) */
.product-badge{
    color: #fff;
    font-size: .6875rem;
    font-weight: 500;
    height: 1.5625rem;
    line-height: 1.5625rem;
    padding: 0 .6rem;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
}
.product-badge:before{
    border: 5px transparent solid;
    content: '';
    margin-top: -5px;
    position: absolute;
    top: 50%;
}
.product-badge-dark{
    background-color: #252525;
    right: 0;
}
.product-badge-dark:before{
    border-left-width: 0;
    border-right-color: #252525;
    right: 100%;
}
.product-badge-primary{
    background-color: var(--ctitsea-primary);
    left: 0;
}
.product-badge-primary:before{
    border-left-color: var(--ctitsea-primary);
    border-right-width: 0;
    left: 100%;
}
/* Nút thêm vào giỏ nằm cuối thẻ. Các thẻ cùng hàng cao bằng nhau,
   margin-top: auto đẩy nút xuống đáy nên nút của các thẻ thẳng hàng dù tên dài ngắn khác nhau */
.product-card-action{
    margin-top: auto;
    padding-top: .9rem;
}
.product-card-cart{
    background-color: #252525;
    border-radius: 8px;
    color: #fff;
    display: block;
    font-size: .8125rem;
    overflow: hidden;
    padding: .6rem .5rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-card-cart:hover{
    background-color: var(--ctitsea-primary);
    color: #fff;
}
/* Tên dài quá hai dòng thì cắt bớt và kết thúc bằng "..." */
.product-card-name{
    display: -webkit-box;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.4;
    margin: 0 0 .5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
            line-clamp: 2;
}
.product-card-name a{
    color: #252525;
}
.product-card-name a:hover{
    color: var(--ctitsea-primary);
}
/* WooCommerce in giá gốc trước giá bán; thiết kế đặt giá bán (đỏ) trước, giá gốc (xám, gạch ngang) sau */
.product-card-price{
    align-items: baseline;
    color: var(--ctitsea-primary);
    display: flex;
    flex-wrap: wrap;
    min-height: 1.5rem;
}
.product-card-price del{
    color: #bbb;
    font-size: .875rem;
    order: 2;
}
/* Khoảng cách đặt ở giá bán để khi giá gốc rớt xuống dòng vẫn thẳng lề trái */
.product-card-price ins{
    margin-right: .9rem;
    text-decoration: none;
}
.product-card-price .woocommerce-Price-currencySymbol{
    margin-left: 0;
}
/* Sao đánh giá ở trang chi tiết sản phẩm (thẻ sản phẩm không hiện sao): hàng sao viền làm nền,
   phần sao tô đặc phủ lên theo điểm trung bình.
   Hình sao là mặt nạ (mask) cắt trên nền màu chủ đạo, nhờ vậy sao đổi màu theo --ctitsea-primary. */
.product-rating{
    height: 1.125rem;
    margin-top: .6rem;
    position: relative;
    width: 5.625rem;
}
.product-rating:before,
.product-rating span{
    background-color: var(--ctitsea-primary);
}
.product-rating:before{
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E") repeat-x left center / 1.125rem 1.125rem;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E") repeat-x left center / 1.125rem 1.125rem;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.product-rating span{
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E") repeat-x left center / 1.125rem 1.125rem;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E") repeat-x left center / 1.125rem 1.125rem;
    display: block;
    height: 100%;
}
/* Thẻ sản phẩm kiểu ngang (khối bán chạy): ảnh bên trái, thông tin bên phải */
.product-card-list{
    align-items: flex-start;
    flex-direction: row;
}
.product-card-list .product-card-thumb{
    flex: 0 0 42%;
    margin: 0 1.1rem 0 0;
    max-width: 42%;
}
/* Ảnh canh trên, riêng phần nội dung cao hết thẻ để nút thêm vào giỏ vẫn nằm sát đáy */
.product-card-list .product-card-content{
    align-self: stretch;
    min-width: 0;
    padding: .6rem 1rem 1rem 0;
}
.product-card-list .product-card-cart i{
    display: none;
}
.product-card-cats{
    font-size: .9375rem;
    margin-bottom: .3rem;
}
/*----------------------------------------------
				Style Brand Area
------------------------------------------------*/
.brand-area{
    margin-top: 5.3rem;
}
.brand-inner{
    align-items: center;
    border-top: 1px #e5e5e5 solid;
    display: flex;
    flex-wrap: wrap;
    padding: 2.5rem 0;
}
.brand-inner > *{
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    padding: .6rem 1.5rem;
}
.brand-inner img,
.brand-inner .img-placeholder{
    margin: 0 auto;
}
/*----------------------------------------------
				Style Decor
------------------------------------------------*/
/* Họa tiết vẽ bằng SVG, dùng làm mặt nạ (mask) cho một lớp nền màu chủ đạo nên đổi màu ở Tùy biến thì hình đổi theo:
   hai lớp đồi lượn sóng (giãn theo bề ngang), nhành hoa mọc từ góc trái dưới, nhành hoa rủ từ góc phải trên
   kèm vài cánh hoa bay. Dùng ở khung thông tin sản phẩm (product.css) và khung chính sách đổi trả bên dưới */
:root{
    --ctitsea-decor-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.07' d='M0 55C150 20 300 20 450 45S750 75 1000 30V100H0Z'/%3E%3Cpath fill-opacity='.12' d='M0 80C200 55 380 60 560 80S860 92 1000 70V100H0Z'/%3E%3C/svg%3E");
    --ctitsea-decor-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 112'%3E%3Cg fill='none' stroke='black' stroke-opacity='.35' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M8 112C16 82 34 52 66 24'/%3E%3Cpath d='M22 112C42 96 66 86 104 82'/%3E%3Cpath d='M27 70C38 66 46 58 50 48'/%3E%3C/g%3E%3Cg fill-opacity='.22'%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(15 92) rotate(-135)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(18 86) rotate(-35)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(29 64) rotate(-150)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(36 56) rotate(-25)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(48 40) rotate(-155)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(52 37) rotate(-45)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(48 99) rotate(-95)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(52 97) rotate(15)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(76 88) rotate(-75)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(80 87) rotate(10)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(40 60) rotate(-80)'/%3E%3C/g%3E%3Cg transform='translate(66 24) scale(1.25)'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cy='-4' r='3.6'/%3E%3Ccircle cx='3.8' cy='-1.2' r='3.6'/%3E%3Ccircle cx='2.4' cy='3.2' r='3.6'/%3E%3Ccircle cx='-2.4' cy='3.2' r='3.6'/%3E%3Ccircle cx='-3.8' cy='-1.2' r='3.6'/%3E%3C/g%3E%3Ccircle r='1.8' fill-opacity='.6'/%3E%3C/g%3E%3Cg transform='translate(104 82) scale(1)'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cy='-4' r='3.6'/%3E%3Ccircle cx='3.8' cy='-1.2' r='3.6'/%3E%3Ccircle cx='2.4' cy='3.2' r='3.6'/%3E%3Ccircle cx='-2.4' cy='3.2' r='3.6'/%3E%3Ccircle cx='-3.8' cy='-1.2' r='3.6'/%3E%3C/g%3E%3Ccircle r='1.8' fill-opacity='.6'/%3E%3C/g%3E%3Ccircle cx='50' cy='46' r='3' fill-opacity='.35'/%3E%3C/svg%3E");
    --ctitsea-decor-sprig-hanging: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140'%3E%3Cg transform='translate(20 0) rotate(180 70 56)'%3E%3Cg fill='none' stroke='black' stroke-opacity='.4' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M8 112C16 82 34 52 66 24'/%3E%3Cpath d='M22 112C42 96 66 86 104 82'/%3E%3Cpath d='M27 70C38 66 46 58 50 48'/%3E%3C/g%3E%3Cg fill-opacity='.26'%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(15 92) rotate(-135) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(18 86) rotate(-35) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(29 64) rotate(-150) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(36 56) rotate(-25) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(48 40) rotate(-155) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(52 37) rotate(-45) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(48 99) rotate(-95) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(52 97) rotate(15) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(76 88) rotate(-75) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(80 87) rotate(10) scale(1)'/%3E%3Cpath d='M0 0C5-5 13-5 18 0C13 5 5 5 0 0Z' transform='translate(40 60) rotate(-80) scale(1)'/%3E%3C/g%3E%3Cg transform='translate(66 24) scale(1.25)'%3E%3Cg fill-opacity='.3'%3E%3Ccircle cy='-4' r='3.6'/%3E%3Ccircle cx='3.8' cy='-1.2' r='3.6'/%3E%3Ccircle cx='2.4' cy='3.2' r='3.6'/%3E%3Ccircle cx='-2.4' cy='3.2' r='3.6'/%3E%3Ccircle cx='-3.8' cy='-1.2' r='3.6'/%3E%3C/g%3E%3Ccircle r='1.8' fill-opacity='.65'/%3E%3C/g%3E%3Cg transform='translate(104 82) scale(1)'%3E%3Cg fill-opacity='.3'%3E%3Ccircle cy='-4' r='3.6'/%3E%3Ccircle cx='3.8' cy='-1.2' r='3.6'/%3E%3Ccircle cx='2.4' cy='3.2' r='3.6'/%3E%3Ccircle cx='-2.4' cy='3.2' r='3.6'/%3E%3Ccircle cx='-3.8' cy='-1.2' r='3.6'/%3E%3C/g%3E%3Ccircle r='1.8' fill-opacity='.65'/%3E%3C/g%3E%3Ccircle cx='50' cy='46' r='3' fill-opacity='.4'/%3E%3C/g%3E%3Cpath fill-opacity='.3' d='M0 0C-6-4-8-14 0-20C8-14 6-4 0 0Z' transform='translate(30 118) rotate(200) scale(0.5)'/%3E%3Cpath fill-opacity='.3' d='M0 0C-6-4-8-14 0-20C8-14 6-4 0 0Z' transform='translate(12 96) rotate(150) scale(0.4)'/%3E%3Cpath fill-opacity='.3' d='M0 0C-6-4-8-14 0-20C8-14 6-4 0 0Z' transform='translate(52 132) rotate(250) scale(0.35)'/%3E%3C/svg%3E");
}
/*----------------------------------------------
			Style Return Policy
------------------------------------------------*/
/* Khung chính sách đổi trả (ctitsea_return_policy_box() trong functions.php): nền màu chủ đạo nhạt loang từ hai góc
   như banner khuyến mãi ở trang chủ, nhành hoa rủ ở góc phải trên, nhành hoa và hai lớp đồi lượn sóng ở đáy.
   Nội dung nhập ở trang admin: tiêu đề mục in hoa có ô vuông, danh sách chấm thành dấu tích, danh sách số thành
   các bước đánh số tròn, trích dẫn thành lời nhắn cuối khung */
.return-policy-inner{
    background-color: #fff;
    background-image: radial-gradient(circle at 0 0, rgba(var(--ctitsea-primary-rgb), .12), transparent 55%),
                      radial-gradient(circle at 100% 100%, rgba(var(--ctitsea-primary-rgb), .1), transparent 50%),
                      linear-gradient(rgba(var(--ctitsea-primary-rgb), .04), rgba(var(--ctitsea-primary-rgb), .04));
    border: 1px rgba(var(--ctitsea-primary-rgb), .12) solid;
    border-radius: 12px;
    color: #252525;
    isolation: isolate;
    overflow: hidden;
    padding: 2rem 1.75rem 7.5rem;
    position: relative;
}
.return-policy-inner::before{
    background-color: var(--ctitsea-primary);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    -webkit-mask: var(--ctitsea-decor-sprig-hanging) right top / auto 8.5rem no-repeat,
                  var(--ctitsea-decor-sprig) left bottom / auto 7rem no-repeat,
                  var(--ctitsea-decor-waves) center bottom / 100% 6rem no-repeat;
    mask: var(--ctitsea-decor-sprig-hanging) right top / auto 8.5rem no-repeat,
          var(--ctitsea-decor-sprig) left bottom / auto 7rem no-repeat,
          var(--ctitsea-decor-waves) center bottom / 100% 6rem no-repeat;
}
/* Chừa chỗ bên phải cho nhành hoa rủ */
.return-policy-title{
    color: var(--ctitsea-primary-dark);
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
    margin: 0 0 1.5rem;
    padding-right: 4.5rem;
    text-transform: uppercase;
}
.return-policy-title::after{
    background-color: var(--ctitsea-primary);
    content: "";
    display: block;
    height: 2px;
    margin-top: .8rem;
    width: 3rem;
}
.return-policy-content{
    font-size: .875rem;
    line-height: 1.6;
}
.return-policy-content > :first-child{
    margin-top: 0;
}
.return-policy-content > :last-child{
    margin-bottom: 0;
}
/* common.css đặt line-height: normal cho mọi p và li */
.return-policy-content p,
.return-policy-content li{
    line-height: inherit;
}
.return-policy-content p{
    margin: 0 0 .6rem;
}
.return-policy-content h2,
.return-policy-content h3,
.return-policy-content h4,
.return-policy-content h5,
.return-policy-content h6{
    align-items: center;
    color: #252525;
    display: flex;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    gap: .6rem;
    letter-spacing: .02em;
    line-height: 1.4;
    margin: 1.4rem 0 .7rem;
    text-transform: uppercase;
}
.return-policy-content h2::before,
.return-policy-content h3::before,
.return-policy-content h4::before,
.return-policy-content h5::before,
.return-policy-content h6::before{
    background-color: var(--ctitsea-primary);
    content: "";
    flex: 0 0 .45rem;
    height: .45rem;
}
.return-policy-content ul,
.return-policy-content ol{
    counter-reset: policy-step;
    margin: 0 0 .6rem;
    padding: 0;
}
.return-policy-content li{
    list-style: none;
    margin-bottom: .55rem;
    padding-left: 1.75rem;
    position: relative;
}
/* Dấu tích vẽ bằng hai cạnh viền của một hình chữ nhật xoay 45 độ */
.return-policy-content ul li::before{
    border: solid var(--ctitsea-primary);
    border-width: 0 2px 2px 0;
    content: "";
    height: .7rem;
    left: .4rem;
    position: absolute;
    top: .2rem;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: .38rem;
}
.return-policy-content ol li{
    counter-increment: policy-step;
}
.return-policy-content ol li::before{
    align-items: center;
    background-color: var(--ctitsea-primary);
    border-radius: 50%;
    color: #fff;
    content: counter(policy-step);
    display: flex;
    font-size: .6875rem;
    font-weight: 600;
    height: 1.25rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: .1rem;
    width: 1.25rem;
}
.return-policy-content blockquote{
    background-color: rgba(255, 255, 255, .75);
    border-left: 3px var(--ctitsea-primary) solid;
    border-radius: 0 8px 8px 0;
    font-size: .8125rem;
    font-style: italic;
    line-height: 1.6;
    margin: 1.4rem 0 0;
    padding: .8rem 1rem;
}
.return-policy-content blockquote p{
    margin: 0;
}
/*----------------------------------------------
				Style Search
------------------------------------------------*/
/* Trang kết quả tìm kiếm (search.php): thanh số kết quả và ô tìm lại, rồi khối Sản phẩm (thẻ sản phẩm như trang danh
   sách sản phẩm) và khối Bài viết (lưới .blog-grid như trang danh sách bài viết), mỗi khối phân trang riêng */
.search-toolbar{
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding: 1.1rem 1.25rem;
}
.search-count{
    font-size: .9375rem;
    line-height: 1.5;
    margin: 0;
}
.search-count strong{
    font-weight: 600;
}
.search-count a{
    color: var(--ctitsea-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Mỗi khối: tiêu đề có đường kẻ như các khối ở trang chủ, số kết quả trong nhãn tròn; bấm số kết quả ở thanh trên
   hoặc chuyển trang của khối thì trang dừng ở đầu khối, dưới header dính */
.search-section{
    margin-top: 3rem;
    scroll-margin-top: 6.5rem;
}
.search-section .section-heading{
    margin-bottom: 1.5rem;
}
.search-section-count{
    background-color: rgba(var(--ctitsea-primary-rgb), .1);
    border-radius: 2rem;
    color: var(--ctitsea-primary);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
    margin-left: .75rem;
    padding: .1rem .65rem;
}
.search-section .blog-grid{
    margin: 0;
}
.search-section .pagination-area{
    margin-top: 2rem;
}
/* Sản phẩm: lưới 4 cột như thẻ sản phẩm ở trang danh sách sản phẩm (3 cột dưới 1200px, 2 cột dưới 768px) */
.search-product-grid{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.search-product-grid .product-card-price ins{
    margin-right: .6rem;
}
/* Ô tìm kiếm bo tròn, nút kính lúp tròn màu chủ đạo nằm bên trong ở đầu phải */
.search-page-form{
    flex: 0 1 26rem;
    position: relative;
}
.search-page-form input{
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    border-radius: 2rem;
    color: #252525;
    font-size: .875rem;
    height: 2.75rem;
    padding: 0 3.25rem 0 1.15rem;
    -webkit-transition: border-color .2s, box-shadow .2s;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}
.search-page-form input:focus{
    border-color: var(--ctitsea-primary);
    box-shadow: 0 0 0 3px rgba(var(--ctitsea-primary-rgb), .12);
    outline: 0;
}
.search-page-form button{
    align-items: center;
    background-color: var(--ctitsea-primary);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 2.25rem;
    justify-content: center;
    position: absolute;
    right: .25rem;
    top: .25rem;
    width: 2.25rem;
}
.search-page-form button:hover{
    background-color: var(--ctitsea-primary-dark);
}
.search-page-form button svg{
    height: 1.1rem;
    width: 1.1rem;
}
/* Không có kết quả: khung nền màu chủ đạo nhạt có họa tiết như banner khuyến mãi, ô tìm lại, từ khóa gợi ý */
.search-empty{
    background-color: #fff;
    background-image: radial-gradient(circle at 0 0, rgba(var(--ctitsea-primary-rgb), .1), transparent 50%),
                      linear-gradient(rgba(var(--ctitsea-primary-rgb), .03), rgba(var(--ctitsea-primary-rgb), .03));
    border-radius: 12px;
    isolation: isolate;
    margin: 2.5rem 0 4rem;
    overflow: hidden;
    padding: 3.5rem 2rem 7rem;
    position: relative;
    text-align: center;
}
.search-empty::before{
    background-color: var(--ctitsea-primary);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    -webkit-mask: var(--ctitsea-decor-sprig-hanging) right top / auto 9rem no-repeat,
                  var(--ctitsea-decor-sprig) left bottom / auto 6.5rem no-repeat,
                  var(--ctitsea-decor-waves) center bottom / 100% 5.5rem no-repeat;
    mask: var(--ctitsea-decor-sprig-hanging) right top / auto 9rem no-repeat,
          var(--ctitsea-decor-sprig) left bottom / auto 6.5rem no-repeat,
          var(--ctitsea-decor-waves) center bottom / 100% 5.5rem no-repeat;
}
.search-empty-icon{
    align-items: center;
    background-color: rgba(var(--ctitsea-primary-rgb), .1);
    border-radius: 50%;
    color: var(--ctitsea-primary);
    display: inline-flex;
    height: 4.5rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    width: 4.5rem;
}
.search-empty-icon svg{
    height: 2rem;
    width: 2rem;
}
.search-empty-title{
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 auto .6rem;
    max-width: 36rem;
}
.search-empty-text{
    color: #666;
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0 auto 1.5rem;
    max-width: 34rem;
}
.search-empty .search-page-form{
    margin: 0 auto;
    max-width: 30rem;
}
.search-suggestions{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin: 1.5rem auto 0;
    max-width: 40rem;
}
.search-suggestions span{
    color: #666;
    font-size: .8125rem;
}
.search-suggestions a{
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    border-radius: 2rem;
    color: #252525;
    font-size: .8125rem;
    line-height: 1.3;
    padding: .4rem .9rem;
}
.search-suggestions a:hover{
    border-color: var(--ctitsea-primary);
    color: var(--ctitsea-primary);
}
.search-empty-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 2rem;
}
.search-empty-btn{
    align-items: center;
    background-color: #fff;
    border: 1px #252525 solid;
    border-radius: 8px;
    color: #252525;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 500;
    gap: .5rem;
    padding: .8rem 1.4rem;
}
.search-empty-btn svg{
    height: 1.1rem;
    width: 1.1rem;
}
.search-empty-btn:hover,
.search-empty-btn.is-primary{
    background-color: var(--ctitsea-primary);
    border-color: var(--ctitsea-primary);
    color: #fff;
}
.search-empty-btn.is-primary:hover{
    background-color: var(--ctitsea-primary-dark);
    border-color: var(--ctitsea-primary-dark);
}
/*----------------------------------------------
				Style 404
------------------------------------------------*/
/* Trang lỗi 404 (404.php): dùng lại khung "không có kết quả" của trang tìm kiếm ở trên, thêm số 404 lớn với số 0 là
   vòng tròn màu chủ đạo có nhành hoa bên trong; bên dưới là lưới sản phẩm mới (.search-product-grid) */
.error-404-area{
    padding-bottom: 4rem;
}
.search-empty.error-404{
    margin-bottom: 0;
    padding-top: 3rem;
}
.error-404-code{
    align-items: center;
    display: flex;
    font-size: 8rem;
    font-weight: 800;
    gap: .08em;
    justify-content: center;
    letter-spacing: -.02em;
    line-height: 1;
    margin: 0 0 1.25rem;
}
/* Hai số 4 tô màu chủ đạo chuyển đậm dần xuống dưới */
.error-404-four{
    background: linear-gradient(180deg, var(--ctitsea-primary), var(--ctitsea-primary-dark));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
/* Số 0: khung rỗng, chỉ có vòng tròn viền màu chủ đạo, nhành hoa ở giữa và bóng mờ nhẹ */
.error-404-zero{
    background-color: #fff;
    border: .11em var(--ctitsea-primary) solid;
    border-radius: 50%;
    box-shadow: 0 .08em .25em rgba(var(--ctitsea-primary-rgb), .18);
    display: inline-block;
    flex: 0 0 auto;
    height: .78em;
    position: relative;
    width: .78em;
}
.error-404-zero::before{
    background-color: var(--ctitsea-primary);
    bottom: 12%;
    content: "";
    left: 12%;
    position: absolute;
    right: 12%;
    top: 12%;
    -webkit-mask: var(--ctitsea-decor-sprig) center / contain no-repeat;
    mask: var(--ctitsea-decor-sprig) center / contain no-repeat;
}
.error-404-products{
    margin-top: 3rem;
}
@media only screen and (max-width: 1199px){
    .search-product-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .best-seller-carousel:not(.slick-initialized) > *{
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media only screen and (max-width: 991px){
    .page-section{
        padding-top: 4.5rem;
    }
    /* Một cột; khối nổi bật: thẻ lớn nằm trên, hai thẻ nhỏ chia đôi hàng bên dưới */
    .blog-grid .blog-item{
        grid-column: 1 / -1;
    }
    .blog-grid .blog-item:first-child{
        aspect-ratio: 16 / 9;
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 0;
    }
    .blog-grid .blog-item:nth-child(2),
    .blog-grid .blog-item:nth-child(3){
        grid-column: span 3;
    }
    .blog-grid .blog-thumbnail{
        flex-basis: 35%;
    }
    .product-carousel:not(.slick-initialized) > *{
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    /* Tin tức còn một cột: mỗi trang hai thẻ xếp chồng */
    .blog-carousel .slick-slide .blog-slide-item{
        flex-basis: 100%;
    }
    .blog-carousel:not(.slick-initialized) > *{
        flex: 0 0 100%;
        max-width: 100%;
    }
    .blog-carousel:not(.slick-initialized) > :nth-child(n+3){
        display: none;
    }
    .brand-area{
        margin-top: 4rem;
    }
    .brand-inner > *{
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
@media only screen and (max-width: 767px){
    /* Trang tìm kiếm: ô tìm lại xuống dòng riêng, rộng hết thanh */
    .search-toolbar{
        margin-top: 1.5rem;
        padding: 1rem;
    }
    .search-page-form{
        flex-basis: 100%;
    }
    .search-section{
        margin-top: 2.25rem;
    }
    .search-product-grid{
        gap: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .search-empty{
        margin-top: 1.5rem;
        padding: 2.5rem 1.25rem 6rem;
    }
    .search-empty-title{
        font-size: 1.25rem;
    }
    .error-404-code{
        font-size: 5.5rem;
    }
    .error-404-area{
        padding-bottom: 3rem;
    }
    .return-policy-inner{
        padding: 1.5rem 1.25rem 6.5rem;
    }
    .return-policy-title{
        font-size: 1.25rem;
    }
    .page-section{
        padding-top: 3.5rem;
    }
    /* Tiêu đề và mũi tên trên một hàng */
    .section-heading{
        flex-wrap: wrap;
        margin-bottom: 1.75rem;
    }
    .section-heading-title{
        font-size: 1.375rem;
    }
    .section-heading-title:after{
        margin: 0 1rem;
    }
    .product-card-cart{
        font-size: .75rem;
    }
    .product-card-cart i{
        display: none;
    }
    .product-carousel,
    .best-seller-carousel{
        margin: 0 -8px;
    }
    .product-slide-item{
        padding: 0 8px;
    }
    .product-carousel:not(.slick-initialized) > *{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .best-seller-carousel:not(.slick-initialized) > *{
        flex: 0 0 100%;
        max-width: 100%;
    }
    .product-card{
        padding: .75rem;
    }
    .product-card-thumb{
        margin-bottom: .75rem;
    }
    .product-card-content,
    .product-card-list .product-card-content{
        padding: 0;
    }
    .product-card-name{
        font-size: .9375rem;
    }
}

@media only screen and (max-width: 767px){
    .header-middle-area{
        padding: 1rem 0;
    }
    .site-logo{
        font-size: 2rem;
    }
    .sidebar-search-input{
        width: 100%;
    }
    .sidebar-search-input .form-search input{
        padding: .65rem 3.5rem .65rem 1rem;
    }
    .sidebar-search-input .form-search button{
        top: .05rem;
        padding: .6rem;
    }
    .breadcrumb-area{
        padding: 1.5rem;
    }
    .breadcrumb-title{
        font-size: 1.5rem;
    }
    .contact-row,
    .product-detials-rows{
        display: block;
    }
    .contact-row .contact-address,
    .contact-row .contact-form,
    .product-detials-rows .product-detials-left,
    .product-detials-rows .product-detials-right{
        width: 100%;
    }
    .product-detials-rows .product-detials-left{
        clear: both;
        margin-right: 0;
        margin-bottom: 1rem;
        overflow: hidden;
        width: 100%;
    }

    .product-price{
        display: block;
        padding: .5rem 0;
    }
    .product-price .price-new,
    .product-price .price-old {
        text-align: center;
        width: 100%;
    }
    .product-detials-area .product-details-list h3{
        font-size: 1.2rem;
    }
    .content-area{
        margin-bottom: 2rem;
    }
    .blog-item{
        margin-bottom: 1rem;
    }
    .blog-item .blog-thumbnail{
        border: 1px #e1e1e1 solid;
        height: 92px;
    }
    .blog-item .blog-content{
        margin-left: 1rem;
    }
    .blog-item .blog-content h3.blog-title{
        font-size: 1.5rem;
        margin-bottom: 0;
        line-height: 1.4;
    }
    .blog-item .blog-content p{
        display: none;
    }
    .blog-grid{
        gap: 16px;
        margin: 1.5rem 0;
    }
    .blog-grid .blog-content{
        align-self: center;
        padding: 0 .5rem 0 0;
    }
    /* Chỉ còn một cột và mô tả đã ẩn nên hiện đủ tiêu đề, không cắt ba dòng nữa */
    .blog-grid .blog-content h3.blog-title{
        display: block;
    }
    /* Khối nổi bật trên điện thoại: ba thẻ xếp dọc, mỗi thẻ rộng hết màn hình */
    .blog-grid .blog-item:first-child{
        aspect-ratio: 1 / 1;
    }
    .blog-grid .blog-item:nth-child(2),
    .blog-grid .blog-item:nth-child(3){
        aspect-ratio: 16 / 9;
        grid-column: 1 / -1;
    }
    .blog-grid .blog-item:first-child .blog-content{
        padding: 1rem;
    }
    .blog-grid .blog-item:first-child .blog-content h3.blog-title{
        font-size: 1.125rem;
    }
    .pagination-area{
        margin: 1.5rem 0 2rem;
    }
    .slidebar-area{
        margin-bottom: 2rem;
    }
    .contact-row .contact-address, .contact-row .contact-form{
        box-shadow: 0px 3px 3px #c1c1c1;
        margin: 1rem 0;
        padding: 2rem;
    }
    .footer-top{
        padding: 1rem 0;
    }
    .footer-features-inner{
        display: block;
    }
    .footer-feature-item{
        border-right: 0;
        border-bottom: 1px #e5e5e5 dashed;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 1rem;
        vertical-align: middle;
    }
    .footer-features-inner .footer-feature-item:last-child{
        border-bottom: 0;
    }
    .footer-feature-item .features-icon{
        font-size: 2rem;
    }
    .footer-widget-area{
        padding: 3rem 0 1rem;
    }
}