html {
    color: #484c52;
    color: #000;
}
:root {
    --main-color: #239843;
    --extra-color: #076c39;
    --yellow-color: #ffcb1f;
    --border-color: #eeeeee;
    --text-color: rgb(72, 76, 82);
}
@font-face {
    font-weight: 400;
    font-style: normal;
    font-family: "Helveticaneue";
    src: url("../fonts/helveticaneue.ttf");
    src: url("../fonts/helveticaneue.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "Helveticaneue";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/helveticaneuebold.ttf");
    src: url("../fonts/helveticaneuebold.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "Helveticaneue";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/helveticaneuemedium.ttf");
    src: url("../fonts/helveticaneuemedium.ttf") format("truetype");
    font-display: swap;
}
body,
div,
dl,
ul,
li,
h1,
h2,
h3,
figure,
form,
input,
button,
p,
blockquote {
    margin: 0;
    padding: 0;
}
body {
    font:
        14px/18px Helveticaneue,
        Arial,
        "DejaVu Sans",
        "Liberation Sans",
        Freesans,
        sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-text-size-adjust: 100%;
}
@media all and (max-width: 700px) {
    body {
        font:
            14px/18px Helveticaneue,
            Arial,
            "DejaVu Sans",
            "Liberation Sans",
            Freesans,
            sans-serif;
    }
}
th {
    margin: 0;
}
a {
    color: #000;
    text-decoration: none;
    -moz-transition: all 0.2s ease-in 0;
    -webkit-transition: all 0.2s ease-in;
    -webkit-transition-delay: 0;
    transition: all 0.2s ease-in 0;
}
a:hover {
    color: var(--main-color);
}
/* height:auto giữ tỉ lệ ảnh — đúng, nhưng KHÔNG dùng !important.
   !important thắng mọi rule thường bất kể độ ưu tiên, nên mọi chỗ muốn cắt ảnh theo
   khung cố định (thumbnail giỏ hàng, ảnh tin liên quan, thẻ dự án…) đều bị vô hiệu và
   lòi nền phía dưới. Thuộc tính height="..." trong thẻ <img> của WordPress chỉ là
   presentational attribute, độ ưu tiên 0, nên "height: auto" thường vẫn thắng nó — đó
   là việc duy nhất mà !important ở đây thực sự cần làm. */
img {
    border: 0;
    max-width: 100%;
    height: auto;
    transition: 0.4s;
}
li {
    list-style: none;
}

th {
    text-align: left;
}
h1,
h2,
h3 {
    font-size: 100%;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
}
input,
button {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: none;
}
input,
button {
    *font-size: 100%;
}
.clear {
    clear: both;
}
.cls::after {
    content: "";
    display: block;
    clear: both;
}
.hidden {
    display: none;
}
.scroll_bar::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ebebeb;
}
.scroll_bar::-webkit-scrollbar {
    width: 8px;
    background-color: #ebebeb;
    border-radius: 10px;
}
.scroll_bar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: scroll center center var(--main-color);
    background: scroll center center #bcc0c4;
    border: 1px solid #ebebeb;
}
.right {
    float: right;
}
.fr {
    float: right;
}
.benmarch {
    display: none;
}
.scroll-bar::-webkit-scrollbar-track {
    border-radius: 15px;
    background-color: #ebebeb;
}
.scroll-bar::-webkit-scrollbar {
    width: 5px;
    background-color: #ebebeb;
    border-radius: 15px;
}
.scroll-bar::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background: #2080ca;
    border: 1px solid #ebebeb;
}
.container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
@media only screen and (max-width: 1200px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}
@media all and (min-width: 1500px) {
    .container2 {
        width: 1380px;
        max-width: 100%;
        margin: 0 auto;
    }
}
.lazy,
.owl-lazy {
    opacity: 0;
}
.header_wrapper_wrap {
    width: 100%;
    z-index: 9;
    position: relative;
}
.header_wrapper_wrap .header_wrapper_wrap_body {
    position: relative;
    width: 100%;
    z-index: 9999;
    top: 0;
    transition: 0.5s;
    background: #fff;
}
.box_menu_fix {
    min-height: 40px;
}
@media all and (max-width: 1025px) {
    .box_menu_fix {
        display: none;
    }
}
.header_menu {
    background: #f6f6f6;
    width: 100%;
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: 99;
}
@media all and (max-width: 600px) {
    .header_wrapper_wrap .nav_fix_zoom {
        position: fixed;
        top: 0px;
        left: 0px;
    }
}
.header_wrapper_wrap .nav_fix_zoom .header_menu {
    background: var(--extra-color);
}
.header_wrapper_wrap .nav_fix_zoom .header_menu .menu_item_a {
    color: #fff !important;
}
.header_wrapper_wrap .nav_fix_zoom .header_menu .menu_item_a svg {
    fill: #fff !important;
}
#header_inner {
    display: flex;
    position: relative;
}
@media screen and (max-width: 1025px) {
    #header_inner {
        display: block;
    }
}
.header_wrapper {
    width: 100%;
    z-index: 100;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    box-shadow: 0 4px 8px -2px #e1e1e1;
}
.header-l {
    float: left;
    padding: 20px 0px 20px;
}
@media screen and (max-width: 1025px) {
    .header-l {
        padding: 10px 0px 10px;
    }
}
@media screen and (max-width: 600px) {
    .header-l {
        padding: 10px 0;
    }
}
.menu_header {
    padding: 8px 0;
    background: #f6f6f6;
    position: relative;
}
.menu_header .img_header {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0px);
}
@media all and (max-width: 1025px) {
    .menu_header {
        display: none;
    }
}
.header-r {
    float: left;
    box-sizing: border-box;
    padding: 32px 0px 32px;
    width: calc(100% - 250px - 50px);
    margin-left: 50px;
    justify-content: flex-end;
}
@media screen and (max-width: 1000px) {
    .header-r {
        padding: 22px 0px 22px;
    }
}
@media screen and (max-width: 600px) {
    .header-r {
        width: calc(100% - 40px - 20px);
        margin-left: 20px;
        padding: 10px 0;
    }
}
.header-r .phone {
    float: left;
    display: flex;
    margin-left: 20px;
    padding-left: 20px;
    align-items: center;
}
@media all and (max-width: 1200px) {
    .header-r .phone {
        margin-left: 0px;
    }
}
@media screen and (max-width: 990px) {
    .header-r .phone {
        display: none;
    }
}
.header-r .phone svg {
    width: 36px;
    height: 36px;
    fill: var(--main-color);
    left: 0px;
    top: 0px;
    position: absolute;
}
.header-r .phone a {
    font-size: 14px;
    display: inline-block;
    position: relative;
    padding-left: 44px;
}
.header-r .phone a .text {
    line-height: 18px;
    font-weight: 600;
    font-size: 18px;
    color: #000;
}
.header-r .phone a .text .subtext {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}
@media screen and (max-width: 1180px) {
    .header-r .phone a {
        font-size: 20px;
    }
}
.header-r .shopcart {
    float: left;
    box-sizing: border-box;
}
@media screen and (max-width: 1180px) {
    .header-r .shopcart {
        margin-left: 12px;
    }
}
@media screen and (max-width: 1025px) {
    .header-r .shopcart {
        margin-right: 5px;
    }
}
@media all and (max-width: 600px) {
    .header-r .shopcart {
        width: 45px;
        height: 34px;
        padding-top: 1px;
        padding-left: 10px;
    }
}
.logo {
    display: grid;
}
.logo .logo_img_small {
    display: none;
}
@media all and (max-width: 600px) {
    .logo .logo_img_small {
        display: block;
    }
    .logo .logo_img {
        display: none;
    }
}
.regions_search {
    width: 40%;
    box-sizing: border-box;
    float: left;
}
@media all and (max-width: 1200px) {
    .regions_search {
        width: 24%;
    }
}
@media all and (max-width: 800px) {
    .regions_search {
        width: calc(100% - 60px);
    }
}
.search_mb {
    display: none;
    cursor: pointer;
}
@media all and (max-width: 1024px) {
    .search_mb {
        margin-left: 0px;
    }
}
@media all and (max-width: 1025px) {
    .search_mb {
        display: block;
    }
}
.search_mb svg {
    width: 20px;
    fill: var(--text-color);
    transition: 0.4s;
}
.search_mb .search_mb_on,
.search_mb .search_mb_off {
    display: grid;
}
.search_mb .search_mb_off {
    display: none;
}
.search_mb.active .search_mb_off {
    display: grid;
}
.search_mb.active .search_mb_on {
    display: none;
}
.regions_search.active {
    display: block;
}
.sb-toggle-left {
    display: none;
    width: 24px;
    float: right;
    padding: 10px 0 10px 20px;
}
@media all and (max-width: 1025px) {
    .sb-toggle-left {
        display: block;
    }
}
@media all and (max-width: 600px) {
    .sb-toggle-left {
        padding: 10px 0 2px 20px;
    }
}
.navicon-line {
    width: 24px;
    height: 3px;
    border-radius: 0px;
    margin-bottom: 5px;
    background-color: var(--text-color);
}
@media all and (max-width: 330px) {
    .navicon-line {
        width: 20px;
        margin-bottom: 3px;
    }
}
.modal-menu-full-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: none;
    background: #000000cc;
    z-index: 11;
}
.block_title {
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
    line-height: 30px;
    line-height: 1.188;
    text-align: left;
}
footer {
    background: #fff;
    color: #222;
    font-size: 14px;
    padding: 35px 0 0px;
    border-top: 3px solid var(--main-color);
}
@media all and (max-width: 600px) {
    footer {
        padding-top: 20px;
    }
}
footer a {
    color: #000;
}
footer .logo_footer {
    height: 66px;
}
@media all and (max-width: 1025px) {
    footer .logo_footer {
        height: 55px;
    }
}
footer .info_bottom {
    max-height: 200px;
    overflow: auto;
    margin-top: 15px;
    line-height: 20px;
}
footer .info_bottom li,
footer .info_bottom p {
    margin-bottom: 3px !important;
}
footer .footer_left {
    width: 40%;
    float: left;
    background: #fff;
    padding-right: 40px;
    padding-top: 25px;
    border-radius: 0 0 5px 5px;
    box-sizing: border-box;
    position: relative;
}
footer .footer_left h3 {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 10px;
    margin-top: 20px;
}
footer .footer_left p {
    line-height: 22px;
    margin-bottom: 12px;
}
@media all and (max-width: 850px) {
    footer .footer_left {
        width: 45%;
    }
}
@media all and (max-width: 650px) {
    footer .footer_left {
        width: 100%;
        float: none;
    }
}
footer .footer_center {
    box-sizing: border-box;
    float: left;
    width: 35%;
    box-sizing: border-box;
    padding-right: 25px;
}
@media all and (max-width: 850px) {
    footer .footer_center {
        width: 55%;
        padding-right: 0px;
    }
}
@media all and (max-width: 600px) {
    footer .footer_center {
        width: 100%;
        padding-right: 0px;
    }
}
footer .footer_center .footer_center_f {
    line-height: 22px;
}
footer .footer_right {
    width: 25%;
    float: left;
}
@media all and (max-width: 850px) {
    footer .footer_right {
        width: 50%;
    }
}
@media all and (max-width: 600px) {
    footer .footer_right {
        width: 100%;
    }
}
footer .footer_right .block_title {
    color: var(--main-color);
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 20px;
    margin-bottom: 25px;
    padding-top: 25px;
    position: relative;
}
footer .footer_right .block_title:after {
    width: 35px;
    height: 2px;
    background: var(--yellow-color);
    left: 0px;
    bottom: 0px;
    content: "";
    position: absolute;
}
footer .footer_center_mb {
    display: none;
}
@media all and (max-width: 850px) {
    footer .footer_center_mb {
        display: block;
    }
}
footer .footer_center_mb .footer_center_f {
    margin-top: 20px;
    width: 50%;
    float: left;
}
@media all and (max-width: 650px) {
    footer .footer_center_mb .footer_center_f {
        width: 100%;
        float: none;
    }
}
footer .title_bottom {
    color: var(--main-color);
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 20px;
    margin-bottom: 25px;
    padding-top: 25px;
    position: relative;
    text-transform: uppercase;
    display: inline-block;
}
footer .title_bottom:after {
    width: 35px;
    height: 2px;
    background: var(--yellow-color);
    left: 0px;
    bottom: 0px;
    content: "";
    position: absolute;
}
footer .info_bankings p,
footer .info_bottom p {
    margin-bottom: 7px;
}
footer .info_bankings li,
footer .info_bottom li {
    padding-left: 18px;
    margin-bottom: 13px;
    position: relative;
}
footer .info_bankings li:after,
footer .info_bottom li:after {
    position: absolute;
    content: "";
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--main-color);
}
.footer_bottom2 {
    text-align: center;
    font-size: 15px;
    line-height: 26px;
}
.footer_bottom2 .developer {
    float: right;
    color: #999;
}
.footer_bottom {
    padding:  15px 0;
    margin-top: 30px;
    background: #ececec;
}
/* Chỉ còn mỗi dòng copyright nên căn giữa full width (bản gốc để 40% vì có thêm
   khối thanh toán/đối tác bên phải — markup hiện tại đã bỏ). */
.footer_bottom .copyright {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}
.footer_bottom .copyright font {
    color: var(--main-color);
}
.footer_bottom .payment_method {
    float: left;
    width: 40%;
    padding-right: 20px;
    box-sizing: border-box;
}
@media all and (max-width: 600px) {
    .footer_bottom .payment_method {
        width: 100%;
        padding-right: 0px;
        margin-top: 15px;
        text-align: center;
    }
}
.footer_bottom .certi {
    float: right;
    width: 20%;
    box-sizing: border-box;
}
@media all and (max-width: 600px) {
    .footer_bottom .certi {
        width: 100%;
        padding-right: 0px;
        margin-top: 10px;
        text-align: center;
    }
}
.footer_bottom .payment_method .title,
.footer_bottom .certi .title {
    font-weight: 600;
    margin-bottom: 5px;
}
.footer_bottom .developer {
    color: #a7a6a6;
}
#menu-fixed-bar {
    width: 40%;
    z-index: 999;
    transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
    float: right;
}
#fixed-bar {
    position: fixed;
    bottom: 0;
    height: 45px;
    bottom: 60px;
    z-index: 999;
}
#fixed-bar > div {
    float: left;
    max-width: 22%;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    width: 35px;
}
.description a {
    color: #00a7f4;
}
.description a:hover {
    color: #057bb1;
}
.fixed_icons {
    position: fixed;
    right: 0;
    top: 40%;
    transform: translate(0, -50px);
    z-index: 100;
    display: none;
}
.fixed_icons .icon_v1 {
    width: 44px;
    height: 44px;
    display: inline-block;
    background-color: var(--extra-color);
}
.address_fixed_popup {
    margin-top: -3px;
}
.hotline_fixed_popup,
.address_fixed_popup {
    position: relative;
}
.hotline_fixed_popup .icon_v1:after {
    content: "";
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="28" width="28" fill="white" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M78.014,20.385c8.463,8.75,12.51,18.127,12.84,29.081c0.076,2.519-1.453,4.183-3.876,4.312  c-2.557,0.136-4.293-1.441-4.356-4.012c-0.134-5.394-1.357-10.521-4.033-15.211C72.491,23.871,63.191,18.302,50.95,17.603  c-1.358-0.077-2.631-0.218-3.586-1.305c-1.223-1.391-1.33-2.991-0.672-4.62c0.664-1.642,2.01-2.382,3.759-2.352  c7.969,0.135,15.321,2.353,21.955,6.761C74.697,17.61,76.787,19.437,78.014,20.385z M50.11,24.674  c-0.732-0.01-1.53,0.134-2.189,0.44c-1.704,0.79-2.505,2.791-2.048,4.786c0.402,1.758,1.954,2.972,3.906,2.996  c4.562,0.056,8.597,1.499,11.951,4.624c3.688,3.434,5.41,7.741,5.588,12.751c0.032,0.891,0.367,1.904,0.891,2.618  c1.094,1.49,3.037,1.864,4.821,1.184c1.577-0.601,2.506-2.014,2.492-3.886c-0.051-6.981-2.592-12.943-7.5-18.08  C63.098,27.364,57.118,24.773,50.11,24.674z M73.486,87.206c1.689-1.888,3.575-3.599,5.361-5.401  c2.643-2.667,2.664-5.902,0.036-8.55c-3.134-3.157-6.28-6.302-9.44-9.433c-2.586-2.562-5.819-2.556-8.393-0.005  c-1.966,1.948-3.936,3.893-5.86,5.882c-0.133,0.137-0.261,0.247-0.389,0.328l-1.346,1.346c-0.375,0.239-0.748,0.236-1.236-0.029  c0.73-0.689-2.619-1.246-3.839-2.012c-5.695-3.575-10.471-8.183-14.694-13.374c-2.101-2.582-3.968-5.329-5.259-8.431  c-0.215-0.517-0.221-0.888,0.067-1.281l1.346-1.346c0.064-0.087,0.137-0.175,0.231-0.265c0.59-0.569,1.175-1.143,1.757-1.72  c1.361-1.348,2.706-2.711,4.057-4.069c2.69-2.703,2.684-5.88-0.015-8.604c-1.531-1.544-3.074-3.077-4.612-4.614  c-1.585-1.584-3.157-3.181-4.756-4.75c-2.59-2.543-5.824-2.548-8.408-0.007c-1.973,1.941-3.882,3.948-5.886,5.856  c-1.866,1.777-2.817,3.931-3.007,6.463c-0.307,4.104,0.699,7.983,2.106,11.77c2.909,7.832,7.333,14.766,12.686,21.137  c7.239,8.617,15.894,15.436,26.017,20.355c4.554,2.213,9.283,3.915,14.409,4.196C67.944,90.844,71.028,89.954,73.486,87.206z"/></svg>');
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    display: block;
    margin: 8px;
}
.address_fixed_popup .icon_v1:after {
    content: "";
    background: url('data:image/svg+xml;utf8,<svg aria-hidden="true" data-prefix="fas" data-icon="map-marker-alt" role="img" height="28" width="28" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-map-marker-alt fa-w-12"><path fill="white" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" class=""></path></svg>');
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    display: block;
    margin: 8px;
}
.hotline_fixed_popup_content {
    position: absolute;
    width: 260px;
    top: 0;
    right: 100%;
    padding-right: 10px;
    display: none;
    margin-top: 0;
}
.hotline_fixed_popup:hover .hotline_fixed_popup_content {
    display: block;
}
.header .hotline:hover .support_phone {
    display: block !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
@media only screen and (max-width: 600px) {
    footer .menu_footer {
        width: 100%;
        margin-top: 20px;
        padding: 0;
    }
}
#fixed-bar {
    margin: 0;
    padding: 0;
    z-index: 100;
    left: 10px;
    border-radius: 50%;
}
@media all and (max-width: 600px) {
    #fixed-bar {
        bottom: 70px !important;
    }
}
#fixed-bar #bar-inner {
    height: 50px;
    margin: 0 10px 0 auto;
}
#fixed-bar #bar-inner a {
    background: #076C39;
    opacity: 0.6;
    display: block;
    border-radius: 5px;
    text-decoration: none;
    -moz-transition: all 0.2s ease-in 0;
    -webkit-transition: all 0.2s ease-in;
    -webkit-transition-delay: 0;
    transition: all 0.2s ease-in 0;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    box-sizing: border-box;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}
#fixed-bar #bar-inner a svg {
    width: 20px;
    height: 20px;
    margin-top: 12px;
    fill: #fff;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}
#fixed-bar:hover #bar-inner a {
    opacity: 1;
}
#fixed-bar:hover #bar-inner a svg {
    fill: var(--main-color);
}
#modal_alert {
    position: fixed;
    background: rgba(0, 0, 0, 0.75);
    z-index: 99999;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.modal_alert_inner {
    width: 350px;
    background: white;
    border-radius: 2px;
    max-width: 96%;
    margin: 2% auto;
}
.modal_alert_title {
    background: var(--main-color);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 0;
    font-size: 17px;
    position: relative;
    border-radius: 2px 2px 0 0;
}
.modal_alert_title .close {
    position: absolute;
    right: 0px;
    padding: 0px 10px 8px;
    top: 7px;
    color: #fff;
    font-size: 22px;
}
.modal_alert_body {
    background: white;
    color: #616161;
    padding: 20px;
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -o-user-select: text;
    user-select: text;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.modal_alert_2 {
    position: fixed;
    background: rgba(0, 0, 0, 0.75);
    z-index: 99999;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.modal_alert_2 .modal_alert_inner {
    width: 350px;
    background: white;
    border-radius: 2px;
    max-width: 96%;
    margin: 2% auto;
}
.modal_alert_2 .modal_alert_title {
    background: var(--main-color);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 0;
    font-size: 17px;
    position: relative;
    border-radius: 2px 2px 0 0;
}
.modal_alert_2 .modal_alert_title .close {
    position: absolute;
    right: 0px;
    padding: 0px 10px 8px;
    top: 7px;
    color: #fff;
    font-size: 22px;
}
.modal_alert_2 .modal_alert_body {
    background: white;
    color: #616161;
    padding: 20px;
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -o-user-select: text;
    user-select: text;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.owl-carousel .owl-item .owl-lazy {
    opacity: 1 !important;
}
.popup {
    width: 100%;
    height: 700px;
    background: #ddddddab;
    position: fixed;
    z-index: 99999;
    text-align: center;
}
.popup .container {
    border-radius: 10px;
    position: relative;
    height: 100%;
}
@media all and (max-width: 800px) {
    .popup .container {
        padding: 10px;
    }
}
#zalo {
    position: fixed;
    left: 0px;
    z-index: 100;
    height: auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    bottom: 128px;
}
@media all and (min-width: 800px) {
    #zalo {
        bottom: 100px;
    }
}
.footer_icon {
    padding: 15px 25px;
    box-sizing: border-box;
    border: 1px solid #404040;
}
.footer_icon .chung_nhan {
    padding-left: 50px;
    width: 50%;
    float: left;
    box-sizing: border-box;
}
@media all and (max-width: 600px) {
    .footer_icon .chung_nhan {
        width: 100%;
        padding-left: 0;
    }
}
.footer_icon .chung_nhan span {
    display: inline-block;
    float: left;
    line-height: 38px;
    margin-right: 50px;
    width: 80px;
}
@media all and (max-width: 800px) {
    .footer_icon .chung_nhan span {
        line-height: 26px;
    }
}
.footer_icon .chung_nhan .chung_nhan_inner {
    display: flex;
    float: left;
    width: calc(100% - 130px);
}
@media all and (max-width: 800px) {
    .footer_icon .chung_nhan .chung_nhan_inner {
        width: 100%;
    }
}
.footer_icon .chung_nhan a {
    display: inline-block;
    margin-right: 5px;
}
@media all and (max-width: 1200px) {
    .footer_icon .chung_nhan a img {
        height: auto;
    }
}
.display_open,
.display-open {
    display: block !important;
}
.header_wrapper_img {
    background-position: center;
    background-repeat: repeat-x;
    background-size: 100%;
}
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1111;
    transform: translate(-50%, -50%);
    display: none;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.modal-menu-full-screen-menu {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background: #0000008c;
    z-index: -99;
    opacity: 0;
    transition: 0.5s;
}
.show_screen {
    z-index: 990;
    opacity: 1;
}
.menu_header_ul_innner {
    width: calc(100% - 100px);
    float: left;
}
.description img,
.description iframe {
    display: block;
    margin: auto;
}
.description ul li {
    list-style: disc;
    margin-left: 20px;
}
.description blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
}
.description blockquote p {
    display: inline;
    font-style: italic;
}
.description blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}
.description {
    font-size: 16px;
    color: #626262;
    line-height: 1.765;
}
@media all and (max-width: 850px) {
    .description {
        font-size: 15px;
    }
}
@media all and (max-width: 650px) {
    .description {
        font-size: 14px;
    }
}
.description h3 {
    color: #333;
    margin-top: 30px;
}
.description h3 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 20px;
}
@media all and (max-width: 850px) {
    .description h3 {
        font-size: 20px;
        line-height: 26px;
    }
}
@media all and (max-width: 650px) {
    .description h3 {
        font-size: 18px;
    }
}
.description p,
.description li {
    margin-bottom: 13px;
}
.description ul {
    margin-left: 30px;
    margin-top: 10px;
}
.description ul li {
    list-style: disc;
}
.description .clear {
    height: 0;
}
blockquote {
    padding-left: 20px;
    border-left: 2px solid var(--extra-color);
    margin-top: 29px;
}
.product_grid_scroll {
    overflow-x: auto;
}
.product_grid_scroll {
    max-height: 780px;
    overflow-y: scroll;
}
.menu_header_ul_innner .level_0 {
    position: relative;
    margin-right: 20px;
    float: left;
}
.menu_header_ul_innner .level_0:nth-child(3),
.menu_header_ul_innner .level_0:nth-child(4),
.menu_header_ul_innner .level_0:nth-child(5) {
    float: right;
    margin-right: 0;
    margin-left: 20px;
}
.menu_header_ul_innner .level_0 > a {
    display: inline-block;
    line-height: 24px;
    position: relative;
    padding-left: 25px;
}
.menu_header_ul_innner .level_0 > a:last-child > a {
    padding-right: 0px;
}
.menu_header_ul_innner .level_0 > a svg {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 5px;
    left: 5px;
    fill: var(--main-color);
}
.menu_header_ul_innner .subcat {
    padding: 5px 5px 5px 15px;
    position: absolute;
    top: 150%;
    left: 25px;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid var(--body-color);
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    transition: 0.4s;
}
.menu_header_ul_innner .subcat li {
    border-bottom: 1px solid var(--body-color);
}
.menu_header_ul_innner .subcat li:last-child {
    border-bottom: none;
}
.menu_header_ul_innner .subcat a {
    display: block;
    padding: 6px 0;
    font-size: 13px;
}
.menu_header_ul_innner .level_0:hover .subcat {
    opacity: 1;
    z-index: 1;
    visibility: visible;
    top: 100%;
}
.search-contain {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    float: left;
}
@media all and (max-width: 800px) {
    .search-contain {
        float: none;
        margin: auto;
    }
}
.search-contain .search-content {
    overflow: hidden;
    border-radius: 30px;
}
/* Nhắm cả type="search" (input WP dùng) lẫn type="text" cho chắc. */
.search-contain input[type="search"],
.search-contain input[type="text"] {
    background: none;
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 30px;
    padding: 0 46px 0 20px; /* chừa chỗ bên phải cho nút tìm */
    box-sizing: border-box;
    font-size: 14px;
    color: #2b2f36;
    -webkit-appearance: none;
    appearance: none;
}
.search-contain input::placeholder {
    font-style: italic;
    color: #9aa0a8;
}
/* Ẩn nút xoá (×) mặc định của ô search trên Chrome/Safari */
.search-contain input[type="search"]::-webkit-search-decoration,
.search-contain input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
#search_form {
    position: relative;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    background: #f6f7f7;
    transition:
        border-color 0.2s,
        background 0.2s,
        box-shadow 0.2s;
}
/* Sáng lên khi đang gõ */
#search_form:focus-within {
    border-color: var(--main-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(35, 152, 67, 0.1);
}
.button-search {
    width: 42px;
    height: 42px;
    position: absolute;
    right: 2px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}
.button-search svg {
    width: 18px;
    height: 18px;
    fill: var(--main-color);
    transition: fill 0.2s;
}
.button-search:hover svg {
    fill: var(--extra-color);
}
@media only screen and (max-width: 450px) {
    .search-contain {
        width: 100%;
    }
}
.shopcart_simple {
    position: relative;
}
.shopcart_simple .buy_icon {
    display: grid;
    position: relative;
    padding-left: 50px;
}
.shopcart_simple .buy_icon svg {
    width: 36px;
    height: 36px;
    transition: 0.5s;
    fill: var(--main-color);
    position: absolute;
    top: 0px;
    left: 0px;
}
@media all and (max-width: 1400px) {
    .shopcart_simple .buy_icon svg {
        width: 36px;
        height: 36px;
    }
}
@media all and (max-width: 600px) {
    .shopcart_simple .buy_icon svg {
        width: 24px;
        height: 34px;
    }
}
.shopcart_simple .buy_icon .text-c {
    line-height: 18px;
    text-transform: uppercase;
    font-size: 18px;
}
.shopcart_simple .buy_icon .text-c .subtext {
    font-size: 14px;
}
@media screen and (max-width: 760px) {
    .shopcart_simple .buy_icon .text-c {
        display: none;
    }
}
.shopcart_simple .buy_icon .quality {
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    border-radius: 12px;
    transition: 0.5s;
    position: absolute;
    top: -4px;
    background: var(--yellow-color);
    left: 28px;
}
.shopcart_simple .buy_icon:hover svg {
    fill: var(--main-color);
}
.dcjq-mega-menu {
    position: relative;
    z-index: 0;
}
.dcjq-mega-menu .menu-logo {
    position: absolute;
    z-index: 100;
    font-size: 25px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.dcjq-mega-menu .menu-logo a {
    color: #fff;
}
.dcjq-mega-menu .menu-logo a .text {
    color: #c5a47e;
}
.dcjq-mega-menu .menu-logo img {
    width: 100px;
    transition: 0s;
}
@media all and (max-width: 990px) {
    .dcjq-mega-menu .menu-logo img {
        width: 80px;
    }
}
@media all and (max-width: 800px) {
    .dcjq-mega-menu .menu-logo img {
        width: 70px;
    }
}
@media all and (max-width: 550px) {
    .dcjq-mega-menu .menu-logo img {
        width: 50px;
    }
}
@media all and (max-width: 990px) {
    .dcjq-mega-menu .menu-logo {
        position: absolute;
        z-index: 100;
        padding: 5px 50px;
        font-size: 25px;
        left: 50%;
        transform: translateX(-50%);
        clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
        background: #2b2b2b;
    }
}
@media all and (max-width: 550px) {
    .dcjq-mega-menu .menu-logo {
        padding: 5px 40px;
    }
}
@media all and (max-width: 990px) {
    .dcjq-mega-menu {
        z-index: 1000;
        position: initial;
    }
}
.dcjq-mega-menu #megamenu {
    position: relative;
    z-index: 99;
}
@media screen and (max-width: 990px) {
    .dcjq-mega-menu #megamenu {
        padding: 0px 0px;
    }
}
#megamenu .menu-sepa {
    display: none;
}
.dcjq-mega-menu ul.menu li.level_0 {
    display: inline-block;
    position: relative;
    float: left;
}
.dcjq-mega-menu ul.menu li.level_0 svg {
    width: 16px;
    fill: #222;
    height: 16px;
    margin-right: 6px;
    transform: translate(0px, -1px);
    transition: 0.5s;
}
.dcjq-mega-menu ul.menu li.level_0:first-child {
    margin-left: 0px;
}
.dcjq-mega-menu ul.menu li.level_0.logo-menu {
    border-left: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: -61px;
    z-index: 1000;
}
.dcjq-mega-menu ul.menu li.level_0.boder,
.dcjq-mega-menu ul.menu li.level_0:first-child {
    border-left: 0;
}
.dcjq-mega-menu ul.menu li.level_0.menu-logo {
    background: none;
}
.dcjq-mega-menu .level_0.activated .menu_item_a,
.dcjq-mega-menu .menu_item_a:hover {
    color: var(--main-color);
}
.dcjq-mega-menu .level_0.activated .menu_item_a svg,
.dcjq-mega-menu .menu_item_a:hover svg {
    fill: var(--main-color) !important;
}
.dcjq-mega-menu .menu_item_a {
    white-space: nowrap;
    -webkit-transition: 0.4s ease-in-out all;
    transition: 0.4s ease-in-out all;
    position: relative;
    display: flex;
    padding: 14px 12px 12px;
    color: #111;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}
.dcjq-mega-menu .menu_item_a span {
    display: block;
}
.dcjq-mega-menu .drop_down {
    background-repeat: no-repeat;
    background-position: 0px -1px;
    text-indent: -9999px;
    position: absolute;
    right: 12px;
    top: 48%;
    position: absolute;
    display: none;
    width: 8px;
    height: 5px;
    content: "";
}
.dcjq-mega-menu .highlight {
    position: absolute;
    text-align: left;
    top: 150%;
    left: 0px;
    width: 250px;
    z-index: 99999999;
    -webkit-transition: 0.9s ease-in-out all;
    transition: 0.9s ease-in-out all;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    z-index: -1;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.22);
    background: var(--gray-color);
    border: 1px solid var(--border-color);
    border-top: 1px solid var(--main-color);
    box-sizing: border-box;
    background: #fff;
    padding: 10px 0;
}
@media all and (max-width: 990px) {
    .dcjq-mega-menu .highlight {
        opacity: 1;
        visibility: visible;
    }
}
.dcjq-mega-menu .sub_right .highlight {
    left: unset;
    right: 0;
}
@media screen and (max-width: 1024px) {
    .dcjq-mega-menu .highlight .highlight1 {
        margin-top: 0px;
        background: none;
    }
}
.dcjq-mega-menu ul.menu li:hover .highlight {
    opacity: 1;
    top: 100%;
    z-index: 100;
    visibility: visible;
}
.dcjq-mega-menu .highlight .sub-menu-level1 {
    padding: 7px 0 7px 15px;
    position: relative;
    width: unset;
    float: none;
    transition: all 0.4s;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    transition: 0.15s ease-in-out all;
    -webkit-transition: 0.15s ease-in-out all;
}
.dcjq-mega-menu .highlight .sub-menu-level1:last-child {
    border-bottom: none;
}
.dcjq-mega-menu .highlight .sub-menu-level1 svg {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 35%;
    right: 12px;
    transition: all 0.4s;
    fill: #cccccc;
}
@media all and (max-width: 990px) {
    .dcjq-mega-menu .highlight .sub-menu-level1 svg {
        display: none;
    }
}
.dcjq-mega-menu .highlight .sub-menu-level1:hover {
    transition: all 0.3s;
}
.dcjq-mega-menu .highlight .sub-menu-level1:hover > .level_0 {
    color: var(--main-color);
}
.dcjq-mega-menu .highlight .sub-menu-level1:hover svg {
    transform: rotate(-90deg);
}
.dcjq-mega-menu .highlight .sub-menu-level1:hover {
    cursor: pointer;
}
.dcjq-mega-menu .highlight .sub-menu-level1 a {
    text-decoration: none;
    font-size: 14px;
    transition: all 0.4s;
    margin: 0;
    padding: 0;
    border: none;
    font-weight: normal;
}
.dcjq-mega-menu .highlight .sub-menu-level1 a img {
    display: none;
}
.navbar .sb-toggle-left {
    width: 58px;
    float: left;
    padding: 30px 14px 0;
}
.dcjq-mega-menu .sb-toggle-left {
    display: none;
    cursor: pointer;
}
.dcjq-mega-menu .sb-toggle-left svg {
    width: 30px;
    height: 30px;
    fill: var(--extra-color);
}
@media all and (max-width: 500px) {
    .dcjq-mega-menu .sb-toggle-left svg {
        width: 27px;
        height: 27px;
    }
}
@media screen and (max-width: 990px) {
    .dcjq-mega-menu ul.menu li.level_0.menu-logo {
        display: none;
    }
    .dcjq-mega-menu .sb-toggle-left {
        display: block;
        position: absolute;
        z-index: 1001;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        text-align: right;
    }
    .dcjq-mega-menu ul.menu li.level_0 {
        margin: 0px;
    }
    .dcjq-mega-menu .menu_item_a {
        display: block;
        float: none;
        text-align: left;
        font-size: 14px;
    }
    .dcjq-mega-menu ul.menu li.level_0 {
        float: none;
        padding: 0;
        border-right: none;
        border-top: none;
        width: 100%;
    }
    .dcjq-mega-menu ul.menu li.level_0:last-child {
        border-bottom: none;
    }
    .dcjq-mega-menu .highlight {
        border: none;
        box-shadow: none;
        position: initial;
        text-align: left;
        display: none;
        float: none;
        top: 0px !important;
        left: 0;
        width: 100%;
    }
    .dcjq-mega-menu .highlight.active {
        display: none;
    }
    .dcjq-mega-menu .highlight .sub-menu-level1 {
        padding: 9px 0 9px 25px;
    }
    .dcjq-mega-menu ul.menu li.mega-hover,
    .dcjq-mega-menu ul.menu > li.activated,
    .dcjq-mega-menu ul.menu > li:hover {
        background: transparent;
    }
    .dcjq-mega-menu ul.menu li.mega-hover a,
    .dcjq-mega-menu ul.menu > li.activated > a,
    .dcjq-mega-menu ul.menu > li:hover > a {
        color: var(--main-color);
        -webkit-transition: 0.25s ease-in-out all;
        transition: 0.25s ease-in-out all;
    }
    .dcjq-mega-menu .menu_item_a span {
        display: inline-block;
        color: #fbf6b0;
    }
    .dcjq-mega-menu ul.menu > li > span.click_m {
        position: absolute;
        top: 0;
        height: 36px;
        right: 1px;
        width: 36px;
        transition: all 0.3s;
    }
    .dcjq-mega-menu ul.menu > li > span.click_m:after {
        content: "";
        width: 15px;
        height: 15px;
        background: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14 fa-2x"><path fill="rgb(204, 204, 204)" d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z" class=""></path></svg>');
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s;
    }
    .dcjq-mega-menu ul.menu > li > span.click_m.active:after {
        transition: all 0.3s;
        transform: rotate(-90deg) translate(50%, -50%);
    }
}
@media all and (max-width: 750px) {
    .dcjq-mega-menu .sb-toggle-left {
        transform: translate(0);
        top: 7px;
        left: 10px;
    }
}
.header .top_menu .top_menu_inner .dcjq-mega-menu #megamenu.active {
    position: absolute;
    z-index: 1000;
    width: 100%;
    left: 0;
    text-align: center;
    background: #292929e0;
    padding: 51px 0px 30px;
    transition: all 0.2s;
    visibility: visible;
}
.dcjq-mega-menu ul.menu li.menu_banner .highlight {
    width: calc(262px + (200px * var(--i)));
    padding: 10px 5px 7px;
    box-sizing: border-box;
}
.dcjq-mega-menu ul.menu li.menu_banner .box_banner_menu_0 {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
}
.dcjq-mega-menu ul.menu li.menu_banner .box_banner_menu_0 .it_ba {
    overflow: hidden;
}
.dcjq-mega-menu ul.menu li.menu_banner .box_banner_menu_0 .it_ba img {
    transform: scale(1.03);
    transition: 0.4s;
}
.dcjq-mega-menu ul.menu li.menu_banner .box_banner_menu_0 .it_ba:hover img {
    transform: scale(1.1);
}
.dcjq-mega-menu ul.menu li.menu_banner .highlight1 {
    width: 250px;
    float: left;
}
.dcjq-mega-menu ul.menu li.menu_banner .it_ban_2 {
    width: 400px;
    float: left;
}
.dcjq-mega-menu ul.menu li.menu_banner .it_ban_2 .it_ba {
    width: calc(50% - 10px);
    margin: 0 5px;
    border-radius: 6px;
}
.owl-carousel .owl-animated-in {
    z-index: 0;
}
.owl-carousel .owl-animated-out {
    z-index: 1;
}
.owl-height {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
}
.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.owl-carousel.owl-loaded {
    display: block;
}
.owl-carousel.owl-loading {
    opacity: 0;
    display: block;
}
.owl-carousel.owl-hidden {
    opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
    display: none;
}
.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.owl-carousel .owl-item img {
    -webkit-transform-style: preserve-3d;
}
.owl-carousel.owl-text-select-on .owl-item {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
.owl-carousel .owl-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab;
}
.owl-carousel.owl-rtl {
    direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
    float: right;
}
.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
    transform-style: preserve-3d;
}
.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000;
}
.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url("owl.video.play.png") no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition: scale 100ms ease;
    -moz-transition: scale 100ms ease;
    -ms-transition: scale 100ms ease;
    -o-transition: scale 100ms ease;
    transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
    -webkit-transition: scale(1.3, 1.3);
    -moz-transition: scale(1.3, 1.3);
    -ms-transition: scale(1.3, 1.3);
    -o-transition: scale(1.3, 1.3);
    transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
    display: none;
}
.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
}
.share-hotline .item {
    padding-bottom: 10px;
    border-bottom: 1px solid #ffcb1f6b;
    margin-bottom: 10px;
}
.share-hotline .item .text {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    width: 50%;
    line-height: 30px;
    float: left;
    padding-right: 15px;
}
.share-hotline .item .text span {
    color: #16ff93;
}
.share-hotline .item .aphone {
    display: inline-block;
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    line-height: 30px;
    position: relative;
    padding-left: 38px;
    float: right;
}
.share-hotline .item .aphone:before {
    width: 28px;
    height: 28px;
    content: "";
    position: absolute;
    top: 2px;
    left: 0px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(22,255,147)" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <g> <g> <path d="M256,0C114.624,0,0,114.624,0,256s114.624,256,256,256s256-114.624,256-256S397.376,0,256,0z M384,400    c-149.984,0-272-122.016-272-272c0-8.832,7.168-16,16-16h59.072c8.832,0,16,7.168,16,16c0,27.648,6.016,53.984,17.888,78.24    c1.888,3.84,2.144,8.224,0.736,12.256c-1.376,4.032-4.32,7.328-8.16,9.184l-23.872,11.52    c19.872,34.592,48.544,63.296,83.104,83.104l11.52-23.84c1.856-3.84,5.152-6.752,9.184-8.16c4.032-1.376,8.448-1.12,12.256,0.736    c24.32,11.872,50.624,17.888,78.24,17.888c8.832,0,16,7.168,16,16V384H400C400,392.832,392.832,400,384,400z"/> </g> </g> </svg>');
    background-size: 100% 100%;
}
.share-hotline .item .time_work {
    float: right;
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    display: none;
}
.footer_phone {
    border-bottom: 1px solid #757575;
    padding-top: 50px;
    background: #222222;
    padding-bottom: 50px;
}
@media all and (max-width: 800px) {
    .footer_phone {
        padding: 20px 20px 0;
    }
    .footer_phone .phone-left {
        width: 100%;
        padding: 0;
    }
}
ul.menu-bottom li.level0 {
    padding-right: 25px;
    box-sizing: border-box;
}
ul.menu-bottom li.level0 > a,
ul.menu-bottom li.level0 {
    width: calc(100% / 2);
    float: left;
    box-sizing: border-box;
    padding-right: 10px;
}
@media all and (max-width: 850px) {
    ul.menu-bottom li.level0 > a,
    ul.menu-bottom li.level0 {
        padding-right: 0px;
    }
}
ul.menu-bottom li.level0 ul li {
    margin-bottom: 12px;
}
ul li.level1 a:hover,
ul li.level1 span:hover {
    color: var(--extra-color);
}
ul.menu-bottom li.level0 span.click-mobile {
    background: transparent url("../images/icon-click.png")
        no-repeat scroll center;
    position: absolute;
    cursor: pointer;
    padding: 0;
    right: 8px;
    top: 12px;
    display: none;
    content: "";
    width: 15px;
    height: 15px;
    z-index: 12;
}
ul.menu-bottom li.level0 span.click-mobile.active {
    background: transparent
        url("../images/icon-click-active.png") no-repeat scroll
        center;
}
.menu-bottom ul li.mid-sitem > span i {
    background-position: 0px -92px;
    content: " ";
    height: 36px;
    display: block;
    margin-top: 11px;
    padding-top: 12px;
    width: 131px;
}
/* Mobile: giữ nguyên kiểu như PC — 2 cột, hiện hết mục, không phải bấm.
   Trước đây khối này biến footer thành accordion (ẩn submenu, hiện nút +, bọc viền
   từng mục). Nay chỉ thu nhỏ chữ và khoảng cách cho vừa màn hẹp. */
@media screen and (max-width: 468px) {
    ul.menu-bottom li.level0 {
        float: left;
        width: calc(100% / 2);
        border: 0;
        margin-bottom: 0;
        position: relative;
        padding-right: 10px;
        box-sizing: border-box;
    }
    /* Nút + không còn tác dụng vì submenu luôn mở. */
    ul.menu-bottom li.level0 span.click-mobile {
        display: none;
    }
    ul.menu-bottom li.level0 > a,
    ul.menu-bottom li.level0 > span {
        display: block;
        padding: 0;
        margin: 10px 0;
    }
    ul.menu-bottom li.level0 ul {
        display: block;
    }
    ul li.level1 {
        border-top: 0;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
    ul.menu-bottom li.level0 ul li {
        margin-bottom: 10px;
    }
    footer .title_bottom {
        font-size: 16px;
        padding-top: 20px;
        padding-bottom: 14px;
        margin-bottom: 16px;
    }
}
.share_default {
    margin-top: 15px;
    display: flex;
    align-items: center;
}
.share_default svg {
    transition: 0.5s;
    width: 15px;
    height: 15px;
    transform: translate(0px, 2px);
    fill: #fff;
}
.share_default svg:hover {
    transition: 0.5s;
}
.share_default .share_title {
    margin-right: 10px;
}
.share_default .fb,
.share_default .prin,
.share_default .zl,
.share_default .gp,
.share_default .yt,
.share_default .sk,
.share_default .tw,
.share_default .it {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border-radius: 50%;
    transition: 0.5s;
    display: flex;
    background: #828080;
}
@media all and (max-width: 1177px) {
    .share_default .fb,
    .share_default .prin,
    .share_default .zl,
    .share_default .gp,
    .share_default .yt,
    .share_default .sk,
    .share_default .tw,
    .share_default .it {
        float: left;
        margin-left: 0px;
        margin-right: 10px;
    }
}
.share_default .fb svg,
.share_default .prin svg,
.share_default .zl svg,
.share_default .gp svg,
.share_default .yt svg,
.share_default .sk svg,
.share_default .tw svg,
.share_default .it svg {
    fill: #fff;
    transition: 0.5s;
}
.share_default .fb:hover,
.share_default .prin:hover,
.share_default .zl:hover,
.share_default .gp:hover,
.share_default .yt:hover,
.share_default .sk:hover,
.share_default .tw:hover,
.share_default .it:hover {
    background: #fff;
}
.share_default .fb:hover svg,
.share_default .prin:hover svg,
.share_default .zl:hover svg,
.share_default .gp:hover svg,
.share_default .yt:hover svg,
.share_default .sk:hover svg,
.share_default .tw:hover svg,
.share_default .it:hover svg {
    fill: var(--extra-color);
}
/* ===== CTA nổi: Gọi / Zalo / Messenger =====
   Luôn hiện, xếp dọc. (Bản cũ là kiểu xòe ra khi bấm, ẩn Zalo/Messenger phía sau
   một nút chính — nay bỏ hẳn, không cần JS toggle nữa.) */
.share_fast_fixed {
    position: fixed;
    right: 14px;
    bottom: 76px;
    z-index: 99;
}
.share_fast_fixed .share_fast_fixed_inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cta_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}
.cta_btn:hover {
    transform: scale(1.08);
}
.cta_btn svg {
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    fill: #fff;
}
.cta_call {
    background: var(--main-color);
}
.cta_zalo {
    background: #0068ff;
}
.cta_zalo svg {
    width: 30px;
    height: 30px;
}
.cta_messenger {
    background: linear-gradient(45deg, #0099ff, #a033ff 50%, #ff5280 80%, #ff7061);
}

/* Vòng sóng lan quanh nút gọi để hút mắt. */
.cta_ring {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background: var(--main-color);
    animation: cta_pulse 1.8s ease-out infinite;
}
@keyframes cta_pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

/* Nhãn chỉ hiện khi rê chuột — máy cảm ứng không có hover nên ẩn ở mobile. */
.cta_label {
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: 4px;
    background: #2b2f36;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.cta_label:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #2b2f36;
}
.cta_btn:hover .cta_label {
    opacity: 1;
}

@media all and (max-width: 600px) {
    .share_fast_fixed {
        right: 10px;
        bottom: 70px;
    }
    .cta_btn {
        width: 46px;
        height: 46px;
    }
    .cta_btn svg {
        width: 22px;
        height: 22px;
    }
    .cta_zalo svg {
        width: 26px;
        height: 26px;
    }
    .cta_label {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cta_ring {
        animation: none;
    }
}

/* Đẩy 3 menu top mặc định (Tin tức, Dự án, Liên hệ) sang phải — theo ID */
.menu_header_ul_innner > #li-menu_item_24,
.menu_header_ul_innner > #li-menu_item_93,
.menu_header_ul_innner > #li-menu_item_92 {
    float: right;
    margin-right: 0;
    margin-left: 20px;
}
/* Menu top từ Tùy chọn: mục chọn "Bên phải" thì float phải (thay cho nth-child mặc định) */
.menu_header_ul_innner .level_0.mh-right {
    float: right;
    margin-right: 0;
    margin-left: 20px;
}
/* Icon menu top dạng SVG dán vào (Tùy chọn) — canh giống icon SVG mặc định */
.menu_header_ul_innner .level_0 > a .mh-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 13px;
    height: 13px;
    line-height: 0;
}
.menu_header_ul_innner .level_0 > a .mh-icon svg {
    width: 13px;
    height: 13px;
    display: block;
    fill: var(--main-color);
}

/* Ô tìm kiếm giãn giữa; hotline · zalo · giỏ hàng gom nhóm phải, khoảng cách đều (desktop) */
@media screen and (min-width: 1026px) {
    .header-r {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .header-r > .regions_search {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .header-r .phone,
    .header-r .header-consult,
    .header-r .shopcart {
        padding-left: 0;
        margin-left: 40px;
        flex: 0 0 auto;
    }
    .header-r .sb-toggle-left {
        display: none !important;
    }
}

/* Tư vấn Zalo giữa Hotline và Giỏ hàng — đồng bộ kiểu icon + chữ với hotline */
.header-consult {
    display: flex;
    align-items: center;
}
@media screen and (max-width: 990px) {
    .header-consult {
        display: none;
    }
}
.header-consult .consult-btn {
    display: inline-block;
    position: relative;
    padding-left: 44px;
    line-height: 18px;
}
.header-consult .consult-btn svg {
    width: 36px;
    height: 36px;
    fill: var(--main-color);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.header-consult .consult-text {
    font-weight: 600;
    font-size: 18px;
    color: #000;
}
.header-consult .consult-btn:hover .consult-text {
    color: var(--main-color);
}
.header-consult .consult-text .consult-sub {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}

/* Menu top lấy mốc phải = mép container để thẳng cột với giỏ hàng bên dưới */
.menu_header_ul_innner {
    width: 100%;
}

/* Dàn đều menu chính cho đỡ dồn trái (desktop) */
@media screen and (min-width: 1026px) {
    .dcjq-mega-menu #megamenu {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .dcjq-mega-menu ul.menu li.level_0 {
        float: none;
    }
}

/* ===== CSS cho khối Sản phẩm nổi bật (pos5) trong index.php ===== */
.pos5 {
    margin-top: 60px;
}
@media all and (max-width: 1200px) {
    .pos5 {
        margin-top: 60px;
    }
}
/* Trên desktop tiêu đề .block_title nằm absolute đè lên mép trên của
   .products_blocks_slideshow_hot, nên margin-top ở đây và padding-top của khối đó
   phải BẰNG NHAU (60px) thì khoảng cách trên/dưới tiêu đề mới đều — sửa cái này
   thì phải sửa cả cái kia. Ở mobile tiêu đề chảy theo dòng nên không còn ràng buộc đó;
   30px dưới đây khớp với margin-top của .section-title cho đồng nhịp. */
@media all and (max-width: 600px) {
    .pos5 {
        margin-top: 30px;
    }
}
.product_grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}
@media all and (max-width: 600px) {
    .product_grid {
        margin-left: -5px;
        margin-right: -5px;
    }
}
.product_grid .item {
    float: left;
    width: calc(25% - 20px);
    margin: 0 10px;
    margin-bottom: 26px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.product_grid .item a {
    display: grid;
}
.product_grid .item:hover img {
    transform: scale(1.05);
}
.product_grid .item .product_image {
    transition: box-shadow 0.25s ease;
}
.product_grid .item:hover .product_image {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

/* Watermark logo + slogan ở đáy ảnh sản phẩm. Nằm trên ảnh, không phóng theo ảnh khi
   hover (vì là anh em của <img>, không nằm trong <a> bị scale). Có gradient tối phía
   dưới để logo/chữ trắng luôn đọc được dù ảnh sáng hay tối. */
.product_image .pd_wm {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px 16px 14px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0)
    );
    pointer-events: none;
}
/* Logo là <span> nền, KHÔNG phải <img>: để thoát khỏi rule ".item img{width:100%}" và
   hiệu ứng hover scale áp cho mọi ảnh trong thẻ sản phẩm (đã từng kéo giãn logo bẹp dí).
   url() tương đối từ file css này (new2/assets/css/) sang ../images/. Tỉ lệ logo ~3.2:1. */
.product_image .pd_wm_logo {
    flex: 0 0 auto;
    width: 92px;
    height: 28px;
    background: url("../images/logo.png") left center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.product_image .pd_wm_text {
    font-size: 13px;
    line-height: 1.3;
    font-style: italic;
    color: #fff;
    opacity: 0.92;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
@media all and (max-width: 600px) {
    .product_image .pd_wm {
        gap: 8px;
        padding: 28px 10px 10px;
    }
    .product_image .pd_wm_text {
        font-size: 10px;
    }
    .product_image .pd_wm_logo {
        width: 68px;
        height: 21px;
    }
}
@media all and (max-width: 800px) {
    .product_grid .item {
        width: calc(100% / 3 - 20px);
    }
}
@media all and (max-width: 600px) {
    .product_grid .item {
        width: calc(100% / 2 - 10px);
        margin: 0 5px;
        margin-bottom: 20px;
    }
}
.product_grid .item .frame_inner {
    position: relative;
    box-sizing: border-box;
}
.product_grid .item .product_image {
    text-align: center;
    overflow: hidden;
    margin-bottom: 0px;
    min-height: 165px;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
@media all and (max-width: 1025px) {
    .product_grid .item .product_image {
        min-height: 140px;
    }
}
.product_grid .item .box_content {
    margin-top: 12px;
}
.product_grid .item .box_content .types {
    position: absolute;
    top: 15px;
    left: 15px;
}
.product_grid .item .box_content .types .product_type {
    display: inline-block;
    margin-right: 1px;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    padding: 4px 17px;
    box-sizing: border-box;
    color: #fff;
    float: left;
    margin-right: 8px;
    border-radius: 10px;
    letter-spacing: 3px;
    font-weight: 600;
}
@media all and (max-width: 600px) {
    .product_grid .item .box_content .types .product_type {
        font-size: 10px;
    }
}
@media all and (max-width: 400px) {
    .product_grid .item .box_content .types .product_type {
        font-size: 9px;
    }
}
.product_grid .item .box_content .types .product_type_sale {
    background: var(--yellow-color);
    color: #000;
}
.product_grid .item .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 22px;
    margin-top: 0;
    /* min-height chứ không phải height cố định: tên 1 dòng không bị hụt cả một dòng
       trống, tên 2 dòng vẫn đủ chỗ — giá các thẻ vẫn tương đối thẳng hàng. */
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: #2b2f36;
    transition: color 0.2s;
}
.product_grid .item .name:hover {
    color: var(--main-color);
}
@media all and (max-width: 600px) {
    .product_grid .item .name {
        margin-top: 12px;
        text-transform: none;
        font-size: 15px;
        line-height: 23px;
        -webkit-line-clamp: 3;
        height: 69px;
    }
}
.product_grid .item .price_arae {
    margin-top: 8px;
}
.product_grid .item .price_current {
    color: #d41920;
    font-weight: 500;
    font-size: 20px;
}
@media all and (max-width: 600px) {
    .product_grid .item .price_current {
        font-size: 16px;
        display: block;
    }
}
.pos5 .products_blocks_wrapper {
    position: relative;
}
.pos5 .products_blocks_wrapper .block_title {
    position: absolute;
    color: #fff;
    border: 1px solid var(--extra-color);
    z-index: 2;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 50px;
    border-radius: 60px;
    font-weight: normal;
    width: auto;
    padding: 0px;
    overflow: hidden;
    background: #fff;
}
.pos5 .products_blocks_wrapper .block_title h2 {
    background: var(--extra-color);
    color: #fff;
    display: inline-block;
    width: auto;
    float: none;
    line-height: 30px;
    padding: 10px 20px;
    padding-left: 30px;
    box-sizing: border-box;
}
/* Khối bọc ngoài bo 60px + overflow:hidden nên đường cong ở góc cắt thẳng vào h2.
   Padding ngang của h2 phải LỚN HƠN bán kính bo (~nửa chiều cao pill, ~25px),
   nếu không đường cong sẽ ăn vào chữ đầu/chữ cuối. Đây là lý do 5px trước đây bị xấu. */
@media all and (max-width: 600px) {
    .pos5 .products_blocks_wrapper .block_title h2 {
        padding: 5px 15px;
        font-size: 14px;
        width: auto;
    }
}
.pos5 .products_blocks_wrapper .block_title h2 span {
    display: inline-block;
    padding-left: 36px;
    position: relative;
}
@media all and (max-width: 600px) {
    .pos5 .products_blocks_wrapper .block_title h2 span {
        padding-left: 0px;
    }
}
.pos5 .products_blocks_wrapper .block_title h2 span:before {
    position: absolute;
    width: 26px;
    height: 26px;
    top: 0px;
    left: 0px;
    content: "";
    background: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.003 512.003" style="enable-background:new 0 0 512.003 512.003;" xml:space="preserve"> <g> <g> <path d="M477.958,262.633c-2.06-4.215-2.06-9.049,0-13.263l19.096-39.065c10.632-21.751,2.208-47.676-19.178-59.023l-38.41-20.38    c-4.144-2.198-6.985-6.11-7.796-10.729l-7.512-42.829c-4.183-23.846-26.241-39.87-50.208-36.479l-43.053,6.09    c-4.647,0.656-9.242-0.838-12.613-4.099l-31.251-30.232c-17.401-16.834-44.661-16.835-62.061,0L193.72,42.859    c-3.372,3.262-7.967,4.753-12.613,4.099l-43.053-6.09c-23.975-3.393-46.025,12.633-50.208,36.479l-7.512,42.827    c-0.811,4.62-3.652,8.531-7.795,10.73l-38.41,20.38c-21.386,11.346-29.81,37.273-19.178,59.024l19.095,39.064    c2.06,4.215,2.06,9.049,0,13.263l-19.096,39.064c-10.632,21.751-2.208,47.676,19.178,59.023l38.41,20.38    c4.144,2.198,6.985,6.11,7.796,10.729l7.512,42.829c3.808,21.708,22.422,36.932,43.815,36.93c2.107,0,4.245-0.148,6.394-0.452    l43.053-6.09c4.643-0.659,9.241,0.838,12.613,4.099l31.251,30.232c8.702,8.418,19.864,12.626,31.03,12.625    c11.163-0.001,22.332-4.209,31.03-12.625l31.252-30.232c3.372-3.261,7.968-4.751,12.613-4.099l43.053,6.09    c23.978,3.392,46.025-12.633,50.208-36.479l7.513-42.827c0.811-4.62,3.652-8.531,7.795-10.73l38.41-20.38    c21.386-11.346,29.81-37.273,19.178-59.024L477.958,262.633z M196.941,123.116c29.852,0,54.139,24.287,54.139,54.139    s-24.287,54.139-54.139,54.139s-54.139-24.287-54.139-54.139S167.089,123.116,196.941,123.116z M168.997,363.886    c-2.883,2.883-6.662,4.325-10.44,4.325s-7.558-1.441-10.44-4.325c-5.766-5.766-5.766-15.115,0-20.881l194.889-194.889    c5.765-5.766,15.115-5.766,20.881,0c5.766,5.766,5.766,15.115,0,20.881L168.997,363.886z M315.061,388.888    c-29.852,0-54.139-24.287-54.139-54.139s24.287-54.139,54.139-54.139c29.852,0,54.139,24.287,54.139,54.139    S344.913,388.888,315.061,388.888z"/> </g> </g> <g> <g> <path d="M315.061,310.141c-13.569,0-24.609,11.039-24.609,24.608s11.039,24.608,24.609,24.608    c13.569,0,24.608-11.039,24.608-24.608S328.63,310.141,315.061,310.141z"/> </g> </g> <g> <g> <path d="M196.941,152.646c-13.569,0-24.608,11.039-24.608,24.608c0,13.569,11.039,24.609,24.608,24.609    c13.569,0,24.609-11.039,24.609-24.609C221.549,163.686,210.51,152.646,196.941,152.646z"/> </g> </g> </svg>');
    background-repeat: no-repeat;
}
@media all and (max-width: 600px) {
    .pos5 .products_blocks_wrapper .block_title h2 span:before {
        display: none;
    }
}
.pos5 .products_blocks_wrapper .block_title h2 span span {
    font-weight: 600;
    color: #f4f3b3;
    padding-left: 0px;
}
.pos5 .products_blocks_wrapper .block_title h2 span span:before {
    display: none;
}
@media all and (max-width: 1025px) {
    .pos5 .products_blocks_wrapper .block_title {
        text-align: center;
        width: auto;
    }
}
@media all and (max-width: 850px) {
    .pos5 .products_blocks_wrapper .block_title {
        text-align: center;
    }
}
/* Mobile: bỏ kiểu treo absolute đè lên mép khối (đó là ý đồ của desktop, nơi có
   card trắng làm nền). Cho tiêu đề chảy theo dòng và căn giữa như .section-title,
   nhờ vậy khoảng cách trên/dưới do margin quyết định, đều và dễ đoán. */
@media all and (max-width: 600px) {
    .pos5 .products_blocks_wrapper .block_title {
        position: static;
        transform: none;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 18px;
        box-sizing: border-box;
    }
}
.products_blocks_wrapper .block_title {
    padding: 10px 15px;
    position: relative;
}
@media all and (max-width: 600px) {
    .products_blocks_wrapper .block_title {
        padding: 5px;
        font-size: 16px;
    }
}
@media all and (max-width: 600px) {
    .products_blocks_wrapper .block_title span {
        padding-left: 0;
    }
}
.products_blocks_slideshow_hot {
    clear: both;
    display: block;
    background: #fff;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    flex: 1 100%;
    position: relative;
    margin: 0px;
    box-sizing: border-box;
}
.products_blocks_slideshow_hot .item {
    width: 100%;
    margin: 0px;
}
.products_blocks_slideshow_hot > .item-block {
    width: calc(100% / 3 - 20px);
    margin: 0 10px;
}
@media all and (max-width: 850px) {
    .products_blocks_slideshow_hot > .item-block {
        width: calc(100% / 3 - 20px);
    }
}
@media all and (max-width: 600px) {
    .products_blocks_slideshow_hot > .item-block {
        width: calc(100% / 2 - 20px);
    }
    .products_blocks_slideshow_hot > .item-block:nth-child(3) {
        display: none;
    }
}
.products_blocks_slideshow_hot {
    box-sizing: border-box;
    padding-top: 60px;
}
/* Mobile: tiêu đề không còn absolute nên không cần chừa chỗ cho nó nữa. */
@media all and (max-width: 600px) {
    .products_blocks_slideshow_hot {
        padding-top: 0;
    }
}
.products_blocks_slideshow_hot .item {
    border: none;
}
.products_blocks_slideshow_hot .item img {
    width: 100%;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}
.products_blocks_slideshow_hot .item:hover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}
.products_blocks_slideshow_hot .item .product_image {
    text-align: center;
    overflow: hidden;
    margin-bottom: 16px;
    min-height: 240px;
    border-radius: 5px;
}
@media (max-width: 1100px) {
    .products_blocks_slideshow_hot .item .product_image {
        min-height: 208px;
    }
}
@media (max-width: 800px) {
    .products_blocks_slideshow_hot .item .product_image {
        min-height: 208px;
    }
}
@media (max-width: 600px) {
    .products_blocks_slideshow_hot .item .product_image {
        min-height: 108px;
    }
}
.products_blocks_slideshow_hot .item .product_image a {
    display: grid;
    position: relative;
}
.products_blocks_slideshow_hot .item-block {
    display: block;
}
.products_blocks_slideshow_hot .name {
    color: #000;
    display: block;
    font-weight: normal;
}
.products_blocks_slideshow_hot .name:hover {
    color: var(--main-color);
}
.products_blocks_slideshow_hot .price_arae {
    position: relative;
}
.products_blocks_slideshow_hot .price_current {
    color: #e10c00;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
}

/* ===== CSS cho khối HERO (slideshow banner) trong index.php ===== */

.hide {
    display: none;
}
.slideshow_countdown {
    margin-top: 20px;
}
.slideshow_countdown .slideshow_home {
    width: calc(73.5%);
    float: left;
}
@media only screen and (max-width: 850px) {
    .slideshow_countdown .slideshow_home {
        width: 100%;
        max-width: 100%;
        float: none;
    }
}
.slideshow_countdown > .countdown {
    width: 26.5%;
    float: right;
    padding-left: 20px;
    box-sizing: border-box;
}
@media only screen and (max-width: 850px) {
    .slideshow_countdown > .countdown {
        width: 100%;
        margin-top: 10px;
        float: none;
        padding-left: 0px;
    }
}
.slideshow_countdown > .countdown .block:first-child {
    margin-top: 0px;
}
.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: none no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition: scale 100ms ease;
    -moz-transition: scale 100ms ease;
    -ms-transition: scale 100ms ease;
    -o-transition: scale 100ms ease;
    transition: scale 100ms ease;
}
.fs-slider-home .item {
    text-align: center;
}
.fs-slider-home .item a {
    display: grid;
}
.fs-slider-home .item a img {
    width: 100%;
    border-radius: 5px;
}
.fs-slider-home .owl-dots {
    text-align: center;
    position: absolute;
    top: 50%;
    border-radius: 19px;
    right: 10px;
    transform: translate(0, -50%) rotate(90deg);
}
.fs-slider-home .owl-dots .owl-dot {
    position: relative;
}
.fs-slider-home .owl-dots .owl-dot.active,
.fs-slider-home .owl-dots .owl-dot:hover {
    background: var(--extra-color);
    border: 1px solid var(--extra-color);
}
.fs-slider-home .owl-nav {
    display: inline-block;
    zoom: 1;
    position: absolute;
    margin: 0;
    width: 30px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    line-height: 20px;
    top: 45%;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s;
    display: flex;
    letter-spacing: 3px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 5px;
    opacity: 0;
}
.fs-slider-home .owl-nav .owl-prev {
    left: 40px;
}
.fs-slider-home .owl-nav .owl-next {
    right: 40px;
}
@media all and (max-width: 850px) {
    .banner_r_slide {
        margin: 0 -4px;
    }
}
.banner_r_slide .item {
    margin-bottom: 16px;
    overflow: hidden;
}
@media all and (max-width: 850px) {
    .banner_r_slide .item {
        width: calc(100% / 2 - 8px);
        float: left;
        margin: 0 4px;
    }
}
.banner_r_slide .item:last-child {
    margin-bottom: 0px;
}
.banner_r_slide .item a {
    position: relative;
    display: grid;
    text-align: left;
    box-sizing: border-box;
    outline: none !important;
}
.banner_r_slide .item a img {
    outline: none !important;
    width: 100%;
    border-radius: 5px;
}

/* Prev/Next cho slide Sản phẩm nổi bật (pos5) — nút tròn 2 bên */
.products_blocks_slideshow_hot .owl-nav {
    margin: 0;
}
.products_blocks_slideshow_hot .owl-nav .owl-prev,
.products_blocks_slideshow_hot .owl-nav .owl-next {
    position: absolute;
    top: 160px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--main-color);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    font-size: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    margin: 0;
    cursor: pointer;
}
.products_blocks_slideshow_hot .owl-nav .owl-prev {
    left: -12px;
}
.products_blocks_slideshow_hot .owl-nav .owl-next {
    right: -12px;
}
.products_blocks_slideshow_hot .owl-nav .owl-prev:before,
.products_blocks_slideshow_hot .owl-nav .owl-next:before {
    content: "";
    width: 11px;
    height: 11px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.products_blocks_slideshow_hot .owl-nav .owl-prev:before {
    transform: rotate(-135deg);
    margin-left: 4px;
}
.products_blocks_slideshow_hot .owl-nav .owl-next:before {
    transform: rotate(45deg);
    margin-right: 4px;
}
.products_blocks_slideshow_hot .owl-nav .owl-prev:hover,
.products_blocks_slideshow_hot .owl-nav .owl-next:hover {
    background: var(--main-color);
    color: #fff;
}
.products_blocks_slideshow_hot .owl-nav .disabled {
    opacity: 0.3;
    cursor: default;
}
@media all and (max-width: 600px) {
    .products_blocks_slideshow_hot .owl-nav .owl-prev,
    .products_blocks_slideshow_hot .owl-nav .owl-next {
        top: 90px;
        width: 34px;
        height: 34px;
    }
    /* giữ nút nằm trong khung, tránh tràn ngang trên mobile */
    .products_blocks_slideshow_hot .owl-nav .owl-prev {
        left: 2px;
    }
    .products_blocks_slideshow_hot .owl-nav .owl-next {
        right: 2px;
    }
}

/* ===== CSS cho khối banner2 trong index.php ===== */
.banner2 {
    overflow: hidden;
    /* Chừa chỗ CẢ TRÊN LẪN DƯỚI cho outline hover nở 6px+2px. overflow:hidden cắt mọi
       cạnh, nên thiếu padding cạnh nào là viền hover ở cạnh đó bị mất — trước đây chỉ có
       padding-bottom nên cạnh trên của item cao nhất (BALLAD) bị cụt. */
    padding-top: 10px;
    padding-bottom: 10px;
}
.block_inner_banner2 {
    margin: 0 -10px 0;
}
@media all and (max-width: 600px) {
    .block_inner_banner2 {
        margin-top: 0px;
    }
}
.block_inner_banner2 .bleft {
    width: calc(100% / 3 - 20px);
    margin: 0 10px;
    float: left;
}
@media all and (max-width: 600px) {
    .block_inner_banner2 .bleft {
        width: calc(100% - 20px);
        margin-top: 20px;
    }

    .block_inner_banner2 .bleft:nth-child(1) {
        margin-top: 0px;
    }
}
.block_inner_banner2 .bleft .item {
    transition: 0.5s;
    opacity: 1;
}
.block_inner_banner2 .bleft .item_2 {
    margin-top: 20px;
}
.block_inner_banner2 .bleft a {
    display: grid;
    overflow: hidden;
    border-radius: 5px;
}
.block_inner_banner2 .bleft a img {
    width: 100%;
    border-radius: 5px;
}

/* Title mục "Các sản phẩm chính" (trên banner2) */
.section-title {
    text-align: center;
    margin: 60px 0 28px;
}
@media all and (max-width: 600px) {
    .section-title {
        margin: 30px 0 18px;
    }
}
.section-title h2 {
    display: inline-block;
    position: relative;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--extra-color);
    padding-bottom: 14px;
}
@media all and (max-width: 600px) {
    .section-title h2 {
        font-size: 19px;
    }
}
.section-title h2:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--yellow-color);
}

/* ===== Khối: Công trình (bento mosaic) ===== */
.projects {
    overflow: hidden;
}
.gallery-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
}
.g-item {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    /* khớp tỉ lệ ảnh gốc 1536x1024 (3:2) => hiện trọn khung, không bị cắt */
    aspect-ratio: 3 / 2;
}
.g-big {
    grid-column: span 2;
    grid-row: span 2;
    /* chiếm 2 hàng => chiều cao do 2 hàng quyết định, giữ đúng 3:2 */
    aspect-ratio: auto;
}
.g-item img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: filter 0.4s;
}
.g-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.g-big .g-cap {
    font-size: 19px;
    padding: 46px 18px 16px;
}
.g-cap:before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 2px;
    background: var(--yellow-color);
}
@media all and (max-width: 700px) {
    .gallery-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 12px;
    }
    .g-big {
        grid-column: span 2;
        grid-row: span 2;
    }
    .g-big .g-cap {
        font-size: 15px;
        padding: 32px 14px 12px;
    }
}

/* ===== Khối: Tin tức (1 nổi bật + list dọc) ===== */
.news-layout {
    display: flex;
    gap: 34px;
}
@media all and (max-width: 850px) {
    .news-layout {
        flex-direction: column;
        gap: 24px;
    }
}
.news-hero {
    flex: 1.25;
    min-width: 0;
    display: block;
}
.news-side {
    flex: 1;
    min-width: 0;
}
.news-hero .thumb {
    border-radius: 8px;
    overflow: hidden;
    /* khớp tỉ lệ ảnh gốc 1536x1024 (3:2) => hiện trọn khung, không bị cắt */
    aspect-ratio: 3 / 2;
}
.news-hero .thumb img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}
.news-hero .date {
    display: inline-block;
    margin-top: 14px;
    color: var(--main-color);
    font-size: 13px;
    font-weight: 600;
}
.news-hero h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
    margin: 6px 0 8px;
    transition: 0.3s;
}
.news-hero:hover h3 {
    color: var(--main-color);
}
.news-hero p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid var(--border-color);
}
.news-side .news-row:first-child {
    border-top: 0;
    padding-top: 0;
}
.news-row .thumb {
    flex: 0 0 200px;
    width: 200px;
    border-radius: 6px;
    overflow: hidden;
    /* khớp tỉ lệ ảnh gốc 3:2 */
    aspect-ratio: 3 / 2;
}
@media all and (max-width: 500px) {
    .news-row .thumb {
        flex: 0 0 130px;
        width: 130px;
    }
}
.news-row .thumb img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}
.news-row h4 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: 0.3s;
}
.news-row:hover h4 {
    color: var(--main-color);
}
.news-row .date {
    color: var(--main-color);
    font-size: 12px;
    font-weight: 600;
}

/* ===== Khối: Video (poster 16:9) ===== */
.videos, .news {
    margin-bottom: 60px;
}
@media all and (max-width: 600px) {
    .videos {
        margin-bottom: 40px;
    }
}
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media all and (max-width: 800px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}
.video-card {
    display: block;
}
.video-card .thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
}
.video-card .thumb img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.video-card .thumb:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 58%);
    transition: 0.3s;
}
.video-card .v-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 16px 18px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.video-card .play:before {
    content: "";
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--main-color);
    margin-left: 3px;
    transition: 0.3s;
}
.video-card:hover .play {
    background: var(--main-color);
    transform: translate(-50%, -50%) scale(1.1);
}
.video-card:hover .play:before {
    border-left-color: #fff;
}

/* ===== Hiệu ứng scroll-reveal ===== */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Hover gallery: đường line xanh chạy quanh khung + vệt sáng quét qua ảnh ===== */
/* 1) Đường line chạy quanh: ::before vẽ cạnh TRÊN -> PHẢI, ::after vẽ cạnh DƯỚI -> TRÁI,
      nối tiếp nhau bằng transition-delay => 1 nét chạy hết vòng khung */
.g-item::before,
.g-item::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: 8px;
    opacity: 0;
}
.g-item::before {
    top: 0;
    left: 0;
    border-top: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
}
.g-item::after {
    right: 0;
    bottom: 0;
    border-bottom: 2px solid var(--main-color);
    border-left: 2px solid var(--main-color);
}
.g-item:hover::before,
.g-item:hover::after {
    opacity: 1;
}
.g-item:hover::before {
    width: 100%;
    height: 100%;
    transition:
        width 0.22s linear,
        height 0.22s linear 0.22s;
}
.g-item:hover::after {
    width: 100%;
    height: 100%;
    transition:
        width 0.22s linear 0.44s,
        height 0.22s linear 0.66s;
}

/* 2) Vệt sáng trắng quét chéo qua ảnh (kiểu hàng "new") */
.g-item .shine {
    position: absolute;
    top: -12%;
    bottom: -12%;
    left: -70%;
    width: 30%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-18deg);
    /* vệt hẹp + đậm để "ăn" được trên ảnh nền sáng */
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 40%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.35) 60%,
        rgba(255, 255, 255, 0) 100%
    );
}
.g-item:hover .shine {
    animation: g-shine 0.9s ease-out 0.12s;
}
@keyframes g-shine {
    0% {
        left: -70%;
        opacity: 1;
    }
    100% {
        left: 125%;
        opacity: 1;
    }
}

/* zoom giữ lại nhưng nhẹ hơn để không lấn 2 hiệu ứng trên.
   brightness giảm nhẹ => tạo tương phản cho vệt sáng trắng "ăn" được trên ảnh nền sáng */
.g-item:hover img {
    filter: brightness(0.92);
}

/* ===== Hover khối tin tức: nâng khối + đổ bóng sâu (KHÔNG zoom, KHÔNG phủ lên ảnh) ===== */
.news-hero .thumb,
.news-row .thumb {
    position: relative;
    transition:
        transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.news-hero:hover .thumb,
.news-row:hover .thumb {
    transform: translateY(-6px);
    /* bóng nhiều lớp: 1 lớp xa toả xanh + 1 lớp gần đen => cảm giác nổi khối, sâu */
    box-shadow:
        0 18px 34px -12px rgba(7, 108, 57, 0.4),
        0 6px 14px -6px rgba(0, 0, 0, 0.18);
}

/* ===== Hover "Các sản phẩm chính": vòng viền xanh bung ra NGOÀI khung
   Dùng outline => vẽ hoàn toàn bên ngoài hộp ảnh, KHÔNG đè lên ảnh, không chiếm layout ===== */
.block_inner_banner2 .bleft a {
    outline: 2px solid transparent;
    outline-offset: 0;
    transition:
        outline-color 0.3s ease,
        outline-offset 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.block_inner_banner2 .bleft a:hover {
    outline-color: var(--main-color);
    outline-offset: 6px;
}

/* ===== Hover khối video: vòng ripple lan toả từ nút play (KHÔNG zoom, KHÔNG đụng vào ảnh) ===== */
.video-card .play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--main-color);
    opacity: 0;
    pointer-events: none;
}
.video-card:hover .play::after {
    animation: v-ripple 1.5s ease-out infinite;
}
@keyframes v-ripple {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
/* caption nhích lên nhẹ cho có nhịp (chữ, không phải ảnh) */
.video-card .v-cap {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.video-card:hover .v-cap {
    transform: translateY(-4px);
}

/* ===== Hover 2 banner phải trong hero: trượt ngang + đổ bóng
   Tác động lên .item (không phải ảnh) => KHÔNG zoom, KHÔNG đè gì lên ảnh ===== */
.banner_r_slide .item {
    border-radius: 5px;
    transition:
        transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.45s ease;
}
.banner_r_slide .item:hover {
    transform: translateX(-8px);
    box-shadow: -10px 12px 28px -8px rgba(0, 0, 0, 0.3);
}

/* ===== Trang danh sách tin tức (archive) ===== */
.breadcrumbs {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}
.breadcrumbs .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}
.breadcrumbs .breadcrumb__item + .breadcrumb__item:before {
    content: "\203A";
    margin-right: 8px;
    color: #b5b9bf;
}
.breadcrumbs .breadcrumb__item {
    display: flex;
    align-items: center;
    color: var(--text-color);
}
.breadcrumbs .breadcrumb__item a {
    color: #7d838c;
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumbs .breadcrumb__item:last-child a,
.breadcrumbs .breadcrumb__item a:hover {
    color: var(--main-color);
}

.main_wrapper {
    padding: 30px 0 60px;
}
@media all and (max-width: 600px) {
    .main_wrapper {
        padding: 20px 0 40px;
    }
}

.default_page_content {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
@media all and (max-width: 900px) {
    .default_page_content {
        flex-direction: column;
        gap: 24px;
    }
}
.default_page_content_l {
    flex: 0 0 230px;
    width: 230px;
}
.default_page_content_r {
    flex: 1 1 auto;
    min-width: 0;
}
/* Mobile/tablet: ẩn hẳn sidebar danh mục, nội dung chiếm trọn bề ngang */
@media all and (max-width: 900px) {
    .default_page_content_l {
        display: none;
    }
    .default_page_content_r {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Sidebar danh mục */
.page_menu .name_cat {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b2f36;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--main-color);
}
.page_menu .list_cats {
    display: flex;
    flex-direction: column;
}
.page_menu .item_cat {
    position: relative;
    padding: 13px 0 13px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s;
}
.page_menu .item_cat:before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c9ced6;
    transition: background 0.2s;
}
.page_menu .item_cat:hover,
.page_menu .item_cat.active {
    color: var(--main-color);
}
.page_menu .item_cat:hover:before,
.page_menu .item_cat.active:before {
    background: var(--main-color);
}

/* Tiêu đề trang */
.page_title {
    margin: 0 0 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--main-color);
}
@media all and (max-width: 600px) {
    .page_title {
        font-size: 19px;
    }
}

/* Ảnh trong card */
.related_grid .figure_image {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
}
.related_grid .figure_image .item-img {
    display: block;
}
.related_grid .figure_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.related_grid .item:hover .figure_image img {
    transform: scale(1.05);
}

/* Card: tiêu đề, ngày, tóm tắt */
.related_grid h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}
.related_grid h2 .name {
    color: #2b2f36;
    text-decoration: none;
    transition: color 0.2s;
}
.related_grid h2 .name:hover {
    color: var(--main-color);
}
.related_grid .view_datetime {
    margin-bottom: 10px;
}
.related_grid .datetime {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9aa0a8;
}
.related_grid .datetime:before {
    content: "";
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")
        center/contain no-repeat;
}
.related_grid .summary {
    font-size: 14px;
    line-height: 1.6;
    color: #6b717a;
}

/* Khối trên: 1 bài nổi bật + 4 bài phụ */
.related_grid {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
}
@media all and (max-width: 780px) {
    .related_grid {
        flex-direction: column;
        gap: 24px;
    }
}
.related_grid .item_l {
    flex: 0 0 calc(50% - 15px);
    width: calc(50% - 15px);
}
.related_grid .item_l .figure_image {
    aspect-ratio: 16 / 11;
    margin-bottom: 14px;
}
.related_grid .item_l h2 {
    font-size: 20px;
}
@media all and (max-width: 780px) {
    .related_grid .item_l {
        flex: 1 1 100%;
        width: 100%;
    }
    .related_grid .item_l h2 {
        font-size: 18px;
    }
}
.box_related_r {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
@media all and (max-width: 780px) {
    .box_related_r {
        width: 100%;
    }
}
.box_related_r .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.box_related_r .figure_image {
    flex: 0 0 130px;
    width: 130px;
    aspect-ratio: 4 / 3;
}
.box_related_r h2 {
    font-size: 14px;
    margin-bottom: 6px;
}
.box_related_r .view_datetime {
    margin-bottom: 0;
}

/* Khối dưới: danh sách bài dạng hàng ngang */
.related_grid_bottom {
    display: block;
    padding: 0;
    border-bottom: 0;
}
.related_grid_bottom .item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
}
@media all and (max-width: 600px) {
    .related_grid_bottom .item {
        gap: 14px;
    }
}
.related_grid_bottom .figure_image {
    flex: 0 0 200px;
    width: 200px;
    aspect-ratio: 4 / 3;
}
@media all and (max-width: 600px) {
    .related_grid_bottom .figure_image {
        flex: 0 0 120px;
        width: 120px;
    }
}
.related_grid_bottom .box_content {
    flex: 1 1 auto;
    min-width: 0;
}
.related_grid_bottom h2 {
    font-size: 18px;
}
@media all and (max-width: 600px) {
    .related_grid_bottom h2 {
        font-size: 15px;
    }
    .related_grid_bottom .summary {
        display: none;
    }
}

/* Phân trang */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 36px;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 13px;
    color: var(--text-color);
    text-decoration: none;
    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s;
}
.pagination a.page-numbers:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}
.pagination .page-numbers.current {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}
.pagination .page-numbers.dots {
    border-color: transparent;
    min-width: auto;
}

/* ===== Trang chi tiết bài viết (single) ===== */
.single_post {
    padding-top: 4px;
}
.entry_title {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    color: #2b2f36;
}
@media all and (max-width: 600px) {
    .entry_title {
        font-size: 22px;
    }
}
.entry_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}
.entry_meta .datetime {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9aa0a8;
}
.entry_meta .datetime:before {
    content: "";
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")
        center/contain no-repeat;
}
.entry_meta .entry_cat {
    padding: 3px 10px;
    border-radius: 3px;
    background: #eef7f0;
    font-size: 12px;
    color: var(--extra-color);
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
}
.entry_meta .entry_cat:hover {
    background: var(--main-color);
    color: #fff;
}

.entry_sapo {
    margin: 20px 0;
    padding-left: 16px;
    border-left: 3px solid var(--main-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #4a4f57;
}

.entry_thumb {
    margin: 0 0 24px;
    border-radius: 4px;
    overflow: hidden;
}
.entry_thumb img {
    display: block;
    width: 100%;
    height: auto;
}

/* Nội dung soạn thảo từ WYSIWYG */
.entry_content {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-color);
}
.entry_content > *:first-child {
    margin-top: 0;
}
.entry_content p {
    margin: 0 0 16px;
}
.entry_content h2,
.entry_content h3,
.entry_content h4 {
    margin: 32px 0 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #2b2f36;
}
.entry_content h2 {
    font-size: 22px;
    padding-left: 14px;
    border-left: 4px solid var(--main-color);
}
.entry_content h3 {
    font-size: 18px;
    color: var(--extra-color);
}
.entry_content h4 {
    font-size: 16px;
}
.entry_content a {
    color: var(--main-color);
    text-decoration: underline;
}
.entry_content a:hover {
    color: var(--extra-color);
}
.entry_content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.entry_content figure {
    margin: 24px 0;
}
.entry_content figcaption,
.entry_content .wp-caption-text {
    margin-top: 8px;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    color: #9aa0a8;
}
.entry_content ul,
.entry_content ol {
    margin: 0 0 16px;
    padding-left: 20px;
}
.entry_content li {
    margin-bottom: 8px;
}
.entry_content ul {
    list-style: none;
    padding-left: 0;
}
.entry_content ul li {
    position: relative;
    padding-left: 18px;
}
.entry_content ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--main-color);
}
/* Chấm tròn ở trên là kiểu cho danh sách trong BÀI VIẾT. Giỏ hàng và thanh toán lại
   render bên trong .entry_content của page.php, nên nó lan sang mọi <li> của
   WooCommerce — phương thức vận chuyển, phương thức thanh toán đều mọc chấm xanh và
   bị thụt lề 18px. Chặn lại ở đây. */
.entry_content .woocommerce ul li {
    padding-left: 0;
}
.entry_content .woocommerce ul li:before {
    content: none;
}
.entry_content blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--yellow-color);
    border-radius: 0 4px 4px 0;
    background: #fbfbfc;
    font-style: italic;
    color: #4a4f57;
}
.entry_content blockquote p:last-child {
    margin-bottom: 0;
}
.entry_content table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 14px;
}
.entry_content th,
.entry_content td {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}
.entry_content th {
    background: #f6f8f7;
    font-weight: 600;
    color: #2b2f36;
}
.entry_content .page-links {
    margin-top: 20px;
    font-size: 14px;
}

/* Từ khóa */
.entry_tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.entry_tags .tags_label {
    font-size: 14px;
    font-weight: 600;
    color: #2b2f36;
}
.entry_tags a {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-color);
    text-decoration: none;
    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s;
}
.entry_tags a:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}

/* Điều hướng bài trước / bài sau */
.entry_nav {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}
@media all and (max-width: 600px) {
    .entry_nav {
        flex-direction: column;
    }
}
.entry_nav a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color 0.2s;
}
.entry_nav a:hover {
    border-color: var(--main-color);
}
.entry_nav .nav_next {
    text-align: right;
}
.entry_nav .nav_label {
    font-size: 12px;
    color: #9aa0a8;
}
.entry_nav .nav_title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #2b2f36;
    transition: color 0.2s;
}
.entry_nav a:hover .nav_title {
    color: var(--main-color);
}

/* Tin tức liên quan */
.related_news {
    margin-top: 40px;
}
.related_news_title {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--main-color);
}
.related_news_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0;
    border-bottom: 0;
}
@media all and (max-width: 900px) {
    .related_news_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.related_news_grid .item {
    display: block;
}
.related_news_grid .figure_image {
    aspect-ratio: 4 / 3;
    margin-bottom: 10px;
}
.related_news_grid h2 {
    font-size: 14px;
}
.related_news_grid .view_datetime {
    margin-bottom: 0;
}
/* Màn hình hẹp: xếp hàng ngang, ảnh nhỏ bên trái cho đỡ dài trang */
@media all and (max-width: 480px) {
    .related_news_grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .related_news_grid .item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border-color);
    }
    .related_news_grid .item:first-child {
        padding-top: 0;
    }
    .related_news_grid .item:last-child {
        border-bottom: 0;
    }
    .related_news_grid .figure_image {
        flex: 0 0 110px;
        width: 110px;
        margin-bottom: 0;
    }
    .related_news_grid .box_content {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ===== Trang liên hệ ===== */
.contact_layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-top: 26px;
}
@media all and (max-width: 900px) {
    .contact_layout {
        flex-direction: column;
        gap: 24px;
    }
}
.contact_info {
    flex: 0 0 400px;
    width: 400px;
}
.contact_form {
    flex: 1 1 auto;
    min-width: 0;
}
@media all and (max-width: 900px) {
    .contact_info,
    .contact_form {
        flex: 1 1 100%;
        width: 100%;
    }
}

.contact_box {
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fbfcfb;
}
.contact_company {
    padding-bottom: 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--extra-color);
}
.contact_list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact_list li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 0 14px 34px;
    border-bottom: 1px solid var(--border-color);
}
.contact_list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.contact_list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.contact_list .ci_address:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0116 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.contact_list .ci_phone:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012 4.2 2 2 0 014 2h3a2 2 0 012 1.7c.1 1 .4 1.9.7 2.8a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.3-1.1a2 2 0 012.1-.5c.9.3 1.8.6 2.8.7a2 2 0 011.7 2z'/%3E%3C/svg%3E");
}
.contact_list .ci_email:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 6L2 7'/%3E%3C/svg%3E");
}
.contact_list .ci_time:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239843' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.contact_list .ci_label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa0a8;
}
.contact_list .ci_value {
    font-size: 15px;
    line-height: 1.5;
    color: #2b2f36;
}
.contact_list .ci_value a {
    color: #2b2f36;
    text-decoration: none;
    transition: color 0.2s;
}
.contact_list .ci_value a:hover {
    color: var(--main-color);
}

.contact_map {
    margin-top: 20px;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
}

.contact_form_title {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--main-color);
}
.contact_form_desc {
    margin: 8px 0 20px;
    font-size: 14px;
    color: #6b717a;
}
.contact_form_missing {
    padding: 14px 16px;
    border: 1px dashed #d9534f;
    border-radius: 4px;
    color: #d9534f;
}
.contact_content {
    margin-top: 40px;
}

/* Contact Form 7
   CF7 xuất mỗi field dạng: <p><label>Nhãn<br><span class="wpcf7-form-control-wrap"><input></span></label></p>
   Nên khoảng cách phải đặt trên <p> (giữa các field) và trên .wpcf7-form-control-wrap
   (giữa nhãn và ô nhập) — <br> là thẻ inline, không nhận margin/padding. */
.contact_form .wpcf7-form p {
    margin: 0 0 18px;
}
.contact_form label {
    display: block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2b2f36;
}
/* Ô nhập xuống dòng bằng block, nên bỏ <br> để không thừa một dòng trống. */
.contact_form label br {
    display: none;
}
.contact_form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 7px;
}
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form input[type="url"],
.contact_form input[type="number"],
.contact_form input[type="date"],
.contact_form select,
.contact_form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-color);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.contact_form input:focus,
.contact_form select:focus,
.contact_form textarea:focus {
    outline: 0;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(35, 152, 67, 0.12);
}
.contact_form textarea {
    min-height: 140px;
    resize: vertical;
}
.contact_form input::placeholder,
.contact_form textarea::placeholder {
    color: #b5b9bf;
}
.contact_form input[type="submit"],
.contact_form .wpcf7-submit {
    width: auto;
    min-width: 170px;
    padding: 12px 32px;
    border: 0;
    border-radius: 4px;
    background: var(--main-color);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.contact_form input[type="submit"]:hover,
.contact_form .wpcf7-submit:hover {
    background: var(--extra-color);
}
.contact_form .wpcf7-spinner {
    vertical-align: middle;
}
/* Thông báo lỗi / thành công của CF7 */
.contact_form .wpcf7-not-valid-tip {
    margin-top: 5px;
    font-size: 12px;
    color: #d9534f;
}
.contact_form .wpcf7-not-valid {
    border-color: #d9534f;
}
.contact_form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-width: 1px;
    border-radius: 4px;
    font-size: 14px;
}
.contact_form form.sent .wpcf7-response-output {
    border-color: var(--main-color);
    background: #eef7f0;
    color: var(--extra-color);
}
.contact_form form.invalid .wpcf7-response-output,
.contact_form form.failed .wpcf7-response-output {
    border-color: #d9534f;
    background: #fdf2f2;
    color: #d9534f;
}

/* ===== Trang tĩnh (page) ===== */
.single_page .page_title {
    margin-bottom: 24px;
}
.single_page .page_thumb {
    margin-bottom: 26px;
}
.single_page .page_content {
    font-size: 16px;
}
.single_page .page_content > *:last-child {
    margin-bottom: 0;
}

/* ===== WooCommerce: danh mục & chi tiết sản phẩm ===== */

/* Trang shop chạy full bề ngang — sidebar danh mục chỉ dùng cho tin tức. */
.shop_content {
    padding-top: 4px;
}

/* Thanh trên lưới: kết quả + sắp xếp */
.woocommerce-notices-wrapper:empty {
    display: none;
}
.shop_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.woocommerce-result-count {
    margin: 0;
    font-size: 13px;
    color: #9aa0a8;
}
.woocommerce-ordering {
    margin: 0;
}
.woocommerce-ordering select {
    padding: 7px 12px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-color);
}
.woocommerce-ordering select:focus {
    outline: 0;
    border-color: var(--main-color);
}
@media all and (max-width: 600px) {
    .shop_toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .woocommerce-ordering select {
        width: 100%;
    }
}

/* Giá trong lưới. get_price_html() xuất .woocommerce-Price-amount (KHÔNG có .price),
   nên phải nhắm đúng class đó — trước đây nhắm .price nên giá không ăn style, hiện nhạt. */
.product_grid .price_arae {
    margin-top: 12px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: #d0021b;
}
.product_grid .price_arae .woocommerce-Price-amount,
.product_grid .price_arae .amount,
.product_grid .price_arae .price,
.product_grid .price_arae ins {
    font-size: 19px;
    font-weight: 700;
    color: #d0021b;
    text-decoration: none;
}
.product_grid .price_arae ins {
    background: none;
}
/* Giá gạch (khi sale) — nhỏ, xám, để cạnh giá mới */
.product_grid .price_arae del,
.product_grid .price_arae del .amount {
    margin-right: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #9aa0a8;
}
@media all and (max-width: 600px) {
    .product_grid .price_arae,
    .product_grid .price_arae .woocommerce-Price-amount,
    .product_grid .price_arae .amount,
    .product_grid .price_arae .price,
    .product_grid .price_arae ins {
        font-size: 16px;
    }
}
.product_grid .product_type_out {
    background: #9aa0a8;
}

/* ===== Chi tiết sản phẩm: gallery ảnh =====
   Các selector dưới đây dài bất thường là CỐ Ý. woocommerce.css nhắm rất sâu, ví dụ
   ".woocommerce div.product div.images .flex-control-thumbs li img" (0,4,4) ép
   thumbnail thành width:25% + float:left. Muốn thắng phải chèn thêm .pd_gallery
   vào chuỗi để đạt (0,5,4). Rút gọn selector là lỗi quay lại ngay. */
.woocommerce div.product .pd_gallery div.images {
    float: none;
    width: 100%;
    margin-bottom: 0;
}

/* Khung ảnh chính: ép mọi ảnh về cùng khổ vuông. Không ép thì ảnh cao/dài sẽ kéo
   khung giãn ra, và khi hover zoom ảnh gốc còn tràn xuống làm trang nhảy. */
.woocommerce div.product .pd_gallery div.images .flex-viewport {
    border-radius: 6px;
}
.woocommerce div.product .pd_gallery div.images .woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
/* Loại trừ .zoomImg: đó là ảnh phóng to do thư viện zoom chèn vào, nó PHẢI giữ kích
   thước gốc thì mới zoom được — ép khổ vào nó là mất luôn tính năng phóng to. */
.woocommerce div.product .pd_gallery div.images .woocommerce-product-gallery__image img:not(.zoomImg) {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

/* Nút phóng to */
.woocommerce div.product .pd_gallery div.images .woocommerce-product-gallery__trigger {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}
.woocommerce div.product .pd_gallery div.images .woocommerce-product-gallery__trigger:hover {
    transform: scale(1.08);
}

/* Hàng thumbnail */
.woocommerce div.product .pd_gallery div.images .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    overflow: visible;
}
.woocommerce div.product .pd_gallery div.images .flex-control-thumbs li {
    width: 74px;
    float: none;
    margin: 0;
    list-style: none;
}
/* aspect-ratio ép mọi thumbnail về cùng một khổ vuông, nếu không ảnh cao thấp
   khác nhau sẽ làm hàng thumbnail so le. */
.woocommerce div.product .pd_gallery div.images .flex-control-thumbs li img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    opacity: 0.55;
    cursor: pointer;
    transition:
        opacity 0.2s,
        border-color 0.2s;
}
.woocommerce div.product .pd_gallery div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product .pd_gallery div.images .flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: var(--main-color);
}
.single-product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 30px;
    border: 0;
    border-radius: 4px;
    background: var(--main-color);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}
.single-product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--extra-color);
    color: #fff;
}
.woocommerce .button.alt {
    background: var(--extra-color);
}

/* Sản phẩm liên quan / bán chạy — tiêu đề dùng lại đúng kiểu .section-title ngoài
   trang chủ: canh giữa, gạch vàng ngắn. Bỏ kẻ ngang trên/dưới vì chồng với gạch của
   thanh tab và tiêu đề sidebar thành quá nhiều đường trong một khoảnh. */
.pd_related {
    margin-top: 20px;
}
.related > h2,
.upsells > h2 {
    position: relative;
    margin: 0 0 28px;
    padding-bottom: 14px;
    border-bottom: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: var(--extra-color);
}
@media all and (max-width: 600px) {
    .related > h2,
    .upsells > h2 {
        font-size: 19px;
    }
}
.related > h2:after,
.upsells > h2:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--yellow-color);
}

/* Thông báo của WooCommerce */
/* Selector bắt buộc phải có .woocommerce ở đầu (0,2,0). Thông báo lỗi của Woo là thẻ
   <ul>, mà CSS bài viết có ".entry_content ul{padding-left:0}" ở (0,1,1) — mạnh hơn
   ".woocommerce-error" (0,1,0) nên nó xoá sạch padding trái và icon đâm vào chữ.
   padding-left 46px chính là chỗ chừa cho icon ::before mà Woo đặt ở position:absolute. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    position: relative;
    margin: 0 0 20px;
    padding: 14px 16px 14px 46px;
    border-top: 0;
    border-left: 3px solid var(--main-color);
    border-radius: 0 4px 4px 0;
    background: #eef7f0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    list-style: none;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
    top: 15px;
    left: 16px;
    color: var(--main-color);
}
.woocommerce .woocommerce-error {
    border-left-color: #d0021b;
    background: #fdf2f2;
}
.woocommerce .woocommerce-error::before {
    color: #d0021b;
}

/* Mỗi lỗi là một <li>. Reset lại kiểu danh sách bài viết đang lan vào. */
.woocommerce .woocommerce-error li,
.woocommerce .woocommerce-message li,
.woocommerce .woocommerce-info li {
    margin: 0 0 6px;
    padding-left: 0;
    list-style: none;
}
.woocommerce .woocommerce-error li:last-child,
.woocommerce .woocommerce-message li:last-child,
.woocommerce .woocommerce-info li:last-child {
    margin-bottom: 0;
}

/* Woo bọc lỗi validate trong <a> nhảy tới field. Không style thì nó ăn phải
   ".entry_content a" — xanh lá gạch chân, nhìn như link quảng cáo giữa hộp lỗi đỏ. */
.woocommerce .woocommerce-error a {
    color: #b3111a;
    font-weight: 600;
    text-decoration: none;
}
.woocommerce .woocommerce-error a:hover {
    color: #d0021b;
    text-decoration: underline;
}
.woocommerce .woocommerce-error strong {
    font-weight: 700;
}

.woocommerce-message .button,
.woocommerce-info .button {
    height: 34px;
    padding: 0 16px;
    margin-left: 12px;
    font-size: 13px;
}

/* ===== Chi tiết sản phẩm — bố cục theo mẫu ===== */
.pd_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.pd_head .product_title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #2b2f36;
}
@media all and (max-width: 600px) {
    .pd_head .product_title {
        font-size: 19px;
    }
}

/* Cột phải của hàng trên (marketing) và hàng dưới (thông số + bài liên quan) phải
   thẳng hàng nhau, nên dùng chung một bề rộng và một khoảng cách — đổi ở đây là cả
   hai cùng đổi, không thể lệch. */
.single_product_page {
    --pd-aside: 250px;
    --pd-gap: 26px;
}

/* Hàng trên: gallery | thông tin mua | cột marketing */
.pd_top {
    display: flex;
    align-items: flex-start;
    gap: var(--pd-gap);
    margin-bottom: 40px;
}
.pd_gallery {
    flex: 0 0 36%;
    width: 36%;
}
.pd_summary {
    flex: 1 1 auto;
    min-width: 0;
}
.pd_aside {
    flex: 0 0 var(--pd-aside);
    width: var(--pd-aside);
}
@media all and (max-width: 1024px) {
    .pd_aside {
        display: none;
    }
}
@media all and (max-width: 780px) {
    .pd_top {
        flex-direction: column;
        gap: 20px;
    }
    .pd_gallery,
    .pd_summary {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Giá */
.pd_price {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #d0021b;
}
.pd_price del {
    margin-right: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #9aa0a8;
}
.pd_price ins {
    text-decoration: none;
}
@media all and (max-width: 600px) {
    .pd_price {
        font-size: 24px;
    }
}
.pd_price_note {
    margin: 6px 0 18px;
    font-size: 13px;
    font-style: italic;
    color: #9aa0a8;
}

/* Banner xanh */
.pd_banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    padding: 12px 16px;
    border-radius: 6px;
    background: var(--main-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}
.pd_banner_icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 7.4H22l-6 4.4 2.3 7.2-6.3-4.6-6.3 4.6L7.9 13.8 2 9.4h7.6z'/%3E%3C/svg%3E")
        center / 18px no-repeat;
}

/* Meta: thương hiệu, mã SP, tồn kho */
.pd_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
    margin-bottom: 18px;
    font-size: 14px;
}
.pd_meta_row {
    display: flex;
    gap: 6px;
}
.pd_meta_label {
    font-weight: 600;
    color: #2b2f36;
}
.pd_meta_value.in_stock {
    color: var(--main-color);
    font-weight: 600;
}
.pd_meta_value.out_stock {
    color: #d0021b;
}

/* Form chọn biến thể + nút mua */
.single_product_page form.cart {
    display: block;
    margin: 0 0 18px;
}
.single_product_page .variations {
    width: auto;
    margin-bottom: 14px;
    border-collapse: collapse;
}
.single_product_page .variations th,
.single_product_page .variations td {
    padding: 0 10px 10px 0;
    border: 0;
    text-align: left;
    vertical-align: middle;
}
.single_product_page .variations label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2b2f36;
}
.single_product_page .variations select {
    min-width: 220px;
    padding: 9px 12px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
}
.single_product_page .variations select:focus {
    outline: 0;
    border-color: var(--main-color);
}
.single_product_page .reset_variations {
    margin-left: 10px;
    font-size: 12px;
    color: #9aa0a8;
}

/* Số lượng + 2 nút nằm chung một hàng. flex-basis để nhỏ (130px) là CỐ Ý: để lớn
   thì tổng bề rộng vượt cột và nút thứ hai bị đẩy xuống dòng. Vẫn giữ wrap để màn
   hẹp tự xuống hàng. */
.pd_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
/* ===== Ô số lượng: nút − / + =====
   Áp cho cả trang sản phẩm lẫn giỏ hàng. Nút do hook trong inc/woocommerce.php sinh ra,
   phần cộng trừ nằm ở effects.js.
   Selector có .woocommerce vì woocommerce.css ép ".woocommerce .quantity .qty{width:3.631em}". */
.woocommerce .quantity {
    display: inline-flex;
    align-items: stretch;
    height: 42px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
/* Woo đặt "form.cart div.quantity{float:left;margin:0 4px 0 0}" — float thì .pd_actions
   là flex nên bỏ qua được, nhưng margin 4px vẫn cộng thêm vào gap. Dọn cho sạch. */
.woocommerce div.product form.cart .pd_actions div.quantity {
    float: none;
    margin: 0;
}
.woocommerce .quantity .qty_btn {
    width: 28px;
    padding: 0;
    border: 0;
    background: #f6f8f7;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s;
}
.woocommerce .quantity .qty_btn:hover {
    background: var(--main-color);
    color: #fff;
}
.woocommerce .quantity .qty {
    width: 36px;
    height: auto;
    padding: 0 2px;
    border: 0;
    border-left: 1px solid #dfe3e8;
    border-right: 1px solid #dfe3e8;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #2b2f36;
}
.woocommerce .quantity .qty:focus {
    outline: 0;
}
/* Ẩn mũi tên tăng/giảm mặc định của trình duyệt — đã có nút riêng, để cả hai vừa
   thừa vừa lệch nhau giữa Chrome và Firefox. */
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.woocommerce .quantity input[type="number"].qty {
    -moz-appearance: textfield;
    appearance: textfield;
}
.single_product_page .pd_buy_now,
.single_product_page .single_add_to_cart_button {
    flex: 1 1 130px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
}
/* Chọn thừa .woocommerce + div.product + tên thẻ là CỐ Ý: woocommerce.css có
   ".woocommerce button.button.alt{background-color:#7f54b3}" (tím) với độ ưu tiên
   (0,3,1). Rule ngắn hơn sẽ thua và nút ra màu tím mặc định của Woo. */
.woocommerce div.product .pd_actions button.single_add_to_cart_button {
    background: var(--main-color);
}
.woocommerce div.product .pd_actions button.single_add_to_cart_button:hover {
    background: var(--extra-color);
}
/* Và rule đỏ phải đứng SAU rule xanh: nút "Mua ngay" ở bản biến thể mang cả class
   single_add_to_cart_button (để Woo khoá nút khi chưa chọn), nên cùng độ ưu tiên. */
.woocommerce div.product .pd_actions button.pd_buy_now {
    background: #e02b27;
}
.woocommerce div.product .pd_actions button.pd_buy_now:hover {
    background: #c0211d;
}
.woocommerce div.product .pd_actions button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cần tư vấn */
.pd_advice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 4px;
    background: #2b2f36;
}
.pd_advice_label {
    color: #fff;
    line-height: 1.3;
}
.pd_advice_label strong {
    display: block;
    font-size: 14px;
}
.pd_advice_label span {
    font-size: 11px;
    color: #b5b9bf;
}
.pd_advice_form {
    flex: 1 1 auto;
    min-width: 0;
}
.pd_advice_form .wpcf7-form p {
    display: flex;
    margin: 0;
}
.pd_advice_form .wpcf7-form-control-wrap {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.pd_advice_form input[type="tel"],
.pd_advice_form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px 0 0 4px;
    font-family: inherit;
    font-size: 13px;
}
.pd_advice_form input[type="submit"] {
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 0 4px 4px 0;
    background: var(--yellow-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #2b2f36;
    cursor: pointer;
}

/* Mua hàng chính hãng */
.pd_trust {
    position: relative;
    margin-bottom: 18px;
    padding: 18px 16px 14px;
    border: 1px solid var(--main-color);
    border-radius: 4px;
}
/* white-space: nowrap là BẮT BUỘC, không phải để cho đẹp. Phần tử absolute co bề
   rộng theo khoảng trống còn lại tính từ mốc left — với left:50% nó chỉ được rộng
   bằng nửa khung. Ở mobile nửa khung không đủ chứa "MUA HÀNG CHÍNH HÃNG" nên chữ
   xuống dòng và tràn ra khỏi viền. nowrap cho nó rộng theo nội dung, translateX(-50%)
   vẫn canh giữa đúng. */
.pd_trust_title {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
    color: #2b2f36;
}
@media all and (max-width: 380px) {
    .pd_trust_title {
        font-size: 12px;
    }
}
.pd_trust_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pd_trust_list li {
    position: relative;
    width: 50%;
    padding-left: 24px;
    box-sizing: border-box;
    font-size: 13px;
    color: var(--text-color);
}
@media all and (max-width: 480px) {
    .pd_trust_list li {
        width: 100%;
    }
}
.pd_trust_list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239843' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

/* Tags */
.pd_tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.pd_tags_label {
    font-weight: 600;
    color: #2b2f36;
}
.pd_tags a {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: #fbfbfc;
    color: var(--text-color);
    text-decoration: none;
}
.pd_tags a:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

/* Cột marketing bên phải */
.pd_box {
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}
.pd_box_title {
    padding: 12px 14px;
    background: var(--main-color);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.pd_box_title_center {
    background: #fff;
    color: #2b2f36;
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
}
.pd_partner_item {
    display: block;
    position: relative;
    padding: 12px 30px 12px 14px;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    transition: background 0.2s;
}
.pd_partner_item:last-child {
    border-bottom: 0;
}
.pd_partner_item:hover {
    background: #fbfcfb;
}
.pd_partner_item:after {
    content: "";
    position: absolute;
    right: 12px;
    top: 16px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--yellow-color)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")
        center / 8px no-repeat;
}
.pd_partner_head {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #2b2f36;
}
.pd_partner_desc {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: #6b717a;
}
.pd_useful_list {
    margin: 0;
    padding: 8px 14px;
    list-style: none;
}
.pd_useful_list li {
    position: relative;
    padding: 8px 0 8px 14px;
    font-size: 13px;
}
.pd_useful_list li:before {
    content: "\203A";
    position: absolute;
    left: 0;
    top: 6px;
    color: #b5b9bf;
}
.pd_useful_list a {
    color: var(--text-color);
    text-decoration: none;
}
.pd_useful_list a:hover {
    color: var(--main-color);
}
.pd_hotline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--main-color);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}
.pd_hotline:before {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 15.5c-1.2 0-2.4-.2-3.6-.6-.3-.1-.7 0-1 .2l-2.2 2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.3-1.1-.5-2.3-.5-3.5 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

/* Hàng dưới: mô tả | thông số */
.pd_bottom {
    display: flex;
    align-items: flex-start;
    gap: var(--pd-gap);
    margin-bottom: 40px;
}
.pd_main {
    flex: 1 1 auto;
    min-width: 0;
}
/* Cùng bề rộng với .pd_aside để hai cột phải thẳng hàng — xem ghi chú ở .single_product_page. */
.pd_side {
    flex: 0 0 var(--pd-aside);
    width: var(--pd-aside);
}
@media all and (max-width: 900px) {
    .pd_bottom {
        flex-direction: column;
        gap: 30px;
    }
    .pd_main,
    .pd_side {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Thanh nhảy tới mục */
.pd_jump {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}
.pd_jump a {
    padding: 12px 26px;
    border-radius: 4px 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.2s;
}
.pd_jump a:hover {
    color: var(--main-color);
}
.pd_jump a.active {
    background: var(--main-color);
    color: #fff;
}
@media all and (max-width: 600px) {
    .pd_jump a {
        flex: 1 1 auto;
        padding: 10px 12px;
        text-align: center;
        font-size: 13px;
    }
}

.pd_info_title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--main-color);
}

/* Thu gọn mô tả — max-height phải khớp hằng MAX trong effects.js */
.pd_desc {
    position: relative;
}
.pd_desc.is-collapsed {
    max-height: 420px;
    overflow: hidden;
}
.pd_desc.is-collapsed:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.pd_more {
    display: block;
    margin: 18px auto 0;
    padding: 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.pd_more:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

/* Bảng thông số kỹ thuật */
.pd_side_title {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b2f36;
}
.pd_specs {
    margin-bottom: 32px;
}
.pd_specs_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pd_specs_table th,
.pd_specs_table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}
.pd_specs_table th {
    width: 45%;
    font-weight: 600;
    color: #2b2f36;
}
.pd_specs_table td {
    color: var(--text-color);
}

/* Bài liên quan ở sidebar */
.pd_news_list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pd_news_item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
}
/* Tỉ lệ phải khớp cỡ ảnh pthome-thumb-sm (180x120 = 3:2) đăng ký trong functions.php,
   nếu không object-fit lại crop thêm lần nữa đúng thứ ta vừa tránh. */
.pd_news_thumb {
    flex: 0 0 84px;
    width: 84px;
    border-radius: 3px;
    overflow: hidden;
    line-height: 0;
}
.pd_news_thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
}
.pd_news_title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #2b2f36;
    transition: color 0.2s;
}
.pd_news_item:hover .pd_news_title {
    color: var(--main-color);
}



/* ===== Trang giỏ hàng (shortcode [woocommerce_cart]) =====
   Bố cục 2 cột do theme tự dựng: woocommerce-layout.css (file lo phần float của Woo)
   đã bị gỡ trong inc/woocommerce.php vì xung khắc với flex của theme. Đổi lại, các
   float mà file đó từng lo (hàng mã giảm giá) phải tự khai lại ở dưới. */
.woocommerce-cart .page_content .woocommerce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}
.woocommerce-cart .woocommerce-notices-wrapper {
    flex: 1 1 100%;
}
.woocommerce-cart .woocommerce-cart-form {
    flex: 1 1 520px;
    min-width: 0;
    margin: 0;
}
.woocommerce-cart .cart-collaterals {
    flex: 0 0 340px;
    width: 340px;
}
@media all and (max-width: 900px) {
    .woocommerce-cart .page_content .woocommerce {
        gap: 28px;
    }
    .woocommerce-cart .woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Bảng sản phẩm.
   Selector phải là "table.shop_table.cart" (0,3,1) chứ không phải "table.cart" (0,2,1):
   woocommerce.css có ".woocommerce table.shop_table{border:1px solid;border-collapse:
   separate;border-radius:5px}" cũng ở (0,2,1) — hoà thì rule nào nạp sau thắng, và ta
   không kiểm soát được thứ tự đó. Cao hơn một bậc là chắc chắn. */
.woocommerce-cart table.shop_table.cart {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    border-spacing: 0;
}
.woocommerce-cart table.shop_table.cart thead th {
    padding: 0 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa0a8;
}
.woocommerce-cart table.shop_table.cart td {
    padding: 18px 10px;
    border: 0;
    border-top: 0;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

/* Canh cột: giá và thành tiền canh phải, số lượng canh giữa — tiêu đề phải khớp
   ô dữ liệu bên dưới, nếu không nhìn sẽ lệch. */
.woocommerce-cart table.shop_table.cart th.product-price,
.woocommerce-cart table.shop_table.cart td.product-price,
.woocommerce-cart table.shop_table.cart th.product-subtotal,
.woocommerce-cart table.shop_table.cart td.product-subtotal {
    text-align: right;
}
.woocommerce-cart table.shop_table.cart th.product-quantity,
.woocommerce-cart table.shop_table.cart td.product-quantity {
    width: 130px;
    text-align: center;
}
.woocommerce-cart table.shop_table.cart th.product-remove,
.woocommerce-cart table.shop_table.cart td.product-remove {
    width: 44px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}
.woocommerce-cart table.shop_table.cart th.product-thumbnail,
.woocommerce-cart table.shop_table.cart td.product-thumbnail {
    width: 92px;
}
.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 4px;
}
.woocommerce-cart table.shop_table.cart td.product-name a {
    font-size: 14px;
    font-weight: 600;
    color: #2b2f36;
    text-decoration: none;
}
.woocommerce-cart table.shop_table.cart td.product-name a:hover {
    color: var(--main-color);
}
.woocommerce-cart table.shop_table.cart td.product-price {
    font-size: 14px;
    color: var(--text-color);
}
.woocommerce-cart table.shop_table.cart td.product-subtotal {
    font-size: 14px;
    font-weight: 700;
    color: #d0021b;
}

/* Nút xoá: Woo xuất chữ "×", đổi thành icon thùng rác. */
.woocommerce-cart table.shop_table.cart a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: transparent;
    font-size: 0;
    color: transparent;
    transition: background 0.2s;
}
.woocommerce-cart table.shop_table.cart a.remove:before {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E")
        center / contain no-repeat;
}
.woocommerce-cart table.shop_table.cart a.remove:hover {
    background: #fdf2f2;
}

/* Hàng mã giảm giá + cập nhật giỏ.
   Dùng float chứ không flex: đây là <td>, đặt display:flex lên ô bảng là bỏ luôn
   ngữ cảnh table-cell, dễ vỡ layout. overflow:hidden ở dưới là clearfix cho float. */
.woocommerce-cart table.shop_table.cart td.actions {
    padding: 20px 0 0;
    border-bottom: 0;
    overflow: hidden;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon {
    float: left;
    display: flex;
    gap: 8px;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text {
    width: 190px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text:focus {
    outline: 0;
    border-color: var(--main-color);
}
.woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"] {
    float: right;
}
.woocommerce-cart table.shop_table.cart td.actions button.button {
    height: 42px;
    padding: 0 20px;
    font-size: 13px;
}
/* Nút "Cập nhật giỏ hàng" chỉ bật khi số lượng đổi. Dùng màu xám trung tính thay vì
   làm mờ nút xanh: mờ đi thì vẫn còn màu thương hiệu, trông như nút bấm được mà lại
   chữ xám nhạt — vừa xấu vừa gây hiểu nhầm. Xám hẳn thì trạng thái rõ ràng. */
.woocommerce-cart table.shop_table.cart td.actions button.button[disabled] {
    opacity: 1;
    background: #f2f4f5;
    color: #a8aeb6;
    cursor: not-allowed;
}
.woocommerce-cart table.shop_table.cart td.actions button.button[disabled]:hover {
    background: #f2f4f5;
    color: #a8aeb6;
}

/* Khối tổng cộng */
.woocommerce-cart .cart_totals {
    width: auto;
    float: none;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fbfcfb;
}
.woocommerce-cart .cart_totals > h2 {
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b2f36;
}
.woocommerce-cart .cart_totals table.shop_table {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    font-size: 14px;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    vertical-align: top;
}
.woocommerce-cart .cart_totals table.shop_table th {
    width: 42%;
    font-weight: 600;
    text-align: left;
    color: var(--text-color);
}
.woocommerce-cart .cart_totals table.shop_table td {
    text-align: right;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    padding-top: 16px;
    border-bottom: 0;
    font-size: 16px;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total .amount {
    font-size: 20px;
    font-weight: 700;
    color: #d0021b;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button {
    font-size: 12px;
    color: #9aa0a8;
}
/* Dòng ghi chú thay cho phí vận chuyển (xem pthome_shipping_note_row). */
.woocommerce tr.shipping_note td {
    font-size: 13px;
    font-style: italic;
    color: #9aa0a8;
}

/* Nút thanh toán */
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 18px 0 0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    background: var(--main-color);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--extra-color);
}

/* Giỏ hàng trống */
.woocommerce-cart .cart-empty {
    padding: 30px 0 10px;
    font-size: 16px;
    text-align: center;
}
.woocommerce-cart .return-to-shop {
    padding-bottom: 30px;
    text-align: center;
}

/* Màn hẹp: bảng chuyển sang dạng thẻ, mỗi sản phẩm một khối */
@media all and (max-width: 600px) {
    .woocommerce-cart table.shop_table.cart thead {
        display: none;
    }
    .woocommerce-cart table.shop_table.cart tr.cart_item {
        display: grid;
        grid-template-columns: 76px 1fr 30px;
        gap: 4px 12px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border-color);
    }
    .woocommerce-cart table.shop_table.cart tr.cart_item td {
        padding: 0;
        border: 0;
        text-align: left;
    }
    .woocommerce-cart table.shop_table.cart td.product-thumbnail {
        grid-row: 1 / 4;
        width: auto;
    }
    .woocommerce-cart table.shop_table.cart td.product-name {
        grid-column: 2;
    }
    .woocommerce-cart table.shop_table.cart td.product-remove {
        grid-column: 3;
        grid-row: 1;
        width: auto;
    }
    .woocommerce-cart table.shop_table.cart td.product-price {
        display: none;
    }
    .woocommerce-cart table.shop_table.cart td.product-quantity {
        grid-column: 2;
        width: auto;
        text-align: left;
    }
    .woocommerce-cart table.shop_table.cart td.product-subtotal {
        grid-column: 2 / 4;
    }
    .woocommerce-cart table.shop_table.cart td.actions .coupon,
    .woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"] {
        float: none;
    }
    .woocommerce-cart table.shop_table.cart td.actions .coupon {
        margin-bottom: 10px;
    }
    .woocommerce-cart table.shop_table.cart td.actions .coupon .input-text {
        flex: 1 1 auto;
        width: auto;
    }
}

/* ===== Trang thanh toán (shortcode [woocommerce_checkout]) =====
   Bố cục 2 cột do theme tự dựng bằng grid. Bản thân WooCommerce dựng cột bằng float
   trong woocommerce-layout.css — file đó đã bị gỡ ở inc/woocommerce.php vì xung khắc
   với flex/grid của theme, nên toàn bộ phần chia cột ở đây phải tự khai lại. */
.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: 0 40px;
}
/* Cột trái (thông tin khách) trải hết chiều cao, cột phải xếp tiêu đề rồi tới đơn hàng. */
.woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.woocommerce-checkout form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
}
.woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
}
@media all and (max-width: 900px) {
    .woocommerce-checkout form.checkout {
        display: block;
    }
}

/* Hai cột thông tin (thanh toán / bổ sung) xếp dọc vì cột đã hẹp sẵn. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    float: none;
    width: auto;
}

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b2f36;
}
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
    margin-top: 28px;
}

/* Lưới field: WooCommerce đánh sẵn form-row-first / form-row-last / form-row-wide,
   nhưng phần chia cột nằm ở layout.css đã gỡ — dựng lại bằng grid. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
/* Mặc định mỗi field chiếm cả hàng; chỉ first/last mới chia đôi. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
    grid-column: 1 / -1;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first {
    grid-column: 1;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
    grid-column: 2;
}
@media all and (max-width: 520px) {
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
        grid-column: 1;
    }
}

/* Field */
/* Biến của WooCommerce — nó tự dùng cho MỌI form (checkout, tài khoản, mã giảm giá).
   Đặt biến thì không phải đấu specificity cho phần viền/màu. */
:root {
    --wc-form-border-color: #dfe3e8;
    --wc-form-border-width: 1px;
    --wc-form-border-radius: 4px;
    --wc-form-color-background: #fff;
    --wc-form-color-text: #484c52;
}

/* Còn kích thước/khoảng cách thì Woo ghi cứng, phải thắng bằng specificity:
   ".woocommerce form .form-row{padding:3px;margin:0 0 6px}" là (0,2,2) và
   ".woocommerce form .form-row .input-text{height:auto;padding:.5em}" là (0,3,1).
   Thêm "form.checkout" vào chuỗi để vượt lên — bỏ đi là field co lại như cũ. */
.woocommerce-checkout form.checkout .form-row,
.woocommerce-checkout form.checkout_coupon .form-row {
    margin: 0 0 18px;
    padding: 0;
    float: none;
    width: auto;
}
.woocommerce-checkout form.checkout .form-row label,
.woocommerce-checkout form.checkout_coupon .form-row label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #2b2f36;
}
.woocommerce-checkout form.checkout .form-row .required {
    color: #d0021b;
    text-decoration: none;
    border: 0;
}
.woocommerce-checkout form.checkout .form-row .input-text,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout_coupon .form-row .input-text {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    background-color: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-color);
    box-sizing: border-box;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
/* Woo vẽ mũi tên select bằng background-image và chừa padding-right 3em cho nó —
   ghi đè padding mà quên chừa thì chữ chạy đè lên mũi tên. */
.woocommerce-checkout form.checkout .form-row select {
    padding-right: 3em;
}
.woocommerce-checkout form.checkout .form-row textarea {
    width: 100%;
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    background-color: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    box-sizing: border-box;
    resize: vertical;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
/* Woo có rule làm placeholder mờ dần khi focus
   (".woocommerce form .form-row [placeholder]:focus::-webkit-input-placeholder{opacity:0}")
   — giữ nguyên, chỉ chỉnh màu cho đủ tương phản mà vẫn phân biệt được với chữ thật. */
.woocommerce-checkout form.checkout .form-row .input-text::placeholder,
.woocommerce-checkout form.checkout .form-row textarea::placeholder {
    color: #a8aeb6;
    font-size: 13px;
    opacity: 1;
}
/* Woo đặt ":focus{border-color:currentColor}" ở (0,4,1) — chữ đen, nhìn như không
   có phản hồi. Rule này (0,5,1) để thắng. */
.woocommerce-checkout form.checkout .form-row .input-text:focus,
.woocommerce-checkout form.checkout .form-row select:focus,
.woocommerce-checkout form.checkout .form-row textarea:focus,
.woocommerce-checkout form.checkout_coupon .form-row .input-text:focus {
    outline: 0;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(35, 152, 67, 0.12);
}
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid select {
    border-color: #d0021b;
}
.woocommerce-checkout form.checkout .form-row.woocommerce-validated .input-text {
    border-color: #cfe3d5;
}

/* Select2 (ô Quốc gia / Tỉnh thành). WooCommerce thay select thường bằng select2,
   nên phải style riêng, không thì nó cao thấp lệch hẳn với các ô còn lại. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 46px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 14px;
    line-height: 44px;
    font-size: 14px;
    color: var(--text-color);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 8px;
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--main-color);
}

/* woocommerce.css có ".woocommerce-checkout .checkout .col-2 h3#ship-to-different-address
   {float:left;clear:none}" (1,3,1). Float đó chỉ đúng khi còn woocommerce-layout.css —
   đã gỡ file đó nên khối ghi chú chảy vòng quanh tiêu đề, nằm đè sang bên phải.
   Selector dưới đây thêm form. để đạt (1,3,2) mới thắng được. */
.woocommerce-checkout form.checkout .col-2 h3#ship-to-different-address {
    float: none;
    clear: both;
    margin-bottom: 16px;
}

/* Checkbox "Giao tới địa chỉ khác" / "Tạo tài khoản" */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.woocommerce-checkout .woocommerce-form__input-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--main-color);
}
.woocommerce-checkout #ship-to-different-address {
    margin-bottom: 0;
}
.woocommerce-checkout #ship-to-different-address label {
    font-size: 16px;
    text-transform: none;
}

/* Cột phải: đơn hàng */
.woocommerce-checkout #order_review {
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fbfcfb;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
    width: 100%;
    margin: 0 0 18px;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    font-size: 14px;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    vertical-align: top;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
    padding-top: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa0a8;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
    font-weight: 600;
    color: #2b2f36;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
    font-weight: 400;
    color: #9aa0a8;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-total {
    text-align: right;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
    border-bottom: 0;
    padding-top: 16px;
    font-size: 16px;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total .amount {
    font-size: 20px;
    font-weight: 700;
    color: #d0021b;
}

/* Phương thức thanh toán */
.woocommerce-checkout #payment {
    border-radius: 0;
    background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2b2f36;
    cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--main-color);
}
.woocommerce-checkout #payment div.payment_box {
    margin: 10px 0 0;
    padding: 12px 14px;
    border-radius: 4px;
    background: #f6f8f7;
    font-size: 13px;
    line-height: 1.6;
    color: #6b717a;
}
/* Woo vẽ mũi tên nhỏ trỏ lên hộp mô tả — nền hộp đổi thì mũi tên phải đổi theo. */
.woocommerce-checkout #payment div.payment_box:before {
    border-bottom-color: #f6f8f7;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
    font-size: 12px;
    line-height: 1.6;
    color: #9aa0a8;
}

/* Nút đặt hàng */
.woocommerce-checkout #payment .form-row.place-order {
    margin: 0;
    padding: 0;
}
.woocommerce-checkout #place_order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--main-color);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.woocommerce-checkout #place_order:hover {
    background: var(--extra-color);
}

/* Ô mã giảm giá ở đầu trang */
.woocommerce-checkout .checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fbfcfb;
}
.woocommerce-checkout .checkout_coupon .form-row {
    margin: 0;
}
.woocommerce-checkout .checkout_coupon .form-row-first {
    flex: 0 1 220px;
}
.woocommerce-checkout .checkout_coupon .button {
    height: 44px;
    padding: 0 22px;
    font-size: 13px;
}

/* Thông báo "Bạn có mã giảm giá?" dùng chung style .woocommerce-info đã có */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: 20px;
}

/* ===== Dự án: lưới danh sách =====
   Không dùng lại .gallery-bento của trang chủ: bento là bố cục cố định 1 lớn + 4 nhỏ,
   chỉ đẹp khi đúng 5 mục. Danh sách thì số lượng thay đổi nên cần lưới đều. */
.project_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 10px;
}
@media all and (max-width: 900px) {
    .project_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}
@media all and (max-width: 560px) {
    .project_grid {
        grid-template-columns: 1fr;
    }
}

.project_card {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        transform 0.2s;
}
.project_card:hover {
    border-color: var(--main-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

/* 3/2 khớp đúng tỉ lệ ảnh nguồn (1536x1024) nên object-fit: cover không phải xén gì.
   Đặt 4/3 là ép ảnh 3:2 vào khung hẹp hơn → cắt mất hai bên, mà ảnh dự án lại có chữ
   và logo ở rìa. Đổi tỉ lệ này thì phải đổi cả cỡ ảnh nguồn cho khớp. */
.project_thumb {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f2f4f5;
}
.project_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.project_card:hover .project_thumb img {
    transform: scale(1.06);
}
/* Vệt sáng quét qua khi hover — dùng lại ý tưởng của .shine ở khối công trình
   trang chủ, nhưng khai riêng vì .g-item có bố cục khác hẳn. */
.project_thumb .shine {
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.28) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
}
.project_card:hover .project_thumb .shine {
    animation: project_shine 0.85s ease;
}
@keyframes project_shine {
    100% {
        left: 125%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .project_card:hover .project_thumb .shine {
        animation: none;
    }
    .project_card:hover .project_thumb img {
        transform: none;
    }
    .project_card:hover {
        transform: none;
    }
}

.project_body {
    display: block;
    padding: 16px 18px 18px;
}
.project_name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #2b2f36;
    transition: color 0.2s;
}
.project_card:hover .project_name {
    color: var(--main-color);
}
.project_desc {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #6b717a;
}

.project_intro {
    margin-bottom: 30px;
}
.project_empty {
    padding: 40px 0;
    text-align: center;
    color: #9aa0a8;
}

/* ===== Dự án: trang chi tiết ===== */
.single_project .page_title {
    margin-bottom: 10px;
}
.single_project .project_meta {
    margin-bottom: 20px;
}
.single_project .project_meta .datetime {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9aa0a8;
}
.single_project .project_meta .datetime:before {
    content: "";
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")
        center / contain no-repeat;
}
/* Ảnh giới hạn 860px và canh giữa, không kéo hết 1200px của container: ảnh gốc
   1536x1024 chạy full bề ngang sẽ ra 1200x800, chiếm gần trọn màn hình.
   Không chia hai cột vì với các dự án hiện tại, ẢNH CHÍNH LÀ nội dung — tên khách,
   địa điểm, trích dẫn đều nằm sẵn trong ảnh, post không có content lẫn excerpt. */
.single_project .project_hero {
    max-width: 860px;
    margin: 0 auto 24px;
    border-radius: 6px;
    overflow: hidden;
}
.single_project .project_hero img {
    display: block;
    width: 100%;
    height: auto;
}
/* Chữ (nếu sau này có) canh giữa cùng bề ngang với ảnh cho thẳng khối. */
.single_project .project_sapo,
.single_project .project_content {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.single_project .project_content {
    font-size: 16px;
}
.project_related {
    margin-bottom: 40px;
}
/* .section-title mặc định có margin-top 60px cho trang chủ — ở đây thừa. */
.project_related .section-title {
    margin-top: 34px;
}

/* ===== Mobile: sắp lại header + menu trượt =====
   Thứ tự yêu cầu (trái→phải): nút mở menu · ô tìm kiếm · logo.
   Áp ở ≤1025px vì đó cũng là mốc .box_menu_fix (thanh mega menu) bị ẩn và
   .sb-toggle-left hiện ra. */
@media all and (max-width: 1025px) {
    #header_inner.header {
        display: flex;
        align-items: center;
        /* gap: 12px; */
    }
    /* Logo ra cuối (bên phải). float:none để thoát khỏi luồng float cũ. */
    #header_inner .header-l {
        order: 3;
        float: none;
        margin: 0 0 0 10px;
        padding: 8px 0;
    }
    #header_inner .header-r {
        order: 1;
        float: none;
        display: flex;
        align-items: center;
        gap: 10px;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 8px 0;
    }
    #header_inner .header-r .sb-toggle-left {
        order: 1;
        float: none;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        width: auto;
    }
    #header_inner .header-r .regions_search {
        order: 2;
        float: none;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    /* Các mục chỉ hiện ở dải tablet (991–1025) — đẩy về sau ô tìm kiếm. */
    #header_inner .header-r .phone,
    #header_inner .header-r .header-consult,
    #header_inner .header-r .shopcart {
        order: 3;
        margin-left: 6px;
    }

    /* Hamburger → dấu X khi mở */
    .header-r .sb-toggle-left {
        cursor: pointer;
        transition: transform 0.2s;
    }
    .header-r .sb-toggle-left .navicon-line {
        transition:
            transform 0.25s ease,
            opacity 0.2s ease;
    }
    body.menu-open .header-r .sb-toggle-left .navicon-line-1 {
        transform: translateY(8px) rotate(45deg);
    }
    body.menu-open .header-r .sb-toggle-left .navicon-line-2 {
        opacity: 0;
    }
    body.menu-open .header-r .sb-toggle-left .navicon-line-3 {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* ----- Panel menu trượt từ trái ----- */
    /* Khóa cả html lẫn body: chỉ overflow:hidden trên body không chặn cuộn nền trên
       iOS. overscroll-behavior chặn "cuộn lây" xuống trang khi panel cuộn hết. */
    html.menu-open,
    body.menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* MẤU CHỐT: .header_wrapper_wrap có z-index:9 → tạo stacking context. Panel nằm
       trong đó nên z-index:1002 của panel bị "nhốt" ở mức 9. Overlay .modal-menu-full-screen
       ở root có z-index:11 > 9 nên đè lên panel (làm menu bị xám + không cuộn được).
       Nâng cả context này lên trên overlay khi menu mở thì panel mới thực sự ở trên. */
    body.menu-open .header_wrapper_wrap {
        z-index: 1001;
    }
    /* Nút liên hệ nổi ở z-index rất cao (99999) sẽ xuyên qua lớp mờ — ẩn khi mở menu. */
    body.menu-open .share_fast_fixed {
        display: none;
    }
    /* Bật hiển thị lại (đang display:none ở ≤1025) và đẩy ra ngoài màn bằng transform,
       nhờ vậy trượt vào có animation. visibility:hidden để không bắt focus khi đóng. */
    .box_menu_fix {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 84vw;
        /* Chiều cao tường minh phòng khi top/bottom bị mốc khác lấn; dvh theo đúng
           vùng nhìn thật của mobile (đã trừ thanh địa chỉ). */
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        background: #fff;
        z-index: 1002;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.22);
        transform: translateX(-100%);
        visibility: hidden;
        transition:
            transform 0.3s ease,
            visibility 0.3s;
    }
    body.menu-open .box_menu_fix {
        transform: none;
        visibility: visible;
    }

    /* Tiêu đề panel */
    .box_menu_fix:before {
        content: "MENU";
        display: block;
        padding: 16px 52px 16px 20px;
        background: var(--main-color);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #fff;
    }
    /* Nút đóng (JS chèn vào đầu panel) — nằm đè lên dải tiêu đề xanh.
       Specificity (0,2,0) để thắng ".menu-close{display:none}" toàn cục (0,2,0 > 0,1,0),
       bất kể thứ tự trong file. */
    .box_menu_fix .menu-close {
        display: block;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 28px;
        line-height: 1;
        color: #fff;
        cursor: pointer;
        z-index: 1;
    }

    .box_menu_fix .header_menu,
    .box_menu_fix .header_menu > .container,
    .box_menu_fix .dcjq-mega-menu {
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
        background: transparent;
        position: static;
    }

    /* Danh sách dọc */
    .box_menu_fix #megamenu {
        display: block;
        padding: 0;
    }
    .box_menu_fix #megamenu > li.level_0 {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .box_menu_fix #megamenu .menu_item_a {
        display: block;
        float: none;
        padding: 13px 20px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        color: #2b2f36;
        white-space: normal;
    }
    .box_menu_fix #megamenu .menu_item_a:hover {
        color: var(--main-color);
    }
    /* Mũi tên drop_down của desktop không dùng trong panel */
    .box_menu_fix #megamenu .drop_down {
        display: none;
    }

    /* Submenu: hiện thẳng, thụt lề — không dùng hover/absolute như desktop */
    .box_menu_fix #megamenu .highlight {
        display: block;
        position: static;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: #fafbfa;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .box_menu_fix #megamenu .highlight1 {
        display: block;
        margin: 0;
        padding: 0;
    }
    .box_menu_fix #megamenu .sub-menu {
        display: block;
        float: none;
        width: 100%;
        border: 0;
        border-top: 1px solid var(--border-color);
    }
    .box_menu_fix #megamenu .sub-menu-item {
        display: block;
        padding: 11px 20px 11px 34px;
        font-size: 13px;
        font-weight: 400;
        color: var(--text-color);
    }
    .box_menu_fix #megamenu .sub-menu-item:hover {
        color: var(--main-color);
    }
    /* Cấp 3: thụt sâu hơn, nền nhạt hơn để phân tầng. */
    .box_menu_fix #megamenu .sub-menu-level2-list {
        margin: 0;
        padding: 0;
        background: #f0f3f0;
    }
    .box_menu_fix #megamenu .sub-menu-level2 {
        display: block;
        border-top: 1px solid var(--border-color);
    }
    .box_menu_fix #megamenu .sub-menu-item-lv2 {
        display: block;
        padding: 10px 20px 10px 50px;
        font-size: 13px;
        color: #6b717a;
    }
    .box_menu_fix #megamenu .sub-menu-item-lv2:hover {
        color: var(--main-color);
    }
}

/* ===== Menu cấp 3 + nút đóng panel ===== */

/* Nút × do JS chèn vào .box_menu_fix — trên desktop .box_menu_fix là thanh mega menu
   nên nút này lòi ra. Ẩn mặc định, chỉ hiện trong panel mobile (rule ở khối ≤1025). */
.menu-close {
    display: none;
}

/* Desktop: cấp 3 hiện lồng dưới mục cấp 2 trong cột .highlight của mega menu. */
.dcjq-mega-menu .highlight .sub-menu-level2-list {
    margin: 4px 0 2px;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--border-color);
    list-style: none;
}
.dcjq-mega-menu .highlight .sub-menu-level2 {
    padding: 4px 0;
    list-style: none;
}
.dcjq-mega-menu .highlight .sub-menu-item-lv2 {
    display: block;
    font-size: 13px;
    color: #6b717a;
    text-decoration: none;
    transition: color 0.2s;
}
.dcjq-mega-menu .highlight .sub-menu-item-lv2:hover {
    color: var(--main-color);
}