:root{
    --th-color-main: #DA3F29;
    --th-color-red2: #EB301F;
    --th-color-red-dark: #B5211F;
    --th-color-navy: #142261;
    --th-color-navy2: #14316B;
    --th-color-footer: #00275A;
    --th-color-blue: #375ACE;
    --th-color-blue-bg: #EDF3FF;
    --th-color-cream: #FDF5E6;
    --th-color-cream-border: #F1CE93;
    --th-color-gray: #7A8091;
    --th-color-line: #ECECEC;
    --th-color-dark: #1C1C1C;
    --th-font-main: 'Inter', sans-serif;
}

@media screen{

/*
* GENERAL.
*/
*{
    margin: 0px;
    padding: 0px;
}
body{
    font-family: var(--th-font-main);
    font-size: 16px;
    line-height: 1.5;
    color: var(--th-color-dark);
    background: #FFFFFF;
}
a{
    text-decoration: none;
    color: inherit;
    transition: all ease-in-out .25s;
}
img{
    max-width: 100%;
    display: block;
}
ul{
    list-style: none;
}
.container{
    width: 1200px;
    max-width: 100%;
    margin: 0px auto;
    padding: 0px 15px;
    box-sizing: border-box;
}
.container-lg{
    width: 1400px;
    max-width: 100%;
    margin: 0px auto;
    padding: 0px 15px;
    box-sizing: border-box;
}
.center{
    text-align: center;
}
.red{
    color: var(--th-color-main);
}
.stars{
    color: #FFB400;
    font-size: 15px;
    letter-spacing: 1px;
}
.section-title{
    font-size: 42px;
    font-weight: 700;
    color: var(--th-color-navy);
    text-align: center;
    line-height: 1.5;
}
.section-title>span{
    color: var(--th-color-main);
}
.section-sub{
    font-size: 16px;
    color: var(--th-color-gray);
    text-align: center;
    max-width: 900px;
    margin: 14px auto 0px;
    line-height: 1.6;
}

/*
* BUTTON.
*/
.btn{
    display: inline-block;
    font-family: var(--th-font-main);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    padding: 15px 34px;
    border-radius: 40px;
    cursor: pointer;
    border: 1.5px solid transparent;
    text-align: center;
}
.btn i{
    margin-left: 8px;
    font-size: 13px;
}
.btn-main{
    background: var(--th-color-main);
    color: #FFFFFF;
}
.btn-main:hover{
    background: var(--th-color-red-dark);
}
.btn-outline{
    background: rgba(255,255,255,.7);
    color: var(--th-color-navy);
    border-color: #C9CEDB;
}
.btn-outline:hover{
    background: #FFFFFF;
}
.btn-block{
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.btn-glow{
    padding: 16px 42px;
    box-shadow: 0px 0px 0px 6px rgba(218,63,41,.18);
}
.btn.is-loading{
    pointer-events: none;
    opacity: .7;
}

/*
* FLIP CLOCK COUNTDOWN.
*/
.flip-clock{
    display: inline-flex;
    align-items: center;
}
.fc-box{
    position: relative;
    background: #1C1C1C;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 22px;
    min-width: 46px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px;
    box-sizing: border-box;
}
.fc-box:after{
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    height: 1px;
    background: rgba(255,255,255,.14);
}
.fc-dot{
    font-weight: 800;
    color: #1C1C1C;
    margin: 0px 6px;
}
.flip-mini .fc-box{
    font-size: 15px;
    min-width: 30px;
    padding: 5px 3px;
    border-radius: 5px;
    font-weight: 400;
}
.flip-mini .fc-dot{
    color: #FFFFFF;
    margin: 0px 3px;
}

/*
* ANNOUNCE BAR.
*/
.announce-bar{
    background: var(--th-color-navy2);
    color: rgba(255,255,255,.85);
    padding: 8px 0px;
    text-align: center;
    font-size: 13px;
}
.announce-bar b{
    color: #FFFFFF;
    font-weight: 700;
}
.announce-bar .dot{
    margin: 0px 8px;
    opacity: .5;
}

/*
* HERO + HEADER.
*/
.block-hero{
    position: relative;
    padding-bottom: 40px;
    padding-top: 22px;
}
.block-hero:after{
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all ease-in-out .3s;
    background-image: linear-gradient(180deg, transparent 0%, #fff 60%, #fff 100%);
}
.block-hero .container{
    position: relative;
    z-index: 2;
}
.site-plain-header{
    padding: 20px 0px;
}
.body-pd .block-hero{
    padding-top: 86px;
}
.header{
    position: relative;
    background: #FFFFFF;
    border-radius: 50px;
    box-shadow: 0px 10px 30px rgba(20,34,97,.08);
    padding: 0px 28px;
    height: 64px;
}
.header-fixed{
    position: fixed;
    z-index: 990000;
    top: 10px;
    width: 1170px;
    left: calc(50% - 585px);
    box-sizing: border-box;
    box-shadow: 0px 10px 30px rgba(20, 34, 97, .2);
}
.logged-in.admin-bar .header-fixed{
    top: 42px;
}
.header-logo{
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 15px;
    height: 64px;
}
.header-logo img{
    height: 100%;
}
.header-nav{
    margin-left: 180px;
    line-height: 64px;
}
.header-nav ul li{
    float: left;
    margin-right: 28px;
    position: relative;
}
.header-nav ul li a{
    font-size: 15px;
    font-weight: 600;
    color: var(--th-color-navy);
    text-transform: uppercase;
    letter-spacing: .2px;
}
.header-nav ul li a:hover,
.header-nav ul li a.active{
    color: var(--th-color-main);
}
.hot-badge{
    position: absolute;
    top: 8px;
    right: -25px;
    background: var(--th-color-main);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 400;
    padding: 2px 5px 2px;
    border-radius: 5px 0 5px 0px;
    line-height: 1;
}
.header-right{
    padding-top: 15px;
}
.header-hotline{
    float: left;
    display: flex;
    align-items: center;
    margin-right: 22px;
}
.header-hotline>i{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--th-color-main);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 10px;
}
.header-hotline-info{
    display: flex;
    flex-direction: column;
}
.header-hotline-info small{
    font-size: 11px;
    font-weight: 600;
    color: var(--th-color-navy);
}
.header-hotline-info a{
    font-size: 16px;
    font-weight: 700;
    color: var(--th-color-main);
    line-height: 1.1;
}
.header-cart{
    float: left;
    position: relative;
    width: 34px;
    height: 34px;
    border-left: 1px dashed #e8e8e8;
    color: var(--th-color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: 0px;
    padding-left: 10px;
}
.nav-toggle{
    display: none;
}
.header-cart em{
    position: absolute;
    top: -4px;
    right: -4px;
    line-height: 1;
    background: var(--th-color-main);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-content{
    padding-top: 82px;
}
.hero-left{
    width: 50%;
    /* padding-right: 20px; */
}
.hero-right{
    width: 50%;
    position: relative;
    text-align: right;
}
.hero-title{
    font-size: 46px;
    font-weight: 700;
    color: var(--th-color-navy);
    line-height: 1.5;
    letter-spacing: -1px;
    white-space: nowrap;
    margin-bottom: 10px;
}
.hero-title span{
    color: var(--th-color-main);
}
.hero-sub{
    font-size: 19px;
    color: #33405C;
    margin: 8px 0px 16px;
}
.hero-card{
    position: relative;
    background: linear-gradient(0deg, #ffffff, #FFF8EA);
    border: 1.5px solid var(--th-color-cream-border);
    border-radius: 28px;
    overflow: hidden;
    /* max-width: 548px; */
    box-shadow: 0px 14px 34px rgba(20,34,97,.08);
}
.hero-card-ribbon{
    display: flex;
    align-items: center;
    background: linear-gradient(90deg,#FFDD9E 0%,#fff8e6 65%);
    border: 1.5px solid #F3CD82;
    border-radius: 40px;
    margin: 14px 16px 0;
    padding: 6px 18px 6px 6px;
}
.ribbon-tag{
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg,#F6902A,#E13C1E);
    color: #FFFFFF;
    font-style: italic;
    font-weight: 800;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 20px;
    margin-right: 12px;
    white-space: nowrap;
    box-shadow: 0px 4px 10px rgba(225,60,30,.28);
}
.ribbon-tag i{
    margin-right: 5px;
    font-style: normal;
}
.ribbon-note{
    display: flex;
    align-items: center;
    color: var(--th-color-red-dark);
    font-weight: 700;
    font-size: 14px;
}
.ribbon-note img{
    width: 17px;
    display: inline-block;
    margin-right: 6px;
}
.hero-card-body{
    padding: 30px 20px 22px;
    display: flex;
    flex-flow: row wrap;
}
.hero-card-price{
    width: 55%;
    padding-right: 18px;
    box-sizing: border-box;
}
.hero-price-label{
    display: block;
    font-size: 14px;
    color: var(--th-color-gray);
    margin-bottom: 2px;
}
.hero-price-new{
    font-size: 49px;
    font-weight: 600;
    color: var(--th-color-main);
    line-height: 1;
    letter-spacing: -1px;
}
.hero-price-sub{
    display: flex;
    align-items: center;
    margin: 6px 0px 25px;
}
.hero-price-sub del{
    font-size: 15px;
    color: var(--th-color-gray);
    text-decoration: line-through;
}
.hero-price-off{
    display: inline-block;
    background: rgba(218,63,41,.12);
    font-size: 12px;
    font-weight: 800;
    color: var(--th-color-main);
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: 8px;
}
.hero-count-label{
    display: block;
    font-size: 13px;
    color: var(--th-color-gray);
    margin-bottom: 8px;
}
.hero-card-gift{
    width: 45%;
    border-left: 1.5px dashed #E5C994;
    padding-left: 18px;
    box-sizing: border-box;
    text-align: center;
}
.hero-card-gift-inner{
    position: relative;
    border: 2px solid #e89742;
    border-radius: 20px;
    margin-top: 20px;
    background: #fbf1e7;
    height: 250px;
}
.hero-card-gift-inner img{
    position: absolute;
    top: -25px;
    left: -22px;
    width: 270px;
    max-width: unset !important;
    margin: 0px auto;
}
.gift-label{
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    white-space: nowrap;
    background: var(--th-color-red-dark);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(218,63,41,.3);
}
.gift-desc{
    font-size: 13px;
    font-weight: 700;
    color: var(--th-color-navy);
    margin: 10px 0px 8px;
    text-align: center;
    line-height: 1.4;
}
.gift-desc b{
    color: var(--th-color-main);
}
.gift-value{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 12px;
    text-align: center;
}
.gift-value span{
    font-size: 13px;
    color: #33405C;
    text-align: left;
    line-height: 1.2;
}
.gift-value strong{
    font-size: 22px;
    color: var(--th-color-main);
    font-weight: 800;
}
.gift-value img{
    width: 74px;
    height: auto;
}
.hero-actions{
    margin: 26px 0px 20px;
}
.hero-actions .btn{
    margin-right: 12px;
}
.hero-rating{
    font-size: 15px;
    color: var(--th-color-gray);
}
.hero-rating .stars{
    margin-right: 6px;
}
.hero-rating b{
    color: var(--th-color-main);
}
.rating-count{
    color: var(--th-color-gray);
}
.rating-line{
    margin: 0px 6px;
    color: #C9CEDB;
}
.hero-thumb{
    width: calc(100% + 130px);
    max-width: unset;
    margin-left: auto;
    margin-top: 180px;
    height: auto;
}
.hero-seal{
    position: absolute;
    top: -2px;
    left: 63%;
    width: 138px;
    height: auto;
    filter: drop-shadow(0px 8px 16px rgba(0,0,0,.18));
}

/*
* PRODUCT DETAIL.
*/
.block-item .container{
    padding: 80px 0;
}
.block-product{
    background: #FFFFFF;
    padding: 80px 0px;
}
.product-gallery{
    width: 52%;
    padding-right: 46px;
}
.product-gallery-main{
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
}
.product-gallery-main-link{
    display: block;
    position: relative;
}
.product-gallery-main-link img{
    width: 100%;
    height: 562px;
    object-fit: cover;
    display: block;
}
.product-gallery-play{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(0,0,0,.2);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    backdrop-filter: blur(3px);
}
.product-gallery-main:hover .product-gallery-play{
    background: var(--th-color-main);
}
.product-gallery-play i{
    padding-left: 4px;
}
.product-gallery-thumbs{
    display: flex;
    margin: 0px -6px;
}
.product-gallery-thumbs.slick-initialized{
    display: block;
    position: relative;
    padding-bottom: 26px;
}
.product-gallery-thumbs .slick-dots{
    bottom: 0px;
}
.product-gallery-thumbs .slick-dots li{
    width: 8px;
    height: 8px;
    margin: 0px 4px;
}
.product-gallery-thumbs .slick-dots li button{
    width: 8px;
    height: 8px;
}
.product-gallery-thumbs .slick-dots li button:before{
    width: 8px;
    height: 8px;
    line-height: 8px;
    font-size: 8px;
    color: var(--th-color-line);
    opacity: 1;
}
.product-gallery-thumbs .slick-dots li.slick-active button:before{
    color: var(--th-color-main);
}
.product-gallery-thumb{
    position: relative;
    width: calc(25% - 12px);
    margin: 0px 6px;
    padding: 6px;
    border: 1px solid var(--th-color-line);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    height: 120px;
}
.product-gallery-thumb.active{
    border-color: var(--th-color-main);
}
.product-gallery-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.product-gallery-thumb-play{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,.3);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.product-gallery-thumb-play i{
    padding-left: 2px;
}
.product-info{
    width: 48%;
}
.product-title{
    font-size: 23px;
    font-weight: 600;
    color: var(--th-color-navy);
    line-height: 1.5;
    margin-bottom: 14px;
}
.product-sku{
    display: inline-block;
    font-size: 13px;
    color: var(--th-color-gray);
    border: 1px solid var(--th-color-line);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.product-meta{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--th-color-gray);
    margin-bottom: 20px;
}
.product-meta .stars{
    margin-right: 8px;
}
.product-meta b{
    color: var(--th-color-main);
    margin-right: 8px;
}
.product-gift{
    display: flex;
    align-items: center;
    background: linear-gradient(0deg, #ffffff, #FFF8EA);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
}
.product-gift img{
    width: 66px;
    height: 66px;
    object-fit: contain;
    margin-right: 14px;
    flex-shrink: 0;
}
.product-gift p{
    font-size: 15px;
    color: #333333;
    line-height: 1.5;
}
.product-gift b{
    color: var(--th-color-main);
}
.product-gift .red{
    color: var(--th-color-main);
    font-weight: 700;
}
.product-specs{
    margin-bottom: 24px;
}
.product-spec-row{
    display: flex;
    padding: 13px 0px;
    border-bottom: 1px dashed #DDDDDD;
    font-size: 15px;
}
.spec-label{
    width: 175px;
    flex-shrink: 0;
    color: var(--th-color-gray);
}
.spec-value{
    color: #222222;
    line-height: 1.5;
}
.spec-value b{
    font-weight: 700;
}
.product-color{
    display: flex;
    align-items: center;
    margin-bottom: 26px;
}
.product-color-label{
    font-size: 13px;
    font-weight: 600;
    color: var(--th-color-gray);
    letter-spacing: .5px;
    margin-right: 18px;
}
.color-item{
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    padding: 9px 18px;
    border: 1px solid var(--th-color-line);
    border-radius: 12px;
    margin-right: 12px;
    cursor: pointer;
    color: #444444;
}
.color-item.active{
    border-color: var(--th-color-main);
    background: #FDECEA;
    color: var(--th-color-main);
    font-weight: 600;
}
.color-dot{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.color-red{ background: #DA3F29; }
.color-blue{ background: #22C4E6; }
.color-mint{ background: #62C6A8; }
.color-purple{ background: #A25AC9; }
.product-price-box{
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: 14px;
    /* overflow: hidden; */
    margin-bottom: 26px;
    background: linear-gradient(0deg, #ffffff, #FBEFD3);
}
.product-price-box:before{
    position: absolute;
    content: '';
    top: -5px;
    right: 207px;
    width: 70px;
    z-index: 2;
    height: calc(100% + 10px);
    background: url(../images/bg/icon-flash.png) no-repeat center center;
    background-size: auto 100%;
}
.product-price{
    width: 56%;
    padding: 18px 26px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.product-price-new{
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--th-color-main);
    line-height: 1;
}
.product-price-sub{
    display: block;
    margin-top: 2px;
}
.product-price-sub del{
    font-size: 15px;
    color: var(--th-color-navy);
}
.product-price-off{
    font-size: 13px;
    font-weight: 700;
    color: var(--th-color-main);
    margin-left: 6px;
}
.product-flash{
    width: 280px;
    background: var(--th-color-red2);
    color: #FFFFFF;
    padding: 14px 18px 14px 46px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%, 0 100%);
    overflow: hidden;
    position: relative;
    border-radius: 0px 14px 14px 0px;
}
.product-flash:after{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%, 28% 100%);
    background: linear-gradient(145deg, #ff914d, var(--th-color-red2), var(--th-color-red2));
}
.product-flash-inner{
    position: relative;
    z-index: 2;
}
.flash-bolt{
    position: absolute;
    left: 55.5%;
    top: 50%;
    transform: translate(-52%,-50%);
    height: 86%;
    width: auto;
    z-index: 4;
    filter: drop-shadow(0px 3px 4px rgba(0,0,0,.18));
}
.flash-title{
    display: flex;
    align-items: center;
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.2px;
    margin-bottom: 8px;
    white-space: nowrap;
    padding-left: 22px;
}
.flash-title i{
    margin-right: 6px;
    color: #ffcd2a;
}
.flash-alarm{
    height: 19px;
    width: auto;
    display: inline-block;
    margin-right: 6px;
}
.flash-count{
    display: flex;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
}
.flash-count .flip-mini{
    margin-left: 8px;
}
.product-buy{
    display: flex;
    align-items: center;
}
.btn-buy{
    flex: 1;
    height: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 20px;
    margin-right: 14px;
    font-weight: 600;
}
.btn-buy small{
    display: block;
    font-size: 12px;
    font-weight: 30;
    opacity: 1;
    margin-top: 4px;
}
.btn-cart{
    width: 75px;
    height: 66px;
    border-radius: 66px;
    background: var(--th-color-navy2);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    border: 0px;
    padding: 0px;
    cursor: pointer;
    font-family: inherit;
}
.btn-cart:hover{
    background: var(--th-color-main);
}
.btn-cart.is-loading{
    pointer-events: none;
    opacity: .7;
}
.deal-item-buy{
    display: flex;
    align-items: center;
}
.deal-item-buy .js-buy-now{
    flex: 1;
}
.deal-item-buy .btn-cart{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    font-size: 18px;
    margin-left: 10px;
}

/*
* CART TOAST.
*/
.cart-toast{
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 16px);
    background: var(--th-color-navy);
    color: #FFFFFF;
    padding: 13px 24px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0px 12px 30px rgba(20,34,97,.25);
    opacity: 0;
    z-index: 99999;
    transition: all ease .3s;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.cart-toast i{
    color: #6BE38A;
}
.cart-toast.is-error i{
    color: #FFB4A8;
}
.cart-toast.show{
    opacity: 1;
    transform: translate(-50%, 0px);
}

/*
* TRUST BADGES.
*/
.block-trust{
    background: var(--th-color-blue-bg);
    padding: 72px 0px;
}
.trust-item{
    width: 25%;
    text-align: center;
    padding: 0px 15px;
}
.trust-icon{
    width: 60px;
    height: 60px;
    border-radius: 23px;
    background: #FFFFFF;
    /* box-shadow: 0px 8px 18px rgba(55,90,206,.14); */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px auto 16px;
    color: var(--th-color-blue);
    font-size: 24px;
}
.trust-item strong{
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--th-color-navy);
    margin-bottom: 4px;
}
.trust-sub{
    font-size: 14px;
    color: var(--th-color-gray);
}

/*
* DEAL SHOCK.
*/
.block-deal{
    position: relative;
    z-index: 1;
    background-size: 100% auto;
    padding: 196px 0px 120px;
}
.block-deal:after{
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all ease-in-out .3s;
    background-image: linear-gradient(0deg, transparent 0%, #fff 60%, #fff 100%);
}
.block-deal .container-lg{
    position: relative;
    z-index: 2;
}
.deal-frame{
    position: relative;
    background: url(../images/bg/bg-content-deal.png) no-repeat center center;
    background-size: 100% 100%;
    padding: 24px;
}
.deal-head{
    position: absolute;
    top: -75px;
    left: calc(50% - 381px);
    width: 762px;
    height: 76px;
    box-sizing: border-box;
    background: url(../images/bg/bg-head-deal.png) no-repeat center center;
    background-size: 100% 100%;
}
.deal-head:before{
    width: 174px;
    height: 174px;
    position: absolute;
    content: "";
    left: -25px;
    top: calc(50% - 87px);
    z-index: 2;
    background: url(../images/icons/icon-clock.png) no-repeat center center;
    background-size: 100%;
}
.deal-banner{
    height: 76px;
    display: inline-flex;
    align-items: center;
    position: relative;
}
.deal-banner-title{
    color: #fff0d1;
    font-size: 26px;
    font-weight: 700;
    margin-left: 130px;
    margin-right: 18px;
}
.deal-content{
    padding: 25px;
    background-color: #fff;
    border-radius: 20px;
}
.deal-slider{
    margin: 0px -12px;
}
.deal-slider .slick-track{
    display: flex !important;
    flex-flow: row wrap !important;
}
.deal-item{
    position: relative;
    background: #FFFFFF;
    border-radius: 14px;
    margin: 0px 12px;
    /*box-shadow: 0px 10px 26px rgba(20,34,97,.07);*/
    position: relative;
    box-sizing: border-box;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    height: auto !important;
    padding-bottom: 238px;
    background-color: rgb(249, 249, 249);
    transition: all ease-in-out .2s;
}
.deal-item:hover{
    border-color: var(--th-color-main);
}
.deal-item-sale{
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: var(--th-color-main);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 400;
    padding: 4px 10px;
    border-radius: 12px 12px 12px 0px;
}
.deal-item-thumb{
    height: 235px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
}
.deal-item-thumb img{
    max-height: 100%;
    width: auto;
    object-fit: contain;
}
.deal-item-content{
    padding: 16px;
    padding-bottom: 20px;
}
.deal-item-bottom{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 16px;
    padding-bottom: 20px;
}
.deal-item-title{
    font-size: 23px;
    font-weight: 600;
    color: var(--th-color-navy);
    margin-bottom: 12px;
    line-height: 1.5;
    min-height: 52px;
    transition: all ease-in-out .2s;
}
.deal-item:hover .deal-item-title{
    color: var(--th-color-main);
}
.deal-item-desc{
    min-height: 172px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--th-color-gray);
    line-height: 1.5;
}
.deal-item-desc p{
    margin-bottom: 12px;
}
.deal-item-opt{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.opt-label{
    font-size: 12px;
    font-weight: 600;
    color: var(--th-color-gray);
    letter-spacing: .5px;
    margin-right: 14px;
    width: 62px;
}
.deal-item-opt .color-dot{
    width: 16px;
    height: 16px;
    margin-right: 12px;
    cursor: pointer;
    transition: box-shadow ease-in-out .15s;
}
.deal-item-opt .color-dot.active{
    box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 3px var(--th-color-main);
}
.size-chip{
    display: inline-block;
    font-size: 13px;
    padding: 8px 16px;
    border: 1px solid var(--th-color-line);
    border-radius: 8px;
    margin-right: 10px;
    color: #555555;
    cursor: pointer;
    transition: all ease-in-out .15s;
}
.size-chip:hover{
    border-color: var(--th-color-main);
    color: var(--th-color-main);
}
.size-chip.active{
    border-color: var(--th-color-main);
    color: var(--th-color-main);
    font-weight: 600;
    background: #FDECEA;
}
.deal-item-price{
    /* display: flex; */
    align-items: baseline;
    margin: 15px 0px 20px;
}
.deal-item-price>span{
    display: block;
}
.deal-price-new{
    font-size: 30px;
    font-weight: 600;
    color: var(--th-color-main);
    margin-right: 12px;
}
.deal-price-sub del{
    font-size: 14px;
    color: var(--th-color-gray);
}
.deal-price-off{
    font-size: 13px;
    font-weight: 700;
    color: var(--th-color-main);
    background: #FDECEA;
    padding: 2px 7px;
    border-radius: 5px;
    margin-left: 4px;
}

/*
* KOL / KOC.
*/
.block-kol{
    background: #FFFFFF;
    padding: 100px 0px;
}
.kol-slider{
    margin: 40px -12px 34px;
}
.kol-slider .slick-track{
    display: flex !important;
    flex-flow: row wrap !important;
}
.kol-slider .slick-track .slick-slide{
    height: auto !important;
}
.kol-slider .slick-track .slick-slide>a{
    height: 100% !important;
}

.kol-item{
    margin: 0px 12px;
}
.kol-item-thumb{
    display: block;
    position: relative;
    height: auto !important;
    border-radius: 18px;
    overflow: hidden;
}
.kol-item-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kol-item-thumb:after{
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 42%;
    background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
    z-index: 1;
}
.kol-item-play{
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--th-color-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0px 6px 16px rgba(0,0,0,.25);
    transition: all ease-in-out .3s;
}
.kol-item:hover .kol-item-play{
    color: #fff;
    background-color: var(--th-color-main);
}
.kol-item-info{
    position: absolute;
    left: 18px;
    bottom: 20px;
    z-index: 3;
}
.kol-item-info strong{
    display: block;
    font-size: 17px;
    font-weight: 400;
    color: #FFFFFF;
}
.kol-item-info small{
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,.9);
}
.kol-item-info small i{
    margin-right: 5px;
}

/*
* REVIEW.
*/
.block-review{
    padding: 100px 0px 100px;
    background: linear-gradient(180deg, #EDF3FF 0%, rgba(255, 255, 255, 0.00) 25.87%);
}
.review-bubble{
    display: inline-flex;
    width: 58px;
    height: 52px;
    border-radius: 16px 16px 16px 4px;
    background: #DCE7FB;
    color: var(--th-color-blue);
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}
.review-head{
    margin-bottom: 36px;
}
.review-logo{
    height: 74px;
    margin: 0 auto;
}
.review-panel{
    background: #E9F0FB;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid #BDD2FC;
}
.review-slider{
    margin: 0px -10px;
}
.review-item{
    margin: 0px 10px;
}
.review-item a{
    display: block;
    border-radius: 16px;
    overflow: hidden;
}
.review-item img{
    width: 100%;
    height: auto;
}

/*
* CERTIFICATE.
*/
.block-cert{
    background: #FFFFFF;
    padding: 100px 0px 100px;
}
.cert-head{
    margin-bottom: 40px;
}
.cert-logo{
    height: 74px;
    width: auto;
    margin: 0px auto 0px;
}
.cert-slider{
    margin: 0px -12px;
}
.cert-item{
    margin: 0px 12px;
    text-align: center;
}
.cert-item-thumb{
    position: relative;
    display: block;
    background: #FFFFFF;
    border: 1px solid #D8D8D8;
    border-radius: 16px;
    overflow: hidden;
    height: 423px;
}
.cert-item-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.cert-item-overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 28px;
    transition: all ease-in-out .3s;
}
.cert-item:hover .cert-item-overlay{
    opacity: 1;
    visibility: visible;
}
.cert-item-name{
    font-size: 16px;
    font-weight: 400;
    color: var(--th-color-navy);
    margin-top: 20px;
    line-height: 1.5;
    padding: 0 20px;
}

/*
* KIEM DINH BADGES.
*/
.block-badges{
    position: relative;
    z-index: 1;
    background-size: cover;
    padding: 30px 0px 200px;
}
.block-badges .container{
    position: relative;
    z-index: 2;
}
.block-badges:after{
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all ease-in-out .3s;
    background-image: linear-gradient(0deg, transparent 0%, #fff 100%);
}
.badge-item{
    width: 25%;
    text-align: center;
    padding: 0px 15px;
}
.badge-item img{
    height: 120px;
    width: auto;
    object-fit: contain;
    margin: 0px auto 18px;
}
.badge-item span{
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: var(--th-color-navy);
}

/*
* FOOTER.
*/
.footer{
    position: relative;
    z-index: 1;
    background-color: var(--th-color-footer);
    color: rgba(255,255,255,.75);
    padding-top: 55px;
}
.footer .container{
    position: relative;
    z-index: 2;
}
.footer:after{
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #fff url(../images/bg/bg-main-blue.png) center center;
    background-size: 700px auto;
    opacity: .1;
}
.footer-inner{
    padding-bottom: 34px;
}
.footer-col{
    padding-right: 40px;
}
.footer-about{
    width: 34%;
}
.footer-contact{
    width: 30%;
}
.footer-fanpage{
    width: 36%;
    padding-right: 0px;
}
.footer-logo{
    display: block;
    height: 74px;
    margin-bottom: 18px;
}
.footer-logo img{
    height: 100%;
    max-width: 100%;
    filter: brightness(0) invert(1);
}
.footer-about p{
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 30px;
}
.footer-social a{
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: 13px;
    overflow: hidden;
}
.footer-social a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer-title{
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: .5px;
    margin-bottom: 20px;
}
.footer-contact ul li{
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
    display: flex;
}
.footer-contact ul li i{
    color: #9FB3D9;
    margin-right: 10px;
    margin-top: 4px;
    width: 16px;
    flex-shrink: 0;
}
.fanpage-card{
    border-radius: 8px;
    overflow: hidden;
}
.fanpage-top{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.fanpage-avt{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EAF0FB;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}
.fanpage-avt img{
    width: 32px;
    height: auto;
}
.fanpage-name{
    flex: 1;
    line-height: 1.5;
}
.fanpage-name strong{
    display: block;
    font-size: 18px;
    color: var(--th-color-navy2);
    font-weight: 600;
}
.fanpage-name small{
    font-size: 12px;
    color: #777777;
}
.fanpage-msg{
    font-size: 13px;
    color: #333333;
    border: 1px solid #DDDDDD;
    padding: 5px 14px;
    border-radius: 6px;
    font-weight: 600;
    background: var(--th-color-blue-bg);
}
.fanpage-desc{
    font-size: 12.5px;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 12px;
}
.fanpage-banner{
    width: 100%;
    border-radius: 8px;
}
.footer-bottom{
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 20px 0px;
    font-size: 13px;
}

/*
* FIXED CONTACT.
*/
.fixed-contact{
    position: fixed;
    bottom: -15px;
    right: 20px;
    transform: translateY(-50%);
    z-index: 90;
}
.fixed-contact-item{
    display: flex;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 16px;
    box-shadow: 0px 6px 16px rgba(0,0,0,.2);
}
.fixed-contact-item img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fixed-phone{ animation: contactPulse 1.6s infinite; }
@keyframes contactPulse{
    0%{ box-shadow: 0px 0px 0px 0px rgba(218,63,41,.4); }
    70%{ box-shadow: 0px 0px 0px 12px rgba(218,63,41,0); }
    100%{ box-shadow: 0px 0px 0px 0px rgba(218,63,41,0); }
}

/*
* BACK TO TOP.
*/
.back-to-top{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0px;
    background: var(--th-color-navy);
    color: #FFFFFF;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 6px 16px rgba(0,0,0,.2);
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity ease .3s, transform ease .3s, background ease .2s, visibility ease .3s;
}
.back-to-top.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.back-to-top:hover{
    background: var(--th-color-main);
}

/*
* POPUP ORDER.
*/
.popup-order{
    width: 760px;
    max-width: calc(100vw - 24px);
    background: #FFFFFF;
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
}
.popup-order-head{
    background: linear-gradient(135deg, var(--th-color-main), var(--th-color-red-dark));
    color: #FFFFFF;
    padding: 22px 28px;
    text-align: center;
}
.popup-order-head h3{
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.popup-order-head h3 i{
    color: #FFD166;
    font-size: 19px;
}
.popup-order-head p{
    font-size: 13.5px;
    margin-top: 6px;
    line-height: 1.5;
    opacity: .92;
}
.popup-order-body{
    display: flex;
    align-items: stretch;
}
.popup-order-left{
    width: 260px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 26px 22px;
    background: var(--th-color-cream);
    border-right: 1px solid var(--th-color-cream-border);
}
.popup-order-right{
    flex: 1;
    min-width: 0;
}
.popup-order-product{
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--th-color-cream-border);
    margin-bottom: 18px;
}
.popup-order-product-img{
    width: 108px;
    height: 108px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--th-color-cream-border);
    background: #FFFFFF;
    display: block;
    margin: 0 auto 14px;
}
.popup-order-product-title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--th-color-navy);
    line-height: 1.35;
    margin-bottom: 6px;
}
.popup-order-product-color,
.popup-order-product-size{
    display: block;
    font-size: 12.5px;
    color: var(--th-color-gray);
    margin-top: 3px;
}
.popup-order-product-color b,
.popup-order-product-size b{
    color: var(--th-color-navy);
    font-weight: 700;
}
.popup-order-price{
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--th-color-cream-border);
    margin-bottom: 18px;
}
.popup-order-price-new{
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--th-color-main);
}
.popup-order-price-old{
    font-size: 13px;
    color: var(--th-color-gray);
}
.popup-order-trust{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.popup-order-trust span{
    font-size: 12px;
    font-weight: 600;
    color: var(--th-color-navy);
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    line-height: 1.3;
}
.popup-order-trust i{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(218,63,41,.1);
    color: var(--th-color-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.popup-order-form{
    padding: 26px 28px;
}
.form-row{
    margin-bottom: 14px;
}
.form-row input,
.form-row select{
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1px solid var(--th-color-line);
    border-radius: 10px;
    font-family: var(--th-font-main);
    font-size: 15px;
    outline: none;
}
.form-row input:focus,
.form-row select:focus{
    border-color: var(--th-color-main);
}
.popup-order-form .wpcf7-form p{
    margin-bottom: 14px;
}
.popup-order-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.popup-order-form textarea,
.popup-order-form select{
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1px solid var(--th-color-line);
    border-radius: 10px;
    font-family: var(--th-font-main);
    font-size: 15px;
    outline: none;
    margin-top: 4px;
}
.popup-order-form input:focus,
.popup-order-form textarea:focus,
.popup-order-form select:focus{
    border-color: var(--th-color-main);
}
.popup-order-form .wpcf7-submit{
    width: 100%;
    background: var(--th-color-main);
    color: #FFFFFF;
    border: 0px;
    padding: 15px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    font-family: var(--th-font-main);
    margin-top: 4px;
}
.popup-order-form .wpcf7-submit:hover{
    background: var(--th-color-red-dark);
}
.popup-order-form .wpcf7-response-output{
    border-radius: 8px;
    margin: 10px 0px 0px;
    font-size: 14px;
    padding: 8px 12px;
}
.popup-order-form .wpcf7-spinner{
    margin: 6px auto 0px;
    display: block;
}

/*
* SLICK ARROWS.
*/
.slick-prev,
.slick-next{
    width: 46px;
    height: 46px;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0px 6px 16px rgba(20,34,97,.14);
}
.slick-prev:hover,
.slick-next:hover{
    background: var(--th-color-main);
}
.slick-prev:before,
.slick-next:before{
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    color: var(--th-color-navy);
    opacity: 1;
    font-size: 16px;
}
.slick-prev:hover:before,
.slick-next:hover:before{
    color: #FFFFFF;
}
.slick-prev{ left: -20px; }
.slick-next{ right: -20px; }
.slick-prev:before{ content: "\f053"; }
.slick-next:before{ content: "\f054"; }

/*
* CART / CHECKOUT (TỐI GIẢN).
*/
body.page-cart-checkout{
    position: relative;
    min-height: 100vh;
    background-color: var(--th-color-blue-bg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body.page-cart-checkout:after{
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all ease-in-out .3s;
    background-image: linear-gradient(180deg, transparent 0%, #fff 40%, #fff 100%);
}
.cart-checkout-wrap{
    position: relative;
    z-index: 2;
}
.cart-checkout-header{
    padding: 30px 0px;
    text-align: center;
}
.cart-checkout-logo{
    display: inline-block;
}
.cart-checkout-logo img{
    max-height: 100px;
    margin: 0px auto;
}
.cart-checkout-main{
    padding: 10px 0px 80px;
}
.cart-checkout-card{
    background: rgba(255,255,255,.8);
    border-radius: 20px;
    padding: 26px;
    box-sizing: border-box;
}
.cart-checkout-title{
    text-align: center;
    color: var(--th-color-navy);
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.5;;
}

/*
* CHECKOUT (KHỐI) - full width cho SĐT/Tỉnh thành/Phường xã, gộp Tên+Họ thành 1 ô "Họ và tên".
* Field "Họ" (last_name) ẩn ở đây bằng CSS, còn việc đồng bộ giá trị + đổi nhãn ô "Tên" nằm ở
* js/checkout-name-merge.js (cần JS vì phải sửa text label thật + giữ field "Họ" hợp lệ dù ẩn).
*/
.wc-block-components-address-form__phone,
.wc-block-components-select-input-huydev-province,
.wc-block-components-select-input-huydev-district,
.wc-block-components-select-input-huydev-ward,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__first_name{
    flex: 0 0 100% !important;
}
.wc-block-components-address-form__last_name{
    display: none !important;
}
/* Họ và tên/Số điện thoại giờ nhập ở box "Thông tin liên lạc" (input giả, xem
js/checkout-contact-merge.js) - ẩn 2 field thật này ở box địa chỉ, giá trị vẫn được đồng bộ
sang nên vẫn gửi đi bình thường khi đặt hàng. */
.wc-block-components-address-form__first_name,
.wc-block-components-address-form__phone{
    display: none !important;
}
/* Cửa hàng chỉ bán/giao trong nước - ẩn field "Quốc gia/Khu vực" (mặc định đã là "Việt Nam"),
giá trị mặc định vẫn gửi đi bình thường khi đặt hàng, không cần khách bấm chọn. */
.wc-block-components-address-form__country{
    display: none !important;
}
/* Quốc gia ẩn nhưng vẫn nằm nguyên vị trí đầu tiên trong DOM (display:none không đổi thứ tự DOM) -
CSS margin-top:0 mặc định của Woo chỉ áp cho field ":first-child" thật sự trong DOM, nên field hiện
ra ĐẦU TIÊN trên màn hình lúc này (Tỉnh thành - order:3, xem ghi chú "order" bên dưới) bị thừa
khoảng cách phía trên do không còn được tính là field đầu. Ép về 0 cho khớp lại - áp cả khối wrapper
ngoài lẫn khối ".wc-blocks-components-select" bên trong (Woo đặt margin-top ở khối nào chưa chắc). */
.wc-block-components-select-input-huydev-province,
.wc-block-components-select-input-huydev-province .wc-blocks-components-select{
    margin-top: 0 !important;
}
/* Woo Blocks không cho tuỳ chỉnh thứ tự field qua PHP (chỉ field lõi có "index" cố định) -
đổi thứ tự hiển thị bằng CSS flexbox "order" (chỉ ảnh hưởng vẽ giao diện, không đụng DOM nên
an toàn với React). Đặt "order" tường minh cho TẤT CẢ field còn hiển thị (không dựa vào mặc định
0 rồi so DOM) để chắc chắn đúng thứ tự: Quốc gia, Họ và tên, Số điện thoại, Tỉnh thành, Phường xã,
Địa chỉ.
"order" chỉ có tác dụng khi cha đang là flex container - Woo CHỈ tự bật flex cho
.wc-block-components-address-form ở container đủ rộng (≥700px), màn hình hẹp/mobile Woo cố tình
render theo khối thường (không flex) nên "order" bị vô hiệu, field lại hiện theo đúng thứ tự
DOM gốc (vd. "Địa chỉ" nhảy lên đầu) - ép "display:flex" luôn ở đây (không giới hạn ≥700px) để
"order" có tác dụng mọi kích thước màn hình. An toàn vì MỌI field còn hiển thị trong form này đều
đã bị ép flex:0 0 100% (xem rule bên trên) - luôn xếp dọc 1 field/dòng dù có flex hay không, ép
flex chỉ đổi THỨ TỰ xếp dọc, không đổi bố cục cột.
LƯU Ý: class ".wc-block-components-address-form" bị Woo dùng LẠI cho cả box "Thông tin liên lạc"
(input giả Họ và tên/SĐT chèn ở đó - checkout-contact-merge.js), không riêng gì box địa chỉ - chọn
lố class trần sẽ ép luôn box đó thành flex 2 cột (input giả không có flex:0 0 100% nên vỡ layout,
đã gặp thực tế). Phải giới hạn selector vào ĐÚNG khối billing/shipping-fields (chỉ box địa chỉ
thật mới nằm trong 2 khối cha này). */
.wc-block-checkout__billing-fields .wc-block-components-address-form,
.wc-block-checkout__shipping-fields .wc-block-components-address-form{
    display: flex !important;
    flex-wrap: wrap !important;
}
.wc-block-components-address-form__country{ order: 0; }
.wc-block-components-address-form__first_name{ order: 1; }
.wc-block-components-address-form__phone{ order: 2; }
.wc-block-components-select-input-huydev-province{ order: 3; }
.wc-block-components-select-input-huydev-district{ order: 4; }
.wc-block-components-select-input-huydev-ward{ order: 5; }
.wc-block-components-address-form__address_1{ order: 6; }

/*
* CHECKOUT (KHỐI) - ô tìm kiếm (combobox gõ để lọc) cho Tỉnh thành/Quận huyện/Phường xã, thay cho
* <select> gốc chỉ render dropdown thường (xem js/checkout-address-search.js - lý do kỹ thuật + tại
* sao an toàn với React re-render nằm ở comment đầu file đó, không lặp lại ở đây).
*
* <select> gốc (".wc-blocks-components-select", khối bọc label+select+icon mũi tên - class CHUNG
* của Woo, không riêng field nào) chỉ ẩn ở đây, KHÔNG xoá khỏi DOM - vẫn nhận value/validate/gửi đi
* bình thường.
*   - visibility:hidden (không phải display:none) để tự loại hẳn khỏi tab order (khác opacity:0
*     vẫn tab tới được) - đúng ý muốn, vì ô input mới (chèn ngay sau bằng JS) đã nằm đúng chỗ của
*     nó trong thứ tự tab, không cần <select> ẩn tham gia tab nữa.
*   - position:absolute để gỡ khỏi luồng chảy, không chừa khoảng trắng thừa phía trên ô tìm kiếm
*     mới (nếu chỉ visibility:hidden, khối vẫn giữ chỗ trống theo kích thước cũ).
*   - Chỉ nhắm đúng ".wc-blocks-components-select" (không phải khối bọc ngoài cùng của field) vì
*     khối lỗi validate (".wc-block-components-validation-error") là ANH EM của nó, không phải con -
*     ẩn đúng phạm vi này thì lỗi field vẫn tự hiện ra bình thường (ngay dưới ô tìm kiếm mới) khi
*     field không hợp lệ.
*/
.wc-block-components-select-input-huydev-province .wc-blocks-components-select,
.wc-block-components-select-input-huydev-district .wc-blocks-components-select,
.wc-block-components-select-input-huydev-ward .wc-blocks-components-select{
    position: absolute;
    visibility: hidden;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Đề phòng Woo đặt overflow:hidden ở khối bọc field (chưa thấy nhưng không chắc) - panel danh sách
bên dưới cần tràn ra ngoài khối này để hiện đè lên field kế tiếp. */
.wc-block-components-select-input-huydev-province,
.wc-block-components-select-input-huydev-district,
.wc-block-components-select-input-huydev-ward{
    overflow: visible;
}

.huydev-combo{
    position: relative;
    /* Cách field phía trên 1 khoảng (khớp margin-top mặc định Woo tự đặt giữa các field khác,
    vd. Địa chỉ) - riêng combo của Tỉnh thành (field hiện ra ĐẦU TIÊN) được ép về 0 ở rule riêng
    ngay dưới, giống cách khối <select> gốc của nó cũng bị ép margin-top:0 ở trên. */
    margin-top: 12px;
}
.wc-block-components-select-input-huydev-province .huydev-combo{
    margin-top: 0;
}
.huydev-combo-control{
    position: relative;
}
.huydev-combo-input{
    width: 100%;
    box-sizing: border-box;
    padding: 13px 40px 13px 16px;
    border: 1px solid var(--th-color-dark);
    border-radius: 4px;
    font-family: var(--th-font-main);
    font-size: 16px;
    color: var(--th-color-dark);
    background: #fff;
    outline: none;
}
.huydev-combo-input::placeholder{
    color: var(--th-color-dark);
    opacity: 1;
}
.huydev-combo-input:disabled::placeholder{
    color: var(--th-color-gray);
}
.huydev-combo-input:focus{
    border-color: #000;
    box-shadow: inset 0 0 0 1px #000;
}
/* Khoá (chưa chọn field cha, vd. Phường xã lúc Tỉnh thành còn trống) - input disabled thật (xem
JS) nên tự không bấm/gõ được, ở đây chỉ cần tô lại cho rõ là đang khoá. */
.huydev-combo-input:disabled{
    background: #ebebeb;
    color: var(--th-color-gray);
    cursor: not-allowed;
    border-color: #c5c5c5;
}
.huydev-combo-icon{
    position: absolute;
    top: 50%;
    right: 14px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    fill: var(--th-color-gray);
    pointer-events: none;
}
/* Mặc định hiện mũi tên (báo đây là field chọn, giống <select>) - bấm vào (".is-open") mới đổi
sang kính lúp (báo giờ gõ được để tìm). Khoá thì luôn giữ mũi tên dù lỡ có ".is-open" (phòng hờ -
input disabled thật ra không mở panel được, xem updateLockState() trong JS). */
.huydev-combo-icon--search{
    display: none;
}
.huydev-combo.is-open .huydev-combo-icon--chevron{
    display: none;
}
.huydev-combo.is-open .huydev-combo-icon--search{
    display: block;
}
.huydev-combo.is-locked .huydev-combo-icon--chevron{
    display: block;
}
.huydev-combo.is-locked .huydev-combo-icon--search{
    display: none;
}
.huydev-combo-panel{
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--th-color-line);
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(20, 34, 97, .12);
    overflow: hidden;
}
.huydev-combo.is-open .huydev-combo-panel{
    display: block;
}
.huydev-combo-list{
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 280px;
    overflow-y: auto;
}
.huydev-combo-option{
    padding: 11px 16px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--th-color-dark);
    cursor: pointer;
}
.huydev-combo-option__suffix{
    color: var(--th-color-gray);
    font-size: 13px;
}
.huydev-combo-option__suffix:before{
    content: ' — ';
}
.huydev-combo-option.is-active,
.huydev-combo-option:hover{
    background: var(--th-color-blue-bg);
}
.huydev-combo-option.is-selected .huydev-combo-option__main{
    font-weight: 600;
    color: var(--th-color-navy);
}
.huydev-combo-empty,
.huydev-combo-hint{
    padding: 11px 16px;
    font-size: 14px;
    color: var(--th-color-gray);
}

/* Input "giả" Họ và tên/Số điện thoại chèn vào box "Thông tin liên lạc" (js/checkout-contact-merge.js)
dùng đúng class "wc-block-components-text-input" của Woo nên tự có style/label nổi giống các
field thật khác - không cần CSS riêng ở đây. */

/* Field Email - ẩn hẳn theo yêu cầu (khách sẽ không nhập được email thật, đơn tự dùng email giả
qua fillEmailFallback() trong checkout-contact-merge.js, xem class được gắn ở đó). */
.huydev-hidden-email{
    display: none !important;
}

/* Ẩn khối "Tùy chọn vận chuyển" - hiện chỉ có đúng 1 phương thức (Miễn phí vận chuyển) nên không
có gì để khách thật sự chọn, ẩn bớt cho gọn checkout. Method vẫn tự động được chọn sẵn (radio duy
nhất, mặc định checked) nên đơn vẫn gửi đi bình thường dù ẩn hiển thị - chỉ ẩn CSS, không xoá/đụng
DOM. Nếu sau này thêm phương thức vận chuyển thứ 2 trở lên, PHẢI bỏ ẩn lại để khách chọn được.
LƯU Ý: block bọc CẢ tiêu đề "Tùy chọn vận chuyển" lẫn khung chọn là "...shipping-method-S-block"
(số nhiều "methodS") - "...shipping-method-block" (số ít, không có "s") là 1 block KHÁC nằm lồng
bên trong (khung danh sách radio, không có tiêu đề), chọn nhầm bản số ít nên lần trước không ẩn
được gì cả. */
.wp-block-woocommerce-checkout-shipping-methods-block{
    display: none !important;
}

/* Ẩn checkbox "Sử dụng cùng địa chỉ cho thanh toán" - site chỉ thu 1 địa chỉ duy nhất (đơn COD,
không tách billing/shipping thật sự), checkbox mặc định đã tích sẵn (billing = shipping) nên ẩn đi
không ảnh hưởng gì, khách không cần thấy/bấm gì ở đây. */
.wc-block-checkout__use-address-for-billing{
    display: none !important;
}

/*
* TRANG "ĐƠN HÀNG ĐÃ NHẬN" - bảng chi tiết đơn + 2 khối địa chỉ, border chỉ trên/dưới mỗi hàng.
*/
.woocommerce-order-details__title,
.woocommerce-column__title{
    font-family: var(--th-font-main);
    color: var(--th-color-navy);
    font-size: 20px;
    font-weight: 600;
    margin: 34px 0px 16px;
}
.woocommerce-table--order-details{
    width: 100%;
    border-collapse: collapse;
    font-family: var(--th-font-main);
    font-size: 15px;
    color: var(--th-color-dark);
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td{
    border: 0px;
    border-bottom: 1px solid var(--th-color-line);
    padding: 14px 6px;
    text-align: left;
    vertical-align: top;
}
.woocommerce table.shop_table tfoot th,
.woocommerce-table--order-details td strong{
    font-weight: 600 !important;
}
.woocommerce-table--order-details thead th{
    color: var(--th-color-gray);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-bottom-width: 2px;
}
.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details tfoot td{
    text-align: right;
}
.woocommerce-table--order-details tfoot tr:last-of-type th,
.woocommerce-table--order-details tfoot tr:last-of-type td{
    border-bottom: 0px;
    color: var(--th-color-navy);
    font-weight: 700;
}
.woocommerce-thankyou-order-received{
    margin-bottom: 15px;
    color: #18a31d;
}
.woocommerce-thankyou-order-details{
    margin-bottom: 12px !important;
}
.woocommerce-customer-details .woocommerce-columns--addresses{
    padding: 0px !important;
    width: 100% !important;
    display: block !important;
}
.woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column{
    width: 100% !important;
    display: block !important;
    padding: 0px !important;
    margin-bottom: 30px !important;
}
.woocommerce-order-overview{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 16px 0px;
    padding-bottom: 0px;
    margin: 0px 0px 6px;
    border-top: 1px solid var(--th-color-line);
    border-bottom: 1px solid var(--th-color-line);
}
.woocommerce-order-overview li{
    padding: 0px 20px 0px 0px;
    font-size: 14px;
    color: var(--th-color-dark);
    margin-bottom: 16px;
}
.woocommerce-order-overview li strong{
    display: block;
    color: #333;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
}

.woocommerce-columns--addresses{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 6px;
}
.woocommerce-columns--addresses .woocommerce-column{
    flex: 1 1 280px;
    box-sizing: border-box;
}
.woocommerce-columns--addresses address{
    font-style: normal;
    line-height: 1.9;
    color: var(--th-color-dark);
    font-size: 14px;
}
.huydev-address-row{
    margin: 0px 0px 6px;
}
.huydev-address-row strong{
    color: var(--th-color-navy);
    font-weight: 700;
}
/**/
.wc-block-components-button:not(.is-link){
    /*background: var(--th-color-main) !important;*/
    /*border-radius: 8px !important;*/
}
.wc-block-components-button:not(.is-link):hover{
    /*background: var(--th-color-navy) !important;*/
}
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link){
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 10px 0px !important;
}

/* Checkout mobile: bỏ khối "Tóm tắt đơn hàng" thu gọn ở đầu trang (chỉ Woo tự hiện ở màn hẹp,
< 700px) - giữ nguyên khối tóm tắt đầy đủ ở cuối trang. Woo dùng chung 1 class
".wp-block-woocommerce-checkout-order-summary-block" cho CẢ 2 khối (cơ chế Slot/Fill, khối dưới
cùng cũng mang class này) - phải chọn thêm class phụ ".checkout-order-summary-block-fill-wrapper"
(chỉ khối Ở TRÊN mới có, tự thấy trong CSS gốc của Woo) thì mới không ẩn nhầm khối dưới. */
@media screen and (max-width: 796px){
    .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper{
        display: none !important;
    }
}

/* Checkout: ẩn dòng "Bằng cách tiến hành mua hàng, bạn đồng ý với Điều khoản dịch vụ và Chính
sách bảo mật..." (block Điều khoản của Woo Checkout, không có ô tick, chỉ hiển thị text). */
.wp-block-woocommerce-checkout-terms-block{
    display: none !important;
}

}

/* Dòng "(đã bao gồm VAT)" thêm dưới "Tổng" - ở giỏ hàng/checkout (chèn bằng
js/checkout-cart-vat-note.js, dùng lại class __description có sẵn của Woo) và ở bảng "Chi tiết
đơn hàng" trang "Đơn hàng đã nhận"/tài khoản (chèn bằng filter woocommerce_get_order_item_totals
trong functions.php, class .huydev-vat-note riêng vì bảng đó không có class __description). */
.wc-block-components-totals-footer-item .huydev-vat-note,
.huydev-vat-note{
    color: #333;
    font-weight: 400;
    text-align: right;
}