@charset "UTF-8";
/* ============================================================================
   Vilacojsc — TOAN BO CSS cua site public trong MOT file.
   Thu tu BAT BUOC: [A] theme Insurax truoc  →  [B] CSS tu viet sau (de ghi de).
     [A] Theme Insurax (goc: style.css, da loc rule chet 465KB → 123KB).
         Ban goc day du: tools/css-backup/style.original.css
     [B] CSS tu viet cua Vilacojsc — xem muc luc ngay truoc phan [B].
   ============================================================================ */

/* ####################### [A] THEME INSURAX ############################### */

:root {
    --theme-color: #d71d2a;
    --hover-color: #990c12;
    --title-color: #121212;
    --body-color: #363739;
    --smoke-color: #F3F3F3;
    --smoke-color2: #E6E6E6;
    --black-color: #000000;
    --gray-color: #585c60;
    --white-color: #ffffff;
    --light-color: #9B9B9C;
    --yellow-color: #FFB539;
    --success-color: #28a745;
    --error-color: #dc3545;
    --border-color: #E0E0E0;
    --navy-color: #0F0D1D;
    --title-font: 'Roboto', sans-serif;
    --body-font: 'Roboto', sans-serif;
    --icon-font: "Font Awesome 6 Pro";
    --main-container: 1290px;
    --container-gutters: 24px;
    --section-space: 60px;
    --section-space-mobile: 30px;
    --section-title-space: 30px;
    --ripple-ani-duration: 5s;
}
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--theme-color);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--theme-color);
    }
html,
body {
    scroll-behavior: smooth !important;
}
body {
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--body-color);
    line-height: 26px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    top: 0px !important;
}

iframe {
    border: none;
    width: 100%;
}

.slick-slide:focus,
button:focus,
a:focus,
a:active,
input,
input:hover,
input:focus,
input:active,
textarea,
textarea:hover,
textarea:focus,
textarea:active {
    outline: none;
}

    input:focus {
        outline: none;
        box-shadow: none;
    }

img:not([draggable]),
embed,
object,
video {
    max-width: 100%;
    height: auto;
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--border-color);
}

th {
    font-weight: 600;
    color: var(--title-color);
}

td,
th {
    border: 1px solid var(--border-color);
    padding: 9px 12px;
}

a {
    color: var(--theme-color);
    text-decoration: none;
    outline: 0;
    transition: all ease 0.4s;
}

    a:hover {
        color: var(--title-color);
    }

    a:active,
a:focus,
a:hover,
a:visited {
        text-decoration: none;
        outline: 0;
    }

button {
    transition: all ease 0.4s;
}

img {
    border: none;
    max-width: 100%;
}

ins {
    text-decoration: none;
}

pre {
    font-family: var(--body-font);
    background: #f5f5f5;
    color: #666;
    font-size: 14px;
    margin: 20px 0;
    overflow: auto;
    padding: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

p:empty {
    display: none;
}

p {
    font-family: var(--body-font);
    margin: 0 0 18px 0;
    color: var(--body-color);
    line-height: 1.75;
}

    h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
p a,
span a {
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
    font-family: var(--title-font);
    color: var(--title-color);
    text-transform: none;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 15px 0;
}

.h1,
h1 {
    font-size: 28px;
    line-height: 40px;
}

.h2,
h2 {
    font-size: 20px;
    line-height: 24px;
}

.h3,
h3,
.h4,
h4,
.h5,
h5 {
    font-size: 18px;
    line-height: 24px;
}

.h6,
h6 {
    font-size: 16px;
    line-height: 20px;
}

.blog-title {
    word-break: break-word;
}

.gallery {
    margin-bottom: 1.5em;
    width: 100%;
}

.blog-single.sticky {
    position: relative;
}

    .blog-single.sticky .blog-content {
        background-color: transparent;
        border: none;
    }

        .blog-single.sticky .blog-content:before {
            display: none;
        }

    .blog-single.sticky:before {
        content: '\f0c1';
        position: absolute;
        font-family: 'Font Awesome 6 Pro';
        font-size: 5rem;
        opacity: 0.3;
        right: 15px;
        line-height: 1;
        top: 15px;
        color: var(--theme-color);
        z-index: 1;
    }

    .blog-single.sticky::before {
        content: "\f08d";
        position: absolute;
        font-family: var(--icon-font);
        font-size: 16px;
        font-weight: 500;
        opacity: 1;
        right: 0;
        top: 0;
        color: var(--white-color);
        background-color: var(--theme-color);
        z-index: 1;
        height: 44px;
        width: 44px;
        line-height: 44px;
        text-align: center;
    }

.blog-details .blog-single:before {
    display: none;
}

.blog-details .blog-single .blog-content {
    background-color: transparent;
}

    .blog-details .blog-single .blog-content ul {
        margin: 0 0 -0.3em;
    }

    .blog-details .blog-single .blog-content p {
        margin-bottom: 18px;
    }

        .blog-details .blog-single .blog-content p:last-child {
            margin-bottom: -0.3em;
        }

.blog-details .blog-single.sticky {
    box-shadow: none;
    background-color: transparent;
}

    .blog-details .blog-single.sticky:before {
        display: none;
    }@media (max-width: 767px) {
    .blog_single .blog-img {
        margin-bottom:10px;
    }
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
        table::-webkit-scrollbar {
            height: 4px;
        }
        table::-webkit-scrollbar-track {
            border-radius: 10px;
            webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        }

        table::-webkit-scrollbar-thumb {
            background-color:var(--theme-color);
            webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        }
}
.box--search {
    padding: 15px;
    border-radius: 5px;
    background: var(--theme-color);
    margin-bottom: 20px;
    
}
.text-search {
    color:#fff;
    line-height:40px;
    text-align:center
}@media (max-width: 575px) {
    .text-search {
        line-height: 20px;
        text-align:left;
    }
}
.agency-title {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: solid 1px #ddd;
}
.agency-table {
    text-align:center;
}
    .agency-table thead {
        background-color:rgba(18, 18, 18, 0.1);
    }@media (max-width: 1199px) {
    .blog-single.sticky:before {
        font-size: 14px;
        padding: 8px 16px;
    }

    .container {
        max-width: 100% !important
    }
}@media (max-width: 767px) {
    .blog-single.sticky:before {
        font-size: 14px;
        padding: 8px 16px;
    }
}@media (max-width: 1399px) {
    :root {
        --main-container: 1250px;
    }
}@media only screen and (min-width: 1300px) {
    .container {
        max-width: calc(var(--main-container) + var(--container-gutters));
        padding-left: calc(var(--container-gutters) / 2);
        padding-right: calc(var(--container-gutters) / 2);
    }
}

.slick-track > [class*=col] {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)/ 2);
    padding-left: calc(var(--bs-gutter-x)/ 2);
    margin-top: var(--bs-gutter-y);
}

.gy-40 {
    --bs-gutter-y: 40px;
}@media (min-width: 1299px) {
    .gx-60 {
        --bs-gutter-x: 60px;
    }
}
#searchButton {
    background: #ffffff;
    color: #000;
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 5px;
}
select,
.form-control,
.form-select,
textarea,
input {
    height: 40px;
    padding: 0 25px 0 25px;
    padding-right: 45px;
    border: 1px solid transparent;
    color: var(--body-color);
    background-color: #fff;
    border-radius: 0;
    font-size: 16px;
    width: 100%;
    font-family: var(--body-font);
    transition: 0.4s ease-in-out;
    border-radius: 5px;
}

    select:focus,
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
        outline: 0;
        box-shadow: none;
        border : 0;
    }

    select::-moz-placeholder,
.form-control::-moz-placeholder,
.form-select::-moz-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder {
        color: var(--body-color);
    }

    select::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
        color: var(--body-color);
    }

    select:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
        color: var(--body-color);
    }

    select::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
        color: var(--body-color);
    }

    select::-moz-placeholder,
.form-control::-moz-placeholder,
.form-select::-moz-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder {
        color: var(--body-color);
    }

    select:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
        color: var(--body-color);
    }

    select::-ms-input-placeholder,
.form-control::-ms-input-placeholder,
.form-select::-ms-input-placeholder,
textarea::-ms-input-placeholder,
input::-ms-input-placeholder {
        color: var(--body-color);
    }

    select::placeholder,
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
        color: var(--body-color);
    }

    select.style2,
.form-control.style2,
.form-select.style2,
textarea.style2,
input.style2 {
        height: auto;
        border: none;
        color: #8B929C;
        border-bottom: 1px solid;
        padding: 0 0 10px 0;
        background-position: right 1px top 5px;
        background-size: 16px 16px;
        background-color: transparent;
    }

        select.style2 option,
.form-control.style2 option,
.form-select.style2 option,
textarea.style2 option,
input.style2 option {
            background-color: var(--title-color);
            color: #8B929C;
            padding: 2px 15px;
        }

        select.style2::-moz-placeholder,
.form-control.style2::-moz-placeholder,
.form-select.style2::-moz-placeholder,
textarea.style2::-moz-placeholder,
input.style2::-moz-placeholder {
            color: #8B929C;
        }

        select.style2::-webkit-input-placeholder,
.form-control.style2::-webkit-input-placeholder,
.form-select.style2::-webkit-input-placeholder,
textarea.style2::-webkit-input-placeholder,
input.style2::-webkit-input-placeholder {
            color: #8B929C;
        }

        select.style2:-ms-input-placeholder,
.form-control.style2:-ms-input-placeholder,
.form-select.style2:-ms-input-placeholder,
textarea.style2:-ms-input-placeholder,
input.style2:-ms-input-placeholder {
            color: #8B929C;
        }

        select.style2::-webkit-input-placeholder,
.form-control.style2::-webkit-input-placeholder,
.form-select.style2::-webkit-input-placeholder,
textarea.style2::-webkit-input-placeholder,
input.style2::-webkit-input-placeholder {
            color: #8B929C;
        }

        select.style2::-moz-placeholder,
.form-control.style2::-moz-placeholder,
.form-select.style2::-moz-placeholder,
textarea.style2::-moz-placeholder,
input.style2::-moz-placeholder {
            color: #8B929C;
        }

        select.style2:-ms-input-placeholder,
.form-control.style2:-ms-input-placeholder,
.form-select.style2:-ms-input-placeholder,
textarea.style2:-ms-input-placeholder,
input.style2:-ms-input-placeholder {
            color: #8B929C;
        }

        select.style2::-ms-input-placeholder,
.form-control.style2::-ms-input-placeholder,
.form-select.style2::-ms-input-placeholder,
textarea.style2::-ms-input-placeholder,
input.style2::-ms-input-placeholder {
            color: #8B929C;
        }

        select.style2::placeholder,
.form-control.style2::placeholder,
.form-select.style2::placeholder,
textarea.style2::placeholder,
input.style2::placeholder {
            color: #8B929C;
        }

    select.style-white,
.form-control.style-white,
.form-select.style-white,
textarea.style-white,
input.style-white {
        color: var(--body-color);
        padding: 0 60px 0 30px;
        background-color: var(--white-color);
    }

        select.style-white option,
.form-control.style-white option,
.form-select.style-white option,
textarea.style-white option,
input.style-white option {
            background-color: var(--white-color);
            color: var(--body-color);
            padding: 2px 15px;
        }

        select.style-white::-moz-placeholder,
.form-control.style-white::-moz-placeholder,
.form-select.style-white::-moz-placeholder,
textarea.style-white::-moz-placeholder,
input.style-white::-moz-placeholder {
            color: var(--body-color);
        }

        select.style-white::-webkit-input-placeholder,
.form-control.style-white::-webkit-input-placeholder,
.form-select.style-white::-webkit-input-placeholder,
textarea.style-white::-webkit-input-placeholder,
input.style-white::-webkit-input-placeholder {
            color: var(--body-color);
        }

        select.style-white:-ms-input-placeholder,
.form-control.style-white:-ms-input-placeholder,
.form-select.style-white:-ms-input-placeholder,
textarea.style-white:-ms-input-placeholder,
input.style-white:-ms-input-placeholder {
            color: var(--body-color);
        }

        select.style-white::-webkit-input-placeholder,
.form-control.style-white::-webkit-input-placeholder,
.form-select.style-white::-webkit-input-placeholder,
textarea.style-white::-webkit-input-placeholder,
input.style-white::-webkit-input-placeholder {
            color: var(--body-color);
        }

        select.style-white::-moz-placeholder,
.form-control.style-white::-moz-placeholder,
.form-select.style-white::-moz-placeholder,
textarea.style-white::-moz-placeholder,
input.style-white::-moz-placeholder {
            color: var(--body-color);
        }

        select.style-white:-ms-input-placeholder,
.form-control.style-white:-ms-input-placeholder,
.form-select.style-white:-ms-input-placeholder,
textarea.style-white:-ms-input-placeholder,
input.style-white:-ms-input-placeholder {
            color: var(--body-color);
        }

        select.style-white::-ms-input-placeholder,
.form-control.style-white::-ms-input-placeholder,
.form-select.style-white::-ms-input-placeholder,
textarea.style-white::-ms-input-placeholder,
input.style-white::-ms-input-placeholder {
            color: var(--body-color);
        }

        select.style-white::placeholder,
.form-control.style-white::placeholder,
.form-select.style-white::placeholder,
textarea.style-white::placeholder,
input.style-white::placeholder {
            color: var(--body-color);
        }

.form-select,
select {
    display: block;
    width: 100%;
    line-height: 1.5;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 26px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .form-select.style2,
select.style2 {
        background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.87109 1.71094L5.71484 5.62109C5.56901 5.7487 5.41406 5.8125 5.25 5.8125C5.08594 5.8125 4.9401 5.7487 4.8125 5.62109L0.65625 1.71094C0.382812 1.40104 0.373698 1.09115 0.628906 0.78125C0.920573 0.507812 1.23047 0.498698 1.55859 0.753906L5.25 4.25391L8.96875 0.753906C9.27865 0.498698 9.57943 0.498698 9.87109 0.753906C10.1263 1.08203 10.1263 1.40104 9.87109 1.71094Z' fill='%238B929C'/%3E%3C/svg%3E");
    }

textarea.form-control,
textarea {
    min-height: 150px;
    padding-top: 16px;
    padding-bottom: 17px;
}

    textarea.form-control.style2,
textarea.style2 {
        min-height: 100px;
    }

    textarea.form-control.style-white,
textarea.style-white {
        padding-top: 15px;
    }

.form-group {
    margin-bottom: var(--bs-gutter-x);
    position: relative;
}

    .form-group > i {
        display: inline-block;
        position: absolute;
        right: 30px;
        top: 19px;
        font-size: 16px;
        color: var(--body-color);
    }

        .form-group > i.fa-envelope {
            padding-top: 3px;
        }

[class*="col-"].form-group > i {
    right: calc((var(--bs-gutter-x) / 2) + 25px);
}



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="checkbox"] {
    visibility: hidden;
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    display: none;
}

    input[type="checkbox"]:checked ~ label:before {
        content: "\f00c";
        color: var(--white-color);
        background-color: var(--theme-color);
        border-color: var(--theme-color);
    }

    input[type="checkbox"] ~ label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        display: block;
    }

        input[type="checkbox"] ~ label:before {
            content: "";
            font-family: var(--icon-font);
            font-weight: 700;
            position: absolute;
            left: 0px;
            top: 3.5px;
            background-color: var(--white-color);
            border: 1px solid var(--border-color);
            height: 18px;
            width: 18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
        }

    input[type="checkbox"].style2 ~ label {
        color: #8B929C;
        padding-left: 23px;
        margin-bottom: -0.5em;
    }

        input[type="checkbox"].style2 ~ label:before {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid #8B929C;
            height: 14px;
            width: 14px;
            line-height: 14px;
            border-radius: 3px;
            top: 6px;
        }

    input[type="checkbox"].style2:checked ~ label:before {
        color: var(--theme-color);
    }

input[type="radio"] {
    visibility: hidden;
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    display: none;
}

    input[type="radio"] ~ label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        line-height: 1;
        display: inline-block;
        font-weight: 600;
        margin-bottom: 0;
    }

        input[type="radio"] ~ label::before {
            content: "\f111";
            position: absolute;
            font-family: var(--icon-font);
            left: 0;
            top: -2px;
            width: 20px;
            height: 20px;
            padding-left: 0;
            font-size: 0.6em;
            line-height: 19px;
            text-align: center;
            border: 1px solid var(--theme-color);
            border-radius: 100%;
            font-weight: 700;
            background: var(--white-color);
            color: transparent;
            transition: all 0.2s ease;
        }

    input[type="radio"]:checked ~ label::before {
        border-color: var(--theme-color);
        background-color: var(--theme-color);
        color: var(--white-color);
    }

label {
    margin-bottom: 0.5em;
    margin-top: -0.3em;
    display: block;
    color: var(--title-color);
    font-family: var(--body-font);
    font-size: 16px;
}

textarea.is-invalid,
select.is-invalid,
input.is-invalid {
    border: 1px solid var(--error-color) !important;
    background-position: right calc(0.375em + 0.8875rem) center;
    background-image: none;
}

    textarea.is-invalid:focus,
select.is-invalid:focus,
input.is-invalid:focus {
        outline: 0;
        box-shadow: none;
    }

textarea.is-invalid {
    background-position: top calc(0.375em + 0.5875rem) right calc(0.375em + 0.8875rem);
}

.form-messages {
    display: none;
}

    .form-messages.mb-0 * {
        margin-bottom: 0;
    }

    .form-messages.success {
        color: var(--success-color);
        display: block;
    }

    .form-messages.error {
        color: var(--error-color);
        display: block;
    }

    .form-messages pre {
        padding: 0;
        background-color: transparent;
        color: inherit;
    }

.slick-track > [class*=col] {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

.slick-track {
    min-width: 100%;
}

.slick-list {
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}

.slick-slide img {
    display: inline-block;
}

.slick-dots {
    list-style-type: none;
    padding: 0;
    margin: 40px 0 0px 0;
    line-height: 0;
    text-align: center;
    height: max-content;
}

    .slick-dots li {
        display: inline-block;
        margin-right: 20px;
    }

        .slick-dots li:last-child {
            margin-right: 0;
        }

    .slick-dots button {
        font-size: 0;
        padding: 0;
        background-color: transparent;
        width: 8px;
        height: 8px;
        line-height: 0;
        border-radius: 9999px;
        border: none;
        background-color: var(--theme-color);
        transition: all ease 0.4s;
        position: relative;
    }

        .slick-dots button:hover {
            border-color: var(--theme-color);
        }

        .slick-dots button:before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 24px;
            height: 24px;
            margin: -12px 0 0 -12px;
            border: 1px solid var(--theme-color);
            border-radius: 50%;
            transition: all ease 0.4s;
            opacity: 0;
            visibility: hidden;
        }

    .slick-dots .slick-active button {
        background-color: var(--theme-color);
    }

        .slick-dots .slick-active button::before {
            opacity: 1;
            visibility: visible;
        }

.slick-arrow {
    display: inline-block;
    padding: 0;
    background-color: var(--white-color);
    color: var(--title-color);
    position: absolute;
    top: 50%;
    border: 1px solid rgba(18, 18, 18, 0.2);
    left: var(--pos-x, -100px);
    width: var(--icon-size, 60px);
    height: var(--icon-size, 60px);
    line-height: var(--icon-size, 60px);
    font-size: var(--icon-font-size, 20px);
    margin-top: calc(var(--icon-size, 60px) / -2);
    border-radius: 50%;
    z-index: 2;
}

    .slick-arrow.default {
        position: relative;
        --pos-x: 0;
        margin-top: 0;
    }

    .slick-arrow.slick-next {
        right: var(--pos-x, -100px);
        left: auto;
    }

    .slick-arrow:hover {
        background-color: var(--theme-color);
        color: var(--white-color);
        border-color: var(--theme-color);
    }

.arrow-wrap .slick-arrow {
    opacity: 0;
    visibility: hidden;
}

.arrow-wrap:hover .slick-arrow {
    opacity: 1;
    visibility: visible;
}@media (max-width: 1500px) {
    .slick-arrow {
        --arrow-horizontal: -20px;
        --pos-x: -70px;
    }
}@media (max-width: 1399px) {
    .slick-arrow {
        --arrow-horizontal: 40px;
        --pos-x: -17px;
    }
}@media (max-width: 991px) {
    .slick-arrow {
        --icon-size: 40px;
        line-height: 38px;
        margin-right: 40px;
        font-size: 14px;
    }

        .slick-arrow.slick-next {
            margin-right: 0;
            margin-left: 40px;
        }

    .slick-dots {
        margin: 40px 0 0 0;
    }
}

.slick-3d-active {
    margin-left: -12%;
    margin-right: -12%;
}

    .slick-3d-active .slick-list {
        padding-left: 30% !important;
        padding-right: 30% !important;
    }

    .slick-3d-active .slick-track {
        max-width: 100% !important;
        transform: translate3d(0, 0, 0) !important;
        perspective: 100px;
    }

    .slick-3d-active .slick-slide {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        opacity: 0;
        width: 100% !important;
        transform: translate3d(0, 0, 0);
        transition: transform 1s, opacity 1s;
    }

    .slick-3d-active .slick-3d-next,
.slick-3d-active .slick-3d-prev,
.slick-3d-active .slick-3d-next2,
.slick-3d-active .slick-3d-prev2 {
        display: block;
    }

    .slick-3d-active .slick-current {
        opacity: 1;
        position: relative;
        display: block;
        z-index: 2;
    }

    .slick-3d-active .slick-3d-next {
        opacity: 1;
        transform: translate3d(50%, 0, -21px);
        z-index: 1;
        perspective: 1000px;
    }

    .slick-3d-active .slick-3d-next2 {
        opacity: 1;
        transform: translate3d(40%, 0, -23px);
        z-index: 0;
        perspective: 1000px;
    }

    .slick-3d-active .slick-3d-prev {
        opacity: 1;
        transform: translate3d(-50%, 0, -21px);
    }

    .slick-3d-active .slick-3d-prev2 {
        opacity: 1;
        transform: translate3d(-40%, 0, -23px);
    }

.th-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    width: 0;
    width: 100%;
    height: 100%;
    transition: all ease 0.8s;
    opacity: 0;
    visibility: hidden;
}

    .th-menu-wrapper .th-menu-toggle {
        border: none;
        font-size: 22px;
        position: absolute;
        right: 16.5px;
        top: 25px;
        padding: 0;
        line-height: 1;
        width: 33px;
        height: 33px;
        line-height: 35px;
        font-size: 18px;
        z-index: 1;
        color: var(--white-color);
        background-color: var(--theme-color);
        border-radius: 50%;
    }

        .th-menu-wrapper .th-menu-toggle:hover {
            background-color: var(--title-color);
            color: var(--white-color);
        }

    .th-menu-wrapper.th-body-visible {
        opacity: 1;
        visibility: visible;
    }

.th-menu-toggle {
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 20px;
    border: none;
    background: none;
    color: var(--white-color);
    display: inline-block;
    border-radius: 0;
}

    .th-menu-toggle:hover {
        background: none;
    }

.preloader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: var(--title-color);
}

    .preloader .th-btn {
        padding: 15px 20px;
        border-radius: 0;
        font-size: 14px;
    }@keyframes lqt{
    0%, 100% {
        background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
        background-position: 0% 0px;
    }

    50% {
        background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
        background-position: 0% 40px;
    }

    50.1% {
        background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
        background-position: 0% -40px;
    }
}@keyframes lqb{
    0% {
        background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
        background-position: 0 40px;
    }

    100% {
        background-image: linear-gradient(var(--theme-color) 40px, transparent 0);
        background-position: 0 -40px;
    }
}@keyframes spinx{
    0%, 49% {
        transform: rotate(0deg);
        background-position: 50% 36px;
    }

    51%, 98% {
        transform: rotate(180deg);
        background-position: 50% 4px;
    }

    100% {
        transform: rotate(360deg);
        background-position: 50% 36px;
    }
}

.th-btn {
    position: relative;
    z-index: 2;
    overflow: hidden;
    vertical-align: middle;
    display: inline-block;
    border: none;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--theme-color);
    color: var(--white-color);
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 21.5px 30px;
    border-radius: 4px;
    --tilt: 40px;
}

    .th-btn i {
        margin-left: 9px;
    }

    .th-btn:before,
.th-btn:after {
        content: "";
        z-index: -1;
        width: calc(100% + var(--tilt));
        height: 100%;
        position: absolute;
        top: 0;
        left: calc(-100% - var(--tilt));
        background: var(--hover-color);
        clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%);
        transition: transform 0.6s;
    }

    .th-btn:before {
        left: calc(-100% - var(--tilt));
    }

    .th-btn:after {
        left: 100%;
        transform: rotate(180deg);
    }

    .th-btn:hover,
.th-btn.active {
        color: var(--white-color);
    }

        .th-btn:hover:before,
.th-btn.active:before {
            transform: translateX(100%);
        }

        .th-btn:hover:after,
.th-btn.active:after {
            transform: rotate(180deg) translateX(100%);
        }

    .th-btn.style2 {
        background-color: var(--theme-color);
        color: var(--white-color);
        box-shadow: none;
    }

        .th-btn.style2::after,
.th-btn.style2::before {
            background: var(--white-color);
        }

        .th-btn.style2:hover {
            color: var(--title-color);
            background: var(--white-color);
        }

    .th-btn.style3 {
        background: var(--white-color);
        color: var(--title-color);
    }

        .th-btn.style3:hover {
            color: var(--white-color);
        }

            .th-btn.style3:hover:before,
.th-btn.style3:hover:after {
                background-color: var(--hover-color);
            }

.scroll-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 10000;
    opacity: 1;
    visibility: hidden;
    transform: translateY(45px);
    transition: all 300ms linear;
}

    .scroll-top:after {
        content: "\f062";
        font-family: var(--icon-font);
        position: absolute;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        color: var(--theme-color);
        left: 0;
        top: 0;
        height: 50px;
        width: 50px;
        cursor: pointer;
        display: block;
        z-index: 1;
        border: 2px solid var(--theme-color);
        box-shadow: none;
        border-radius: 50%;
    }

    .scroll-top svg {
        color: var(--theme-color);
        border-radius: 50%;
        background: var(--white-color);
    }

        .scroll-top svg path {
            fill: none;
        }

    .scroll-top .progress-circle path {
        stroke: var(--theme-color);
        stroke-width: 20px;
        box-sizing: border-box;
        transition: all 400ms linear;
    }

    .scroll-top.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }@media (max-width: 767px) {

    .th-btn {
        font-size: 14px;
        padding: 17.5px 30px;
    }
}

.sec-title {
    margin-bottom: calc(var(--section-title-space) - 12px);
    font-weight: 700;
    text-transform: uppercase;
}

    .sec-title.style2 {
        font-size: 60px;
        line-height: 70px;
    }

.sub-title {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 23px;
    background: rgba(1, 98, 202, 0.1);
    border-radius: 17px;
    padding: 3px 15px 3px 28px;
    position: relative;
    font-family: var(--title-font);
}

    .sub-title:after {
        position: absolute;
        content: '';
        width: 8px;
        height: 8px;
        background: var(--theme-color);
        border-radius: 50%;
        top: 50%;
        left: 15px;
        transform: translate(0, -50%);
    }

    .sub-title.style2 {
        border: 1px solid rgba(1, 98, 202, 0.15);
        background: transparent;
        padding: 2px 15px 2px 28px;
    }

    .sub-title.style3 {
        color: var(--white-color);
        background: rgba(1, 98, 202, 0.2);
    }

    .sub-title.style-white {
        color: var(--white-color);
        background: rgba(255, 255, 255, 0.1);
    }

        .sub-title.style-white:after {
            background: var(--white-color);
        }

.title-area {
    margin-bottom: calc(var(--section-title-space) - 2px);
    position: relative;
    z-index: 2;
}

    .title-area .sec-title {
        margin-bottom: 15px;
        font-size: 28px;
    }

    .title-area.mb-0 .sec-title {
        margin-bottom: -0.25em;
    }

    .title-area .th-btn {
        margin-top: 20px;
        margin-bottom: 10px;
    }@media (max-width: 1199px) {
    .title-area,
.sec-title {
        --section-title-space: 60px;
    }

        .title-area.mb-50,
.sec-title.mb-50 {
            margin-bottom: 40px;
        }

    .sec-title.style2 {
        font-size: 50px;
        line-height: normal;
    }
}@media (max-width: 991px) {
    .title-area,
.sec-title {
        --section-title-space: 50px;
    }

    .sec-title.style2 {
        font-size: 40px;
    }
}@media (max-width: 575px) {
    .sec-title.style2 {
        font-size: 30px;
    }
}

.shape-mockup-wrap {
    z-index: 2;
    position: relative;
}

.shape-mockup {
    position: absolute;
    z-index: -1;
}

.media-body {
    flex: 1;
}

.badge {
    position: absolute;
    width: fit-content;
    display: inline-block;
    text-align: center;
    background-color: var(--theme-color);
    color: var(--white-color);
    padding: 0.25em 0.45em;
    font-size: 0.7em;
    border-radius: 50%;
    top: 8px;
    right: 8px;
    font-weight: 400;
    transition: 0.3s ease-in-out;
}

.th-social {
    display: flex;
    gap: 10px;
}

    .th-social a {
        display: inline-block;
        width: var(--icon-size, 45px);
        height: var(--icon-size, 45px);
        line-height: var(--icon-size, 45px);
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--light-color);
        font-size: 16px;
        text-align: center;
        border-radius: 50%;
    }

        .th-social a:last-child {
            margin-right: 0;
        }

        .th-social a:hover {
            background-color: var(--theme-color);
            color: var(--white-color);
        }

    .th-social.style2 a {
        --icon-size: 40px;
        font-size: 14px;
        background-color: transparent;
        color: var(--white-color);
        border: 1px solid;
    }

        .th-social.style2 a:hover {
            border-color: var(--theme-color);
            color: var(--white-color);
            background-color: var(--theme-color);
        }

    .th-social.style3 a {
        --icon-size: 45px;
        font-size: 14px;
        background-color: var(--smoke-color);
        color: var(--title-color);
    }

        .th-social.style3 a:hover {
            border-color: var(--theme-color);
            color: var(--white-color);
            background-color: var(--theme-color);
        }

    .th-social.style-white a {
        --icon-size: 45px;
        font-size: 14px;
        background-color: var(--white-color);
        color: var(--title-color);
    }

        .th-social.style-white a:hover {
            border-color: var(--theme-color);
            color: var(--white-color);
            background-color: var(--theme-color);
        }

.tilt-active {
    transition: all 100ms;
    position: relative;
    transform-style: preserve-3d;
}

.mfp-zoom-in.mfp-bg {
    opacity: 0;
    transition: all 0.4s ease;
}

.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.7;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

.mfp-figure:after {
    background: transparent;
    box-shadow: none;
}

.bg-white {
    background-color: var(--white-color) !important;
}

.bg-black {
    background-color: var(--black-color) !important;
}

.background-image,
[data-bg-src] {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.text-white {
    color: var(--white-color) !important;
}

.text-inherit {
    color: inherit;
}

    .text-inherit:hover {
        color: var(--theme-color);
    }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

[data-overlay] {
    position: relative;
    z-index: 2;
}

    [data-overlay] [class^="col-"],
[data-overlay] [class*="col-"] {
        z-index: 1;
    }

    [data-overlay]:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

[data-overlay="theme"]:before {
    background-color: var(--theme-color);
}

[data-overlay="title"]:before {
    background-color: var(--title-color);
}

[data-overlay="white"]:before {
    background-color: var(--white-color);
}

[data-overlay="black"]:before {
    background-color: var(--black-color);
}

[data-overlay="overlay1"]:before {
    background-color: #131B23;
}

[data-opacity="1"]:before {
    opacity: 0.1;
}

[data-opacity="2"]:before {
    opacity: 0.2;
}

[data-opacity="3"]:before {
    opacity: 0.3;
}

[data-opacity="4"]:before {
    opacity: 0.4;
}

[data-opacity="5"]:before {
    opacity: 0.5;
}

[data-opacity="6"]:before {
    opacity: 0.6;
}

[data-opacity="7"]:before {
    opacity: 0.7;
}

[data-opacity="8"]:before {
    opacity: 0.8;
}

[data-opacity="9"]:before {
    opacity: 0.9;
}

[data-opacity="10"]:before {
    opacity: 1;
}@keyframes ripple{
    0% {
        transform: scale(1);
        opacity: 0;
    }

    30% {
        opacity: 0.4;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}@keyframes movingX{
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(50px);
    }

    100% {
        transform: translateX(0);
    }
}

.moving {
    animation: moving 8s linear infinite;
}@keyframes moving{
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(0);
    }
}

.jump {
    animation: jumpAni 7s linear infinite;
}@keyframes jumpAni{
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0);
    }
}@keyframes jumpReverseAni{
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(30px);
    }

    100% {
        transform: translateY(0);
    }
}

.spin {
    animation: spin 15s linear infinite;
}@keyframes spin{
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}@keyframes animate-positive{
    0% {
        width: 0;
    }
}

.th-animated {
    opacity: 1;
}@keyframes slideinup{
    0% {
        opacity: 0;
        transform: translateY(70px);
    }

    100% {
        transform: translateY(0);
    }
}@keyframes slideinright{
    0% {
        opacity: 0;
        transform: translateX(70px);
    }

    100% {
        transform: translateX(0);
    }
}@keyframes slideindown{
    0% {
        opacity: 0;
        transform: translateY(-70px);
    }

    100% {
        transform: translateY(0);
    }
}@keyframes slideinleft{
    0% {
        opacity: 0;
        transform: translateX(-70px);
    }

    100% {
        transform: translateX(0);
    }
}@keyframes slidebottomright{
    0% {
        opacity: 0;
        transform: translateX(100px) translateY(100px);
    }

    100% {
        transform: translateX(0) translateY(0);
    }
}@keyframes slidetopleft{
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(-100px);
    }

    100% {
        transform: translateX(0) translateY(0);
    }
}
button.f-thumbs__slide__button:after {
    content: '';
    background: lch(0 0 0 / 0.4);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 99999999;
}

.f-thumbs__slide__button {
    background: none !important;
    opacity: 1 !important;
    
}
.is-nav-selected .f-thumbs__slide__button::after {
    content: none !important;
}@keyframes morph{
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 50% 40%;
    }

    50% {
        border-radius: 30% 60% 50% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 50% 40%;
    }
}

.widget_nav_menu ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
}

.widget_nav_menu .menu,
.widget_nav_menu > ul {
    margin: 0 0 0px 0;
}

    .widget_nav_menu > ul > li:last-child a {
        border-bottom: 0;
        padding-bottom: 0;
    }

.widget_nav_menu a {
    display: block;
    border: none;
    margin: 0;
    padding: 15px 25px 15px 0px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.313;
    color: var(--body-color);
    position: relative;
    border-bottom: 1px dashed var(--border-color);
    transition: 0.4s;
}

.widget_nav_menu > ul.menu > li > a {
    text-transform: uppercase;
}

    .widget_nav_menu > ul.menu > li > a:hover {
        padding-left: 0;
    }

.widget_nav_menu a:before {
    content: '\f0da';
    font-family: var(--icon-font);
    color: var(--body-color);
    font-weight: 900;
    position: absolute;
    transition: 0.4s;
    left: 0;
}

.widget_nav_menu > ul.menu > li > a:before {
    content: none;
}

.widget_nav_menu a:hover {
    color: var(--theme-color);
    padding-left: 25px;
}

    .widget_nav_menu a:hover:before {
        color: var(--theme-color);
        opacity: 1;
    }

.widget_nav_menu li {
    display: block;
    position: relative;
}

    .widget_nav_menu li > span {
        font-size: 16px;
        position: absolute;
        right: 0;
        top: 13px;
        transition: all ease 0.4s;
    }

    .widget_nav_menu li:hover > span {
        color: var(--theme-color);
    }

.widget_nav_menu .children {
    margin-left: 10px;
}

.widget_nav_menu a {
    padding-right: 20px;
}

.widget_nav_menu .sub-menu {
    margin-left: 10px;
}

.widget_nav_menu .menu .menu li a:last-child {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 400;
}

.widget_nav_menu .menu .menu li a {
    padding-left: 20px;
    font-weight: 400;
}

    .widget_nav_menu .menu .menu li a:hover {
        padding-left: 25px;
    }

.widget {
    padding: var(--widget-padding-y, 40px) var(--widget-padding-x, 40px);
    border: 1px solid rgba(18, 18, 18, 0.1);
    margin-bottom: 20px;
    position: relative;
    border-radius: 5px;
}

    .widget[data-overlay]:before {
        z-index: -1;
    }

    .widget .th-social a {
        box-shadow: 0px 2px 14px rgba(4, 6, 66, 0.1);
    }

.widget_title,
.widget_title a {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--title-font);
    line-height: 1em;
    margin: 0 0 28px 0;
    color: black;
}

.widget > .widget_title {
    padding-bottom: 15px;
    border-bottom: solid 1px #CDCDCD;
}

    .widget > .widget_title:before {
        content: '';
        position: absolute;
        height: 3px;
        width: 60px;
        background: var(--theme-color);
        bottom: -2px;
    }

.recent-post {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px dashed #D9D9D9;
    padding-bottom: 15px;
}

    .recent-post:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border: 0;
    }

    .recent-post .media-img {
        margin-right: 15px;
        width: 80px;
        overflow: hidden;
        border-radius: 0;
        min-height: 80px;
        display: flex;
    }

        .recent-post .media-img img {
            width: 100%;
            transition: 0.4s ease-in-out;
            object-fit: cover;
            height: 100%;
            border-radius: 5px;
        }

    .recent-post .post-title {
        font-weight: 600;
        font-size: 15px;
        line-height: 20px;
        margin: 0;
        font-family: var(--title-font);
        text-transform: capitalize;
    }@media (min-width: 991px) {
    .recent-post .post-title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

.recent-post .recent-post-meta {
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-color);
}

    .recent-post .recent-post-meta i {
        margin-right: 3px;
    }

    .recent-post .recent-post-meta span {
        margin-right: 5px;
    }

.recent-post:hover .media-img img {
    transform: scale(1.1);
}

.sidebar-area {
    margin-bottom: -10px;
}

    .sidebar-area select,
.sidebar-area input {
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
    }@media (min-width: 992px) {
    .line-3 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}@media (max-width: 1199px) {
    .widget {
        --widget-padding-y: 30px;
        --widget-padding-x: 30px;
    }

    .widget_title {
        font-size: 22px;
        margin: -0.12em 0 24px 0;
    }
}@media (max-width: 991px) {
    .sidebar-area {
        padding-top: 30px;
    }

    .widget {
        --widget-padding-y: 40px;
        --widget-padding-x: 40px;
    }
}@media (max-width: 767px) {
    .widget {
        padding: 35px 20px;
    }
}@media (max-width: 330px) {
    .recent-post .post-title {
        font-size: 16px;
        line-height: 24px;
    }

    .recent-post .recent-post-meta a {
        font-size: 12px;
    }
}

.th-header {
    position: relative;
    z-index: 999;
}

.sticky-wrapper {
    transition: 0.4s ease-in-out;
}

    .sticky-wrapper.sticky {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 9;
        background-color: var(--white-color);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
        animation: stickyAni 0.4s ease-in-out;
    }@keyframes stickyAni{
    0% {
        transform: translate3d(0, -40px, 0) scaleY(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translate3d(0, 0, 0) scaleY(1);
        opacity: 1;
    }
}

.th-header .sticky-wrapper {
    transition: 0.4s ease-in-out;
    background: var(--white-color);
}

    .th-header .sticky-wrapper.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        z-index: 999;
        box-shadow: 1px 5px 5px rgb(0 0 0 / 10%);
    }

.main-menu a {
    display: block;
    position: relative;
    font-weight: 500;
    font-size: 16px;
    color: var(--title-color);
    font-family: var(--title-font);
}

    .main-menu a:hover {
        color: var(--theme-color);
    }

.main-menu > ul > li {
    margin: 0 14px;
}

    .main-menu > ul > li > a {
        padding: 41.5px 0;
        color: var(--white-color);
        text-transform: capitalize;
    }

        .main-menu > ul > li > a:hover {
            color: var(--theme-color);
        }

.main-menu ul {
    margin: 0;
    padding: 0;
}

    .main-menu ul li {
        list-style-type: none;
        display: inline-block;
        position: relative;
    }

        .main-menu ul li.menu-item-has-children > a {
            transition: 0.4s;
        }

            .main-menu ul li.menu-item-has-children > a:after {
                content: "\2b";
                position: relative;
                font-family: var(--icon-font);
                margin-left: 4px;
                font-weight: 700;
                top: 0;
                font-size: 13px;
                display: inline-block;
                transition: 0.4s;
                transform: rotate(0deg);
            }

        .main-menu ul li.menu-item-has-children:hover > a:after {
            content: "\f068";
            transform: rotate(180deg);
        }

        .main-menu ul li:last-child {
            margin-right: 0 !important;
        }

        .main-menu ul li:first-child {
            margin-left: 0 !important;
        }

        .main-menu ul li:hover > ul.sub-menu {
            visibility: visible;
            opacity: 1;
            transform: scaleY(1);
            z-index: 9;
        }

    .main-menu ul.sub-menu {
        position: absolute;
        text-align: left;
        top: 100%;
        left: 0;
        background-color: var(--white-color);
        visibility: hidden;
        min-width: 190px;
        width: max-content;
        padding: 7px;
        left: -14px;
        opacity: 0;
        z-index: -1;
        border: 0;
        box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06);
        border-radius: 0;
        transform: scaleY(0);
        transform-origin: top center;
        transition: all 0.4s ease 0s;
    }

        .main-menu ul.sub-menu a {
            font-size: 16px;
            line-height: 30px;
        }

    .main-menu ul.sub-menu {
        padding: 0 20px 0 18px;
        left: -27px;
    }

        .main-menu ul.sub-menu li {
            display: block;
            margin: 0 0;
            padding: 10px 0;
            border-bottom: dashed 1px var(--light-color);
            min-width: 230px;
        }

            .main-menu ul.sub-menu li:last-child {
                border-bottom: 0;
            }

            .main-menu ul.sub-menu li.menu-item-has-children > a:after {
                content: "\f105";
                float: right;
                top: 1px;
            }

            .main-menu ul.sub-menu li a {
                position: relative;
                padding-left: 20px;
                text-transform: capitalize;
            }

                .main-menu ul.sub-menu li a:before {
                    content: "\f111";
                    position: absolute;
                    transform: rotate(45deg);
                    top: 9px;
                    left: 0;
                    font-family: var(--icon-font);
                    width: 11px;
                    height: 11px;
                    text-align: center;
                    border-radius: 50%;
                    display: inline-block;
                    font-size: 10px;
                    line-height: 1;
                    color: var(--theme-color);
                    font-weight: 700;
                }

            .main-menu ul.sub-menu li ul.sub-menu {
                left: 100%;
                right: auto;
                top: 0;
                margin: 0 0;
                margin-left: 20px;
            }

                .main-menu ul.sub-menu li ul.sub-menu li ul {
                    left: 100%;
                    right: auto;
                }

.header-button {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 70px;
}

.header-links ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
}

.header-links li {
    display: inline-block;
    position: relative;
    font-size: 15px;
    font-weight: 400;
}

    .header-links li img {
        margin-top: -5px;
    }

    .header-links li:not(:last-child) {
        margin: 0 36px 0 0;
        padding: 0 40px 0 0;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .header-links li > i {
        font-size: 18px;
        margin-right: 10px;
        color: var(--theme-color);
        display: inline-block;
        text-align: center;
    }

.header-links li,
.header-links span,
.header-links p,
.header-links a {
    font-family: var(--body-font);
    color: var(--smoke-color2);
}

    .header-links li strong,
.header-links span strong,
.header-links p strong,
.header-links a strong {
        color: var(--white-color);
    }

    .header-links a:hover {
        color: var(--theme-color);
    }

.header-links i {
    color: var(--title-color);
}

.header-links b,
.header-links strong {
    font-weight: 600;
}

.header-logo {
    padding-top: 5px;
    padding-bottom: 5px;
}

    .header-logo img {
        max-height: 100px;
    }

.dropdown-toggle {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    color: var(--white-color);
}

    .dropdown-toggle img {
        margin-right: 10px;
    }

    .dropdown-toggle:hover {
        color: var(--theme-color);
    }

    .dropdown-toggle::after {
        content: "\f107";
        border: none;
        font-family: var(--icon-font);
        vertical-align: middle;
        font-size: 16px;
        font-weight: 700;
        margin-left: 6px;
    }

.dropdown-menu {
    width: fit-content;
    min-width: auto;
    top: calc(100% + 20px) !important;
    left: calc(50% + 10px) !important;
    transform: translateX(-50%) !important;
    padding: 8px 20px !important;
    text-align: center;
    border-color: var(--border-color);
}

    .dropdown-menu li {
        display: block;
    }

    .dropdown-menu:after {
        content: "";
        position: absolute;
        left: 50%;
        top: -7px;
        width: 14px;
        height: 14px;
        margin-left: -7px;
        background-color: var(--white-color);
        z-index: -1;
        transform: rotate(45deg);
        border-top: 1px solid var(--border-color);
        border-left: 1px solid var(--border-color);
    }

.header-top.style2 .header-links li {
    padding-top: 12px;
    padding-bottom: 12px;
}

.header-top.style2 .header-links a:hover {
    color: var(--title-color);
}@media (max-width: 1500px) {

    .header-button {
        gap: 50px;
    }
}@media (max-width: 1399px) {

    .main-menu a {
        font-weight: 600;
    }
}@media (max-width: 1200px) {
    .header-button {
        gap: 40px;
    }
}@media (max-width: 1199px) {
    .main-menu > ul > li > a {
        padding: 36.5px 0;
    }
}@media (max-width: 991px) {

    .header-logo {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}@media (max-width: 991px) {
    .header-links li {
        font-size: 14px;
    }

        .header-links li > i {
            font-size: 15px;
        }
}@media (max-width: 1200px) {
    .header-top.style2 {
        padding: 0 30px;
    }

        .header-top.style2 .header-links li:not(:last-child) {
            margin: 0 21px 0 0;
            padding: 0 25px 0 0;
        }
}@media (max-width: 991px) {
    .header-top.style2 .header-links li {
        padding-top: 7px;
        padding-bottom: 7px;
    }
}@media (max-width: 375px) {
    .header-top.style2 {
        display: none;
    }
}

.header-layout6 {
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}

    .header-layout6 .dropdown-toggle::after {
        content: "\f107";
        border: none;
        font-family: var(--icon-font);
        vertical-align: middle;
        font-weight: 400;
        margin-left: 6px;
    }

    .header-layout6 .dropdown-menu {
        width: fit-content;
        min-width: auto;
        top: calc(100% + 10px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 8px 20px !important;
        text-align: center;
        border-color: var(--border-color);
    }

        .header-layout6 .dropdown-menu li {
            padding-right: 0;
            margin-right: 0;
        }

            .header-layout6 .dropdown-menu li:after {
                display: none;
            }

            .header-layout6 .dropdown-menu li a {
                display: block;
            }

        .header-layout6 .dropdown-menu a {
            color: var(--body-color);
        }

            .header-layout6 .dropdown-menu a:hover {
                color: var(--theme-color) !important;
            }

        .header-layout6 .dropdown-menu:before {
            content: "";
            position: absolute;
            left: 50%;
            top: -7px;
            width: 14px;
            height: 14px;
            margin-left: -7px;
            background-color: var(--white-color);
            z-index: -1;
            transform: rotate(45deg);
            border-top: 1px solid var(--border-color);
            border-left: 1px solid var(--border-color);
        }

    .header-layout6 .simple-icon {
        border: none;
        background-color: transparent;
    }

        .header-layout6 .simple-icon.style2 {
            font-size: 28px;
        }

        .header-layout6 .simple-icon:hover {
            color: var(--yellow-color);
        }

    .header-layout6 .header-top {
        background-color: var(--theme-color);
        padding: 14px 0;
        --body-color: #fff;
    }

        .header-layout6 .header-top a,
.header-layout6 .header-top li,
.header-layout6 .header-top p,
.header-layout6 .header-top span,
.header-layout6 .header-top i {
            color: var(--body-color);
        }

            .header-layout6 .header-top a:hover {
                color: var(--white-color);
            }

                .header-layout6 .header-top a:hover i {
                    color: var(--title-color);
                }

            .header-layout6 .header-top li:before {
                background-color: #5792ff;
            }

            .header-layout6 .header-top li:not(:last-child) {
                margin: 0 17px 0 0;
                padding: 0 20px 0 0;
            }

    .header-layout6 .simple-icon {
        color: var(--white-color);
    }

    .header-layout6 .dropdown-menu {
        --body-color: #74787c;
    }

    .header-layout6 .logo-shape {
        display: inline-block;
        height: 100%;
        width: 27.7%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--white-color);
        clip-path: polygon(0 0, 100% 0%, calc(100% - 50px) 100%, 0% 100%);
        z-index: -1;
    }

    .header-layout6 .menu-area {
        position: relative;
        background-color: #bd0c19;
        background-size: auto;
        background-repeat: repeat;
        z-index: 2;
    }

    .header-layout6 .main-menu > ul > li {
        margin: 0 18px;
    }

        .header-layout6 .main-menu > ul > li > a {
            color: var(--white-color);
            padding: 41.5px 0;
        }

    .header-layout6 .th-menu-toggle {
        margin: 20px 0;
    }

    .header-layout6 .header-button {
        margin-left: 100px;
        gap: 15px;
    }@media (min-width: 1922px) {
    .header-layout6 {
        --main-container: 1440px;
    }

        .header-layout6 .logo-shape {
            width: 34%;
        }
}@media (max-width: 1700px) {
    .header-layout6 .logo-shape {
        width: 25%;
    }
}@media (max-width: 1399px) {
    .header-layout6 .container {
        margin-left: auto;
        margin-right: auto;
    }

    .header-layout6 .header-button {
        margin-left: 60px;
    }

    .header-layout6 .logo-shape {
        width: 22%;
    }
}@media (max-width: 1300px) {
    .header-layout6 .logo-shape {
        width: 26%;
    }

    .header-layout6 .header-button .th-btn {
        display: none;
    }
}@media (max-width: 1199px) {
    .header-layout6 .logo-shape {
        width: 300px;
    }
}@media (max-width: 991px) {
    .header-layout6 .logo-shape {
        width: 60%;
    }
}@media (max-width: 767px) {
    .header-layout6 .header-top {
        padding: 8px 0;
    }
}@media (max-width: 375px) {
    .header-layout6 .logo-shape {
        width: 75%;
    }
}

footer a {
    color: var(--light-color)
}

    footer b,
footer a:hover {
        color: var(--white-color)
    }

.breadcumb-menu {
    max-width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
}

    .breadcumb-menu li {
        display: inline-block;
        margin-right: 3px;
        padding-right: 5px;
        list-style: none;
        position: relative;
        color: var(--black-color);
        font-weight: 400;
        font-size: 16px;
    }

        .breadcumb-menu li:after {
            content: "/";
            position: relative;
            margin-left: 10px;
            font-weight: 400;
            font-size: 16px;
            color: var(--black-color);
        }

        .breadcumb-menu li:last-child {
            padding-right: 0;
            margin-right: 0;
        }

            .breadcumb-menu li:last-child:after {
                display: none;
            }

    .breadcumb-menu a,
.breadcumb-menu span {
        white-space: normal;
        color: inherit;
        word-break: break-word;
        font-weight: 400;
        font-size: 16px;
        color: var(--black-color);
    }

        .breadcumb-menu a:hover,
.breadcumb-menu span:hover {
            color: var(--theme-color);
        }

.breadcumb-wrapper {
    padding: 15px 0 15px;
    overflow: hidden;
    background-color: #e9e9e9;
}

    .breadcumb-wrapper:before {
        z-index: -1;
    }

.th-pagination {
    margin-block: 50px;
}

    .th-pagination ul {
        margin: 0;
        padding: 0;
    }

    .th-pagination li {
        display: inline-block;
        margin: 0 3px;
        list-style-type: none;
    }

        .th-pagination li:last-child {
            margin-right: 0;
        }

        .th-pagination li:first-child {
            margin-left: 0;
        }

    .th-pagination span,
.th-pagination a {
        display: inline-block;
        text-align: center;
        position: relative;
        border: 1px solid rgba(15, 13, 29, 0.1);
        color: var(--title-color);
        background-color: transparent;
        width: 50px;
        height: 50px;
        line-height: 50px;
        z-index: 1;
        font-size: 16px;
        font-weight: 700;
        font-family: var(--title-font);
        border-radius: 50%;
    }

        .th-pagination span.active,
.th-pagination span:hover,
.th-pagination a.active,
.th-pagination a:hover {
            color: var(--white-color);
            background-color: var(--theme-color);
            box-shadow: none;
        }@media (max-width: 767px) {
    .th-pagination span,
.th-pagination a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}

blockquote {
    font-size: 18px;
    line-height: 1.56;
    padding: 40px;
    font-weight: 500;
    display: block;
    position: relative;
    background-color: var(--smoke-color);
    overflow: hidden;
    margin: 35px 0;
    color: var(--title-color);
    font-style: italic;
    border-radius: 0;
}

    blockquote p {
        font-size: 22px;
        font-family: var(--body-font);
        font-weight: 400;
        font-style: normal;
        margin-top: -0.3em;
        margin-bottom: 30px;
        line-height: 34px;
        color: var(--title-color);
        width: 100%;
        position: relative;
        z-index: 3;
    }

        blockquote p a {
            color: inherit;
        }

    blockquote:before {
        content: "\f10e";
        font-family: var(--icon-font);
        position: absolute;
        right: 40px;
        bottom: 30px;
        font-size: 5rem;
        font-weight: 400;
        opacity: 1;
        line-height: 3.8rem;
        color: var(--title-color);
        opacity: 0.1;
        font-style: normal;
    }

    blockquote cite {
        display: inline-block;
        font-size: 18px;
        position: relative;
        border-color: inherit;
        line-height: 1;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: -0.1em;
        font-style: normal;
        font-family: var(--title-font);
        padding-left: 50px;
        margin-left: 10px;
    }

        blockquote cite:before {
            content: "";
            height: 3px;
            width: 50px;
            background-color: var(--title-color);
            position: absolute;
            bottom: 8px;
            left: -10px;
        }

.blog-meta {
    display: block;
}

    .blog-meta span,
.blog-meta a {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        font-family: var(--title-font);
        color: var(--gray-color);
        position: relative;
        margin-right: 25px;
    }

        .blog-meta span i,
.blog-meta a i {
            margin-right: 10px;
            color: var(--theme-color);
        }

        .blog-meta span:last-child,
.blog-meta a:last-child {
            margin-right: 0;
            padding-right: 0;
        }

            .blog-meta span:last-child:after,
.blog-meta a:last-child:after {
                display: none;
            }

        .blog-meta a:hover {
            color: var(--theme-color);
        }

.blog-img img {
    transition: 0.4s ease-in-out;
}

.blog-title a {
    color: inherit;
}

    .blog-title a:hover {
        color: var(--theme-color);
    }

.th-blog {
    margin-bottom: 30px;
}

.contact-title {
    margin-bottom: 10px;
}

.contact-item a {
    color: var(--body-color);
}

.contact-item {
    margin-bottom: 7px;
}

    .contact-item i {
        width: 25px;
    }

.blog-single {
    position: relative;
    margin-bottom: var(--blog-space-y, 40px);
    border: 1px solid rgba(18, 18, 18, 0.1);
    border-radius: 5px;
}

    .blog-single .blog-title {
        margin-bottom: 15px;
        font-size: 20px;
        text-transform: uppercase;
        line-height: 1.4;
        font-weight: 700;
    }

    .blog-single .blog-text {
        margin-bottom: 27px;
    }

    .blog-single .blog-meta {
        margin: -0.35em 0 10px 0;
    }

    .blog-single .blog-img {
        max-height: 500px;
        overflow: hidden;
        display: flex
    }

        .blog-single .blog-img img {
            object-fit: cover;
        }

.blog-content img,
.blog-content iframe {
    max-width: 100% !important;
    height: auto !important;
}

.blog-content iframe {
    min-height: 450px !important;
}

.blog-single .blog-content {
    margin: 0 0 0 0;
    padding: 20px 20px 40px 20px;
    position: relative;
}

.list-same {
    padding: 20px 20px 40px 20px;
    position: relative;
    border-top: solid 1px #eee;
}

.title-same {
    padding-bottom: 10px;
    border-bottom: solid 1px #eee;
    margin-bottom: 20px;
    position: relative;
    font-size: 20px;
    font-weight: 700;
}

    .title-same:before {
        content: '';
        position: absolute;
        height: 3px;
        width: 60px;
        background: var(--theme-color);
        bottom: -2px;
    }

.blog-img img {
    width: 100%;
}

.blog-single .blog-img {
    position: relative;
    background-color: var(--smoke-color);
}

    .blog-single .blog-img .slick-arrow {
        --pos-x: 30px;
        border: none;
        background-color: var(--white-color);
        color: var(--theme-color);
    }

        .blog-single .blog-img .slick-arrow:hover {
            background-color: var(--theme-color);
            color: var(--white-color);
        }

.blog-single:hover .blog-img .slick-arrow {
    opacity: 1;
    visibility: visible;
}

.blog-details .blog-single {
    background-color: transparent;
    margin-bottom: 30px;
}@media (max-width: 1399px) {
    .blog-single .blog-content {
        padding: 40px 30px;
    }

    .blog-single .blog-title {
        font-size: 28px;
    }
}@media (max-width: 1199px) {
    blockquote {
        font-size: 18px;
        padding: 40px 20px 40px 20px;
    }

        blockquote:before {
            font-size: 4rem;
            line-height: 2.5rem;
        }

    .blog-meta span,
.blog-meta a {
        margin-right: 6px;
        padding-right: 15px;
    }
}@media (max-width: 767px) {

    blockquote cite {
        font-size: 18px;
    }

    .blog-meta span,
.blog-meta a {
        margin-right: 6px;
        padding-right: 6px;
    }

        .blog-meta span:after,
.blog-meta a:after {
            display: none;
        }

    .blog-details .blog-single {
        --blog-space-x: 20px;
        --blog-space-y: 20px;
    }

    .blog-single .blog-content {
        padding: 30px 20px;
    }

    .blog-single .blog-title {
        font-size: 20px;
        line-height: 1.3;
    }

    .blog-single .blog-text {
        margin-bottom: 22px;
    }
}@media (max-width: 575px) {
    .blog-meta span,
.blog-meta a {
        margin-right: 5px;
        padding-right: 5px;
        margin-bottom: 5px;
    }

        .blog-meta span:after,
.blog-meta a:after {
            display: none;
        }

    blockquote p {
        font-size: 18px;
    }
}

.hero-indicator {
    position: absolute;
    right: 0;
    z-index: 3;
    top: 50%;
    transform: translate(-315px, -50%);
    width: 120px;
}

    .hero-indicator .indicatior-btn {
        display: block;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        position: relative;
        background-blend-mode: luminosity;
        background-color: #D9D9D9;
        margin: 0 auto;
    }

        .hero-indicator .indicatior-btn:after {
            height: 120px;
            width: 120px;
            left: -20px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            top: -20px;
            content: '';
            position: absolute;
            border-radius: 50%;
            transition: 0.4s;
        }

        .hero-indicator .indicatior-btn ~ .indicatior-btn {
            margin-top: 50px;
        }

        .hero-indicator .indicatior-btn.active {
            width: 120px;
            height: 120px;
            background-blend-mode: normal;
            margin-top: 30px;
            margin-bottom: -20px;
        }

            .hero-indicator .indicatior-btn.active:after {
                transform: scale(0);
            }@keyframes top-to-bottom{
    0% {
        top: 50%;
    }

    100% {
        top: 0%;
    }
}@keyframes left-to-right{
    0% {
        left: -10%;
    }

    100% {
        left: 0%;
    }
}@media (max-width: 1600px) {
    .hero-indicator {
        transform: translate(-80px, -50%);
    }
}@media (max-width: 1500px) {
    .hero-indicator {
        transform: translate(-50px, -50%);
    }
}@media (max-width: 1199px) {

    .hero-indicator .indicatior-btn {
        width: 60px;
        height: 60px;
    }

        .hero-indicator .indicatior-btn:after,
.hero-indicator .indicatior-btn.active {
            width: 100px;
            height: 100px;
        }
}@media (max-width: 991px) {

    .header-layout6 .menu-area {
        background: none;
    }

    .th-menu-toggle {
        color: var(--theme-color)
    }
}@media (max-width: 767px) {

    .hero-indicator {
        display: none;
    }
}

.popup-search-box {
    position: fixed;
    top: 0;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.95);
    height: 0;
    width: 0;
    overflow: hidden;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all ease 0.4s;
}

    .popup-search-box button.searchClose {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 40px;
        right: 40px;
        border-width: 1px;
        border-style: solid;
        border-color: var(--theme-color);
        background-color: transparent;
        font-size: 22px;
        border-radius: 50%;
        transform: rotate(0);
        transition: all ease 0.4s;
        color: var(--theme-color);
    }

        .popup-search-box button.searchClose:hover {
            color: var(--body-color);
            background-color: #fff;
            border-color: transparent;
            border-color: transparent;
            transform: rotate(90deg);
        }

    .popup-search-box form {
        position: absolute;
        top: 50%;
        left: 50%;
        display: inline-block;
        padding-bottom: 40px;
        cursor: auto;
        width: 100%;
        max-width: 700px;
        transform: translate(-50%, -50%) scale(0);
        transition: transform ease 0.4s;
    }@media (max-width: 1199px) {
    .popup-search-box form {
        max-width: 600px;
    }
}

.popup-search-box form input {
    font-size: 18px;
    height: 70px;
    width: 100%;
    border: 2px solid var(--theme-color);
    background-color: transparent;
    padding-left: 30px;
    color: #fff;
    border-radius: 50px;
}

    .popup-search-box form input::-moz-placeholder {
        color: #fff;
    }

    .popup-search-box form input::-webkit-input-placeholder {
        color: #fff;
    }

    .popup-search-box form input:-ms-input-placeholder {
        color: #fff;
    }

    .popup-search-box form input::-ms-input-placeholder {
        color: #fff;
    }

    .popup-search-box form input::placeholder {
        color: #fff;
    }

.popup-search-box form button {
    position: absolute;
    top: 0px;
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    right: 12px;
    color: var(--white-color);
    cursor: pointer;
    width: 70px;
    height: 70px;
    transition: all ease 0.4s;
    transform: scale(1.001);
}

    .popup-search-box form button:hover {
        transform: scale(1.1);
    }

.popup-search-box.show {
    opacity: 1;
    visibility: visible;
    width: 100.1%;
    height: 100%;
    transition: all ease 0.4s;
    border-radius: 0;
}

    .popup-search-box.show form {
        transition-delay: 0.5s;
        transform: translate(-50%, -50%) scale(1);
    }

.sidemenu-wrapper {
    position: fixed;
    z-index: 99999;
    right: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.8s;
}

    .sidemenu-wrapper .closeButton {
        display: inline-block;
        border: 2px solid;
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        padding: 0;
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: var(--white-color);
        border-radius: 50%;
        transform: rotate(0);
        transition: all ease 0.4s;
    }

        .sidemenu-wrapper .closeButton:hover {
            color: var(--theme-color);
            border-color: var(--theme-color);
            transform: rotate(90deg);
        }

    .sidemenu-wrapper .sidemenu-content {
        background-color: var(--title-color);
        width: 450px;
        margin-left: auto;
        padding: 80px 30px;
        height: 100%;
        overflow-y: scroll;
        position: relative;
        right: -500px;
        cursor: auto;
        transition-delay: 1s;
        transition: right ease 1s;
    }

        .sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track {
            box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
        }

        .sidemenu-wrapper .sidemenu-content::-webkit-scrollbar {
            width: 2px;
            background-color: #F5F5F5;
        }

    .sidemenu-wrapper .widget {
        padding: 0;
        border: none;
        background-color: transparent;
    }

    .sidemenu-wrapper.show {
        opacity: 1;
        visibility: visible;
        width: 100%;
        transition: all ease 0.8s;
    }

        .sidemenu-wrapper.show .sidemenu-content {
            right: 0;
            opacity: 1;
            visibility: visible;
        }

    .sidemenu-wrapper .widget_title {
        font-size: 24px;
        font-weight: 700;
        color: var(--white-color);
        border-bottom: none;
        margin: 0.15em 0 35px 0;
    }

        .sidemenu-wrapper .widget_title.mb-20 {
            margin-bottom: 20px;
        }

    .sidemenu-wrapper .widget_nav_menu {
        min-width: 126px;
    }

        .sidemenu-wrapper .widget_nav_menu ul {
            margin-top: -5px;
        }

        .sidemenu-wrapper .widget_nav_menu .menu,
.sidemenu-wrapper .widget_nav_menu > ul {
            margin-bottom: -5px;
        }

        .sidemenu-wrapper .widget_nav_menu a {
            font-size: 16px;
            font-weight: 500;
            padding: 0;
            margin-bottom: 21px;
            font-family: var(--body-font);
            display: block;
            max-width: 100%;
            width: max-content;
            color: var(--light-color);
            padding-right: 0;
            background-color: transparent;
            border-bottom: none;
            position: relative;
        }

            .sidemenu-wrapper .widget_nav_menu a:before {
                content: "\f101";
                font-weight: 600;
                left: 0;
                top: 2px;
                transform: translateY(0);
                font-size: 0.9em;
                background-color: transparent;
                color: var(--theme-color);
                border: none;
                opacity: 0;
                transition: 0.3s all ease-in-out;
            }

            .sidemenu-wrapper .widget_nav_menu a:hover {
                background-color: transparent;
                color: var(--theme-color);
                padding-left: 20px;
            }

                .sidemenu-wrapper .widget_nav_menu a:hover:before {
                    opacity: 1;
                }

        .sidemenu-wrapper .widget_nav_menu li > span {
            width: auto;
            height: auto;
            position: relative;
            background-color: transparent;
            color: var(--body-color);
            line-height: 1;
        }

        .sidemenu-wrapper .widget_nav_menu li:last-child a {
            margin-bottom: 0;
        }

.woocommerce-form-coupon,
.woocommerce-form-login {
    padding: 35px 40px 35px 40px;
    background-color: var(--white-color);
    box-shadow: 0px 6px 30px rgba(1, 15, 28, 0.1);
    margin-bottom: 0;
}

    .woocommerce-form-coupon input,
.woocommerce-form-login input {
        background-color: var(--smoke-color);
    }@media (max-width: 575px) {
    .woocommerce-form-coupon,
.woocommerce-form-login {
        padding: 40px 20px;
    }
}

.woocommerce-form-coupon .form-group,
.woocommerce-form-login .form-group {
    margin-bottom: 20px;
}

    .woocommerce-form-coupon .form-group:last-child,
.woocommerce-form-login .form-group:last-child {
        margin-bottom: 0;
    }

.woocommerce-form-login {
    margin-bottom: 30px;
}

.box-info {
    padding: 30px;
    border-radius: 5px;
    border: 2px solid #f4f4f4;
}
.product-inner-item {
    margin-bottom: 10px;
}

    .product-inner-item i {
        width: 20px;
        font-size: 13px;
    }
.buy-online ul {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
}

    .buy-online ul li {
        display: inline;
    }

        .buy-online ul li:not(:last-child) {
            margin-right: 10px;
        }
    .buy-online ul li:before {
        content:none !important;
    }
.buy-online img {
    border-radius: 5px;
    max-height:45px;
}
.tab-content img {
    height: 100% !important;
}

#woosq-popup .product_meta {
    margin-top: 20px;
}

.star-rating {
    overflow: hidden;
    position: relative;
    width: 100px;
    height: 1.2em;
    line-height: 1.2em;
    display: block;
    font-family: var(--icon-font);
    font-weight: 700;
    font-size: 12px;
}

    .star-rating:before {
        content: "\f005\f005\f005\f005\f005";
        color: #e1e1e1;
        float: left;
        top: 0;
        left: 0;
        position: absolute;
        letter-spacing: 3px;
    }

    .star-rating span {
        overflow: hidden;
        float: left;
        top: 0;
        left: 0;
        position: absolute;
        padding-top: 1.5em;
    }

        .star-rating span:before {
            content: "\f005\f005\f005\f005\f005";
            top: 0;
            position: absolute;
            left: 0;
            color: #feb62a;
            letter-spacing: 3px;
        }

.rating-select label {
    margin: 0;
    margin-right: 10px;
}

.rating-select p.stars {
    margin-bottom: 0;
    line-height: 1;
}

    .rating-select p.stars a {
        position: relative;
        height: 14px;
        width: 18px;
        text-indent: -999em;
        display: inline-block;
        text-decoration: none;
    }

        .rating-select p.stars a::before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 18px;
            height: 14px;
            line-height: 1;
            font-family: var(--icon-font);
            content: "\f005";
            font-weight: 400;
            text-indent: 0;
            color: var(--yellow-color);
        }

        .rating-select p.stars a:hover ~ a::before {
            content: "\f005";
            font-weight: 400;
        }

    .rating-select p.stars:hover a::before {
        content: "\f005";
        font-weight: 700;
    }

    .rating-select p.stars.selected a.active::before {
        content: "\f005";
        font-weight: 700;
    }

    .rating-select p.stars.selected a.active ~ a::before {
        content: "\f005";
        font-weight: 400;
    }

    .rating-select p.stars.selected a:not(.active)::before {
        content: "\f005";
        font-weight: 700;
    }

.product-box {
    padding: 30px;
    background: #ffffff;
    border-radius: 5px;
    text-align: center;
}

.product-box_thumb {
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
}

.effect-img img {
    transition: 0.4s ease-in-out;
}

.effect-img:hover img {
    transform: scale(1.08);
}

.product-box a {
    color: var(--body-color);
}

.product-box:hover a {
    color: var(--theme-color);
}

.style3 .fa-phone-plus {
    margin-right: 5px;
}

.th-product {
    text-align: center;
    transition: all ease 0.4s;
    border: 2px solid #f4f4f4;
    padding-bottom: 30px;
    border-radius: 0px;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.tag-category {
    position: absolute;
    left: 15px;
    top: 15px;
}

    .tag-category a {
        background: rgb(225 225 225 / 80%);
        color: var(--body-color);
        padding: 7px 15px;
        border-radius: 5px;
        font-size: 13px;
    }

        .tag-category a:hover {
            background: var(--theme-color);
            color: var(--white-color);
        }

        .tag-category a .far {
            margin-right: 3px;
        }

.th-product .product-title {
    font-size: 16px;
    margin: 10px 0 10px 0;
}

    .th-product .product-title a {
        color: inherit;
    }

        .th-product .product-title a:hover {
            color: var(--theme-color);
        }

.th-product .price {
    display: block;
    color: var(--theme-color);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: -0.4em;
}

    .th-product .price del {
        margin-right: 10px;
        color: #a9a9a9;
    }

.th-product .product-img {
    --space: 20px;
    overflow: hidden;
    position: relative;
    text-align: center;
    border-radius: 0px;
    z-index: 2;
    padding: 15px;
    margin-bottom: 15px;
}

    .th-product .product-img img {
        width: 100%;
        transition: all ease 0.4s;
        transform: scale(1);
    }

.th-product .star-rating {
    margin: 0 auto 5px auto;
    width: 93px;
    font-size: 14px;
}

.product-content {
    padding-left: 15px;
    padding-right: 15px;
}

.th-product:hover .product-img img {
    transform: scale(1.1);
}

.th-product:hover .product-img:before {
    visibility: visible;
    opacity: 0.2;
}

#productCarousel .slick-arrow {
    top: 37.5%;
}

.product-about ul {
    padding: 0;
    margin-bottom: 20px;
    list-style: none;
}

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

        .product-about ul li:before {
            position: relative;
            margin-right: 7px;
            font-family: Font Awesome\ 6 Pro;
            font-weight: 400;
            content: "\f336";
            color: var(--theme-color);
        }

.product-thumb-tab {
    --thumb: 87px;
    --gap: 0px;
    position: relative;
    z-index: 3;
    display: inline-flex;
    border-radius: 20px;
    align-items: end;
    justify-content: center;
    width: 100%;
}

    .product-thumb-tab .tab-btn {
        background-color: var(--white-color);
        cursor: pointer;
        height: var(--thumb);
        width: var(--thumb);
        padding: var(--gap);
        border-radius: 20px;
    }

        .product-thumb-tab .tab-btn img {
            max-width: 100%;
            width: 100%;
            border-radius: inherit;
        }

        .product-thumb-tab .tab-btn:not(:last-of-type) {
            margin-right: 15px;
        }

.product-big-img {
    background-color: #f4f4f4;
    text-align: center;
    border-radius: 20px;
    position: relative;
}

    .product-big-img .img {
        width: 100%;
        border-radius: 20px;
    }

        .product-big-img .img img {
            width: 100%;
            border-radius: 20px;
            height: 100%;
            object-fit: cover;
        }

.product-big-img {
    background-color: #f4f4f4;
    text-align: center;
    border-radius: 20px;
    position: relative;
}

    .product-big-img .img {
        width: 100%;
        border-radius: 20px;
    }

        .product-big-img .img img {
            width: 100%;
            border-radius: 20px;
            height: 100%;
            object-fit: cover;
        }

.quantity {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

    .quantity .qty-input {
        display: inline-block;
        width: 50px;
        height: 50px;
        border: none;
        border-right: none;
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        text-align: center;
        color: var(--body-color);
        font-size: 18px;
        font-weight: 600;
    }

        .quantity .qty-input:last-child {
            border-right: none;
        }

.product_meta {
    font-weight: 700;
    font-size: 16px;
    font-family: var(--body-font);
    margin: 20px 0 0 0;
}

    .product_meta > span {
        display: block;
        margin-bottom: 5px;
        color: var(--title-color);
        font-weight: bold;
    }

        .product_meta > span:last-child {
            margin-bottom: 0;
        }

        .product_meta > span a {
            color: inherit;
        }

            .product_meta > span a:hover {
                color: var(--theme-color);
            }

        .product_meta > span > a,
.product_meta > span > span {
            position: relative;
            color: var(--body-color);
            font-weight: 400;
        }

            .product_meta > span > a:after,
.product_meta > span > span:after {
                content: ",";
                margin-right: 5px;
            }

            .product_meta > span > a:last-child:after,
.product_meta > span > span:last-child:after {
                display: none;
            }

            .product_meta > span > a:first-child,
.product_meta > span > span:first-child {
                margin-left: 7px;
            }

.product-tab-style1 {
    border-bottom: 1px solid #ececec;
    margin: 85px auto 33px auto;
    padding-bottom: 11px;
    gap: 30px;
}

    .product-tab-style1 .nav-link {
        background-color: transparent;
        color: #103641;
        padding: 0;
        font-size: 20px;
        font-weight: 600;
        position: relative;
        padding: 10px 15px;
    }

        .product-tab-style1 .nav-link:after {
            content: '';
            height: 2px;
            background: var(--theme-color);
            width: 0;
            left: 0;
            bottom: -12px;
            position: absolute;
            transition: 0.4s all;
        }

        .product-tab-style1 .nav-link:hover,
.product-tab-style1 .nav-link.active {
            color: var(--theme-color);
            color: var(--white-color);
        }

            .product-tab-style1 .nav-link:hover:after,
.product-tab-style1 .nav-link.active:after {
                width: 100%;
            }

#productTabContent {
    margin-bottom: 40px;
}

#additional_information {
    margin-bottom: 40px;
}

#reviews {
    margin-bottom: 40px;
}

    .product-about .product-title {
        margin: 0 0 10px 0;
        font-weight: 800;
        font-size: 24px;
        text-transform: uppercase;
    }
.product-about > .price {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-color);
    display: block;
    margin-bottom: 20px;
    margin-right: 10px;
    line-height: inherit;
}
    .product-about > .price >.price {
        margin-bottom:0;
        margin-right:10px;
    }
    .product-about > .price > .promotion {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        background: #e60808;
        padding: 3px 13px;
        border-radius: 5px;
    }
        .product-about > .price del {
            color: var(--gray-color);
            font-weight: 500;
            margin-left: 15px;
        }

.product-rating .fa-eye {
    margin-right: 5px;
}

.product-about .product-rating {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    position: relative;
    top: 2px;
    font-size: 16px;
    line-height: 20px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    margin-bottom: 15px;
}

    .product-about .product-rating .star-rating {
        width: 80px;
        font-size: 12px;
        margin-right: 8px;
    }

.product-about .share {
    margin-top: 25px;
}

.product-about .th-social a {
    --icon-size: 40px;
    line-height: 38px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 0;
}

    .product-about .th-social a:hover {
        border-color: var(--theme-color);
    }

.product-about .quantity {
    position: relative;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    margin-left: 5px;
    margin-right: 0px;
    height: 50px;
}

    .product-about .quantity .qty-input {
        width: 50px;
        height: 50px;
        background-color: transparent;
        color: var(--title-color);
        text-align: center;
        font-weight: 500;
        border-left: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
    }

#myCarousel {
    max-width: 640px;
    margin: 0 auto;
}

    #myCarousel .f-carousel__slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }@media (max-width: 1299px) {
    .product-thumb-tab {
        --thumb: 100px;
        margin-left: -40px;
    }
}@media (max-width: 1199px) {

    .product-tab-style1 {
        margin: 55px 0 40px 0;
    }

    .product-about {
        padding-left: 0;
        margin-top: 35px;
    }
}@media (max-width: 991px) {
    .product-big-img {
        margin-bottom: 40px;
    }

    .product-thumb-tab {
        margin-left: -10px;
    }
}@media (max-width: 575px) {

    .product-thumb-tab {
        --thumb: 74px;
        --gap: 6px;
    }

        .product-thumb-tab .tab-btn {
            border-radius: 6px;
        }

            .product-thumb-tab .tab-btn:not(:last-of-type) {
                margin-bottom: 10px;
            }

        .product-thumb-tab .indicator {
            border-radius: 6px;
        }

    .product-big-img {
        margin-left: 28px;
    }

        .product-big-img .img {
            height: 370px;
        }

    .product-grid {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    .product-about .product-title {
        margin: 0 0 7px 0;
    }

    .product-about > .price {
        font-size: 24px;
        margin-bottom: 9px;
    }
}

.woocommerce-form-login select,
.woocommerce-form-login .form-select,
.woocommerce-form-login .form-control,
.woocommerce-form-coupon select,
.woocommerce-form-coupon .form-select,
.woocommerce-form-coupon .form-control {
    margin-bottom: var(--bs-gutter-x);
}

#ship-to-different-address {
    margin-top: 15px;
}

.shipping-calculator-form .form-select,
.shipping-calculator-form .form-control {
    height: 40px;
    padding-left: 15px;
    font-size: 16px;
    border-radius: 0;
    background-position: right 13px center;
}

.shipping-calculator-form .th-btn {
    font-size: 14px;
    padding: 0 20px;
    width: max-content;
    height: 40px;
}

.contact-form {
    position: relative;
    background: var(--smoke-color);
    padding: 50px 70px;
    margin-bottom: -120px;
}

    .contact-form .form-title {
        text-align: center;
        max-width: 520px;
        margin: -0.26em auto 30px auto;
    }

    .contact-form textarea.form-control {
        min-height: 130px;
    }

    .contact-form .form-group {
        margin-bottom: 10px;
    }

    .contact-form .form-btn {
        margin-top: 30px;
    }

        .contact-form .form-btn .th-btn {
            border-radius: 0;
        }

.contact-info-wrap {
    background: var(--smoke-color);
    height: 100%;
    padding: 50px;
}

.contact-info {
    display: flex;
    gap: 20px;
}

    .contact-info ~ .contact-info {
        margin-top: 30px;
    }

.contact-info_icon {
    height: 50px;
    width: 50px;
    line-height: 50px;
    background: rgba(1, 98, 202, 0.1);
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    color: var(--theme-color);
}

    .contact-info_icon i.fa-phone-volume {
        transform: rotate(-45deg);
    }

.contact-info_title {
    margin-bottom: 5px;
}

.contact-info_text a {
    display: block;
    color: var(--body-color);
}

    .contact-info_text a:hover {
        color: var(--theme-color);
    }

.contact-form3 {
    background: var(--smoke-color);
    padding: 70px;
}@media (max-width: 1199px) {
    .contact-form {
        margin-bottom: 120px;
    }
}@media (max-width: 991px) {
    .contact-form {
        margin-bottom: 80px;
    }
}@media (max-width: 767px) {
    .contact-form {
        padding: 50px 50px;
    }

    .contact-info-wrap {
        padding: 40px;
    }

    .contact-form3 {
        padding: 40px;
    }
}@media (max-width: 575px) {
    .contact-form {
        padding: 40px 20px;
    }
}

.about-sec3 {
    padding-bottom: 130px;
}@media (max-width: 1000px) {
    .about-sec3 {
        padding-top: 80px !important;
        padding-bottom: 80px;
    }
}

.about-info-wrap {
    display: flex;
    gap: 10px;
}

    .about-info-wrap .icon {
        height: 60px;
        width: 60px;
        line-height: 60px;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        font-size: 20px;
        color: var(--theme-color);
        text-align: center;
    }

    .about-info-wrap .about-info-title {
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 600;
        color: var(--light-color);
    }

    .about-info-wrap .about-info-link {
        font-size: 18px;
        font-weight: 500;
        font-family: var(--title-font);
        color: var(--title-color);
    }

        .about-info-wrap .about-info-link:hover {
            color: var(--theme-color);
        }

.feature-wrap {
    border-radius: 5px;
    display: flex;
}

    .feature-wrap:not(:last-child) {
        margin-bottom: 30px;
    }

.feature-wrap:hover .global-icon:after {
    animation: spin 7s infinite;
}

.feature-wrap.style2 {
    display: block;
    background: var(--smoke-color);
    text-align: center;
    position: relative;
    z-index: 1;
    height:100%;
    padding: 30px;
    margin-bottom: 0;
}

    .feature-wrap.style2 .global-icon {
        margin: auto auto 10px;
        position: relative;
        border-color: var(--smoke-color);
        border-width: 6px;
    }

        .feature-wrap.style2 .global-icon:after {
            left: -8px;
            top: -8px;
        }

    .feature-wrap.style2:not(:last-child):after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        margin: 30px 0;
        height: -webkit-fill-available;
        width: 1px;
        background: rgba(18, 18, 18, 0.05);
    }

.b-basic {
    border-radius: 5px;
}@media (max-width: 991px) {

    .about-sec3 {
        padding-bottom: 80px;
    }
}@media (max-width: 767px) {
    .header-logo img {
        max-height: 80px;
    }

    .header-logo {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .about-sec3 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

.blog-card {
    transition: 0.4s;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid rgba(15, 13, 29, 0.1);
}

    .blog-card .blog-title {
        margin-bottom: 22px;
        font-weight: 700;
    }

        .blog-card .blog-title.border-bottom {
            border-bottom: 1px solid rgba(18, 18, 18, 0.1);
            padding-bottom: 20px;
            margin-bottom: 18px;
        }

        .blog-card .blog-title a {
            background-image: linear-gradient(to left, var(--theme-color), var(--theme-color));
            background-repeat: no-repeat;
            background-position: bottom left;
            background-size: 0 2px;
        }

            .blog-card .blog-title a:hover {
                background-size: 100% 2px;
            }

.blog-card_content {
    background: var(--white-color);
    padding: 25px 30px;
    margin: 0 30px;
}

.blog-card .blog-img {
    overflow: hidden;
    margin-bottom: -120px;
    position: relative;
}

    .blog-card .blog-img img {
        width: 100%;
        transition: 0.4s ease-in-out;
    }

.blog-card .blog-meta {
    margin-bottom: 12px;
}

    .blog-card .blog-meta span:after,
.blog-card .blog-meta a:after {
        margin-top: -4px;
    }

.blog-card a {
    color: var(--body-color);
}

.blog-card .blog-text {
    margin-bottom: 20px;
}

.blog-card:hover .blog-img img {
    transform: scale(1.08);
}

.blog-card.style2 .blog-img {
    margin-bottom: 0;
}

.blog-img {
    position: relative;
}

.line-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.blog_single .blog-img,
.blog_single .blog-img img {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
}

.blog-card.style2 .blog-title {
    margin-bottom: 15px;
}

.blog-card.style2 .blog-card_content {
    margin: 0;
    border-top: 0;
    box-shadow: none;
}

.blog-card.style2 p {
    margin-bottom: 0;
}

.blog-card.style2:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.06);
}

.blog-card.style3 {
    position: relative;
}

    .blog-card.style3:after {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(15, 13, 29, 0.2) 0%, #0F0D1D 86.22%);
    }

    .blog-card.style3 .blog-img {
        margin-bottom: 0;
    }

    .blog-card.style3 .blog-card_content {
        position: absolute;
        bottom: 0;
        padding: 0;
        background: transparent;
        margin: 40px;
    }

    .blog-card.style3 .blog-meta span,
.blog-card.style3 .blog-meta a {
        color: var(--smoke-color2);
    }

    .blog-card.style3 .blog-title {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 20px;
        margin-top: 20px;
        margin-bottom: 0;
    }

        .blog-card.style3 .blog-title a {
            color: var(--white-color);
            background-image: linear-gradient(to left, var(--white-color), var(--white-color));
        }@media (max-width: 1200px) {
    .blog-card .blog-title {
        font-size: 20px;
    }
}@media (max-width: 991px) {
    .blog-card .blog-img {
        margin-bottom: 0;
    }

    .blog-card_content {
        margin: 0;
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.08);
    }

    .blog-card.style3 .blog-card_content {
        margin: 30px;
    }
}@media (max-width: 350px) {
    .blog-card .blog-title {
        font-size: 20px;
    }
}

.blog_single {
    background: var(--white-color);
    padding: 10px;
    border: solid 1px #ddd;
    margin-bottom: 15px;
    border-radius: 5px;
}

    .blog_single h3 a {
        color: var(--body-color);
        text-transform: uppercase;
    }

    .blog_single h3 {
        margin-bottom: 7px;
    }

.brand-sec1 {
    padding: 80px 0;
    position: relative;
}

    .brand-sec1:before {
        content: '';
        background: #000000e3;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }

    .brand-sec1 .sub-title {
        background: var(--white-color);
        color: var(--body-color);
    }

.brand-box img {
    border-radius: 5px;
}

.global-icon {
    flex: none;
    background: var(--theme-color);
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    border: 4px solid var(--white-color);
    margin-right: 20px;
    position: relative;
    z-index: auto;
    transition: 0.4s;
}

    .global-icon:after {
        content: '';
        position: absolute;
        left: -6px;
        top: -6px;
        height: 80px;
        width: 80px;
        border: 3px dashed var(--theme-color);
        border-radius: 50%;
        z-index: -1;
        transition: 0.4s;
    }

.btn-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 35px;
}@media (max-width: 1199px) {
    p.mb-40 {
        margin-bottom: 35px;
    }
}

.feature-circle {
    margin-bottom: -0.5em;
}

    .feature-circle ~ .feature-circle {
        border-top: 1px solid rgba(18, 18, 18, 0.1);
        margin-top: 29px;
        padding-top: 23px;
    }

    .feature-circle .progressbar {
        display: flex;
        gap: 30px;
        align-items: center;
    }

        .feature-circle .progressbar .circle {
            position: relative;
            height: fit-content;
        }

            .feature-circle .progressbar .circle canvas {
                transform: rotateY(180deg);
            }

            .feature-circle .progressbar .circle .circle-num {
                font-size: 24px;
                font-weight: 700;
                font-family: var(--title-font);
                color: var(--title-color);
                display: inline-block;
                position: absolute;
                left: 22px;
                top: 50%;
                transform: translate(0, calc(-50% - 2px));
            }@media (max-width: 991px) {

    .feature-circle {
        text-align: left;
    }
}

.cta-sec7 {
    padding: 50px;
    overflow: hidden;
}

    .cta-sec7 .th-btn.style3 {
        width: 100%;
    }@media (max-width: 575px) {

    .btn-wrap a,
.btn-wrap .about-info-wrap {
        width: calc(50% - 20px);
        padding-left: 0;
        padding-right: 0;
    }

    .about-info-wrap .icon {
        border: 0 !important;
    }

    .blog_single .blog-img {
        padding-bottom: 10px;
    }

    .blog-single .blog-content {
        padding: 30px 10px;
    }
}
.blog-content ol,
.blog-content ul,
.blog-content table {
    margin-bottom: 18px !important;
}
.blog-content li {
    margin-bottom:7px !important; 
}

.catalog-card_icon {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
}

    .catalog-card_icon .global-icon {
        height: 100px;
        width: 100px;
        line-height: 85px;
        border-width: 5px;
    }

        .catalog-card_icon .global-icon:after {
            width: 100px;
            height: 100px;
            left: -8px;
            top: -8px;
        }

    .catalog-card_icon img {
        filter: brightness(999);
    }@media (max-width: 767px) {

    .product-about .product-title,
.title-area .sec-title {
        font-size: 20px;
    }

    .h2,
h2 {
        font-size: 18px;
    }

    .h1,
h1 {
        line-height: 24px;
    }
}@media (min-width: 992px) {
    .row.g-3 > .col-12.col-lg-7 > .blog_single:last-child {
        margin-bottom: 0 !important;
    }
    .row.g-3 > .col-12.col-lg-5 > .blog-card {
        height:100%;
    }
}

.py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-60 {
    padding-bottom: 60px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-60 {
    margin-bottom: 60px;
}

.space,
.space-top {
    padding-top: var(--section-space);
}

.space {
    padding-bottom: var(--section-space);
}

.space-extra-top {
    padding-top: calc(var(--section-space) - 30px);
}

.space-extra-bottom {
    padding-bottom: calc(var(--section-space) - 30px);
}@media (max-width: 991px) {
    .space,
.space-top {
        padding-top: var(--section-space-mobile);
    }

    .space {
        padding-bottom: var(--section-space-mobile);
    }

    .space-extra-top {
        padding-top: calc(var(--section-space-mobile) - 30px);
    }

    .space-extra-bottom {
        padding-bottom: calc(var(--section-space-mobile) - 30px);
    }
}

#button-contact-vr {
    position: fixed;
    bottom: 100px;
    z-index: 99999;
    right: 10px;
}@keyframes zoom{
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}

.h-100.iframe iframe {
    min-height: 400px;
    height: 100%;
}

#fanpage-vr img {
    max-width: 35px;
    max-height: 35px;
}


/* ####################### [B] CSS TU VIET ################################# */

/* ============================================================================
   Vilacojsc — CSS tuỳ biến trên nền theme Insurax (assets/css/style.css).
   Sắp xếp theo MODULE/chức năng ở giao diện public:
     1. Ảnh lazyload — skeleton shimmer + fade-in + hover-zoom
     2. Cuộn mượt tới nội dung (trang Giới thiệu)
     3. Khối "Tầm nhìn · Sứ mệnh" (About Highlights)
     4. Header thông minh (ẩn khi cuộn xuống / hiện khi cuộn lên)
     5. Carousel Thương hiệu (Brand)
     6. Hỗ trợ trực tuyến (FAB — clone quatanghaiphong) + nút Về đầu trang
     7. Tiêu đề card sản phẩm · bài viết (token typography thống nhất)
     8. Mobile menu drawer (clone quatanghaiphong nav-drawer)
     9. Tìm kiếm: nút header + sidebar kết quả (head đỏ, thân trắng)
     10. Sidemenu (sideMenuToggler) — head đỏ + logo mobile, thân trắng
     10b. Breadcrumb gọn + H1 inline (trang danh mục sản phẩm)
     11. Footer + dải CTA gia công OEM/ODM (module vfoot-*)
     12. Trang gia công OEM / ODM
     13. Hero slider trang chủ
     14. Chi tiết sản phẩm (gallery pdgal-* · nút sàn TMĐT pdbuy-* · CTA pdcta-*)
     15. Lightbox ảnh (vlb-*) — dùng chung gallery sản phẩm + album nhà máy
     16. Đồng bộ màu nền xám về một token duy nhất (--smoke-color)
     17. Danh sách bài viết .item-top/.item-list (ViewComponent ArticleList)
     18. Sidebar tin tức: tiêu đề có link + tag cloud (ViewComponent BlogSidebar)

   TẤT CẢ CSS tự viết nằm trong FILE NÀY. Ngoài ra chỉ còn thư viện thuần:
   bootstrap.min · fontawesome.min · slick.min · style.css (theme Insurax).
   Không tách file CSS theo trang nữa — mỗi trang thêm một request + không tận dụng
   được cache chung.
   ============================================================================ */


/* ── 1. Ảnh lazyload: skeleton shimmer + fade-in reveal ──────────────────────
   Ảnh ẩn (opacity 0) + khung shimmer tới khi tải XONG mới fade-in → không giật
   khi vẽ ảnh từng phần. Bật qua class .imgfx-on trên <html> (JS); tắt JS thì ảnh
   vẫn hiện bình thường. */

@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Ảnh dùng trực tiếp class .lazy-img (vd: ảnh About section) */
.lazy-img:not(.is-loaded) {
    background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.lazy-img {
    opacity: 0;
    transition: opacity .35s ease-in-out;
}
.lazy-img.is-loaded {
    opacity: 1;
    animation: none;
    background: none;
}

/* Reveal cho ảnh trong các thẻ (hero, blog, catalog, product, brand…) */
.imgfx-on .blog-img,
.imgfx-on .catalog-card_icon,
.imgfx-on .product-box_thumb,
.imgfx-on .brand-box,
.imgfx-on .th-product .product-img,
.imgfx-on .product-big-img {
    position: relative;
    overflow: hidden;
}
.imgfx-on .blog-img:not(.is-loaded),
.imgfx-on .catalog-card_icon:not(.is-loaded),
.imgfx-on .product-box_thumb:not(.is-loaded),
.imgfx-on .brand-box:not(.is-loaded),
.imgfx-on .th-product .product-img:not(.is-loaded),
.imgfx-on .product-big-img:not(.is-loaded),
.imgfx-on .pdgal-thumb__box:not(.is-loaded) {
    background-image: linear-gradient(100deg, #eceff1 30%, #f4f6f7 50%, #eceff1 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.imgfx-on .blog-img img,
.imgfx-on .catalog-card_icon img,
.imgfx-on .product-box_thumb img,
.imgfx-on .brand-box img,
.imgfx-on .th-product .product-img img,
.imgfx-on .product-big-img img,
.imgfx-on .pdgal-thumb__box img {
    opacity: 0;
    transition: opacity .45s ease;
}
.imgfx-on .blog-img.is-loaded img,
.imgfx-on .catalog-card_icon.is-loaded img,
.imgfx-on .product-box_thumb.is-loaded img,
.imgfx-on .brand-box.is-loaded img,
.imgfx-on .th-product .product-img.is-loaded img,
.imgfx-on .product-big-img.is-loaded img,
.imgfx-on .pdgal-thumb__box.is-loaded img {
    opacity: 1;
}

/* Reveal ở trên ghi đè transition thành chỉ "opacity" → mất transition "transform" của theme
   (.effect-img img) làm hover-zoom bị snap/giật. Khôi phục transition transform (khớp theme 0.4s)
   + backface-visibility để GPU-composite, scale mượt không giật từng khung. */
.imgfx-on .effect-img img,
.imgfx-on .product-box_thumb img,
.imgfx-on .th-product .product-img img,
.imgfx-on .blog-img img {
    transition: opacity .45s ease, transform .4s ease-in-out;
    backface-visibility: hidden;
}

/* Ảnh thẻ tin tức (ảnh NẰM TRÊN nội dung): khung tỷ lệ CỐ ĐỊNH → giữ chỗ trước khi tải
   → shimmer hiện trong khung, KHÔNG nhảy layout; ảnh fill cover, chỉ hiện khi tải XONG
   (imgfx opacity 0 → is-loaded). Thumb danh sách (.blog_single .blog-img) tự có khung theo
   chiều cao nội dung nên không cần aspect-ratio. */
.blog-card .blog-img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.blog-card .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog_single .blog-img { overflow: hidden; }

/* Trang chủ — khối Tin tức: cột PHẢI chia đều chiều cao 3 thẻ để ĐÁY thẳng hàng với
   thẻ nổi bật bên trái; thẻ cao lên → thumb đầy khung (không mỏng), nội dung căn giữa. */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}
.news-list .blog_single {
    flex: 1 1 auto;         /* tối thiểu = chiều cao nội dung, chỉ giãn thêm để lấp (không co → không tràn/chồng) */
    margin-bottom: 0;
    display: flex;
    transition: box-shadow .4s ease;   /* hover đồng bộ với thẻ featured */
}
/* Hover GIỐNG thẻ nổi bật bên trái: ảnh zoom scale(1.08) + thẻ nâng bóng. */
.news-list .blog_single:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .06);
}
.news-list .blog_single:hover .blog-img img {
    transform: scale(1.08);
}
.news-list .blog_single > .row {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
}
.news-list .blog-img {
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}
.news-list .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-list .blog_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 14px;
}
/* Các phần tử LỒNG trong 1 mục meta: span bọc ngày (d-md-none…) và <a> danh mục.
   Theme .blog-meta span/a { display: inline-block; margin-right: 25px } áp cho cả phần tử
   lồng → baseline lệch nhau (ngày inline-block vs danh mục). Ép về INLINE chuẩn để mọi mục
   (ngày · danh mục · lượt xem) thẳng hàng. */
.blog-meta span span,
.blog-meta span a {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    vertical-align: baseline;
}
/* MOBILE (<768px): thẻ danh sách xếp DỌC — ảnh full-width (khung 16/9) TRÊN, text DƯỚI.
   Bỏ chia đều chiều cao + fill-height (chỉ dùng cho layout ngang từ iPad trở lên). */
@media (max-width: 767.98px) {
    .news-list { height: auto; }
    .news-list .blog_single { flex: 0 0 auto; }
    .news-list .blog-img {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .news-list .blog_content {
        height: auto;
        justify-content: flex-start;
        padding: 12px 0 0;
    }
    /* Meta (ngày · danh mục · lượt xem): flex-wrap + gap đều → xuống dòng gọn, thẳng hàng,
       khoảng cách nhất quán (thay cho margin-right cứng làm dòng 2 lệch). */
    .blog-card .blog-meta,
    .blog_single .blog-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px 16px;
        font-size: 13px;
    }
    .blog-card .blog-meta span,
    .blog-card .blog-meta a,
    .blog_single .blog-meta span,
    .blog_single .blog-meta a {
        margin-right: 0;
        font-size: inherit;
    }
    .blog-card .blog-meta span i,
    .blog_single .blog-meta span i { margin-right: 6px; }
}
/* Featured (trái) để CHIỀU CAO TỰ NHIÊN → quyết định chiều cao hàng; cột phải (.news-list)
   mới fill theo. KHÔNG ép featured height:100% (sẽ gây sizing vòng lặp → cột phải sụp/chồng). */



/* ── 2. Cuộn mượt tới nội dung (nút "VỀ Chúng tôi" — trang Giới thiệu) ────────
   Chừa khoảng trống để header dính không che tiêu đề khi cuộn tới. */
html { scroll-behavior: smooth; }
#about-details { scroll-margin-top: 120px; }


/* ── 3. Khối "Tầm nhìn · Sứ mệnh" (About Highlights) ─────────────────────────
   Module TỰ CHỨA — tách khỏi class dùng-chung của theme (feature-wrap/global-icon/
   media-body); style trích từ theme Insurax sang đúng tên module. Gồm: thẻ nền khói,
   icon tròn viền nét đứt (quay khi hover), tiêu đề + mô tả.
   Hành vi: align-items:flex-start → thẻ không kéo giãn theo nhau (JS cân bằng chiều
   cao trong từng hàng lúc load); mô tả cắt ~4 dòng, nút +/- inline (JS). */
.about-highlights-row {
    align-items: flex-start;
}

/* Thẻ */
.about-highlights-card {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 30px;
    background: var(--smoke-color);
    border-radius: 5px;
    text-align: center;
}
/* Vạch ngăn dọc giữa các thẻ (trừ thẻ cuối) */
.about-highlights-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: 0;
    width: 1px;
    background: rgba(18, 18, 18, .05);
}

/* Icon tròn + vòng nét đứt (quay khi hover) */
.about-highlights-icon {
    flex: none;
    position: relative;
    width: 80px;
    height: 80px;
    margin: auto auto 10px;
    line-height: 70px;
    text-align: center;
    background: var(--theme-color);
    border: 6px solid var(--smoke-color);
    border-radius: 50%;
    transition: .4s;
}
.about-highlights-icon::after {
    content: '';
    position: absolute;
    left: -8px;
    top: -8px;
    width: 80px;
    height: 80px;
    border: 3px dashed var(--theme-color);
    border-radius: 50%;
    z-index: -1;
    transition: .4s;
}
.about-highlights-card:hover .about-highlights-icon::after {
    animation: spin 7s infinite;   /* keyframe "spin" có sẵn trong theme */
}

/* Thân · tiêu đề · mô tả */
.about-highlights-body {
    flex: 1;
}
.about-highlights-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.about-highlights-text {
    margin-bottom: 0;
}
.about-highlights-desc {
    overflow: hidden;
    transition: max-height .4s ease;   /* mở/thu mượt (JS điều khiển) */
}

/* Nút +/- inline ngay sau text */
.about-highlights-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: var(--theme-color, #d71d2a);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.about-highlights-more:hover {
    background-color: var(--theme-color, #d71d2a);
    border-color: var(--theme-color, #d71d2a);
    color: #fff;
}
.about-highlights-more[hidden] { display: none; }


/* ── 4. Sticky header (dính đúng vị trí menu, có placeholder → không giật) ─────
   Sticky do site.js quản lý (mốc = vị trí tự nhiên của menu, có .sticky-spacer giữ chỗ).
   Tắt animation "stickyAni" giật của theme; thêm hiệu ứng thả nhẹ khi vừa dính. */
.th-header .sticky-wrapper.sticky {
    animation: none !important;      /* tắt "stickyAni" giật của theme */
    transition: transform .35s ease-in-out, box-shadow .3s ease;
    will-change: transform;
    transform: translateY(-100%);    /* mặc định khi dính = ẨN (đẩy lên trên) */
    box-shadow: none;
}
.th-header .sticky-wrapper.sticky.is-shown {
    transform: translateY(0);        /* cuộn lên → hiện */
    box-shadow: 1px 5px 5px rgb(0 0 0 / 10%);
}
.th-header .sticky-wrapper.no-trans { transition: none !important; }
.sticky-spacer { flex: none; }


/* ── 5. Carousel Thương hiệu (Brand) ─────────────────────────────────────────
   KHÔNG dùng bootstrap row/col (margin âm làm lệch slick). Mỗi slide là .brand-slide
   có padding riêng → khoảng cách đều, 2 item chia đúng 50-50. Thẻ nền trắng, logo căn
   giữa, chiều cao cố định → slick tính đúng kích thước ngay cả khi ảnh chưa tải. */
.brand-carousel .brand-slide {
    padding: 0 8px;
}
.brand-carousel .brand-box {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-carousel .brand-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}
.brand-carousel .slick-dots { margin-top: 34px; }
/* Ẩn dots khi slick chỉ render 1 chấm (1 trang). :has cho trình duyệt mới; JS gắn
   thêm [data-single="1"] để dự phòng trình duyệt không hỗ trợ :has. */
.brand-carousel .slick-dots:has(li:only-child),
.brand-carousel .slick-dots[data-single="1"] { display: none; }


/* ── 6. Hỗ trợ trực tuyến (FAB) + nút Về đầu trang ───────────────────────────
   Clone module hỗ trợ trực tuyến của quatanghaiphong: nút tròn nổi góc phải-dưới →
   bấm mở panel danh sách liên hệ (label + số, icon màu, mũi tên); click ra ngoài /
   Escape để đóng. Màu dùng theme đỏ Vilaco (--theme-color ≈ #d71d2a). */
.osc-fab {
    position: fixed;
    right: 22px;
    bottom: 96px;          /* FAB nằm TRÊN nút Về đầu trang */
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;   /* vùng trống không chặn click; chỉ nút + panel mở mới nhận */
}

/* Panel bung ra khi mở */
.osc-panel {
    width: 320px;
    max-width: calc(100vw - 44px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    overflow: hidden;
    transform-origin: bottom right;
    transform: translateY(16px) scale(.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .24s cubic-bezier(.2, .8, .3, 1);
}
.osc-fab.osc-open .osc-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.osc-panel__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--theme-color), #a3161a);
}
.osc-panel__head span  { font-size: 15px; font-weight: 700; }
.osc-panel__head small { font-size: 12px; opacity: .85; }
.osc-panel__list { padding: 6px; }

.osc-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .16s ease;
}
.osc-item:hover { background: var(--smoke-color); }
.osc-item:not(:last-child)::after {   /* đường phân tách, thụt sau icon */
    content: "";
    position: absolute;
    left: 61px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: #eef0f2;
}
.osc-item__ico {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.osc-item__ico img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.osc-item__ico svg { display: block; }
.osc-item__text { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.osc-item__text b     { font-size: 14.5px; font-weight: 700; color: #1f2430; }
.osc-item__text small { font-size: 13px; font-weight: 600; color: #6b7280; letter-spacing: .2px; }
.osc-item__arrow { flex: none; color: #c2c7cf; transition: transform .16s ease, color .16s ease; }
.osc-item:hover .osc-item__arrow { color: var(--theme-color); transform: translateX(3px); }
.osc-item.hidden { display: none; }
@media (max-width: 767.98px) { .osc-item--desktop-only { display: none; } }
@media (min-width: 768px)    { .osc-item--mobile-only  { display: none; } }

/* Nút toggle tròn */
.osc-toggle {
    position: relative;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    color: #fff;
    background: var(--theme-color);
    box-shadow: 0 6px 20px rgba(215, 29, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.osc-toggle:hover { transform: scale(1.06); }
.osc-toggle::before {   /* vòng pulse khi đóng */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(215, 29, 42, .5);
    animation: oscPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes oscPulse { to { box-shadow: 0 0 0 18px rgba(215, 29, 42, 0); } }
.osc-toggle__open, .osc-toggle__close { position: absolute; transition: opacity .2s ease, transform .25s ease; }
.osc-toggle__close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.osc-fab.osc-open .osc-toggle { background: #6b7280; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.osc-fab.osc-open .osc-toggle::before { animation: none; opacity: 0; }
.osc-fab.osc-open .osc-toggle__open  { opacity: 0; transform: rotate(90deg) scale(.6); }
.osc-fab.osc-open .osc-toggle__close { opacity: 1; transform: rotate(0) scale(1); }
@media (max-width: 575px) {
    .osc-fab { right: 16px; bottom: 84px; }
    .osc-toggle { width: 52px; height: 52px; }
}

/* Nút "Về đầu trang": nằm DƯỚI CÙNG (dưới FAB) + viền mảnh. */
.scroll-top { right: 28px; bottom: 26px; }
.scroll-top .progress-circle path { stroke-width: 8px; }
.scroll-top:after { border-width: 1px; }
@media (max-width: 575px) {
    .scroll-top { right: 18px; bottom: 18px; }
}


/* ── 7. Tiêu đề card sản phẩm · bài viết — TOKEN typography DUY NHẤT ──────────
   Đồng nhất MỌI tiêu đề card listing: PC 20px · mobile ≤767px 18px · weight 600.
   Đổi ở ĐÂY là đổi toàn hệ thống. Gồm:
     · .blog-card .blog-title    → card bài viết (trang chủ, tìm kiếm…)
     · .item-top h2 / .item-list h3 → danh sách bài viết trang danh mục (mục 17)
     · .product-box_title        → ô danh mục sản phẩm ở trang chủ
   Dùng !important để token thắng mọi rule ngữ cảnh/responsive của theme (blog-card
   weight 700, box-title 24px…). KHÔNG áp cho H1 trang chi tiết (h1.blog-title,
   .product-title) — đó là tiêu đề trang, giữ cỡ lớn. */
.blog-card .blog-title,
.item-top h2,
.item-list h3,
.product-box_title {
    font-size: 20px !important;
    font-weight: 600 !important;
}
@media (max-width: 767px) {
    .blog-card .blog-title,
    .item-top h2,
    .item-list h3,
    .product-box_title {
        font-size: 18px !important;
    }
}

/* ── 8. Mobile menu DRAWER (clone quatanghaiphong nav-drawer) ────────────────
   Khác demo (nền tối): Vilaco nền TRẮNG, riêng head chứa logo nền ĐỎ theme
   (logo mobile sẽ được thay bản nền đỏ trong quản trị). Accent = --theme-color. */
.nav-drawer {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 100%;
    max-width: 400px;
    background: #fff;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    z-index: 9999;
    height: 100vh;
    height: 100dvh;
}
@media (max-width: 991.98px) { .nav-drawer { display: flex; } }
.nav-drawer.is-open { transform: translateX(0); box-shadow: 6px 0 40px rgba(0, 0, 0, .35); }

.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 9998; }
.nav-overlay.is-open { display: block; }

/* Head chứa logo — nền đỏ theme; chốt chiều cao 120px, logo CĂN GIỮA và bị
   giới hạn TRONG head (không tràn xuống thân drawer dù ảnh gốc lớn) */
.nav-drawer-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 16px 48px;             /* chừa 2 bên cho nút X, logo vẫn giữa */
    background: var(--theme-color);
    flex-shrink: 0;
    overflow: hidden;
}
.nav-drawer-logo { display: inline-flex; align-items: center; justify-content: center; height: 100%; }
.nav-drawer-logo-img {
    display: block;
    max-height: 100%;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Nút X đơn giản (không nền, không bo tròn), ghim góc trên bên phải */
.nav-drawer-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    transition: opacity .2s;
}
.nav-drawer-close:hover { opacity: .75; }

/* Vùng cuộn: menu + liên hệ cuộn cùng nhau. Scrollbar XÁM trung tính, mảnh
   (đè scrollbar đỏ toàn cục của theme). */
.nav-drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.nav-drawer-body::-webkit-scrollbar { width: 5px; background: #f3f4f6; }
.nav-drawer-body::-webkit-scrollbar-thumb { background: #cdd2d9; border-radius: 3px; }
.nav-drawer-body { scrollbar-width: thin; scrollbar-color: #cdd2d9 #f3f4f6; }

/* Menu: phẳng, nhẹ nhàng — hạn chế màu đỏ (chỉ dùng làm accent khi hover/mở) */
.nav-drawer-menu { flex: 0 0 auto; list-style: none; margin: 0; padding: 0; }
.nav-drawer-menu > li { border-bottom: 1px solid #f3f4f6; }
.nav-drawer-menu > li:last-child { border-bottom: none; }
.nav-drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2430;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .2s;
    cursor: pointer;
}
/* hover chỉ áp trên thiết bị có chuột — tránh "hover dính" đỏ loè khi chạm mobile */
@media (hover: hover) {
    .nav-drawer-item:hover { color: var(--theme-color); }
}

/* Hàng menu có cấp con: TÊN (link, chiếm hết) + NÚT mũi tên riêng bên phải.
   Bấm tên → điều hướng; bấm nút → mở/đóng cấp con (JS). */
.nav-drawer-row { display: flex; align-items: stretch; }
.nav-drawer-row .nav-drawer-item,
.nav-drawer-row .nav-drawer-sub-item { flex: 1; min-width: 0; }
.nav-sub-btn {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    transition: color .2s;
}
@media (hover: hover) {
    .nav-sub-btn:hover { color: var(--theme-color); }
}
.nav-chevron { font-size: 14px; transition: transform .3s; flex-shrink: 0; }
/* Đang mở: chỉ mũi tên xoay + đổi màu tối hơn — không nhuộm đỏ cả dòng */
.nav-has-dropdown.is-open-sub > .nav-drawer-row .nav-chevron { transform: rotate(180deg); }
.nav-has-dropdown.is-open-sub > .nav-drawer-row .nav-sub-btn { color: #4b5563; }

.nav-drawer-dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    background: #fafbfc;
}
/* max-height mở do JS đặt = scrollHeight thật (animation mượt, không giật). */
/* Nền đậm dần theo cấp lồng nhau để phân biệt cấp */
.nav-drawer-dropdown .nav-drawer-dropdown { background: #f4f5f7; }
.nav-drawer-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 11px 26px;
    color: #4b5563;
    font-size: 13.5px;
    text-decoration: none;
    transition: color .2s;
}
@media (hover: hover) {
    .nav-drawer-sub-item:hover { color: var(--theme-color); }
}
/* Icon › xám trung tính, nhỏ — không dùng đỏ */
.nav-drawer-sub-item i { font-size: 11px; color: #b6bcc4; flex-shrink: 0; }

/* Chân drawer: thông tin liên hệ */
.nav-drawer-foot { flex-shrink: 0; margin-top: auto; padding: 16px 18px; border-top: 1px solid #eef0f2; background: #f8f9fa; }
.nav-drawer-contacts { display: flex; flex-direction: column; gap: 9px; }
.nav-drawer-biz-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--title-color);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 2px;
}
.nav-drawer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #4b5563;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s;
    line-height: 1.4;
}
.nav-drawer-contact-item:hover { color: var(--theme-color); }
/* Icon bề rộng CỐ ĐỊNH + căn giữa → mọi dòng text bắt đầu thẳng hàng nhau */
.nav-drawer-contact-item i {
    width: 18px;
    text-align: center;
    color: var(--theme-color);
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 3px;
}


/* ── 9. Tìm kiếm: nút header + sidebar kết quả (kiểu sideMenuToggler) ────────
   Nút search: class riêng (theme không có .simple-icon gốc → từng lệch/đổi màu).
   Desktop: icon trắng canh giữa hàng menu. Mobile: thêm nền đỏ tròn để luôn nổi
   — vùng logo-shape TRẮNG chiếm 60–75% bề ngang menu-area nên icon trắng trần
   sẽ chìm khi đè lên. */
.header-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--white-color);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: color .3s, background .3s, opacity .3s;
}
.header-search-btn:hover { opacity: .8; }
@media (max-width: 991.98px) {
    .header-search-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--theme-color);
        font-size: 16px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    }
}

/* Sidebar tìm kiếm: overlay đen mờ phủ trang + panel 450px trượt từ PHẢI.
   Bố cục: HEAD nền ĐỎ (tiêu đề trắng + nút × đơn giản) → form (dropdown phạm vi
   custom + ô nhập + nút tìm) → vùng kết quả nền TRẮNG cuộn riêng. */
.search-sidebar {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
    /* Khi ĐÓNG: giữ visible thêm .5s cho panel trượt ra + overlay mờ dần xong mới ẩn */
    transition: visibility 0s linear .5s;
}
.search-sidebar__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .75);
    opacity: 0;
    transition: opacity .5s ease;
}
.search-sidebar__panel {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: 450px;
    max-width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .5s ease;
}
.search-sidebar.show { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.search-sidebar.show .search-sidebar__overlay { opacity: 1; }
.search-sidebar.show .search-sidebar__panel { transform: translateX(0); }

/* Head đỏ: tiêu đề + nút × đơn giản (không nền tròn) */
.search-sidebar__head {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 14px 52px 14px 22px;
    background: var(--theme-color);
    flex-shrink: 0;
}
.search-sidebar__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--white-color);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.search-sidebar__close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: opacity .2s;
}
.search-sidebar__close:hover { opacity: .75; }

.search-sidebar__form {
    display: flex;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f2;
    flex-shrink: 0;
}
.search-sidebar__box { position: relative; flex: 1; min-width: 0; }
.search-sidebar__box input {
    width: 100%;
    height: 48px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    padding: 0 54px 0 14px;
    font-size: 14px;
    color: var(--title-color);
    outline: none;
    transition: border-color .2s;
}
.search-sidebar__box input::placeholder { color: #9ca3af; }
.search-sidebar__box input:focus { border-color: var(--theme-color); }
.search-sidebar__box button {
    position: absolute;
    top: 0; right: 0;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 0 6px 6px 0;
    background: var(--theme-color);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s;
}
.search-sidebar__box button:hover { background: #a3161a; }

/* Dropdown phạm vi custom (Tất cả · Bài viết · Sản phẩm) — nền sáng */
.ss-dd { position: relative; flex: 0 0 auto; }
.ss-dd__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 14px;
    min-width: 118px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: var(--title-color);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .2s;
}
.ss-dd__toggle i { margin-left: auto; font-size: 13px; color: #6b7280; transition: transform .25s; }
.ss-dd.is-open .ss-dd__toggle { border-color: var(--theme-color); }
.ss-dd.is-open .ss-dd__toggle i { transform: rotate(180deg); }
.ss-dd__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 3;
}
.ss-dd.is-open .ss-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ss-dd__menu li {
    padding: 9px 12px;
    border-radius: 5px;
    color: #374151;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ss-dd__menu li:hover { background: var(--smoke-color); color: var(--title-color); }
.ss-dd__menu li.is-active { background: var(--theme-color); color: #fff; }

/* Vùng kết quả — nền trắng */
.search-sidebar__results { flex: 1; overflow-y: auto; padding: 10px 16px 22px; background: #fff; }
.search-sidebar__results::-webkit-scrollbar { width: 4px; background: #f1f2f4; }
.search-sidebar__results::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 2px; }
.ss-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 8px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
.ss-spinner {
    width: 16px; height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--theme-color);
    border-radius: 50%;
    animation: ssSpin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ssSpin { to { transform: rotate(360deg); } }
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-list li + li { border-top: 1px solid #f1f2f4; }
.ss-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 8px;
    text-decoration: none;
    border-radius: 6px;
    transition: background .15s;
}
.ss-item:hover { background: var(--smoke-color); }
.ss-item__thumb {
    flex: 0 0 auto;
    width: 54px; height: 54px;
    border: 1px solid #eef0f2;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #c2c7cf;
    font-size: 18px;
}
.ss-item__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ss-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-item__kind {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--theme-color);
}
.ss-item__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss-item:hover .ss-item__name { color: var(--theme-color); }
.ss-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 8px 0;
    padding: 12px;
    border-radius: 6px;
    background: var(--theme-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.ss-viewall:hover, .ss-viewall:focus { background: #a3161a; color: #fff; }
@media (max-width: 575px) {
    .search-sidebar__form { padding: 14px 16px 16px; }
    .search-sidebar__results { padding: 8px 12px 18px; }
    .ss-dd__toggle { min-width: 104px; padding: 0 10px; }
}

/* Trang /tim-kiem (UI tham khảo zendecor): tiêu đề + mô tả + thanh tìm kiếm
   (dropdown phạm vi .ss-dd + ô nhập + nút Tìm kiếm) ngay đầu trang; trạng thái
   rỗng icon lớn; kết quả (Sản phẩm · Bài viết) bên dưới. */
/* Card sản phẩm (th-product): khung ảnh VUÔNG cố định (aspect-ratio 1/1) →
   skeleton giữ đúng chỗ khi tải, layout không nhảy; ảnh cover đầy khung.
   Bỏ padding 15px của theme để hover scale KHÔNG tràn ra mép card (ảnh bị clip
   ngay trong khung ảnh, scale nhẹ 1.06 thay vì 1.1). */
.th-product .product-img {
    aspect-ratio: 1 / 1;
    padding: 0;
    margin-bottom: 15px;
}
.th-product .product-img > a { display: block; width: 100%; height: 100%; }
.th-product .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.th-product:hover .product-img img {
    transform: scale(1.06);
}
/* Sản phẩm chưa có ảnh: icon placeholder giữa khung vuông (khung đánh dấu
   is-loaded sẵn nên không shimmer) */
.th-product .product-img__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--smoke-color);
    color: #c2c7cf;
    font-size: 34px;
}

/* Thanh tìm kiếm full-width theo container */
.search-page-head { margin-bottom: 36px; }

/* Khối đang tải trang mới (SPA): mờ nhẹ + chặn click, giữ layout */
[data-spa-section] { transition: opacity .2s ease; }
[data-spa-section].is-spa-loading { opacity: .55; pointer-events: none; }
.search-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--title-color);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 6px;
}
.search-page-desc { font-size: 14px; color: #6b7280; margin-bottom: 16px; line-height: 1.6; }
.search-page-form { display: flex; gap: 10px; }
.search-page-box { flex: 1; min-width: 0; }
.search-page-box input {
    width: 100%;
    height: 48px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    padding: 0 14px;
    font-size: 14px;
    color: var(--title-color);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.search-page-box input::placeholder { color: #9ca3af; }
.search-page-box input:focus { border-color: var(--theme-color); box-shadow: 0 0 0 2px rgba(215, 29, 42, .08); }
.search-page-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border: none;
    border-radius: 6px;
    background: var(--theme-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.search-page-submit:hover { background: #a3161a; }
.search-page-summary { margin-bottom: 30px; }
.search-page-empty { padding: 70px 20px 80px; text-align: center; color: #6b7280; }
.search-page-empty i { font-size: 46px; display: block; margin-bottom: 18px; opacity: .22; }
.search-page-empty-title { font-size: 17px; font-weight: 600; color: var(--title-color); margin-bottom: 6px; }
.search-page-empty p { margin: 0 0 4px; font-size: 14.5px; }
@media (max-width: 575px) {
    /* Mobile: ô nhập full hàng trên; dropdown + nút Tìm chia đôi hàng dưới */
    .search-page-form { flex-wrap: wrap; }
    .search-page-box { flex: 1 1 100%; order: -1; }
    .search-page-form .ss-dd { flex: 1; }
    .search-page-form .ss-dd .ss-dd__toggle { width: 100%; min-width: 0; }
    .search-page-submit { flex: 1; }
}


/* ── 10. Sidemenu (sideMenuToggler) — đồng bộ UI với sidebar tìm kiếm ────────
   Ghi đè theme (nền tối, padding 80px): head nền ĐỎ chứa logo mobile căn giữa
   + nút × đơn giản; thân nền TRẮNG chữ đen, tự cuộn. Giữ nguyên cơ chế
   mở/đóng của theme (.sideMenuToggler / .sideMenuCls / .show). */
/* Hiệu ứng mở/đóng ĐỒNG BỘ với sidebar tìm kiếm (lấy làm chuẩn): wrapper là
   overlay đen mờ FADE .5s phủ toàn trang ngay từ đầu (không giãn width như theme
   — nguyên nhân cảnh overlay hiện cùng panel gây rối), panel translateX .5s. */
.sidemenu-wrapper {
    width: 100%;
    background-color: rgba(0, 0, 0, .75);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
}
.sidemenu-wrapper.show {
    width: 100%;
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease;
}
.sidemenu-wrapper .sidemenu-content {
    background-color: #fff;
    padding: 0;
    overflow: hidden;              /* thân (.sm-body) tự cuộn */
    display: flex;
    flex-direction: column;
    max-width: 100%;
    right: 0;                      /* bỏ cơ chế right -500px + delay 1s của theme */
    transform: translateX(100%);
    transition: transform .5s ease;
    transition-delay: 0s;
}
.sidemenu-wrapper.show .sidemenu-content {
    right: 0;
    transform: translateX(0);
    transition-delay: 0s;
}
.sm-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 16px 48px;
    background: var(--theme-color);
    flex-shrink: 0;
    overflow: hidden;
}
.sm-head__logo { display: inline-flex; align-items: center; justify-content: center; height: 100%; }
.sm-head__logo img {
    display: block;
    max-height: 100%;
    max-width: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Nút × đơn giản (không nền tròn), góc trên bên phải */
.sm-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: opacity .2s;
}
.sm-close:hover { opacity: .75; }

.sm-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 30px;
    background: #fff;
    color: var(--title-color);
}
.sm-body::-webkit-scrollbar { width: 4px; background: #f1f2f4; }
.sm-body::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 2px; }
.sm-title {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color);
    text-transform: uppercase;
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.sm-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    background: var(--theme-color);
}
.sm-desc {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 20px;
}
.sm-contacts { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.sm-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.55;
    text-decoration: none;
    transition: color .2s;
}
a.sm-contact-item:hover { color: var(--theme-color); }
.sm-contact-item b { color: var(--title-color); font-weight: 600; }
/* Icon bề rộng cố định + căn giữa → text các dòng bắt đầu thẳng hàng */
.sm-contact-item i {
    width: 18px;
    text-align: center;
    color: var(--theme-color);
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 4px;
}
.sm-social-title {
    position: relative;
    font-size: 15px;
    font-weight: 700;
    color: var(--title-color);
    text-transform: uppercase;
    padding-bottom: 10px;
    margin-bottom: 14px;
}
.sm-social-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    background: var(--theme-color);
}
.sm-social { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--smoke-color);
    border-radius: 50%;
    color: #4b5563;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.sm-social a:hover { background: var(--theme-color); color: #fff; }


/* ── 10b. Breadcrumb: chỉnh gọn cỡ chữ + H1 inline ───────────────────────────
   Trang danh mục sản phẩm bỏ H1 riêng — H1 nằm TRONG mắt xích cuối của breadcrumb
   (BreadcrumbModel.PageTitleAsH1). Ép H1 inherit toàn bộ typography của li để
   không phá layout (h1 mặc định của theme rất lớn). Mắt xích cuối đậm + màu title,
   các mắt xích trước nhẹ hơn. */
.breadcumb-menu li,
.breadcumb-menu li:after,
.breadcumb-menu a,
.breadcumb-menu span {
    font-size: 14px;
    font-weight: 400;
}
.breadcumb-menu li:last-child {
    color: var(--title-color);
    font-weight: 400;
}
.breadcumb-menu li h1 {
    display: inline;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: none;
}


/* ==========================================================================
   11. Footer + dai CTA gia cong OEM/ODM (module vfoot-*)
   ========================================================================== */

/* ===== Footer Vilaco (module tự chứa) =====
   Phong cách editorial tối: nền navy đặc, nhãn uppercase giãn chữ, đường kẻ mảnh,
   nhấn màu theme. KHÔNG dùng class .footer-wrapper/.widget-* của theme nữa —
   mọi style của footer nằm gọn trong file này, đặt tên theo module (vfoot-*).

   Font: dùng ĐÚNG font theme (--title-font/--body-font = Roboto). Trước đây các nhãn
   dùng font monospace hệ thống → chữ tiếng Việt có dấu rơi về Consolas, lệch hẳn so
   với phần còn lại của site. Nay chỉ giữ hiệu ứng uppercase + letter-spacing. */

.vfoot,
.vfoot-cta,
.vfoot-modal {
    /* Ba mốc màu của MỘT dải gradient dọc chạy xuyên suốt CTA → footer → thanh cuối.
       CTA dùng đoạn trên (top→mid), footer dùng đoạn dưới (mid→bottom) nên chỗ giáp
       nhau cùng màu → không còn thấy đường cắt giữa hai khối. */
    --vf-grad-top: #1A1733;
    --vf-grad-mid: #100E21;
    --vf-grad-bottom: #07060E;

    /* Dải CTA: CÙNG tông với footer nhưng đậm hơn một nấc → nhìn ra ranh giới
       giữa hai khối mà không thành hai mảng màu rời rạc như trước. */
    --vf-cta-top: #0A0817;
    --vf-cta-bottom: #0D0B1C;

    --vf-bg: var(--vf-grad-mid);
    --vf-line: rgba(255, 255, 255, .10);
    --vf-text: rgba(255, 255, 255, .62);
    --vf-strong: #ffffff;
    font-family: var(--body-font);
}

.vfoot-eyebrow {
    display: inline-block;
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 12px;
}

/* ── Dải CTA gia công ─────────────────────────────────────────────────────── */

.vfoot-cta {
    position: relative;
    background: linear-gradient(180deg, var(--vf-cta-top) 0%, var(--vf-cta-bottom) 100%);
    border-top: 2px solid var(--theme-color);
    /* Đường kẻ mảnh ở đáy: chốt ranh giới với footer (vốn sáng hơn một chút) */
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    overflow: hidden;
}

/* Vân sóng chìm — ảnh nền của khối cta-sec7 cũ (nền ĐỎ, vân đỏ đậm rất mảnh).
   Phủ lớp tối đè lên thì vân mất sạch, nên thay bằng blend: đẩy tương phản để tách
   vân ra khỏi nền, rồi 'screen' cho vân hiện thành đường sáng mờ trên nền navy. */
.vfoot-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/upload/icon/cta_bg.png") center center / cover no-repeat;
    filter: grayscale(1) brightness(1.7) contrast(2.6);
    mix-blend-mode: screen;
    opacity: .18;
    pointer-events: none;
}

/* Ửng đỏ nhạt dần TỪ TRÊN XUỐNG, tắt hẳn ở đáy để nối liền màu với footer.
   (Trước đây là gradient trái→phải nên CTA trông như một khối màu khác, lệch với footer.) */
.vfoot-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(215, 29, 42, .14) 0%, rgba(215, 29, 42, 0) 78%);
    pointer-events: none;
}

.vfoot-cta > .container { position: relative; z-index: 1; }

.vfoot-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    padding: 48px 0;
}

.vfoot-cta__text { flex: 1 1 460px; }

/* Cỡ chữ bám ĐÚNG thang tiêu đề của theme, không tự đặt số riêng:
   trần 28px = .title-area .sec-title (tiêu đề khối lớn nhất toàn site),
   sàn 20px = h2. Trước đây trần 32px → to hơn mọi tiêu đề khối khác, lệch thiết kế.
   line-height 1.4 và bỏ letter-spacing âm để khớp block h1..h6 chung của theme. */
.vfoot-cta__title {
    margin: 0;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.4;
    color: var(--vf-strong);
}

.vfoot-cta__note {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--vf-text);
}

.vfoot-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--vf-strong);
    background: var(--theme-color);
    border: 1px solid var(--theme-color);
    transition: background-color .28s ease, border-color .28s ease, transform .28s ease;
}

.vfoot-btn:hover {
    color: var(--vf-strong);
    background: transparent;
    transform: translateX(4px);
}

.vfoot-btn i { font-size: 12px; }

/* ── Thân footer ──────────────────────────────────────────────────────────── */

.vfoot {
    position: relative;
    /* Nối tiếp đúng chỗ CTA kết thúc (--vf-grad-mid) rồi tối dần xuống đáy trang. */
    background: linear-gradient(180deg, var(--vf-grad-mid) 0%, var(--vf-grad-bottom) 100%);
    color: var(--vf-text);
    font-size: 14px;
}

/* Vân sóng chìm chạy tiếp xuống footer, mờ hơn CTA để mắt vẫn thấy một dải liền. */
.vfoot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/upload/icon/cta_bg.png") center top / cover no-repeat;
    filter: grayscale(1) brightness(1.7) contrast(2.6);
    mix-blend-mode: screen;
    opacity: .09;
    pointer-events: none;
}

.vfoot > .container { position: relative; z-index: 1; }

/* Thứ tự cột: Thương hiệu · Thông tin liên hệ · Công ty · Sản xuất & Hợp tác */
.vfoot-grid {
    display: grid;
    grid-template-columns: 1.3fr 1.5fr 1.1fr 1.35fr;
    gap: 40px;
    padding: 64px 0 48px;
}

@media (max-width: 1199.98px) {
    .vfoot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; padding: 48px 0 36px; }
}

@media (max-width: 575.98px) {
    .vfoot-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Tiêu đề cột — theo đúng site gốc 2023 (.footer-widget .widget_title):
   18px / 700 / trắng, KHÔNG giãn chữ. */
.vfoot-title {
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--vf-strong);
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vf-line);
}

/* Tiêu đề nhóm thứ 2 trong cùng một cột (Sản xuất & Hợp tác nằm dưới Thông tin hữu ích) */
.vfoot-title--sub { margin-top: 32px; }

/* ── Album nhà máy: lưới 3 cột × 4 hàng, thumb vuông 1:1 ──────────────────── */

.vfoot-album {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vfoot-album__item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;      /* thumb luôn vuông, ảnh gốc tỉ lệ nào cũng khớp lưới */
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--vf-line);
}

/* Ảnh thứ 13 trở đi vẫn nằm trong DOM (để gallery duyệt đủ album) nhưng không hiện ở lưới */
.vfoot-album__item.is-hidden,
.vfoot-album__item.is-broken { display: none; }

.vfoot-album__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .35s ease;
}

.vfoot-album__item:hover img {
    transform: scale(1.06);
    opacity: .85;
}

/* Badge "+N" trên ô cuối khi album còn ảnh chưa hiện */
.vfoot-album__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--vf-strong);
    background: rgba(11, 10, 22, .62);
    transition: background-color .25s ease;
}

.vfoot-album__item:hover .vfoot-album__more { background: rgba(11, 10, 22, .45); }

/* Cột thương hiệu */
.vfoot-logo { margin-bottom: 20px; }
.vfoot-logo img { max-width: 150px; height: auto; }

.vfoot-brand__name {
    margin: 0 0 12px;
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--vf-strong);
}

.vfoot-brand__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--light-color);
}

/* Nhóm mạng xã hội: nhãn và hàng icon nằm CÙNG MỘT HÀNG.
   flex-wrap để màn quá hẹp thì icon mới tự xuống dòng, không đẩy tràn cột. */
.vfoot-socialgroup {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.vfoot-socialgroup__label {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--vf-strong);
}

.vfoot-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vfoot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 14px;
    color: var(--vf-text);
    border: 1px solid var(--vf-line);
    border-radius: 50%;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

.vfoot-social a:hover {
    color: var(--vf-strong);
    background: var(--theme-color);
    border-color: var(--theme-color);
}

/* Menu liên kết */
.vfoot-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Link menu — giữ đúng hành vi site gốc: 16px/400, màu --light-color, giãn dòng 21px,
   hover thì đổi màu theme + thụt vào 20px và hiện mũi tên "»" (FA \f101) mờ dần vào. */
.vfoot-menu li + li { margin-top: 21px; }

.vfoot-menu a {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--light-color);
    transition: color .3s ease-in-out, padding-left .3s ease-in-out;
}

.vfoot-menu a::before {
    content: "\f101";
    font-family: var(--icon-font);
    font-weight: 600;
    font-size: .9em;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--theme-color);
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.vfoot-menu a:hover {
    color: var(--theme-color);
    padding-left: 20px;
}

.vfoot-menu a:hover::before { opacity: 1; }

/* Khối liên hệ */
.vfoot-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vfoot-contact li {
    display: flex;
    gap: 12px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .40);
}

.vfoot-contact li + li {
    margin-top: 21px;
}

/* Icon rộng 20px như site gốc (footer .info-wrap .far) để các dòng thẳng cột */
.vfoot-contact i {
    flex: 0 0 20px;
    margin-top: 5px;
    font-size: 14px;
    color: var(--theme-color);
}

.vfoot-contact b {
    display: block;
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    
    margin-bottom: 3px;
}

/* Giờ làm việc: một mục duy nhất, mỗi ca một dòng "Thứ 2 - Thứ 6 : 7:30 - 17:30" */
.vfoot-hours {
    display: block;
    line-height: 1.65;
}

.vfoot-hours em {
    font-style: normal;
    color: rgba(255, 255, 255, .72);
}

.vfoot-contact a {
    transition: color .25s ease;
}

.vfoot-contact a:hover { color: var(--theme-color); }

/* Nút mở bản đồ (dưới mô tả giới thiệu) */
.vfoot-maplink {
    /* Chiếm trọn bề ngang cột thương hiệu: nút co theo chữ nằm lẻo tẻ dưới đoạn
       mô tả rộng hơn hẳn nó, trông như bị bỏ quên. Mũi tên đẩy sang mép phải bằng
       margin-left:auto để hai đầu nút cân nhau. */
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vf-strong);
    background: transparent;
    border: 1px solid var(--vf-line);
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease;
}

.vfoot-maplink:hover {
    background: rgba(255, 255, 255, .04);
    border-color: var(--theme-color);
}

.vfoot-maplink > i:first-child { color: var(--theme-color); font-size: 13px; }

.vfoot-maplink__arrow {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
    transition: transform .25s ease, color .25s ease;
}

.vfoot-maplink:hover .vfoot-maplink__arrow {
    color: var(--theme-color);
    transform: translateX(3px);
}

/* ── Popup bản đồ chỉ đường (module dùng chung `vmap-*`) ──────────────────────
   Bản đồ bên trái · thông tin doanh nghiệp nền đỏ thương hiệu bên phải.
   CỐ Ý không có transition/animation nào trên popup: mở là hiện ngay, đóng là mất
   ngay — chỉ nút X có hiệu ứng hover. Cũng CỐ Ý không có lớp phủ bắt click: chỉ
   đóng được bằng nút X (và phím Escape), tránh đóng nhầm khi kéo bản đồ. */

.vmap {
    position: fixed;
    inset: 0;
    /* Cao hơn mọi lớp nổi của theme (sidebar tìm kiếm 99999, drawer 9999, scroll-top 10000). */
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 4, 14, .78);
}

.vmap[hidden] { display: none; }

body.vmap-locked { overflow: hidden; }

/* Khi mở popup thì giấu các nút nổi (hỗ trợ trực tuyến z-index 9000, về đầu trang
   z-index 10000) — chúng vốn cao hơn mọi popup của theme nên sẽ đè lên lớp phủ.
   Cùng cách xử lý với lightbox (html.vlb-open). */
body.vmap-locked .osc-fab,
body.vmap-locked .scroll-top { display: none !important; }

.vmap__dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .95fr);
    width: min(1160px, 100%);
    height: min(620px, 88vh);
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.vmap__body { min-width: 0; line-height: 0; }
.vmap__body iframe { width: 100%; height: 100%; display: block; }

/* ── Cột thông tin (nền đỏ logo) ─────────────────────────────────────────── */

.vmap__side {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px 28px;
    overflow-y: auto;
    background: var(--theme-color);
    color: rgba(255, 255, 255, .85);
}

.vmap__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.vmap__close:hover,
.vmap__close:focus-visible {
    background: rgba(255, 255, 255, .3);
    transform: rotate(90deg);
    outline: none;
}

.vmap__name {
    margin: 6px 40px 0 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.vmap__list {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vmap__item { display: flex; align-items: flex-start; gap: 12px; }

.vmap__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-radius: 50%;
}

.vmap__body-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.vmap__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.vmap__value {
    font-size: 15px;
    line-height: 1.55;
    color: #fff;
    word-break: break-word;
}

a.vmap__value:hover { color: #fff; text-decoration: underline; }

.vmap__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-color);
    background: #fff;
    border-radius: 8px;
    transition: background .2s ease;
}

.vmap__btn:hover { background: rgba(255, 255, 255, .88); color: var(--theme-color); }

@media (max-width: 991.98px) {
    .vmap { padding: 12px; }

    .vmap__dialog {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(200px, 42%) minmax(0, 1fr);
        height: min(680px, 94vh);
    }

    .vmap__side { padding: 24px 20px; }
}

/* ── Thanh dưới ───────────────────────────────────────────────────────────── */

.vfoot-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    padding: 22px 0;
    border-top: 1px solid var(--vf-line);
    font-size: 13px;
}

.vfoot-bar p { margin: 0; color: rgba(255, 255, 255, .48); }

.vfoot-bar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vfoot-bar__links a,
.vfoot-bar__credit a {
    color: rgba(255, 255, 255, .48);
    transition: color .25s ease;
}

.vfoot-bar__links a:hover,
.vfoot-bar__credit a:hover { color: var(--theme-color); }

@media (max-width: 767.98px) {
    .vfoot-bar { justify-content: center; text-align: center; }
    .vfoot-bar__links { justify-content: center; }
}


/* ==========================================================================
   12. Trang gia cong OEM / ODM
   ========================================================================== */

/* ===== Trang gia công OEM / ODM =====
   Phong cách "editorial": nhãn đánh số uppercase giãn chữ, ô nhập chỉ có gạch chân,
   cột thông tin nền navy. Dùng biến theme (--theme-color/--navy-color/...)
   nên tự đồng bộ nếu theme đổi màu. */

.oem-request {
    --oem-line: rgba(18, 18, 18, .12);
    /* Nhãn dùng ĐÚNG font theme (không monospace) — chữ tiếng Việt có dấu ở font mono
       rơi về Consolas, lệch hẳn so với phần còn lại của site. */
    --oem-label-font: var(--body-font);
}

/* ── Đầu khối ─────────────────────────────────────────────────────────────── */

.oem-request__head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 32px 56px;
    padding-bottom: 32px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--oem-line);
}

@media (max-width: 991.98px) {
    .oem-request__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
}

.oem-eyebrow {
    display: inline-block;
    font-family: var(--oem-label-font);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 14px;
}

/* Cỡ chữ bám ĐÚNG thang tiêu đề khối của hệ thống public (.title-area .sec-title:
   28px, xuống 18px ở ≤767px) — trước đây clamp() đẩy lên tới 44px nên tiêu đề trang
   này to hơn hẳn mọi tiêu đề khối khác của site. */
.oem-request__title {
    font-size: 28px;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--title-color);
    margin: 0;
}

@media (max-width: 767.98px) {
    .oem-request__title { font-size: 18px; line-height: 1.4; }
}

.oem-request__title em {
    font-style: normal;
    color: var(--theme-color);
}

.oem-request__head-side p {
    margin: 0;
    color: var(--body-color);
    font-size: 15px;
    line-height: 1.75;
}

.oem-stat-line {
    font-family: var(--oem-label-font);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--title-color);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--oem-line);
}

/* ── Form ─────────────────────────────────────────────────────────────────── */

.oem-field { margin-bottom: 30px; }

.oem-field label {
    display: block;
    font-family: var(--oem-label-font);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray-color);
    margin-bottom: 8px;
}

/* Ô nhập viền nhạt trên nền trắng — CÙNG khuôn với module liên hệ (.ct-field) và
   với ô chọn .ss-dd của sidebar tìm kiếm (trắng · 1px #e5e7eb · bo 6px), nên cả
   form nhìn như một hệ. Trước đây chỉ có gạch chân nên nhìn như ô bị lỗi render.
   Focus KHÔNG thêm viền, KHÔNG outline, KHÔNG đổ bóng — chỉ đậm màu viền sẵn có. */
.oem-field input,
.oem-field textarea {
    width: 100%;
    padding: 15px 18px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--title-color);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: border-color .2s ease;
    appearance: none;
}

.oem-field input { height: 54px; }
.oem-field textarea { resize: vertical; min-height: 148px; }

/* Placeholder 15px — bằng cỡ chữ người dùng gõ, theo thống nhất toàn site. */
.oem-field input::placeholder,
.oem-field textarea::placeholder {
    font-size: 15px;
    color: #9ca3af;
}

.oem-field input:focus,
.oem-field textarea:focus,
.oem-field input:focus-visible,
.oem-field textarea:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: #c9ced6;
}

/* Chrome tô nền vàng cho ô đã lưu — ép lại nền của module. */
.oem-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--title-color);
}

/* ── Ô chọn: component .ss-dd dùng chung với ô tìm kiếm ───────────────────────
   GIỮ NGUYÊN giao diện gốc của .ss-dd (trắng · viền 1px · bo 6px · viền đỏ khi mở);
   ở đây chỉ nới cho rộng hết cột và cao bằng ô nhập (54px) để thẳng hàng. */
.oem-dd { display: block; }

.oem-dd .ss-dd__toggle {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    font-size: 15px;
}

.oem-dd .ss-dd__toggle:focus,
.oem-dd .ss-dd__toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.oem-dd .ss-dd__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oem-dd .ss-dd__menu { max-height: 280px; overflow-y: auto; }
.oem-dd .ss-dd__menu li { white-space: normal; }

/* ── Câu đố xác minh dự phòng ─────────────────────────────────────────────── */
.oem-captcha { display: flex; align-items: center; gap: 12px; }

.oem-captcha__q {
    flex: 0 0 auto;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--title-color);
    background: var(--smoke-color);
    border-radius: 6px;
    white-space: nowrap;
    user-select: none;
}

.oem-captcha input { flex: 1 1 auto; min-width: 0; }

/* ── Báo lỗi nhập liệu ────────────────────────────────────────────────────── */
.oem-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    background: #fdecec;
    color: #b42318;
    border-radius: 10px;
}

.oem-alert__list { margin: 0; padding-left: 18px; }
.oem-alert__list li + li { margin-top: 3px; }

/* Dòng cam kết NDA nằm NGAY DƯỚI ô "Brief / yêu cầu" rồi mới tới nút, cả hai căn
   trái — trước đây kẻ border-top rồi đẩy nút sang phải khiến khối này trông như một
   chân trang rời khỏi form. */
.oem-form__submit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: -8px;
}

.oem-form__submit p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-color);
}

/* Xác nhận đã gửi */
.oem-sent {
    padding: 40px 36px;
    background: var(--smoke-color);
    border-left: 3px solid var(--theme-color);
}

.oem-sent h3 { font-size: 22px; margin-bottom: 12px; }
.oem-sent p  { margin: 0; color: var(--body-color); }

/* ── Cột thông tin ────────────────────────────────────────────────────────── */

/* Nền ĐỎ thương hiệu (trước đây navy) để cột thông tin ăn nhập với popup bản đồ
   và dải CTA — cùng một tông đỏ logo trên toàn trang. */
.oem-info {
    height: 100%;
    padding: 36px 32px;
    border-radius: 10px;
    background: var(--theme-color);
    color: rgba(255, 255, 255, .85);
}

.oem-info__block + .oem-info__block {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.oem-info__k {
    font-family: var(--oem-label-font);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 10px;
}

.oem-info__v {
    font-size: 15px;
    line-height: 1.7;
    color: var(--white-color);
}

.oem-info__v strong { font-weight: 600; }

/* KHÔNG gạch chân: cả cột chỉ toàn thông tin liên hệ nên gạch chân từng dòng làm
   khối này rối. Nền đã là đỏ thương hiệu ⇒ hover cũng KHÔNG được đổi sang màu đỏ
   (mất chữ) — phản hồi bằng độ mờ. */
.oem-info__v a {
    color: var(--white-color);
    text-decoration: none;
    border-bottom: 0;
    transition: opacity .2s ease;
}

.oem-info__v a:hover {
    color: var(--white-color);
    opacity: .78;
}

/* Mở popup bản đồ: là <button> nên phải reset dáng nút mặc định của trình duyệt. */
.oem-info__link {
    display: inline-block;
    padding: 0;
    font-size: inherit;
    font-weight: 600;
    color: var(--white-color);
    background: transparent;
    border: 0;
    border-bottom: 0 !important;
    cursor: pointer;
    transition: opacity .2s ease;
}

.oem-info__link:hover,
.oem-info__link:focus-visible { opacity: .78; outline: none; }

/* Giờ làm việc: mỗi ngày một dòng, ngày bên trái · giờ bên phải cùng hàng. */
.oem-info__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.oem-info__day { color: var(--white-color); }

.oem-info__muted {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

.oem-info__row .oem-info__muted { font-size: 15px; }


/* ==========================================================================
   13. Hero slider trang chu
   ========================================================================== */

/* ===== Home hero slider (custom, không dùng slick) =====
   - .hhero-viewport reserve chiều cao theo tỉ lệ ẢNH ĐẦU (biến --hero-ar-d / --hero-ar-m)
     → không CLS; desktop & mobile có tỉ lệ riêng vì là 2 ảnh khác nhau.
   - Các slide sau co theo chiều cao viewport (object-fit: cover).
   - Skeleton shimmer + ảnh fade-in khi load xong → không giật. */

.hhero { position: relative; overflow: hidden; }

.hhero-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: var(--hero-ar-d, 16 / 6);
    overflow: hidden;
    background: #eef0f2;
}

/* Từ 992px: hero + header chiếm đúng 1 màn hình (slide cao = 100svh − header).
   --header-h do script cuối Header/Default.cshtml đo (chạy trước khi hero layout);
   190px chỉ là mức dự phòng khi JS tắt. Dùng svh để thanh địa chỉ trình duyệt
   di động không làm hero nhảy; trình duyệt cũ lấy vh ở dòng trên. */
@media (min-width: 992px) {
    .hhero-viewport {
        aspect-ratio: auto;
        height: calc(100vh - var(--header-h, 190px));
        height: calc(100svh - var(--header-h, 190px));
        min-height: 420px;
    }
}

@media (max-width: 767.98px) {
    .hhero-viewport { aspect-ratio: var(--hero-ar-m, var(--hero-ar-d, 4 / 3)); }
}

.hhero-track {
    display: flex;
    height: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    touch-action: pan-y;        /* kéo ngang do JS xử lý; vuốt dọc vẫn cuộn trang */
    user-select: none;
    cursor: grab;
}
.hhero-track.is-dragging { cursor: grabbing; }

.hhero-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #eef0f2;
}

/* Skeleton shimmer trong lúc chờ ảnh — ẩn khi ảnh đã load */
.hhero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #eef0f2 0%, #e3e6e9 50%, #eef0f2 100%);
    background-size: 200% 100%;
    animation: hhero-shimmer 1.4s ease-in-out infinite;
    z-index: 1;
}
.hhero-slide.is-loaded::before { display: none; }

.hhero-slide > a,
.hhero-slide > picture { display: block; width: 100%; height: 100%; }

.hhero-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0;
    transition: opacity .5s ease;
}
.hhero-img.is-loaded { opacity: 1; }

@keyframes hhero-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Arrows */
.hhero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    opacity: 0;
    transition: opacity .25s ease, background .2s ease;
}
.hhero:hover .hhero-arrow { opacity: 1; }
.hhero-arrow:hover { background: #fff; }
.hhero-arrow:focus-visible { opacity: 1; outline: 2px solid #2563eb; outline-offset: 2px; }
.hhero-arrow.prev { left: 16px; }
.hhero-arrow.next { right: 16px; }
.hhero-arrow svg { width: 20px; height: 20px; }

/* Dots */
.hhero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.hhero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: background .25s ease, width .25s ease;
}
.hhero-dot.active { background: var(--theme-color, #d71d2a); width: 22px; border-radius: 5px; }

@media (max-width: 767.98px) {
    .hhero-arrow { display: none; }         /* mobile dùng vuốt */
    .hhero-dots { bottom: 10px; }
}

/* Giảm chuyển động cho người dùng thiết lập prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hhero-track { transition: none; }
    .hhero-slide::before { animation: none; }
    .hhero-img { transition: none; }
}


/* ==========================================================================
   14. CHI TIẾT SẢN PHẨM — gallery (.pdgal) · sàn TMĐT (.pdbuy) · CTA (.pdcta)
   ==========================================================================
   Module tự chứa, KHÔNG dùng .product-big-img/.buy-online/.th-btn của theme
   (theme đặt nền #f4f4f4 + object-fit cover → ảnh sản phẩm bị dải xám trên/dưới).
   ========================================================================== */

/* ── Khung 2 nửa: trái (gallery) nền xám, phải (thông tin) nền trắng ──────── */
/* box-info bỏ padding để 2 nửa chạm sát mép khung; padding chuyển vào từng nửa,
   nhờ vậy mảng nền xám bên trái phủ trọn nửa khung chứ không bị viền trắng bao quanh.
   overflow:hidden để nền xám không tràn ra ngoài góc bo 5px của khung. */
.product-details .box-info {
    padding: 0;
    border: none;
    overflow: hidden;
}
.pd-col { padding: 30px; }

/* PC: tách 2 nửa ra 30px. Không dùng gutter của bootstrap vì gutter là PADDING trong
   lòng cột — mảng nền xám sẽ phủ luôn cả phần gutter, hai nửa vẫn dính nhau về mặt
   thị giác. Dùng `gap` của flex (khoảng trống THẬT giữa 2 cột) + cho cột tự chia đôi
   phần còn lại; chỉ bật từ 992px vì dưới mức đó 2 nửa xếp dọc. */
@media (min-width: 992px) {
    .product-details .box-info > .row {
        flex-wrap: nowrap;
        gap: 30px;
    }
    .product-details .pd-col {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        /* BẮT BUỘC: flex item mặc định min-width:auto = không co nhỏ hơn min-content.
           Trong cột trái có .pdgal-track (flex) chứa <img width="640"> → min-content
           của nó rất lớn, cột phình ra kéo cả khung tràn khỏi màn hình. */
        min-width: 0;
    }
}
/* Nền dùng token xám chuẩn --smoke-color (xem mục 16) → đồng tông với breadcrumb. */
.pd-col--media { background: var(--smoke-color); }

/* Toàn bộ khung gallery (ảnh lớn + dải thumb) là một thẻ TRẮNG nằm trên mảng xám;
   phần xám chỉ còn là viền 30px bao quanh. Nhờ vậy ảnh sản phẩm — vốn hầu hết nền
   trắng — không bị lẫn vào mảng xám, và khoảng hở giữa các thumb cũng sạch. */
.pd-col--media .pdgal {
    background: #fff;
    padding: 16px;
}
@media (max-width: 575.98px) {
    .pd-col--media .pdgal { padding: 12px; }
}

@media (max-width: 991.98px) {
    .pd-col { padding: 20px; }
    /* Khoảng cách giữa 2 nửa lúc xếp dọc đã do padding của .pd-col lo → bỏ margin
       cũ của .pdgal, nếu không mảng nền xám bị hụt thêm 30px trống ở đáy. */
    .pd-col--media .pdgal { margin-bottom: 0; }
}

/* ── Ảnh lớn: track trượt (kéo/vuốt + mũi tên) ───────────────────────────── */
.pdgal-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
    touch-action: pan-y;          /* vuốt ngang do JS xử lý, vuốt dọc trả lại trình duyệt */
}
.pdgal-stage.is-dragging { cursor: grabbing; }
.pdgal-stage:focus-visible { outline: 2px solid var(--theme-color); outline-offset: 2px; }

.pdgal-track {
    display: flex;
    height: 100%;
    min-width: 0;
    will-change: transform;
}
.pdgal-slide {
    flex: 0 0 100%;
    height: 100%;
    min-width: 0;      /* ảnh bên trong không được kéo giãn slide (min-width:auto) */
    position: relative;
    overflow: hidden;
}
/* contain → giữ trọn khung ảnh gốc, không cắt; nền trắng nên phần thừa vô hình. */
.pdgal-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    -webkit-user-select: none;
    user-select: none;
}
/* Ảnh chỉ hiện khi tải XONG (script imgfx ở <head> gắn .is-loaded), trong lúc chờ
   là khung shimmer → không thấy ảnh vẽ dở từng dải. */
.imgfx-on .pdgal-slide:not(.is-loaded) {
    background-image: linear-gradient(100deg, #eceff1 30%, #f4f6f7 50%, #eceff1 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
/* Chỉ fade-in khi tải xong — không transition transform (gallery không có hiệu ứng phóng). */
.imgfx-on .pdgal-slide img { opacity: 0; transition: opacity .35s ease; }
.imgfx-on .pdgal-slide.is-loaded img { opacity: 1; }
/* KHÔNG phóng ảnh khi hover: ảnh sản phẩm là infographic có chữ, phóng lên là cắt mất
   mép và chữ bị mờ. Muốn xem to thì bấm mở lightbox. */

.pdgal-stage__zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--title-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.pdgal-stage:hover .pdgal-stage__zoom { opacity: 1; }


/* ── Dải thumb: carousel slick, ô vuông 1:1 ──────────────────────────────── */
/* Bố cục 3 cột [mũi tên trái][dải thumb][mũi tên phải]: mũi tên là FLEX ITEM nằm
   ngoài .slick-list, nên không thể đè lên ảnh thumb như cách đặt absolute trong
   phần padding (chỉ cần gutter hụt vài px là chồng lên ô đầu/ô cuối). */
/* Bố cục [mũi tên trái][dải thumb][mũi tên phải] bằng FLEX trên thẻ bọc
   .pdgal-thumbwrap: mũi tên do Razor render thẳng vào THẺ BỌC (slick chạy arrows:false),
   neo tuyệt đối vào phần padding 30px của thẻ bọc — nằm hoàn toàn ngoài hộp của
   .pdgal-thumbs nên không thể đè lên ô thumb ở bất kỳ khổ màn hình nào, và cũng không
   dính class .slick-arrow cùng đống CSS mũi tên của theme.
   Đổi lại dải thumb hẹp hơn ảnh ~60px — đã thống nhất chấp nhận. */
.pdgal-thumbwrap {
    position: relative;
    margin-top: 12px;
    padding: 0 30px;       /* chỗ cho 2 mũi tên, NẰM NGOÀI hộp của .pdgal-thumbs */
}
/* CỐ TÌNH không dùng flex cho dải thumb: slick đo `.slick-list.width()` ngay lúc init để
   tính bề rộng mỗi ô. Là flex item thì bề rộng ấy phụ thuộc chính nội dung bên trong
   (slick-track chưa được gán width) → đo hụt → mỗi ô bị tính nhỏ, và vì slick.min.css
   đặt `.slick-track { margin-left:auto; margin-right:auto }` nên track hẹp bị DỒN VÀO
   GIỮA dải — đúng triệu chứng thumb tí xíu nằm giữa trên mobile.
   Để block thường thì bề rộng là 100% content box của thẻ bọc (giá trị xác định,
   không phụ thuộc nội dung) nên slick đo đúng ngay từ lần đầu. */
.pdgal-thumbs {
    margin: 0;
    padding: 0;
}

/* Trước khi slick init (hoặc khi JS lỗi): dựng sẵn ĐÚNG một hàng 5 ô cùng bề ngang
   → carousel dựng xong không nhảy layout (CLS ≈ 0). */
.pdgal-thumbs:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.pdgal-thumbs:not(.slick-initialized) .pdgal-thumb { flex: 0 0 20%; }

.pdgal-thumb {
    padding: 0 5px;       /* khoảng cách giữa các slide slick */
    border: none;
    background: none;
    cursor: pointer;
    display: block;
}
/* Khung 1:1 — ảnh preset fm-grid 200×200 (Crop) nên cover không méo.
   KHÔNG viền, KHÔNG bo góc: ô đang xem nhận diện bằng việc BỎ lớp phủ tối. */
.pdgal-thumb__box {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
}
.pdgal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Thumb chưa chọn bị phủ TỐI, thumb đang xem bỏ lớp phủ → mắt bắt ngay ảnh hiện hành.
   Dùng lớp phủ ::after chứ không hạ opacity của <img> vì rule .imgfx-on ... .is-loaded img
   (fade-in lúc tải) có độ ưu tiên cao hơn, sẽ ghi đè mất. */
.pdgal-thumb__box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .42;
    pointer-events: none;
    transition: opacity .25s ease;
}
.pdgal-thumb:hover .pdgal-thumb__box::after { opacity: .12; }
.pdgal-thumb.is-active .pdgal-thumb__box::after { opacity: 0; }
/* slick bọc mỗi slide trong .slick-slide → bỏ khoảng trắng baseline thừa. */
.pdgal-thumbs .slick-slide > div { line-height: 0; }
.pdgal-thumbs .slick-list { overflow: hidden; }

/* slick tự gắn thêm class .slick-arrow → dính CSS theme (nút tròn 60px, left:-100px)
   khiến mũi tên văng ra ngoài khung. Ghi đè bằng selector 2 cấp + reset các biến
   --pos-x/--icon-size của theme. Thiết kế: KHÔNG viền, không nền — chỉ mũi tên. */
.pdgal-thumbwrap .pdgal-arrow {
    --pos-x: 0;
    --icon-size: 24px;
    position: absolute;    /* neo vào THẺ BỌC, nằm trong phần padding 30px đã chừa */
    top: 50%;
    transform: translateY(-50%);
    /* PHẢI reset CẢ 4 margin: ở ≤991px theme đặt `.slick-arrow { margin-right: 40px }`
       (và chỉ trả về 0 cho `.slick-arrow.slick-next` — class mà markup tự viết của mình
       không có). Nút next định vị bằng `right: 0` nên margin-right 40px đẩy nó THỤT VÀO
       40px, đè lên ô thumb; nút prev định vị bằng `left: 0` nên margin-right vô hại —
       đó chính là lý do chỉ mũi tên phải hỏng, và chỉ hỏng trên mobile. */
    margin: 0;
    z-index: 2;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--title-color);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    /* flex để glyph nằm đúng tâm ô — dựa vào line-height thì lệch theo từng font-icon. */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, opacity .2s ease;
}
.pdgal-thumbwrap .pdgal-arrow:hover { background: none; color: var(--theme-color); }
/* Nút do mình render nên dùng thuộc tính [disabled] chuẩn, không phải .slick-disabled. */
.pdgal-thumbwrap .pdgal-arrow[disabled] { opacity: .25; cursor: default; }
.pdgal-thumbwrap .pdgal-arrow[disabled]:hover { color: var(--title-color); }
/* 24px nút trong khe 30px → còn 6px thở tới mép dải thumb. Khai báo cả left lẫn right
   vì theme .slick-arrow đặt sẵn cả hai. */
.pdgal-thumbwrap .pdgal-arrow--prev { left: 0; right: auto; }
.pdgal-thumbwrap .pdgal-arrow--next { right: 0; left: auto; }

@media (max-width: 991.98px) {
    .pdgal { margin-bottom: 30px; }
}
@media (max-width: 575.98px) {
    .pdgal-thumbs:not(.slick-initialized) .pdgal-thumb { flex: 0 0 25%; }  /* khớp slidesToShow: 4 */
}

/* ── Meta sản phẩm: đồng bộ cỡ chữ với meta bài viết (.blog-meta 14px) ─────── */
.pd-meta { margin-bottom: 14px; }
.pd-meta span { margin-right: 18px; }
.pd-meta span i { margin-right: 6px; }
.pd-meta a { color: inherit; }
.pd-meta a:hover { color: var(--theme-color); }

/* Ghi chú "Liên hệ tổng đài…" — cùng cỡ 14px của meta, KHÔNG đậm như .product_meta */
.pd-note {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-color);
    margin: 18px 0 12px;
}

/* ── Nút sàn TMĐT ────────────────────────────────────────────────────────── */
.pdbuy { margin-top: 20px; }
.pdbuy__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--title-color);
    margin-bottom: 10px;
}
.pdbuy__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Bo góc 12px KHỚP với cặp nút CTA .pdcta__btn ngay bên dưới — trước đây để pill
   999px, hai kiểu bo khác nhau nằm sát nhau làm khối thông tin trông rối. */
.pdbuy__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border: 2px solid transparent;   /* cùng hộp với .pdcta__btn để 2 hàng nút thẳng khối */
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--title-color);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pdbuy__btn i { font-size: 16px; }
.pdbuy__btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    filter: brightness(1.05);
}
.pdbuy__btn--shopee { background: #ee4d2d; }
.pdbuy__btn--tiktok { background: #111; }
.pdbuy__btn--lazada { background: linear-gradient(135deg, #0f146d 0%, #f8557f 100%); }

/* ── 2 CTA chia đôi 50:50 ────────────────────────────────────────────────── */
.pdcta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
}
/* Chỉ có 1 nút (thiếu hotline) → chiếm trọn hàng, không lệch nửa bên. */
.pdcta__btn:only-child { grid-column: 1 / -1; }

.pdcta__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.pdcta__btn i {
    font-size: 20px;
    flex: 0 0 auto;
}
.pdcta__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.pdcta__lbl {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}
.pdcta__main {
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdcta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}

.pdcta__btn--hotline {
    background: var(--theme-color);
    color: #fff;
}
.pdcta__btn--hotline:hover {
    background: var(--hover-color);
    color: #fff;
}

.pdcta__btn--agency {
    background: #fff;
    border-color: var(--theme-color);
    color: var(--theme-color);
}
.pdcta__btn--agency:hover {
    background: var(--theme-color);
    color: #fff;
}

@media (max-width: 1199.98px) {
    .pdcta__main { font-size: 16px; }
}
@media (max-width: 767.98px) {
    .pdcta { grid-template-columns: 1fr; }
}


/* ==========================================================================
   15. LIGHTBOX ẢNH (module .vlb — assets/js/lightbox.js)
   ==========================================================================
   Thay Fancybox v5 (143 KB JS + 24 KB CSS) bằng bản tự viết ~8 KB. Dùng chung
   cho gallery sản phẩm và album nhà máy ở footer → UI xem ảnh đồng nhất.
   ========================================================================== */

@keyframes vlb-spin { to { transform: rotate(360deg); } }

html.vlb-open { overflow: hidden; }

/* Khi mở lightbox thì giấu các nút nổi (hỗ trợ trực tuyến z-index 9000, về đầu trang
   z-index 10000) — chúng vốn cao hơn mọi popup của theme nên sẽ đè lên lớp phủ. */
html.vlb-open .osc-fab,
html.vlb-open .scroll-top { display: none !important; }

.vlb {
    position: fixed;
    inset: 0;
    /* Cao hơn mọi lớp nổi của theme (sidebar tìm kiếm 99999, drawer 9999, scroll-top 10000). */
    z-index: 1000000;
    display: flex;
    flex-direction: column;
}
.vlb[hidden] { display: none; }

.vlb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 14, .93);
}

/* ── Thanh trên: đếm ảnh + đóng ──────────────────────────────────────────── */
.vlb__bar {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* flex-end + margin-right:auto ở bộ đếm, KHÔNG dùng space-between: gallery 1 ảnh giấu
       bộ đếm đi, space-between sẽ kéo nút đóng chạy sang trái. */
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 600;
}
.vlb__counter { margin-right: auto; }
.vlb__close {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.vlb__close:hover { background: rgba(255, 255, 255, .24); }

/* ── Khung trượt ─────────────────────────────────────────────────────────── */
.vlb__viewport {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    overflow: hidden;
    touch-action: pan-y;      /* vuốt ngang do JS xử lý, vuốt dọc trả về trình duyệt */
    cursor: grab;
}
.vlb__viewport:active { cursor: grabbing; }
/* Chỉ có 1 ảnh: không kéo được nên đừng mời gọi bằng con trỏ "nắm". */
.vlb.is-single .vlb__viewport,
.vlb.is-single .vlb__viewport:active { cursor: default; }

.vlb__track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.vlb__slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
}
/* Ảnh chỉ hiện khi ĐÃ tải xong (JS gắn .is-loaded) → không vẽ dở từng dải. */
.vlb__slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .3s ease;
    -webkit-user-select: none;
    user-select: none;
}
.vlb__slide.is-loaded img { opacity: 1; }
.vlb__slide.is-broken img { opacity: .25; }

.vlb__spin {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vlb-spin .7s linear infinite;
}
.vlb__slide.is-loaded .vlb__spin { display: none; }

/* ── Nút trước / sau ─────────────────────────────────────────────────────── */
.vlb__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, opacity .2s ease;
}
.vlb__nav[hidden] { display: none; }   /* [hidden] phải thắng display:flex ở trên */
.vlb__nav:hover { background: rgba(255, 255, 255, .3); }
.vlb__nav[disabled] { opacity: .25; cursor: default; }
.vlb__nav[disabled]:hover { background: rgba(255, 255, 255, .14); }
.vlb__nav--prev { left: 16px; }
.vlb__nav--next { right: 16px; }

/* ── Chú thích + dải thumb ───────────────────────────────────────────────── */
.vlb__caption {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: 8px 16px;
    text-align: center;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}
.vlb__caption[hidden] { display: none; }

.vlb__thumbs {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: 10px 16px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.vlb__thumbs[hidden] { display: none; }
/* margin:auto trên track con → căn giữa khi ít ảnh, tự dạt trái khi tràn (không
   mất ảnh đầu như justify-content:center). */
.vlb__thumbs-in {
    display: flex;
    gap: 8px;
    width: max-content;
    margin: 0 auto;
}
.vlb__thumbs::-webkit-scrollbar { height: 4px; }
.vlb__thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 2px; }

.vlb__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s ease, border-color .2s ease;
}
.vlb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlb__thumb:hover { opacity: .85; }
.vlb__thumb.is-active { opacity: 1; border-color: var(--theme-color); }

@media (max-width: 767.98px) {
    .vlb__nav { width: 40px; height: 40px; }
    .vlb__nav--prev { left: 6px; }
    .vlb__nav--next { right: 6px; }
    .vlb__thumb { width: 52px; height: 52px; }
    .vlb__thumbs { padding: 8px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .vlb__track { transition: none; }
}


/* ── Link trong nội dung soạn thảo (bài viết · sản phẩm · chính sách · giới thiệu ·
   danh mục) — đỏ thương hiệu + gạch chân để phân biệt với chữ thường ────────────
   :not([class]) → chỉ nhắm link do TinyMCE sinh ra (không bao giờ có class; đã kiểm
   tra 11/11 link trong dữ liệu legacy đều không class). Nhờ vậy KHÔNG đụng tới nút
   .th-btn — trang 404/500 cũng bọc bằng .blog-content nhưng bên trong là nút bấm,
   tô đỏ vào là hỏng nút. */
.blog-content a:not([class]),
.svc-biz__desc a:not([class]) {
    color: var(--theme-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.blog-content a:not([class]):hover,
.svc-biz__desc a:not([class]):hover {
    color: var(--hover-color);
}


/* ── Khối "Thông tin sản phẩm": typography + thu gọn/xem thêm ─────────────── */

/* Full width theo khung container; giãn dòng 1.9 cho dễ đọc.
   Ảnh trong nội dung căn giữa, bo góc nhẹ cho đồng bộ với gallery. */
.pd-info__body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--body-color);
}
/* ── Nhịp dọc: mọi khối dùng CHUNG một khoảng cách đáy (18px) nên không có chỗ nào
   dính vào nhau; tiêu đề lấy thêm khoảng thở phía trên để tách khỏi khối trước.
   Phần tử cuối cùng luôn bỏ margin đáy để không đội khung. ─────────────────── */
.pd-info__body > *:last-child { margin-bottom: 0; }

.pd-info__body p { margin: 0 0 18px; }
.pd-info__body ul,
.pd-info__body ol { margin: 0 0 18px; padding-left: 22px; }
.pd-info__body li { margin-bottom: 7px; }
/* Theme đặt .blog-content li/ul/ol margin-bottom !important → phải cùng vũ khí mới thắng. */
.pd-info__body li:last-child { margin-bottom: 0 !important; }
/* Danh sách lồng nhau: sát vào mục cha, không cộng dồn 18px. */
.pd-info__body li > ul,
.pd-info__body li > ol { margin: 7px 0 0 !important; }

.pd-info__body h2,
.pd-info__body h3,
.pd-info__body h4 {
    font-weight: 700;
    line-height: 1.5;
    color: var(--title-color);
    margin: 30px 0 12px;
}
.pd-info__body h2,
.pd-info__body h3 { font-size: 18px; }
.pd-info__body h4 { font-size: 16px; }
/* Tiêu đề mở đầu khối / hai tiêu đề liền nhau → không nhân đôi khoảng trống. */
.pd-info__body > :first-child { margin-top: 0; }
.pd-info__body h2 + h3,
.pd-info__body h3 + h4,
.pd-info__body h2 + h4 { margin-top: 16px; }

.pd-info__body strong, .pd-info__body b { color: var(--title-color); font-weight: 700; }

.pd-info__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 22px auto;
    border-radius: 10px;
}
/* Ảnh nằm trong ô bảng / mục danh sách: giữ theo dòng chữ, không tách khối. */
.pd-info__body td img,
.pd-info__body li img { display: inline-block; margin: 0; }

/* iframe (video YouTube nhúng): theme ép min-height 450px + height:auto !important
   → trên mobile khung rộng ~360px mà vẫn cao 450px, hở hai dải đen rất xấu.
   Ép về khung 16:9 co giãn theo bề ngang (cần !important để thắng rule của theme). */
.pd-info__body iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    margin: 22px auto;
    border: 0;
    border-radius: 10px;
}

/* ── Bảng: rộng hết khung, ô thoáng; tràn thì CUỘN NGANG trong khung riêng
   (JS bọc mỗi <table> bằng .pd-tbl) chứ không phá layout trang. ────────────── */
.pd-tbl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 18px;
}
.pd-info__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;                       /* khoảng cách do .pd-tbl đảm nhiệm */
}
/* Chưa kịp bọc (JS lỗi) thì bản thân bảng vẫn cuộn được. */
.pd-info__body > table { display: block; overflow-x: auto; margin-bottom: 18px; }
.pd-info__body th,
.pd-info__body td {
    padding: 7px 15px;
    border: 1px solid var(--border-color);
    vertical-align: top;
    text-align: left;
}
.pd-info__body th { background: var(--smoke-color); font-weight: 700; color: var(--title-color); }
/* TinyMCE bọc mọi thứ trong <p>: thẻ p cuối trong ô phải bỏ margin, nếu không
   ô bảng bị đội thêm 18px và khung vỡ nhịp. */
.pd-info__body td > p:last-child,
.pd-info__body th > p:last-child { margin-bottom: 0; }
/* Ảnh trong nội dung: khung shimmer trong lúc tải, chỉ fade-in khi tải XONG → không
   vẽ dở từng dải. Script imgfx ở <head> gắn .is-loaded thẳng lên <img> (SEL có
   '.pd-info__body img'). Kèm loading=lazy/decoding=async + width/height thật do
   HtmlTextHelper.OptimizeContentImages() chèn server-side → khung ảnh được giữ chỗ
   sẵn nên shimmer hiện đúng kích thước và không nhảy layout khi ảnh về. */
.imgfx-on .pd-info__body img:not(.is-loaded) {
    background-image: linear-gradient(100deg, #eceff1 30%, #f4f6f7 50%, #eceff1 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.imgfx-on .pd-info__body img {
    opacity: 0;
    transition: opacity .35s ease;
}
.imgfx-on .pd-info__body img.is-loaded {
    opacity: 1;
    background: none;
    animation: none;
}
.pd-info__body blockquote {
    margin: 0 0 18px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--theme-color);
    font-style: italic;
    color: var(--title-color);
}

/* Thu gọn: chiều cao phải KHỚP hằng số CLAMP trong product-gallery.js.
   margin-top thay cho khoảng cách mà thanh tab .product-tab-style1 (đã bỏ) từng tạo ra. */
.pd-info {
    position: relative;
    margin-top: 40px;
}
/* Thời lượng transition do JS đặt inline (tỉ lệ với quãng giãn) — giá trị ở đây chỉ là
   mặc định phòng khi JS chưa kịp gán. */
.pd-info.is-clamped .pd-info__body {
    max-height: 420px;
    overflow: hidden;
    transition: max-height .8s cubic-bezier(.4, 0, .2, 1);
}
/* Dải mờ báo "còn nữa" — mờ dần cùng nhịp với lúc khối bắt đầu giãn. */
.pd-info__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 46px;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 92%);
    transition: opacity .45s ease;
}
.pd-info:not(.is-clamped) .pd-info__fade,
.pd-info.is-open .pd-info__fade { opacity: 0; }

.pd-info__more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px auto 0;
    padding: 0 26px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--title-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pd-info__more:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}
.pd-info__more i { font-size: 14px; transition: transform .2s ease; }
.pd-info__more:hover i { transform: translateY(2px); }
/* Nút mờ dần + trôi xuống trước khi bị gỡ khỏi DOM (JS đợi 260ms). */
.pd-info__more.is-hiding {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

/* ── "Sản phẩm cùng danh mục": tiêu đề · mũi tên · nút Xem thêm ───────────── */
.pd-related { position: relative; }

/* min-height = chiều cao mũi tên → hàng tiêu đề và cụm mũi tên (đặt tuyệt đối
   chồng lên hàng này ở desktop) luôn khớp nhau, không lệch dòng. */
.pd-related__head {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 20px;
}

/* Mốc định vị cho mũi tên — bọc riêng carousel để mobile lấy được đúng
   50% CHIỀU CAO CARD (nếu neo theo cả khối thì tiêu đề + nút "Xem thêm"
   kéo tâm lệch xuống dưới). */
.pd-related__slider { position: relative; }

.pd-related__nav {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* KHÔNG viền, KHÔNG nền — chỉ còn mũi tên. Bóng trắng mảnh để nét mũi tên vẫn
   đọc được khi đè lên vùng ảnh sẫm màu của card. */
.pd-related__arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--title-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 4px rgba(255, 255, 255, .95);
    transition: color .2s ease;
}
.pd-related__arrow:hover { color: var(--theme-color); }

/* Desktop: bật lên hàng tiêu đề, góc phải.
   bottom:100% = mép trên slider; cộng margin-bottom đúng bằng khoảng cách
   .pd-related__head (20px) → mũi tên nằm gọn trong hàng tiêu đề. */
@media (min-width: 768px) {
    .pd-related__nav {
        right: 0;
        bottom: 100%;
        margin-bottom: 20px;
        height: 44px;
    }
}

/* Mobile: đè hai mép slider, canh giữa theo chiều cao card. Vùng trống giữa hai
   nút không được chặn cú vuốt → nav bỏ nhận chuột, chỉ 2 nút nhận lại. */
@media (max-width: 767.98px) {
    .pd-related__nav {
        top: 50%;
        left: -6px;
        right: -6px;
        transform: translateY(-50%);
        justify-content: space-between;
        pointer-events: none;
        z-index: 2;
    }
    .pd-related__arrow {
        pointer-events: auto;
        font-size: 20px;
    }
}

.pd-related__more {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}
.pd-related__more .th-btn { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 767.98px) {
    .pd-info__body { font-size: 15px; line-height: 1.8; }
    /* Cỡ tiêu đề giữ nguyên 18/16px ở mọi khổ màn hình — chỉ ô bảng bóp lại cho đỡ tràn. */
    .pd-info__body th,
    .pd-info__body td { padding: 7px 10px; }
}


/* ── Carousel sản phẩm: tắt hover-zoom trong lúc KÉO ─────────────────────────
   Slick gắn .dragging lên .slick-list khi giữ và kéo. Khi đó con trỏ quét ngang
   qua từng card làm hover-zoom (scale 1.06) bật/tắt liên tiếp — nhìn như slider
   bị giật, dù thực chất chỉ là hiệu ứng hover. Kéo thì khoá zoom lại. */
.slick-list.dragging .th-product:hover .product-img img {
    transform: none;
}
/* Kéo bằng chuột không được bôi đen chữ trong card (slick chỉ chặn được ở phần
   ảnh vì <a> có draggable mặc định). */
.slick-list.dragging,
.slick-list.dragging * {
    -webkit-user-select: none;
    user-select: none;
}


/* ==========================================================================
   16. ĐỒNG BỘ MÀU NỀN XÁM — một token duy nhất
   ==========================================================================
   Trước đây mỗi khối tự chọn một sắc xám (#e9e9e9 breadcrumb, #f4f4f4 box-info,
   #f5f6f8 hover, #f7f7f8 ô bảng, #eef0f2 nút social…) nên tổng thể lệch tông.
   Chốt về `--smoke-color` (#F3F3F3) — biến "nền nhạt" CÓ SẴN của theme, không đẻ
   thêm nguồn sự thật mới. Các mảng do mình tự viết đã sửa tại chỗ; hai rule dưới
   đây thuộc phần [A] nên ghi đè ở đây thay vì sửa trong theme.
   KHÔNG đụng gradient shimmer lúc tải ảnh (#eceff1 → #f4f6f7): đó là hiệu ứng
   chuyển động, ép về một màu phẳng là mất luôn hiệu ứng.
   ========================================================================== */
.breadcumb-wrapper { background-color: var(--smoke-color); }
.box-info { border-color: var(--smoke-color); }
.th-product { border-color: var(--smoke-color); }   /* viền thẻ sản phẩm */


/* ==========================================================================
   17. DANH SÁCH BÀI VIẾT (.item-top / .item-list) — ViewComponent ArticleList
   ==========================================================================
   Layout: bài đầu dạng lớn (ảnh trên · h2), các bài sau dạng hàng ngang
   (ảnh col-md-5 · nội dung col-md-7, tự xuống dòng ở mobile). Chia cột bằng
   lưới Bootstrap có sẵn — khối này KHÔNG tự viết flex/float riêng.
   Ảnh dùng preset RESIZE (giữ tỉ lệ gốc) + khung 4:3 với object-fit: contain →
   lưới thẳng hàng mà ảnh không bị xén. Chống CLS bằng width/height thật trên
   thẻ img (xem ArticleListViewComponent), cần thiết vì ≤767px khung 4:3 bị gỡ.
   Cỡ chữ tiêu đề KHÔNG khai báo lại: dùng chung token ở mục 7.
   ========================================================================== */
.item-top,
.item-list {
    border: 1px solid var(--smoke-color);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.item-top .blog-img {
    margin-bottom: 12px;
}

/* Bài nổi: ảnh GỐC, giữ đúng tỉ lệ gốc (không crop). Thẻ img đã có width/height thật
   nên trình duyệt tính sẵn khung — chỉ cần height:auto để ảnh co theo bề ngang. */
.item-top .blog-img img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

    /* Không đọc được kích thước file (ảnh thiếu trên đĩa) → khoá tạm 4:3 để trang không nhảy.
       Vẫn contain để không xén mất chi tiết. */
    .item-top .blog-img.is-ratio-fallback img {
        aspect-ratio: 4 / 3;
        object-fit: contain;
        background-color: var(--article-thumb-bg);
    }

/* Bài trong danh sách: khung 4:3 đồng đều để lưới thẳng hàng, nhưng ảnh hiển thị
   CONTAIN — thấy trọn ảnh, không xén mất chi tiết (ảnh dọc/vuông trước đây bị
   cover cắt cụt hai đầu).

   Nền + bo góc + padding đặt ở WRAPPER .blog-img, không đặt ở thẻ img. Lý do:
   trang chi tiết bài viết có sẵn rule của theme ".blog-single .blog-img
   { background-color: var(--smoke-color) }" — nó tô nền xám lên chính wrapper,
   mà wrapper thì không bo góc, nên dù img có border-radius thì vẫn thấy một
   hình chữ nhật xám vuông góc bao ngoài. Tô nền ngay trên wrapper là ghi đè
   luôn rule đó, đồng thời padding 5px tạo viền xám mỏng đều quanh ảnh.

   Phải VIẾT KÈM biến thể có `.blog-single` ở đầu: theme còn hai rule nữa —
   ".blog-single .blog-img { max-height: 500px; display: flex }" và
   ".blog-single .blog-img img { object-fit: cover }". Cái sau có độ ưu tiên
   (0,3,0), CAO HƠN ".item-list .blog-img img" (0,2,0), nên nếu chỉ viết selector
   ngắn thì trong trang bài viết ảnh vẫn bị cover cắt cụt như cũ. */
:root {
    /* Nhạt hơn --smoke-color (#F3F3F3) — chỉ đủ để phân biệt vùng khung với nền trắng. */
    --article-thumb-bg: #FAFAFA;
}

.item-list .blog-img,
.blog-single .item-list .blog-img {
    display: block;
    max-height: none;
    background-color: var(--article-thumb-bg);
    border-radius: 8px;
    padding: 5px;
    overflow: hidden;
}

.item-list .blog-img img,
.blog-single .item-list .blog-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 5px;
}

/* Mobile: ảnh chiếm trọn bề ngang nên không cần ép khung cho thẳng hàng nữa —
   bỏ tỉ lệ để ảnh hiện đúng kích thước thật của nó, không còn dải xám hai bên. */
@media (max-width: 767px) {
    .item-list .blog-img img,
    .blog-single .item-list .blog-img img {
        aspect-ratio: auto;
        height: auto;
    }
}

.item-top h2,
.item-list h3 {
    margin-bottom: 8px;
    text-transform: uppercase;   /* site cũ in hoa bằng .ToUpper() phía server */
}

.item-top h2 a,
.item-list h3 a {
    color: var(--body-color);
}

    .item-top h2 a:hover,
    .item-list h3 a:hover {
        color: var(--theme-color);
    }

.item-top .blog-meta,
.item-list .blog-meta {
    margin-bottom: 8px;
}

/* Cắt dòng dùng chung — .line-2 đã có ở phần [A], bổ sung 3/4 dòng.
   Gom thuộc tính chung vào một rule thay vì lặp lại từng biến thể. */
.line-2,
.line-3,
.line-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-3 { -webkit-line-clamp: 3; }
.line-4 { -webkit-line-clamp: 4; }

/* Mobile: mô tả bài viết hiện ĐỦ, không cắt dòng (PC vẫn tối đa 4 dòng).
   Chỉ gỡ trong danh sách bài viết để không đụng các chỗ khác dùng .line-*. */
@media (max-width: 767px) {
    .item-top .line-4,
    .item-list .line-4 {
        display: block;
        overflow: visible;
        -webkit-line-clamp: none;
    }
}


/* ==========================================================================
   18. SIDEBAR TIN TỨC — ViewComponent BlogSidebar
   ==========================================================================
   a) Tiêu đề widget có LINK: theme có rule ".widget_nav_menu a" (display:block,
      padding 15px, font 16px, viền dưới nét đứt) — độ ưu tiên cao hơn
      ".widget_title a" nên link trong tiêu đề bị vẽ y như một mục menu: chữ nhỏ,
      thừa khoảng trắng, thêm gạch đứt, và đẩy gạch đỏ tụt xuống. Trả link về
      dạng chữ thường của tiêu đề.
   b) Tiêu đề in hoa: site cũ in hoa bằng .ToUpper() phía server; ở đây để CSS lo.
   c) Khối "Sản phẩm mới" xếp 2 cột card dùng chung (Partials/_ProductCard) —
      nới chỗ bằng cách giảm padding widget, không viết lại card riêng. */
.widget_nav_menu > .widget_title a {
    display: inline;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
}

    /* Theme chèn mũi tên '\f0da' trước MỌI link trong .widget_nav_menu — ở tiêu đề
       nó nằm đè lên chữ cái đầu. Chỉ cấp 1 của ul.menu được theme miễn, tiêu đề thì không. */
    .widget_nav_menu > .widget_title a:before {
        content: none;
    }

.sidebar-area .widget_title {
    text-transform: uppercase;
}

/* Widget chứa card sản phẩm: 2 card mỗi hàng trong cột sidebar hẹp nên bóp
   padding của widget (biến sẵn có của theme) và hạ cỡ tên sản phẩm. */
.sidebar-area .widget--products {
    --widget-padding-x: 20px;
    --widget-padding-y: 25px;
}

    .sidebar-area .widget--products .product-title {
        font-size: 15px;
        line-height: 1.35;
    }

    .sidebar-area .widget--products .product-content {
        padding-left: 10px;
        padding-right: 10px;
    }

/* PC: widget cuối sidebar dính lại và cuộn theo trang (không cần JS).
   HAI điều kiện bắt buộc, thiếu một là sticky im lặng không chạy:

   1) Không tổ tiên nào được là scroll container. Theme đặt `body{overflow-x:hidden}`
      → body thành scroll container, sticky bám vào body (cao đúng bằng nội dung)
      nên KHÔNG BAO GIỜ kích hoạt. `overflow: clip` cắt tràn ngang y hệt nhưng
      KHÔNG tạo scroll container ⇒ sticky bám lại viewport. Bọc @supports để
      trình duyệt cũ giữ nguyên `hidden` của theme.
   2) Cha trực tiếp phải cao hơn phần tử dính. `aside.sidebar-area` cao đúng bằng
      các widget của nó ⇒ quãng dính gần bằng 0. Cột Bootstrap thì đã stretch cao
      bằng cột nội dung, nên cho aside height:100% để mượn chiều cao đó.

   top = 30px: bám sát mép trên cho đỡ phí chiều cao màn hình. Thanh menu dính
   (mục 4) chỉ hiện lại khi cuộn NGƯỢC lên nên lúc đó có thể chồng lên widget. */
@supports (overflow: clip) {
    body {
        overflow-x: clip;
    }
}

@media (min-width: 992px) {
    .sidebar-area {
        height: 100%;
    }

    .sidebar-area .widget--products {
        position: sticky;
        top: 30px;
    }
}

/* ==========================================================================
   19. KHỐI THÔNG TIN DOANH NGHIỆP — trang chi tiết bài viết
   ==========================================================================
   Partials/_ContactInfoBlock nằm NGOÀI .blog-content (nó là anh em của
   .blog-content bên trong .blog-single), mà toàn bộ padding của bài viết lại
   nằm ở ".blog-single .blog-content { padding: 20px 20px 40px }". Hệ quả:
   khối liên hệ dính sát viền trái của khung .blog-single, lệch hẳn 20px so
   với chữ ngay phía trên nó — và không có đường kẻ ngăn với nội dung bài.

   Cho nó tự ôm padding giống .list-same ("TIN LIÊN QUAN" cũng là khối ngoài
   .blog-content và đã xử lý đúng cách này), thay vì nhét partial vào trong
   .blog-content — để nội dung TinyMCE và khối liên hệ không dùng chung
   typography của .blog-content.

   KHÔNG có border-top: khối này là phần tiếp nối tự nhiên của bài viết (thông
   tin công ty đứng tên bài), kẻ ngang làm nó trông như một khối rời. Khác với
   .list-same — "TIN LIÊN QUAN" đúng là khối riêng nên vẫn giữ đường kẻ. */
.blog-single .contact-block {
    padding: 0 20px 30px 20px;
}

/* Dòng thứ 2 trở đi trong cùng một nhóm (điện thoại thứ 2, ngày làm việc tiếp
   theo…) không lặp lại icon — thụt trái đúng bằng bề ngang icon (.contact-item i
   { width: 25px }) để mọi dòng vẫn thẳng lề nhau. */
.contact-item--sub {
    padding-left: 25px;
}

/* Bám đúng bậc padding ngang của .blog-content ở từng breakpoint (20 → 30 ở
   ≤1399 → 20 ở ≤1199 → 10 ở ≤575) để hai khối luôn thẳng lề nhau. */
@media (max-width: 1399px) {
    .blog-single .contact-block { padding-left: 30px; padding-right: 30px; }
}

@media (max-width: 1199px) {
    .blog-single .contact-block { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 575px) {
    .blog-single .contact-block { padding-left: 10px; padding-right: 10px; }
}

/* ==========================================================================
   20. TRANG ĐẠI LÝ (/dai-ly) — khối đầu trang + lọc khu vực
   ==========================================================================
   Khối đầu trang gói gọn MỘT dòng: tiêu đề bên trái, chọn khu vực bên phải.
   Bản cũ xếp 2 tầng (tiêu đề có gạch chân, rồi một hàng "Chọn khu vực :" +
   <select> trải hết bề ngang) nên chiếm chỗ gấp đôi mà không thêm thông tin.

   Dropdown dùng lại component .ss-dd của ô tìm kiếm thay cho <select> gốc —
   <select> để trình duyệt/hệ điều hành tự vẽ nên trông lạc hẳn khỏi giao diện
   site (xem ảnh: nền xanh hệ thống, font hệ thống). .ss-dd đặt trên nền đỏ của
   .box--search nên chỉ cần bỏ viền xám mặc định. */
.agency-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.agency-head .agency-title {
    margin-bottom: 0;      /* đang là khối một dòng — không cần khoảng cách dưới */
    border-bottom: 0;      /* gạch chân chỉ hợp lý khi tiêu đề đứng riêng một tầng */
}

/* Dropdown khu vực: rộng thoải mái cho tên dài nhất ("Huyện Thuỷ Nguyên (7)"). */
.agency-dd { flex: 0 0 auto; }

.agency-dd .ss-dd__toggle {
    min-width: 260px;
    border-color: transparent;
}

/* Danh sách khu vực dài hơn chiều cao màn hình ở mobile → cho cuộn trong menu,
   neo phải để không tràn ra ngoài mép phải của khối. */
.agency-dd .ss-dd__menu {
    left: auto;
    right: 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

@media (max-width: 575px) {
    .agency-head { gap: 12px; }

    /* Màn hẹp: xuống dòng và cho dropdown chiếm trọn bề ngang thay vì ép 260px. */
    .agency-dd { flex: 1 1 100%; }
    .agency-dd .ss-dd__toggle { min-width: 100%; }
}

/* Nút "Xem thêm" của từng khu vực: mỗi khu vực chỉ hiện 10 dòng đầu (xem
   Views/Agency/Index.cshtml + site.js module 8). Nút nằm ngay dưới bảng,
   căn giữa, và tự ẩn khi đã mở hết dòng. */
.agency-more {
    margin-top: 12px;
    text-align: center;
}

.agency-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 26px;
    font-size: 15px;
    font-weight: 500;
    color: var(--title-color);
    background: #FAFAFA;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    transition: all .3s ease;
}

.agency-more__btn:hover {
    color: #fff;
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.agency-more__count { opacity: .7; }

.agency-more__btn:active { transform: translateY(1px); }

/* Hiệu ứng giãn dùng CHUNG khuôn với khối "Thông tin sản phẩm" ở trang chi tiết
   sản phẩm (.pd-info): max-height chạy theo cubic-bezier(.4,0,.2,1), thời lượng do
   JS đặt inline tỉ lệ với quãng giãn, nút mờ dần + trôi xuống trước khi bị gỡ.
   Chiều cao chạy trên .table-responsive (khối cuộn bao ngoài) chứ không trên từng
   <tr> — chiều cao hàng bảng không transition đáng tin ở nhiều engine. */
.agency-more__btn i { transition: transform .2s ease; }
.agency-more__btn:hover i { transform: translateY(2px); }

.agency-more__btn.is-hiding {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .agency-more__btn i,
    .agency-more__btn { transition: none; }
}

/* ==========================================================================
   21. TRANG LIÊN HỆ (/lien-he) — module tự chứa `ct-*`
   ==========================================================================
   Bố cục cũ: cột trái 4/12 nhồi toàn bộ thông tin doanh nghiệp theo chiều dọc,
   cột phải 8/12 xếp bản đồ TRÊN form. Hệ quả: cột trái dài ngoằng, form bị đẩy
   xuống dưới màn hình đầu tiên, mà hai khối lại lệch chiều cao hẳn nhau.

   Bố cục mới: một hàng thông tin doanh nghiệp trên cùng, rồi form và bản đồ
   chia đôi 50-50 — hai khối cùng chiều cao, cùng nhìn thấy ngay không cần cuộn.

   KHÔNG dùng .contact-info/.contact-form3/.form-control của theme: chúng bị
   ràng buộc bởi lưới và style riêng của theme (ô nhập viền đậm, focus đổi màu
   viền + đổ bóng). Module này tự chứa để kiểm soát hết. */

/* ── Tên doanh nghiệp + mô tả, căn giữa ───────────────────────────────── */
.ct-intro {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.ct-intro__name {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--title-color);
}

.ct-intro__desc { margin: 0; font-size: 15px; line-height: 1.65; color: #6b7280; }

/* ── Hàng thông tin doanh nghiệp ───────────────────────────────────────── */
.ct-info {
    display: grid;
    /* auto-fit: bao nhiêu mục có thật thì chia bấy nhiêu cột, không cần biết trước
       số lượng — địa chỉ/điện thoại/email/giờ làm việc/Zalo đều là tuỳ chọn. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;                    /* các thẻ TÁCH RỜI nhau, không dính thành một dải */
    margin-bottom: 30px;
}

/* Icon nằm TRÊN, thông tin xếp bên dưới, cả thẻ căn giữa. */
.ct-info__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 26px 20px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.ct-info__item:hover {
    border-color: #dfe3e8;
    box-shadow: 0 8px 24px rgba(18, 18, 18, .07);
}

.ct-info__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(198, 22, 27, .08);
    color: var(--theme-color);
    font-size: 20px;
}

.ct-info__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Nhãn của mục — thứ DUY NHẤT in đậm trong thẻ. */
.ct-info__label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--title-color);
}

.ct-info__value {
    font-size: 15px;
    font-weight: 400;             /* nội dung KHÔNG in đậm, kể cả tên ngày ở giờ làm việc */
    line-height: 1.5;
    color: #5c636d;
    word-break: break-word;
}

a.ct-info__value { text-decoration: none; }
a.ct-info__value:hover { color: var(--theme-color); }

/* ── Form + bản đồ 50-50 ───────────────────────────────────────────────── */
.ct-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;          /* hai thẻ luôn bằng chiều cao nhau */
}

.ct-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
}

.ct-card__head { margin-bottom: 22px; }

.ct-card__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--title-color);
}

.ct-card__sub { margin: 0; font-size: 14px; color: #6b7280; }

/* ── Ô nhập ────────────────────────────────────────────────────────────────
   Kiểu "filled": nền xám nhạt, KHÔNG viền ở cả trạng thái nghỉ lẫn focus —
   theme vẽ viền 1px đậm rồi khi focus lại đổi màu viền + đổ bóng, nhìn rối.
   Focus vẫn có phản hồi rõ ràng (nền chuyển trắng + bóng nổi nhẹ), chỉ là
   không phải bằng đường viền. Cao 54px thay vì co theo font như mặc định. */
.ct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ct-field { min-width: 0; }
.ct-field--full { grid-column: 1 / -1; }

.ct-field input,
.ct-field textarea {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: var(--title-color);
    font-size: 15px;
    line-height: 1.5;
    transition: border-color .2s ease;
}

.ct-field input { height: 54px; }
.ct-field textarea { min-height: 148px; resize: vertical; }

/* Placeholder 15px — thống nhất với ô nhập ở module gia công OEM. */
.ct-field input::placeholder,
.ct-field textarea::placeholder {
    font-size: 15px;
    color: #9ca3af;
}

/* Khi bấm/focus: KHÔNG thêm viền, KHÔNG outline, KHÔNG đổ bóng — chỉ đậm màu
   đường viền sẵn có lên một bậc. */
.ct-field input:focus,
.ct-field textarea:focus,
.ct-field input:focus-visible,
.ct-field textarea:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: #c9ced6;
}

/* Chrome tô nền vàng cho ô đã lưu — ép lại nền của module. */
.ct-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--title-color);
}

/* ── Câu đố xác minh dự phòng ──────────────────────────────────────────── */
.ct-captcha { display: flex; align-items: center; gap: 12px; }

.ct-captcha__q {
    flex: 0 0 auto;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-radius: 10px;
    background: rgba(198, 22, 27, .08);
    color: var(--theme-color);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    user-select: none;
}

.ct-captcha input { flex: 1 1 auto; }

/* ── Nút gửi ───────────────────────────────────────────────────────────── */
.ct-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 54px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    background: var(--theme-color);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .12s ease;
}

.ct-submit:hover, .ct-submit:focus { background: #a3161a; color: #fff; }
.ct-submit:active { transform: translateY(1px); }

.ct-submit--ghost {
    width: auto;
    background: transparent;
    border: 1px solid #e0e3e8;
    color: var(--title-color);
}
.ct-submit--ghost:hover { background: var(--smoke-color); color: var(--title-color); }

/* ── Thông báo ─────────────────────────────────────────────────────────── */
.ct-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.ct-alert--error { background: #fdecec; color: #b42318; }

/* Nhiều lỗi cùng lúc → liệt kê; một lỗi thì in thẳng, không cần bullet. */
.ct-alert__list { margin: 0; padding-left: 18px; }
.ct-alert__list li + li { margin-top: 3px; }

/* Trạng thái đã gửi — chiếm trọn thẻ, căn giữa. */
.ct-sent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 30px 10px;
}

.ct-sent__icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #e7f6ec;
    color: #1a7f37;
    font-size: 28px;
}

.ct-sent__title { margin: 0; font-size: 21px; font-weight: 700; color: var(--title-color); }
.ct-sent__text  { margin: 0 0 12px; font-size: 15px; color: #6b7280; max-width: 380px; }

/* ── Thẻ bản đồ ────────────────────────────────────────────────────────── */
.ct-map-card { padding: 0; overflow: hidden; }

/* Bản đồ ăn hết chiều cao còn lại của thẻ → luôn bằng chiều cao thẻ form.
   min-height giữ chỗ khi thẻ form ngắn (ví dụ sau khi gửi xong). */
.ct-map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 420px;
    border: 0;
    display: block;
}

.ct-map--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--smoke-color);
    color: #c2c7cf;
    font-size: 40px;
}

.ct-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 22px;
    border-top: 1px solid #e9ecef;
}

.ct-social__label { font-size: 14px; font-weight: 600; color: var(--title-color); }
.ct-social__links { display: flex; gap: 8px; }

.ct-social__links a {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--smoke-color);
    color: var(--title-color);
    font-size: 15px;
    transition: background .2s, color .2s;
}

.ct-social__links a:hover { background: var(--theme-color); color: #fff; }

/* ── Màn hẹp ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    /* Dưới 992px hai cột 50-50 hẹp tới mức form bị bóp — xếp chồng, form lên trước
       vì đó mới là việc người dùng vào trang này để làm. */
    .ct-main { grid-template-columns: 1fr; }
    .ct-map  { min-height: 320px; }
}

@media (max-width: 575px) {
    .ct-card    { padding: 20px; }
    .ct-grid    { grid-template-columns: 1fr; }
    .ct-info    { gap: 14px; }
    .ct-info__item { padding: 20px 16px; }
    .ct-card__title { font-size: 19px; }
    .ct-intro__name { font-size: 22px; }
}