@layer base; :root {
    --main-cl: #1072BA;
    --sub-cl: #F27325;
    --container-w: 72.917rem;
}

/* PAGE LOAD TRANSITION */
body.unscrollable {
    overflow: hidden;
}

.load_home_page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    transition: 1s all;
    opacity: 1;
    background: transparent;
}

.load_home_page .mask {
    transition: 1s all ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
}

.load_home_page .mask span {
    display: block;
    width: 100%;
    height: 20%;
    position: absolute;
    left: 0;
    transition: 1s all ease-in-out;
    background-color: #1765B0;
}

.load_home_page .mask span:nth-child(even) {
    left: unset;
    right: 0;
}

.load_home_page .mask span:nth-child(1) { top: 0; }
.load_home_page .mask span:nth-child(2) { top: 20%; }
.load_home_page .mask span:nth-child(3) { top: 40%; }
.load_home_page .mask span:nth-child(4) { top: 60%; }
.load_home_page .mask span:nth-child(5) { top: 80%; }

.load_home_page--logo {
    width: 12rem;
    max-width: 60%;
    height: auto;
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: .8s all ease-in-out;
}

.load_home_page.complete {
    visibility: hidden;
}

.load_home_page.complete .mask span {
    width: 0;
    opacity: 0;
    transition-delay: .8s;
}

.load_home_page.complete .load_home_page--logo {
    transition-delay: .8s;
    opacity: 0;
}

.tile-reveal {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999;
    background: #fff;
}

.tile-reveal-square {
    flex: 1 1 auto;
    width: 3.9rem;
    height: 3.9rem;
    background-color: #1765B0;
    opacity: 1;
}

body,input,textarea,select,button {
    font-family: 'Plus Jakarta Sans',sans-serif;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

body::-webkit-scrollbar {
    width: 0.417rem;
    background-color: #cedbff;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--main-cl);
}

input, optgroup, select, textarea {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
    outline: none !important;
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

body {
    overflow-x: clip;
    font-size: .9rem;
    color: #1765B0;
    font-weight: 400;
    background: #fff;
}

.grid-container {
    max-width: var(--container-w);
    margin-left: auto;
    margin-right: auto;
}

#search-lightbox {
    width: 37.5rem;
    max-width: 100%;
}

#search-lightbox .search-lightbox-title {
    margin-bottom: 1.667rem;
    font-size: 1.979rem;
    line-height: 1.2;
    font-weight: 700;
}

#search-lightbox .search-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.083rem;
    gap: 0.521rem;
}

#search-lightbox .search-keywords > a {
    -webkit-border-radius: 2.604rem;
    -moz-border-radius: 2.604rem;
    border-radius: 2.604rem;
    font-size: 0.833rem;
    line-height: 1.042rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 0.3125rem 0.833rem;
    display: flex;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

#search-lightbox .search-keywords > a:hover {
    background-color: #fff;
    color: #000
}

#search-lightbox .flex-row > div {
    display: flex;
}

#search-lightbox .flex-row {
    align-items: unset;
    display: flex;
    -webkit-border-radius: 2.604rem;
    -moz-border-radius: 2.604rem;
    border-radius: 2.604rem;
    overflow: hidden;
}

#search-lightbox input {
    height: 100%;
    border: none;
}

#search-lightbox .button.icon {
    line-height: normal;
    min-height: unset;
    height: 100%;
    border: none;
    min-width: unset;
    background-color: #FFF;
    display: flex;
    align-items: center;
}

#search-lightbox .button.icon i {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    color: #000
}

#search-lightbox input {
    font-size: 1.042rem;
    line-height: 1.25rem;
    padding-left: 1.5625rem;
    box-shadow: unset;
    height: 2.604rem;
}

.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-content #search-lightbox {
    transform: translateY(-70%);
}

.load_home_page svg {
    width: 20.833rem;
    max-width: 95%;
    height: auto;
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.load_home_page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999999999;
    transition: 1s all;
    opacity: 1;
    background: transparent;
}

div.load_home_page .mask {
    /*background-color: #00BDFFFF;*/
    transition: 1s all ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
}

div.load_home_page.complete .mask {
    background-color: transparent;
}

div.load_home_page .mask span {
    display: block;
    width: 100%;
    height: 20%;
    position: absolute;
    left: 0;
    transition: 1s all ease-in-out;
    background-color: var(--main-cl);
    /*backdrop-filter: blur(40px);*/
}

div.load_home_page .mask span:nth-child(even) {
    left: unset;
    right: 0;
}

div.load_home_page .mask span:nth-child(1) {
    top: 0;
}

div.load_home_page .mask span:nth-child(2) {
    top: 20%;
}

div.load_home_page .mask span:nth-child(3) {
    top: 40%;
}

div.load_home_page .mask span:nth-child(4) {
    top: 60%;
}

div.load_home_page .mask span:nth-child(5) {
    top: 80%;
}

.load_home_page.complete {
    visibility: hidden;
}

div.load_home_page.complete .mask span {
    width: 0;
    opacity: 0;
    transition-delay: .8s;
}

#respond input#wp-comment-cookies-consent {
    height: auto !important;
    margin: 0 10px 0 0 !important;
}

.load_home_page.complete svg {
    transition-delay: 0.8s;
    opacity: 0;
}

.load_home_page rect, .load_home_page path {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.path-1 {
    animation-name: Signature2;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(2, .25, .43, .96);
    stroke: #FFF;
    stroke-width: 1px;
    stroke-dasharray: 2108;
    stroke-dashoffset: 2108;
    fill: transparent;
}

.path-2 {
    animation-name: Signature1;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(2,.25,.43,.96);
    stroke: var(--sub-cl);
    stroke-width: 1px;
    stroke-dasharray: 2108;
    stroke-dashoffset: 2108;
    fill: transparent;
}

.load_home_page.complete .path-2 {
    fill: var(--sub-cl);
}

.load_home_page.complete .path-1 {
    fill: #FFF
}

@keyframes Signature1 {
    to {
        stroke: var(--sub-cl);
        stroke-dashoffset: 0;
    }
}

@keyframes Signature2 {
    to {
        stroke: #FFF;
        stroke-dashoffset: 0;
    }
}

.tile-reveal {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: row wrap;
    align-self: flex-start;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 99;
    background: #fff;
}

.tile-reveal-square {
    flex: 1 1 auto;
    width: 80px;
    height: 80px;
    background-color: var(--main-cl);
    opacity: 1;
}

.wrap-enter-site {
    position: fixed;
    width: 100%;
    height: auto;
    bottom: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
}

.search-page {
    padding: 5.208rem 0;
}

.search-page h1 {
    margin-bottom: 2.604rem;
}

.search-tabs .search-tabs-title {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    gap: 0.833rem;
}

.search-tabs .search-tabs-title .search-tab-title {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--fs-color-primary);
    font-size: 0.833rem;
    line-height: 1.042rem;
    color: var(--fs-color-primary);
    -webkit-border-radius: 0.521rem;
    -moz-border-radius: 0.521rem;
    border-radius: 0.521rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s;
}

.search-tabs .search-tab-title:hover, .search-tabs .search-tab-title.active {
    background-color: var(--fs-color-primary);
    color: #FFF;
}

.search-tabs .search-tab-content {
    display: none;
}

.search-tabs .search-tab-content.active {
    display: block;
}

.search-tabs .search-empty {
    color: #333;
    font-size: 1.25rem;
    line-height: 2.083rem;
    padding: 0.521rem;
}

.search-tabs .search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1.667rem;
    margin-bottom: 1.5625rem;
}

.search-tabs .search-item h3 {
    margin: 0.521rem 0 0 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

/* ================================================================
   PAGE STYLES
   ================================================================ */
/* ============================================================
   chi-tiet-san-pham
   ============================================================ */
.container-width,.container,.row {
    max-width: 73rem!important;
}

/* ===== BREADCRUMB ===== */
.ct_breadcrumb_sec {
    background: #fff;
    padding: .8rem 0;
    border-bottom: 1px solid #EEF4FB;
}

.ct_breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.ct_breadcrumb a,.ct_breadcrumb span {
    font-size: .68rem;
    color: #6B6B6B;
    text-decoration: none;
}

.ct_breadcrumb a:hover {
    color: #1765B0;
}

.ct_breadcrumb .cur {
    color: #1765B0;
    font-weight: 600;
}

/* ===== PRODUCT DETAIL ===== */
.ct_sec {
    padding: 0 0 3rem;
    background: #fff;
}

/* --- Gallery --- */
.ct_gallery {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.ct_gallery_main {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    height: 23rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct_gallery_main_img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    height: auto!important;
    display: block;
}

.ct_gallery_nav {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ct_gallery_arr {
    width: 2rem;
    height: 2rem;
    border-radius: 0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: .2s;
    padding: 0;
    margin: 0;
}

.ct_gallery_arr:hover {
    background: #1765B0;
    border-color: #1765B0;
}

.ct_gallery_arr:hover path {
    stroke: #fff;
}

.ct_gallery_thumbs {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.ct_gallery_thumb {
    width: 100%;
    height: 4rem;
    flex-shrink: 0;
    border-radius: 0;
    background: transparent;
    border: 1.5px solid transparent;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}

.ct_gallery_thumb img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    height: auto!important;
}

.ct_gallery_thumb.active,.ct_gallery_thumb:hover {
    border-color: #1765B0;
}

/* --- Product Info --- */
.ct_info {
    padding-left: 2rem;
}

.ct_sku {
    margin: 0 0 .4rem;
    letter-spacing: .04em;
}

.ct_cat_chip {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 .7rem;
    border-radius: 2rem;
    background: #EEF4FB;
    font-size: .62rem;
    font-weight: 700;
    color: #1765B0;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .7rem;
    display: none;
}

.ct_name {
    font-size: 2rem;
    font-weight: 400;
    color: #1765B0;
    line-height: 1.25;
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #1765B01A;
}

.ct_divider {
    border: none;
    border-top: 1px solid #E8EFF8;
    margin: 0 0 1rem;
    display: none;
}

.ct_mfr_row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.ct_mfr_label {font-weight: 700;}

.ct_mfr_val {
    font-weight: 400;
    color: #1765B0;
}

.ct_desc_label {
    font-size: large;
    font-weight: 700;
    margin: 0 0 .4rem;
}

.ct_desc {
    line-height: 1.8;
    margin: 0 0 1.5rem;
}

.ct_cta_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 2.3rem;
    background: #1765B0;
    border: none;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: .25s;
    letter-spacing: .02em;
}

.ct_cta_btn:hover {
    background: #0d4e8a;
    color: #fff;
    text-decoration: none;
}

/* Specs accordion */
.ct_specs {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #1765B01A;
}

.ct_specs_toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    margin-bottom: .5rem;
}

.ct_specs_toggle.collapsed {
    border-radius: .35rem;
}

.ct_specs_title {
    font-size: .9rem;
    font-weight: 700;
    margin: 0;
}

.ct_specs_icon {
    transition: transform .25s;
    flex-shrink: 0;
}

.ct_specs_toggle.collapsed .ct_specs_icon {
    transform: rotate(-90deg);
}

.ct_specs_body {
    border-top: none;
    overflow: hidden;
    background: #1765B01A;
    padding: 1.2rem;
    border-radius: .75rem;
}

.ct_specs_body.hidden {
    display: none;
}

.ct_specs_table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.ct_specs_table tr:nth-child(even) {
}

.ct_specs_table td {
    padding: .75rem 1rem;
    font-size: .72rem;
    color: #3A3838;
    border-bottom: 1px solid #1765B01A;
}

.ct_specs_table td:first-child {
    color: #1765B0;
    width: 55%;
    font-weight: 700;
}

.ct_specs_table td:last-child {
    font-weight: 400;
    text-align: right;
    color: #1765B0;
}

.ct_specs_table tr:last-child td {
    border-bottom: none;
}

/* ===== RELATED PRODUCTS ===== */
.rel_sec {
    padding: 2.5rem 0 3rem;
}

.rel_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.7rem;
}

.rel_title {
    font-size: 2rem;
    font-weight: 400;
    color: #1765B0;
    margin: 0;
}

.rel_arrows {
    display: flex;
    gap: .4rem;
}

.rel_arrows .arrow_slider {
    position: static;
    cursor: pointer;
}

.rel_slider_wrap {
    overflow: hidden;
}

.rel_slider_track {
    display: flex;
    gap: 1rem;
    transition: transform .35s ease;
}

/* Product card */
.pc_card {
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .25s;
    flex: 0 0 calc(33.333% - .67rem);
}



.pc_card_img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 2;
    scale: 1;
    transition: .5s all;
}

.pc_card_brand {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.pc_card_body {
    padding: 1rem;
}

.pc_card_name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1765B0;
    line-height: 1.45;
    margin: 0 0 .45rem;
}

.pc_card_code {
    font-size: .8rem;
    color: #1765B0;
    margin: 0 0 .15rem;
}

.pc_card_mfr {
    font-size: .8rem;
    color: #1765B0;
    margin: 0;
}

/* ===== CTA ===== */
.project_cta {
    position: relative;
    overflow: hidden;
}

.project_cta_bg {
    width: 100%;
    height: 24rem;
    object-fit: cover;
    display: block;
}

.project_cta_overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,30,65,.75);
}

.project_cta_inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

.project_cta_content {
    max-width: 34rem;
}

.project_cta_title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 .8rem;
}

.project_cta_desc {
    color: rgba(255,255,255,.82);
    line-height: 1.8;
    margin: 0 0 1.8rem;
}

.project_cta_content a.button_link {
    filter: brightness(0) invert(1);
}

.jd_breadcrumb ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .3rem;
}

.jd_breadcrumb ul li {
    margin: 0;
    display: flex;
}

.jd_breadcrumb ul li svg {
    height: 1.2rem;
    margin: .2rem;
}

.jd_breadcrumb ul li a {
    font-size: 0.9rem;
}

.jd_breadcrumb ul li a:hover {
    color: #1765B0;
}

.jd_breadcrumb ul li:last-child {
}

/* Section wrapper */
.jd_sec {
    padding: 0 0 5rem;
}

/* Main content box */
.jd_main {
    background: #fff;
    border-radius: .4rem;
}

.jd_meta_row {
    margin-bottom: 1rem;
    line-height: 1.5;
}

.jd_meta_row .lbl {
    font-weight: 600;
}

/* Tags */
.jd_tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .9rem 0 3rem;
}

.jd_tag {
    display: inline-flex;
    align-items: center;
    height: 1.7rem;
    padding: 0 .6rem;
    border: 1px solid #C5D8F0;
    border-radius: 2rem;
    font-size: 0.8rem;
    color: #1765B0;
    white-space: nowrap;
    font-weight: 600;
}

.jd_tag .lbl {
    font-weight: 400;
    color: #1765B0;
    margin-right: .25rem;
}

/* Ph */
.jd_welfare {
    background: #F1F6F8;
    border-radius: 0;
    padding: 1.5rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(32.5px);
}

.jd_welfare_title {
    font-size: 1rem;
    font-weight: 600;
    color: #1765B0;
    margin: 0 0 .9rem;
}

.jd_welfare_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.jd_welfare_item {
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1.4;
}

.jd_welfare_item::before {
    content: '';
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border: 1.5px solid #1765B0;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.5L4 7.5L8 3' stroke='%231765B0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/80% no-repeat;
}

/* Sections */
.jd_section {
    padding: 1.5rem 0;
}

.jd_section h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1765B0;
    margin: 0 0 .7rem;
}

.jd_section p {
    line-height: 1.8;
    margin: .3rem 0;
}

.jd_section ul {
    padding-left: 1.1rem;
    margin: .4rem 0;
}

.jd_section ul li {
    line-height: 1.8;
    margin-bottom: .2rem;
}

/* Share */
.jd_share {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 0;
    border-top: 1px solid #EEF4FB;
    margin-bottom: 1.5rem;
}

.jd_share span {
    color: #1765B0;
    font-weight: 600;
}

.jd_share a {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D6E4F5;
    border-radius: 0.25rem;
    transition: .25s;
}

.jd_share a:hover {
    border-color: #1765B0;
    background: #EEF4FB;
}

/* Apply form */
.jd_form_box {
    background: linear-gradient(135deg,#1765B0 0%,#0d4f90 100%);
    border-radius: .4rem;
    padding: 2rem;
}

.jd_form_box h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1.2rem;
}

.jd_form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    margin-bottom: .7rem;
}

.jd_form_row.single {
    grid-template-columns: 1fr;
}

.jd_form_box input,.jd_form_box textarea {
    width: 100%;
    height: 2.4rem;
    border: none;
    border-radius: .3rem;
    padding: 0 .8rem;
    font-size: .75rem;
    font-family: inherit;
    color: #3A3838;
    box-sizing: border-box;
    outline: none;
}

.jd_form_box textarea {
    height: 4.5rem;
    padding: .6rem .8rem;
    resize: none;
}

.jd_form_btns {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .8rem;
    flex-wrap: wrap;
}

.jd_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.4rem;
    padding: 0 1.4rem;
    border-radius: .3rem;
    font-size: .78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: .25s;
    gap: .4rem;
}

.jd_btn_outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
}

.jd_btn_outline:hover {
    background: rgba(255,255,255,.1);
}

.jd_btn_solid {
    background: #fff;
    color: #1765B0;
    border: 1px solid #fff;
}

.jd_btn_solid:hover {
    background: #EEF4FB;
}

/* Sidebar */
.jd_sidebar_email {
    background: linear-gradient(90deg, #1765B0 47.14%, #3AB2E3 106.45%);
    backdrop-filter: blur(32.5px);
    border-radius: 0;
    padding: 1.5rem;
    margin-bottom: 1.2rem;
    clip-path: polygon(0 0, 85% 0%, 100% 30%, 100% 100%, 0 100%, 0% 50%);
}

.jd_sidebar_email h4 {
    font-weight: 600;
    color: #fff;
    margin: 0 0 .5rem;
    font-size: 1rem;
}

.jd_sidebar_email p {
    color: rgba(255,255,255,.85);
    line-height: 1.5;
    margin: 0;
}

.jd_sidebar_email a {
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
}

.jd_other_title {
    font-size: .9rem;
    font-weight: 700;
    color: #1765B0;
    margin: 0 0 .7rem;
}

.jd_other_list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.jd_other_card {
    display: block;
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 1rem 0;
    text-decoration: none;
    transition: border-color .25s;
    border-top: 1px solid rgba(23, 101, 176, 0.15);
}

.jd_other_card:hover {
    border-color: #1765B0;
    text-decoration: none;
}

.jd_other_card h5 {
    font-weight: 600;
    margin: 0 0 1rem;
    line-height: 1.3;
    color: var(--Main, #1765B0);
    font-size: 1rem;
}

.jd_other_card p {
    margin: 0 0 .6rem;
    line-height: 1.4;
}

.jd_other_card p .lbl {
    font-weight: 600;
}

/* Form đính kèm hồ sơ */
.form_bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.form_file_input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.form_file_label {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}

.form_file_btn {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .9rem;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: .25rem;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: background .2s;
}

.form_file_label:hover .form_file_btn {
    background: rgba(255,255,255,.15);
}

.form_file_name {
    font-size: .72rem;
    color: rgba(255,255,255,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.form_file_hint {
    font-size: .68rem;
    color: rgba(255,255,255,.5);
    margin: .35rem 0 0;
}

/* ============================================================
   chinh-sach
   ============================================================ */
.banner_page {
    position: relative;
    overflow: hidden;
}

.banner_page .img_bg {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    max-height: 100vh;
}

.banner_page_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.banner_page_overlay .row {
    position: relative;
}

.banner_page_box {
    background: #1765B0;
    padding: 1.2rem 2rem 1.5rem;
    display: inline-block;
    min-width: 12rem;
}

.banner_page_box h1 {
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.banner_breadcrumb ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .5rem;
}

.banner_breadcrumb ul li,.banner_breadcrumb ul li a {
    color: rgba(255,255,255,.8);
}

/* Policy section */
.policy_sec_1 {
    padding: 7rem 0;
    background: #fff;
    position: relative;
    /* overflow: hidden; */
}

.policy_sec_1:before, .faq_sec_1:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36rem;
    height: 12.5rem;
    background: url(data:image/svg+xml,%3Csvg%20width%3D%22663%22%20height%3D%22248%22%20viewBox%3D%220%200%20663%20248%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cg%20opacity%3D%220.3%22%3E%0A%3Cpath%20d%3D%22M1.76465%2055.5107C52.7961%2030.2837%20120.95%2027.0176%20195.227%2044.6416C268.557%2062.0411%20347.827%2099.7983%20422.422%20156.839C271.796%2080.9141%20155.586%20103.043%2076.8867%20144.395C37.2649%20165.213%207.15836%20190.9%20-13.042%20211.381C-23.1424%20221.622%20-30.7674%20230.562%20-35.8682%20236.943C-38.4185%20240.134%20-40.3378%20242.685%20-41.6201%20244.439C-42.2613%20245.317%20-42.7435%20245.995%20-43.0654%20246.454C-43.2262%20246.683%20-43.3469%20246.858%20-43.4277%20246.976C-43.4364%20246.988%20-43.4444%20247%20-43.4521%20247.012H-189.462C-177.424%20224.04%20-158.948%20193.455%20-131.373%20161.452L-131.619%20161.24C-131.384%20161.443%20-131.373%20161.452%20-131.372%20161.452C-131.372%20161.452%20-131.371%20161.45%20-131.37%20161.449C-131.368%20161.447%20-131.366%20161.444%20-131.362%20161.44C-131.355%20161.432%20-131.344%20161.419%20-131.329%20161.402C-131.3%20161.369%20-131.257%20161.318%20-131.199%20161.252C-131.083%20161.119%20-130.91%20160.921%20-130.681%20160.661C-130.223%20160.141%20-129.542%20159.373%20-128.648%20158.384C-126.862%20156.404%20-124.226%20153.535%20-120.836%20149.979C-114.055%20142.865%20-104.254%20133.005%20-92.1709%20122.016C-68.0017%20100.035%20-34.7175%2073.5514%201.76465%2055.5107Z%22%20stroke%3D%22%233AB2E3%22%20stroke-width%3D%220.650309%22/%3E%0A%3Cpath%20d%3D%22M73.3613%2024.1084C291.709%20-33.1753%20438.755%2022.3069%20531.299%2092.2705C577.786%20127.415%20610.528%20166.219%20631.648%20196.237C642.208%20211.246%20649.863%20224.058%20654.876%20233.115C657.382%20237.644%20659.228%20241.234%20660.447%20243.691C661.057%20244.92%20661.51%20245.865%20661.811%20246.503C661.904%20246.702%20661.983%20246.872%20662.047%20247.011H512.201L485.693%20209.565L485.597%20209.428H485.568C410.374%20108.352%20306.577%2062.0586%20221.582%2041.0342C179.065%2030.5172%20141.248%2026.3212%20114.059%2024.7549C100.464%2023.9717%2089.526%2023.8461%2081.9854%2023.916C78.2445%2023.9507%2075.3396%2024.0336%2073.3613%2024.1084Z%22%20stroke%3D%22%233AB2E3%22%20stroke-width%3D%220.650309%22/%3E%0A%3C/g%3E%0A%3C/svg%3E) no-repeat left bottom;
    pointer-events: none;
    z-index: 1;
    background-size: contain;
}
/* Sidebar */
.policy_sidebar_title {
    font-size: 1rem;
    font-weight: 700;
    color: #1765B0;
    margin: 0 0 .8rem;
    text-transform: uppercase;
    letter-spacing: .05rem;
}

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

.policy_nav li {
    margin: 0;
    border-top: 1px solid rgba(23, 101, 176, 0.15);
}

.policy_nav li a {
    padding: 1rem 0;
    display: block;
    font-size: 1rem;
    color: #1765B0;
    transition: .5s all;
    line-height: 1.4;
    font-weight: 600;
}

.policy_nav li a:hover,.policy_nav li.active a {
    color: #1765B0;
    font-weight: 600;
}

.policy_nav li a:hover {
    padding: 1rem;
    background: #1765b024;
}

/* Content */
.policy_content h1 {
    font-size: 2.5rem;
    font-weight: 400;
    color: #1765B0;
    margin: 0 0 1rem;
}

.policy_content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1765B0;
    margin: 1.5rem 0 .5rem;
}

.policy_content p,.policy_content li {
    line-height: 1.8;
}

.policy_content ul {
    padding-left: 1.2rem;
    margin: .5rem 0;
}

.policy_content ul li {
    margin-bottom: .3rem;
}

/* ============================================================
   danh-muc-san-pham
   ============================================================ */
/* ===== BANNER ===== */
.sp_banner {
    background: #1765B0;
    position: relative;
    overflow: hidden;
    padding: 5rem;
    clip-path: polygon(0 0, 93% 0%, 100% 25%, 100% 100%, 0 100%, 0% 50%);
}

.sp_banner_svg {
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.sp_breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}

.sp_breadcrumb a,.sp_breadcrumb span {
    font-size: .68rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
}

.sp_breadcrumb a:hover {
    color: #fff;
}

.sp_banner_title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 .9rem;
}

.sp_banner_desc {
    font-size: .78rem;
    color: rgba(255,255,255,.82);
    line-height: 1.8;
    margin: 0;
    max-width: 34rem;
}

/* ===== FILTER BAR ===== */
.sp_filter_sec {
    background: #fff;
    padding: 1.5rem 0;
}

.sp_filter_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    flex-wrap: wrap;
}

.sp_filter_left {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Custom dropdown */
.sp_dd {
    position: relative;
}

.sp_dd_btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 2.6rem;
    padding: 0 .9rem;
    border: 1.5px solid #1765B0;
    border-radius: 0;
    color: #1765B0;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.sp_dd_btn .dd_label {
    font-weight: 400;
}

.sp_dd_btn .dd_val {
    font-weight: 700;
}

.sp_dd_btn svg {
    flex-shrink: 0;
    transition: transform .2s;
}

.sp_dd.open .sp_dd_btn svg {
    transform: rotate(180deg);
}

.sp_dd_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    background: #fff;
    border: 1px solid #D6E4F5;
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(23,101,176,.12);
    z-index: 100;
    padding: 0;
}

.sp_dd.open .sp_dd_menu {
    display: block;
        max-height: 20rem;
    overflow: auto;
}

.sp_dd_item {
    display: block;
    padding: .5rem 1rem;
    font-size: .75rem;
    color: #3A3838;
    cursor: pointer;
    transition: background .15s;
}

.sp_dd_item:hover,.sp_dd_item.active {
    background: #EEF4FB;
    color: #1765B0;
    font-weight: 600;
}

.sp_filter_input::placeholder {
    color: #ABABAB;
}

.sp_filter_input:focus {
    border-color: #1765B0;
}

.sp_filter_search {
    width: 2.5rem;
    height: 2.5rem;
    background: #1765B0;
    border: none;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: .2s;
    margin: 0;
    padding: .1rem;
}

.sp_filter_search:hover {
    background: #0d4e8a;
}

.sp_filter_sort {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: #5A5A5A;
    white-space: nowrap;
}

.sp_filter_sort .sp_dd_btn {
    border-color: transparent;
    padding: 0 .4rem;
}

/* ===== PRODUCT GRID ===== */
.pc_sec {
    padding: 0 0 3rem;
}

.pc_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7.5rem;
    row-gap: 5rem;
}

.pc_card {
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .25s;
    position: relative;
}

.pc_card:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #1765B0;
    transition: .4s width;
    z-index: 4;
}

.pc_card:hover:after {
    width: 100%;
}

.pc_card_top {
    background: #F1F6F8;
    position: relative;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    clip-path: polygon(20% 0%, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 24%);
}

.pc_card_img_hover {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    transition: .5s all;
}

.pc_card:hover .pc_card_img {
    opacity: 0;
}

.pc_card:hover .pc_card_img_hover {
    opacity: 1;
}

/* Load more */
.load_more_wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* ===== CTA ===== */
/* ============================================================
   du-an-sourcing-toan-cau
   ============================================================ */
/* Banner */
.banner_page_box {
    background: #1765B0;
    padding: 1.2rem 2rem 1.5rem;
    display: inline-block;
    min-width: 14rem;
}

/* Section */
.project_sec {
    padding: 5rem 0;
    background: #fff;
}

.project_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3.2rem;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
}

.project_header .mfr_filter_toggle {
    padding: 0;
}

.project_header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1C1C1C;
    margin: 0;
}

/* Filter bar */
.project_cats {
    display: flex;
    gap: .5rem;
    flex-wrap: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.project_cat_btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    height: 2.4rem;
    padding: 0 1.3rem;
    border: 1.5px solid #1765B0;
    border-radius: 0;
    font-weight: 600;
    color: #1765B0;
    background: #fff;
    cursor: pointer;
    transition: .2s;
    text-transform: uppercase;
    margin: 0;
}

.project_cat_btn.active,.project_cat_btn:hover {
    background: #1765B0;
    color: #fff;
}

/* Grid: 3 c */
.project_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .8rem;
}

/* Card */
.project_card {
    position: relative;
    border-radius: .4rem;
    overflow: hidden;
    cursor: pointer;
    height: 14rem;
}

.project_card_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.project_card:hover .project_card_img {
    transform: scale(1.04);
}

.project_card_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 1rem 1rem;
    background: linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.4) 65%,transparent 100%);
}

.project_card_cat {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .3rem;
}

/* L */
/* ===== POPUP ===== */
.popup_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1.5rem;
    overflow-y: auto;
}

.popup_overlay.active {
    display: flex;
}

.popup_modal {
    background: linear-gradient(180deg, #D3E6F9 0%, #F1F6F8 50%);
    border-radius: 0;
    width: 100%;
    max-width: 70rem;
    position: relative;
    margin: auto;
    padding: 3.2rem;
}

.popup_head {
    position: relative;
    background: linear-gradient(135deg,#0d3a7a 0%,#1765B0 100%);
    border-radius: 0;
    padding: 2rem 2.5rem 2rem;
    overflow: hidden;
    min-height: 9rem;
    clip-path: polygon(0 0, 92% 0%, 100% 40%, 100% 100%, 0 100%, 0% 50%);
}

.popup_head_wave {
    /* [next] icon thay bằng dải sóng nằm ngang (382x154), tự có opacity ở <g>, kéo hết chiều rộng header */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    opacity: 1;
    pointer-events: none;
}

.popup_close {
    /* [next] dời ra ngoài popup_head (nền sáng của popup_modal) nên đổi màu nền/hover giống .search_popup_close */
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background: #EEF4FB;
    border: none;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
    z-index: 2;
    padding: 0;
    margin: 0;
}

.popup_close:hover {
    background: #1765B0;
}

.popup_head_cat {
    font-size: .7rem;
    font-weight: 400;
    color: #FFF;
    text-transform: uppercase;
    margin: 0 0 .6rem;
}

.popup_head_title {
    font-size: 2.5rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 .7rem;
}

.popup_head_desc {
    font-size: .9rem;
    color: rgba(255,255,255,.82);
    line-height: 1.7;
    margin: 0;
    max-width: 32rem;
}

.popup_body {
    padding: 2rem 2.5rem 2.5rem;
    max-height: 48vh;
    overflow-y: auto;
}

.popup_sec_head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid #EEF4FB;
}

.popup_sec_num {
    width: 4.15rem;
    height: 4.15rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #1765B0;
    flex-shrink: 0;
    font-weight: 400;
    background: rgba(175, 214, 253, 0.20);
}

.popup_sec_title {
    font-size: 1.5rem;
    font-weight: 400;
    color: #1765B0;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}

.popup_sub {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.popup_sub_content {
    flex: 1;
}

.popup_sub_img {
    width: 25rem;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
}

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

.popup_sub_title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: #1765B0;
}

.popup_sub_text {
    font-size: .9rem;
    line-height: 1.75;
    margin: 0;
}

.popup_section {
    margin-bottom: 2rem;
}

.popup_section:last-child {
    margin-bottom: 0;
}

/* ===== SEARCH POPUP ===== */
.search_popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 65, .55);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding: 6rem 1.5rem 2rem;
    overflow-y: auto;
}

.search_popup.active {
    display: flex;
}

.search_popup_box {
    position: relative;
    width: 40rem;
    max-width: 100%;
    background: #fff;
    border-radius: 0;
    padding: 2.5rem;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,.25);
}

.search_popup_close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background: #EEF4FB;
    border: none;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
}

.search_popup_close svg {
    flex-shrink: 0;
}

.search_popup_close:hover {
    background: #1765B0;
}

.search_popup_close:hover path {
    stroke: #fff;
}

.search_popup_title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1C1C1C;
    margin: 0 0 1.5rem;
}

.search_popup_form {
    display: flex;
    align-items: center;
    gap: .8rem;
    border: 1.5px solid #D6E4F5;
    border-radius: 0;
    padding: .3rem .3rem .3rem 1rem;
    transition: .2s border-color;
}

.search_popup_form:focus-within {
    border-color: #1765B0;
}

.search_popup_form svg {
    flex-shrink: 0;
}

.search_popup_input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: .95rem;
    color: #1C1C1C;
    background: none;
    padding: .7rem 0;
    margin: 0;
}

.search_popup_submit {
    flex-shrink: 0;
    height: 2.6rem;
    padding: 0 1.4rem;
    background: #1765B0;
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    transition: .2s background;
    margin: 0;
}

.search_popup_submit:hover {
    background: #0d4f90;
}

.search_popup_suggest {
    margin-top: 1.5rem;
}

.search_popup_suggest_label {
    display: block;
    font-size: .8rem;
    color: #8C8C8C;
    margin-bottom: .7rem;
}

.search_popup_suggest_list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.search_popup_suggest_list a {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 0;
    border: 1px solid #D6E4F5;
    font-size: .82rem;
    color: #1765B0;
    text-decoration: none;
    transition: .2s;
}

.search_popup_suggest_list a:hover {
    background: #1765B0;
    border-color: #1765B0;
    color: #fff;
}
.about_sec_5_item .box_img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.about_sec_5_item .box_img {
    height: 29.2rem;
}
.about_sec_5_slider .box_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.popup_head_wave {
    height: 7rem;
    width: auto;
    right: 0;
    left: unset;
}

.popup_head {
    background: radial-gradient(59.84% 179.49% at 92.54% 133.97%, #3AB2E3 0%, #2482C3 40.65%, #1765B0 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.popup_close {
    background: transparent !important;
    padding: 0;
}

.popup_close svg {
    width: 1.8rem;
    height: auto;
}

.popup_body {
    margin-top: 1rem;
}
.popup_body::-webkit-scrollbar-track {
    background-color: #cedbff52;
}

.popup_body::-webkit-scrollbar {
    width: 0.117rem;
    background-color: #cedbff52;
}

.popup_body::-webkit-scrollbar-thumb {
    background-color: #1765B0;
}
.header_nav_sub .header_submenu {
    background: transparent;
}
.header_nav_list > li:first-child >a {
    margin-left: 0;
}
.header_nav_sub > ul > li > a {
    padding-left: 1.5rem;
}
@media only screen and (max-width: 767px) {
    .search_popup {
        padding: 4rem 1rem 2rem;
    }

    .search_popup_box {
        padding: 1.5rem;
    }

    .search_popup_submit {
        padding: 0 1rem;
    }
}

/* ============================================================
   du-an
   ============================================================ */
/* Banner */
.banner_page_box {
    background: #1765B0;
    padding: 1.2rem 2rem 1.5rem;
    display: inline-block;
    min-width: 22rem;
}

/* Section */
/* Filter bar */
/* Grid: card 1 tall (span 2 rows), cards 2-5 in 2 */
.project_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 15rem 15rem;
    gap: .8rem;
}

.project_card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
}

.project_card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.project_card:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.project_card:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

.project_card:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
}

.project_card:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

/* Card: full photo + gradient overlay */
.project_card_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.4rem;
    background: linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.4) 65%,transparent 100%);
    z-index: 2;
}

.project_card_title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}

.project_card_img {
    z-index: 1;
}

.project_card:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(23, 101, 176, .8) 0%, rgba(58, 178, 227, .8) 100%);
    opacity: 0;
    transition: .4s opacity;
    z-index: 3;
    pointer-events: none;
    backdrop-filter: blur(7px);
}

.project_card:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.7);
    width: 3rem;
    height: 3rem;
    border: 1px solid #fff;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1V15M1 8H15' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 1rem;
    opacity: 0;
    transition: .4s all;
    z-index: 4;
    pointer-events: none;
}

.project_card:hover:after {
    opacity: 1;
}

.project_card:hover:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* L */
.project_cta_inner {
    position: unset;
    inset: 0;
    display: flex;
    align-items: center;
}

/* ===== POPUP ===== */
/* Popup header */
/* Popup body */
/* Section heading */
/* Sub-items */
/* ============================================================
   faqs
   ============================================================ */
/* FAQ section */
.faq_sec_1 {
    padding: 4rem 0 5rem;
    background: #fff;
}

.faq_sec_1 .row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.faq_left_title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1765B0;
    line-height: 1.25;
    padding-right: 2rem;
    position: sticky;
    top: 2rem;
}

.faq_list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq_item {
    border-bottom: 1px solid #E8F0FB;
    padding: .4rem 0;
}

.faq_item:first-child {
    border-top: 1px solid #E8F0FB;
}

.faq_item_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.2rem 0;
    cursor: pointer;
}

.faq_item_head_left {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    flex: 1;
}

.faq_num {
    font-size: 2.5rem;
    font-weight: 400;
    color: #1765B0;
    min-width: 3.5rem;
    flex: 0 0 auto;
    line-height: 1;
}

.faq_question {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
    color: var(--Main, #1765B0);
}

.faq_toggle_icon {
    flex-shrink: 0;
    margin-top: .1rem;
    transition: transform .3s;
}

.faq_item.open .faq_toggle_icon {
    transform: rotate(180deg);
}

.faq_answer {
    display: none;
    padding: 0 0 1.5rem 4.7rem;
    line-height: 1.7;
}

.faq_item.open .faq_answer {
    display: block;
}

/* ============================================================
   lien-he
   ============================================================ */
/* Contact sec 1 */
.contact_sec_1 {
    padding: 5.5rem 0;
    background: #fff;
}

.contact_info h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: #1765B0;
    margin: 0 0 1.5rem;
}

.contact_info_item .label {
    font-weight: 600;
    color: #1765B0;
}

.contact_social {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(23, 101, 176, 0.15);
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.contact_social p {
    font-size: .75rem;
    color: #8C8C8C;
    margin-bottom: .6rem;
}

.contact_social_list {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.contact_social_list a {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    transition: .3s;
}

.contact_social_list a:hover {
    border-color: #1765B0;
    background: #EEF4FB;
}

.contact_social_list img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
}

/* Form box */
.contact_form_box {
    background: linear-gradient(90deg, #1765B0 47.14%, #3AB2E3 106.45%);
    padding: 3.2rem;
    backdrop-filter: blur(32.5px);
    color: #fff;
    clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 0 100%, 0% 50%);
}

.contact_form_box h3 {
    font-size: 2.5rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 1.8rem;
    line-height: 1.2;
}

.form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin-bottom: .8rem;
}

.form_row.single {
    grid-template-columns: 1fr;
}

.contact_form_box input,.contact_form_box select,.contact_form_box textarea {
    width: 100%;
    height: 2.4rem;
    border: none;
    border-radius: 0;
    padding: 0 !important;
    font-size: .75rem;
    color: #3A3838;
    box-sizing: border-box;
    outline: none;
    background: transparent;
    box-shadow: none !important;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
    margin: 0 0 1rem;
}

.contact_form_box textarea {
    height: 5rem;
    padding: .6rem .8rem;
    resize: none;
}

.contact_form_box select {
    appearance: none;
    background-color: transparent !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right .8rem center;
}

.btn_submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: #1765B0;
    border: none;
    height: 2.4rem;
    padding: 0 1.5rem;
    border-radius: .3rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: .8rem;
    transition: .3s;
    margin: 0;
}

.btn_submit:hover {
    background: #EEF4FB;
}

.btn_submit svg {
    flex: 0 0 auto;
}

/* Map */
.contact_sec_2 {
    padding: 0;
}

.contact_sec_2 iframe {
    width: 100%;
    height: 25rem;
    display: block;
    border: 0;
}

/* ============================================================
   nha-san-xuat
   ============================================================ */
/* Section */
.mfr_sec_1 {
    padding: 7rem 0;
    background: #F1F6F8;
    position: relative;
    overflow: hidden;
}

.mfr_sec_1:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 49rem;
    height: 30.7rem;
    background: url("../image/htsvg.svg") no-repeat top right / contain;
    pointer-events: none;
    z-index: 0;
}

.mfr_header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Dropdown filter */
.mfr_filter {
    position: relative;
    flex-shrink: 0;
}

.mfr_filter_toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.2rem;
    padding: 0 1rem;
    border-radius: .3rem;
    cursor: pointer;
    user-select: none;
    min-width: 8rem;
    justify-content: space-between;
    font-weight: 600;
}

.mfr_filter_toggle .chevron {
    transition: transform .25s;
    flex-shrink: 0;
    width: 1rem;
    height: auto;
}

.mfr_filter.open .mfr_filter_toggle .chevron {
    transform: rotate(180deg);
}

.mfr_filter_dropdown {
    display: none;
    position: absolute;
    top: calc(100% + .3rem);
    right: 0;
    background: #fff;
    border: 1px solid #D6E4F5;
    border-radius: .3rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    min-width: 8rem;
    z-index: 100;
}

.mfr_filter.open .mfr_filter_dropdown {
    display: block;
}

.mfr_filter_option {
    display: block;
    padding: .55rem 1rem;
    font-size: .75rem;
    color: #3A3838;
    cursor: pointer;
    transition: background .15s;
}

.mfr_filter_option:hover,.mfr_filter_option.active {
    background: #EEF4FB;
    color: #1765B0;
}

/* Grid */
.mfr_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

/* Card: top (logo) + separator + bottom (name + arrow) */
.mfr_card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .25s;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 2.4rem) 0, 100% 2.4rem, 100% 100%, 0 100%);
    background: #fff;
}

.mfr_card:hover {
    border-color: #1765B0;
}

.mfr_card_top {
    padding: 2rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    min-height: 7rem;
}

.mfr_card_top img {
    max-width: 100%;
    height: 3.5rem;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform .35s ease;
}

.mfr_card:hover .mfr_card_top img {
    transform: scale(1.08);
}

.mfr_card_bottom {
    padding: 1.6rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border-top: 0.787px solid #DAE1F2;
}

.mfr_card_name {
    font-weight: 500;
    color: #1765B0;
    text-transform: uppercase;
    font-size: 0.98425rem;
}

.mfr_card_arrow {
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid #1765B0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .2s;
    width: 1.85rem;
    height: 1.85rem;
    position: relative;
    overflow: hidden;
}

.mfr_card:hover .mfr_card_arrow {
    border-color: #1765B0;
    background: #1765B0;
}

.mfr_card:hover .mfr_card_arrow svg path {
    stroke: #fff;
}

.mfr_card_arrow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .35s ease;
}

.mfr_card_arrow svg:last-child {
    transform: translate(-150%, 50%);
    opacity: 0;
}

.mfr_card:hover .mfr_card_arrow svg:first-child {
    transform: translate(50%, -150%);
    opacity: 0;
}

.mfr_card:hover .mfr_card_arrow svg:last-child {
    transform: translate(-50%, -50%);
    opacity: 1;
}

/* Xem th */
.mfr_more {
    text-align: center;
    margin-top: 2rem;
}

/* ============================================================
   san-pham
   ============================================================ */
/* ===== BANNER ===== */
.sp_breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.4rem;
}

/* ===== FILTER BAR ===== */
.sp_filter_sec {
    background: #fff;
    padding: 0 0 3rem;
    position: relative;
    z-index: 2;
}

.sp_filter_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sp_filter_left {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sp_filter_select_wrap {
    position: relative;
}

.sp_filter_select {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.6rem;
    padding: 0 1rem;
    border: 1.5px solid #1765B0;
    border-radius: 0;
    font-weight: 400;
    color: #1765B0;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    text-transform: unset;
}

.sp_filter_select .chevron {
    transition: transform .2s;
}

.sp_filter_select_wrap.open .sp_filter_select .chevron {
    transform: rotate(180deg);
}

.sp_filter_select_dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid #D6E4F5;
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    z-index: 100;
    padding: .3rem 0;
    max-height: 20rem;
    overflow: auto;
}

.sp_filter_select_wrap.open .sp_filter_select_dropdown {
    display: block;
}

.sp_filter_select_option {
    display: block;
    padding: .5rem 1rem;
    font-size: .75rem;
    color: #3A3838;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.sp_filter_select_option:hover {
    background: #EEF5FC;
    color: #1765B0;
}

.sp_filter_select_option.active {
    color: #1765B0;
    font-weight: 700;
}

.sp_filter_input {
    height: 2.5rem;
    padding: 0 .9rem;
    border: 1.5px solid #1765B0;
    border-radius: 0;
    color: #3A3838;
    outline: none;
    font-family: inherit;
    min-width: 11rem;
    margin: 0;
    color: #1765B0;
}

.sp_filter_sort_val {
    font-weight: 700;
    color: #1765B0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* ===== CATEGORY GRID ===== */
.sp_grid_sec {
    background: #fff;
    padding: 0 0 2.5rem;
}

.sp_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4rem;
}

.sp_card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    padding-bottom: 100%;
    display: block;
    text-decoration: none;
}

.sp_card_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.sp_card:hover .sp_card_img {
    transform: scale(1.04);
}

.sp_card_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    z-index: 0;
}

.sp_card:hover .sp_card_video {
    opacity: 1;
}

.sp_card_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 55%,transparent 100%);
    z-index: 1;
}

.sp_card_name {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    z-index: 2;
}

/* N */
/* ===== CTA ===== */
.project_cta {
    position: relative;
    overflow: hidden;
    padding: 8rem 0;
}

.project_cta_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
}

.project_cta_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
}

.project_cta_content {
    max-width: 34rem;
    top: 50%;
    background: linear-gradient(90deg, rgba(23, 101, 176, 0.7) 47.14%, rgba(58, 178, 227, 0.7) 106.45%);
    width: 34rem;
    padding: 3.5rem;
    padding-right: 5rem;
    backdrop-filter: blur(65px);
    clip-path: polygon(0 0, 85% 0%, 100% 25%, 100% 100%, 0 100%, 0% 50%);
}

.project_cta_title {
    font-size: 1.7rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 1rem;
}

/* ============================================================
   tai-lieu
   ============================================================ */
/* Banner */
.banner_page_box {
    background: #1765B0;
    padding: 1.2rem 2rem 1.5rem;
    display: inline-block;
    top: 50%;
    background: linear-gradient(90deg, rgba(23, 101, 176, 0.70) 37.56%, rgba(58, 178, 227, 0.70) 100%);
    padding: 2.5rem;
    backdrop-filter: blur(65px);
    clip-path: polygon(0 0, 85% 0%, 100% 25%, 100% 100%, 0 100%, 0% 50%);
    padding: 3.2rem 6rem 3.2rem 3.2rem;
}

/* Document section */
.document_sec_1 {
    padding: 3rem 0 4rem;
    background: #fff;
}

section.document_sec_1 .col+.col {
    margin-top: 5rem;
}

.doc_group {
    margin-bottom: 3rem;
}

.doc_group:last-child {
    margin-bottom: 0;
}

.doc_group_title {
    font-size: 2rem;
    font-weight: 400;
    color: #1765B0;
    margin: 0 0 1.2rem;
    padding-bottom: .8rem;
    border-bottom: 2px solid #E8F0FB;
}

.doc_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.doc_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #EEF4FB;
    padding: .6rem .8rem;
    border-radius: 0;
    transition: .3s;
}

.doc_item:hover {
    background: #dce8f7;
}

.doc_item_left {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
}

.doc_item_icon {
    flex: 0 0 auto;
    display: flex;
}

.doc_item_name {
    font-size: 1rem;
    color: #1765B0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc_item_btn {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #1765B0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    flex: 0 0 auto;
    margin-left: .6rem;
    transition: .3s;
}

.doc_item_btn:hover {
    background: #1765B0;
}

.doc_item_btn:hover svg path {
    stroke: #fff;
}

.doc_item_btn svg {
    display: block;
}

/* ============================================================
   tin-tuc-chi-tiet
   ============================================================ */
/* Breadcrumb */
.article_breadcrumb {
    padding: .7rem 0;
    background: #fff;
    border-bottom: 1px solid #EEF4FB;
}

.article_breadcrumb ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .3rem;
}

.article_breadcrumb ul li {
    font-size: .72rem;
    color: #8C8C8C;
}

.article_breadcrumb ul li a {
    color: #8C8C8C;
}

.article_breadcrumb ul li a:hover {
    color: #1765B0;
}

.article_breadcrumb ul li:last-child {
    color: #3A3838;
}

/* Layout */
.article_sec {
    padding: 0 0 5rem;
    background: #fff;
}

.article_sec img {
    margin: auto;
    display: block;
}

/* Main content */
.article_main h1 {

}



.article_main .article_featured_img {
    width: 100%;
    object-fit: cover;
    display: block;
    margin-bottom: 1.2rem;
}

p.article_date {
    margin: .3rem 0 1.5rem;
}

.article_main h3 {
    font-size: .9rem !important;
    font-weight: 700;
    color: #1765B0 !important;
    margin: 1.5rem 0 .6rem;
    padding: 0 !important;
}

.article_main ul {
    padding-left: 1.2rem;
    margin: .5rem 0 .8rem;
}

.article_main ul li {
    font-size: .8rem;
    color: #3A3838;
    line-height: 1.8;
    margin-bottom: .2rem;
}

.article_inline_img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
    display: block;
    border-radius: .3rem;
    margin: 1rem 0;
}

/* M */
.article_toc {
    border: 1px solid #1765B026;
    padding: 1rem 1.2rem;
    margin: 1.2rem 0 1.5rem;
}

.article_toc_title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1765B0;
    margin: 0 0 .8rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #E0EAF5;
}

.article_toc ol {
    margin: 0;
    padding-left: 1.2rem;
}

.article_toc ol li {
    color: #1765B0;
    line-height: 1.7;
    font-weight: 600;
}

.article_toc ol li a {
    color: #1765B0;
    text-decoration: none;
}

.article_toc ol li a:hover {
    color: #0d4f90;
    text-decoration: underline;
}

.article_toc ol ol {
    padding-left: 1rem;
    font-weight: 400;
}

.article_toc ol ol li {font-weight: 400;}

.article_toc ol ol li a {
    text-decoration: none;
}

/* Share row: tags left + icons right */
.article_share_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 1rem 0;
    border-top: 1px solid #EEF4FB;
    margin-top: 1rem;
}

.article_tags {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}



.article_share_icons {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.article_share_icons span {
    font-weight: 600;
    margin-right: .4rem;
}

.article_share_icons a {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1765B04D;
    border-radius: 0.25rem;
    transition: .25s;
}

.article_share_icons a:hover {
    border-color: #1765B0;
    background: #EEF4FB;
}

/* Sidebar */
.article_sidebar {
    padding-left: 4rem;
    position: sticky;
    top: 5rem;
}

.article_sidebar_title {
    font-size: .9rem;
    font-weight: 700;
    color: #1765B0;
    margin: 0 0 .9rem;
}

.related_list {
    display: flex;
    flex-direction: column;
}

.related_item {
    display: flex;
    gap: .8rem;
    text-decoration: none;
    color: inherit;
    padding: 1.5rem 0;
}

.related_item:hover {
    text-decoration: none;
}

.related_item img {
    width: 4.5rem;
    height: 3.2rem;
    object-fit: cover;
    border-radius: .25rem;
    flex-shrink: 0;
    display: none;
}

.related_item_body {
}

.related_item_title {
    font-size: 1rem;
    font-weight: 600;
    color: #1765B0;
    line-height: 1.4;
    margin: 0 0 .3rem;
}

.related_item:hover .related_item_title {
    color: #1765B0;
}


/* ============================================================
   tin-tuc
   ============================================================ */
/* ============ TIN N */
.news_featured_sec {
    padding: 7.5rem 0 0;
    background: #fff;
}

.news_featured_slider {
    position: relative;
    overflow: hidden;
    border-radius: .4rem;
    margin-top: 2.6rem;
}

.news_featured_pagination {
    position: absolute;
    bottom: 1.2rem !important;
    right: 1.5rem !important;
    left: auto !important;
    width: auto !important;
    display: flex;
    gap: .4rem;
    z-index: 10;
}

.news_featured_pagination .swiper-pagination-bullet {
    width: .5rem;
    height: .5rem;
    background: rgba(255,255,255,.5);
    opacity: 1;
    border-radius: 50%;
    transition: background .2s;
}

.news_featured_pagination .swiper-pagination-bullet-active {
    background: #fff;
}



.news_sec_title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1C1C1C;
    margin: 0 0 1.5rem;
}

/* Featured slider card */
.news_featured_card {
    display: flex;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    gap: 2.4rem;
}

.news_featured_card:hover {
    text-decoration: none;
}


.news_featured_link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ============ TIN T */
.news_grid_sec {
    padding: 5rem 0;
}

.news_grid_header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
    gap: .8rem;
}



.news_filter_tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.news_filter_tab {
    display: inline-flex;
    align-items: center;
    height: 2.4rem;
    padding: 0 1.2rem;
    border: 1px solid #D6E4F5;
    border-radius: 0;
    font-size: .72rem;
    color: #3A3838;
    background: #fff;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
    color: #1765B0;
    text-transform: uppercase;
    font-weight: 600;
}

.news_filter_tab:hover,.news_filter_tab.active {
    background: #1765B0;
    color: #fff;
    border-color: #1765B0;
}

/* News cards grid */
.news_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2.4rem;
}

.news_card {
    display: block;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .25s;
}


.news_card img {
    width: 100%;
    height: 15rem;
    object-fit: cover;
    display: block;
}

.news_card_body {
    padding: 1.5rem 0 0 0;
}

.news_card_title {
    font-size: 1rem;
    font-weight: 600;
    color: #1765B0;
    line-height: 1.5;
    margin: 0 0 .4rem;
}

.news_card:hover .news_card_title {
    color: #1765B0;
}

.news_card_foot {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.news_card_foot .sep {
    color: #C5D8F0;
}

/* Pagination */
.load_more_wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* ============================================================
   tuyen-dung
   ============================================================ */
/* Heading */
.recruit_sec_1 {
    padding: 6rem 0 1rem;
    background: #fff;
    text-align: center;
}

/* List */
.recruit_sec_2 {
    padding: 1.5rem 0 5rem;
    background: #fff;
}

.recruit_list {
    display: flex;
    flex-direction: column;
}

/* Card item */
.recruit_card {
    position: relative;
    border-top: 1px solid #D6E4F5;
    padding: 1.5rem 0;
    transition: border-color .25s;
    display: block;
    color: inherit;
    text-decoration: none;
}

.recruit_card:hover {
    border-color: #1765B0;
    text-decoration: none;
}

.recruit_card_title {
    font-size: 1rem;
    font-weight: 600;
    color: #1765B0;
    margin: 0 0 1.2rem;
    line-height: 1.3;
}

.recruit_card_meta {
    margin-bottom: .25rem;
    line-height: 1.5;
}

.recruit_card_meta .lbl {
    font-weight: 600;
}

.recruit_card_tags {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .8rem;
}

.recruit_card_tag {
    display: inline-flex;
    align-items: center;
    height: 1.7rem;
    padding: 0 .8rem;
    border: 1px solid rgba(23, 101, 176, 0.15);
    border-radius: 2rem;
    font-size: .68rem;
    white-space: nowrap;
    font-weight: 600;
}

.recruit_card_tag .lbl {
    font-weight: 400;
    color: #1765B0;
    margin-right: .2rem;
}

/* Arrow button top-right */
.recruit_card_arrow {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #C5D8F0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .25s,background .25s;
}

.recruit_card:hover .recruit_card_arrow {
    border-color: #1765B0;
    background: #EEF4FB;
}

section.home1 video {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
}

.home1_content {
    top: 50%;
    background: linear-gradient(90deg, rgba(23, 101, 176, 0.7) 47.14%, rgba(58, 178, 227, 0.7) 106.45%);
    width: 32.5rem;
    padding: 2.5rem;
    backdrop-filter: blur(65px);
    clip-path: polygon(0 0, 85% 0%, 100% 25%, 100% 100%, 0 100%, 0% 50%);
}

.row.row_bottom {
    position: absolute;
    bottom: 3rem;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

section.home1 {
    position: relative;
}

section.home1 .row:not(.row_bottom) {
    height: 100vh;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.home1_items {
    filter: brightness(0) invert(1);
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}

.home1_content * {
    color: #fff;
}

.home1_content h1 {
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.button_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1765B0;
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.button_link .icon {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1765B0;
    margin-left: 1rem;
    flex: 0 0 auto;
}

.button_link .icon path {
    transition: .5s all;
}

button.button_link {
    margin: 0;
    filter: brightness(0) invert(1);
}

button.button_link .icon:before {
    opacity: .2;
}

@media (min-width: 768px) {
    .button_link .icon {
        position: relative;
    }

    .button_link .icon:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: #1765B0;
        transition: .6s all;
    }

    .button_link:hover .icon:before {
        width: 100%;
    }

    .home3_content a.button_link .icon:before {
        opacity: .2;
    }

    ul.list_link li .icon:before {
        opacity: .2;
    }

    .project_cta_content a.button_link .icon:before {
        opacity: .2;
    }

    .button_link:hover .icon path {
        stroke: #fff;
    }

    .button_link .icon svg {
        position: relative;
        z-index: 2;
    }


    .sp_filter_select_value {
        overflow: initial;
    }
}

ul.list_link {
    list-style: none;
    margin: 2.2rem 0 0;
    display: flex;
    gap: 2.5rem;
    filter: brightness(0) invert(1);
}

.home1_item {
    width: max-content;
    display: flex;
    align-items: center;
    font-size: 1rem;
    gap: 1.5rem;
}

.col, .columns, .gallery-item {
    padding: 0 10px;
}

.home1_item .num b {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -3%;
}

.home1_item .box_content b {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: normal;
}

.home1_item .num {
    display: flex;
    align-items: flex-start;
}

.home1_item .num sub {
    font-size: 3rem;
    line-height: normal;
    font-weight: 700;
}

section.home1:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.398205) 82.06%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

section.home2 {
    padding: 9rem 0 10rem;
}

.heading_title {
    color: var(--Main, #1765B0);
    font-style: normal;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.2;
}

section.home2 a.button_link {
    margin-top: 1rem;
}

.home2_img {
    margin-left: 9rem;
    position: relative;
    display: flex;
    gap: 1.4rem;
}

a.play_button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 5.95rem;
    height: 5.95rem;
    background: #1765B0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, 50%) scale(1);
    transition: .5s all;
    opacity: 1;
}

a.play_button svg {
    width: 1.25rem;
    height: auto;
}

a.play_button:hover {
    opacity: .9;
    transform: translate(-50%, 50%) scale(.95);
}

.home2_img .box_svg svg {
    width: 6.5rem;
    height: auto;
    display: block;
    transform: translateY(4rem);
}

.home2_img img {
    width: 100%;
    height: auto;
    display: block;
    clip-path: polygon(25% 0%, 100% 0, 100% 100%, 0 100%, 0% 25%);
}

.home3_wrap {
    display: flex;
}

.home3_items {
    display: flex;
}

.home3_content {
    width: 35rem;
    flex: 0 0 auto;
    padding: 6rem 12rem 4rem 4rem;
    filter: brightness(0) invert(1);
}

.home3_content span.sub_title {
    margin-bottom: 1.2rem !important;
    display: block;
}

section.home3 {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(76.34% 37.19% at 100% 0%, #3AB2E3 0%, #2482C3 40.65%, #1765B0 100%);
}

section.home3:before, section.about_sec_4:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25rem;
    height: 10rem;
    background: url(data:image/svg+xml,%3Csvg%20width%3D%22470%22%20height%3D%22191%22%20viewBox%3D%220%200%20470%20191%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20clip-path%3D%22url%28%23clip0_14292_15763%29%22%3E%20%3Cpath%20d%3D%22M476.52%20127.517C249.843%2011.5311%20127.19%20193.523%20127.19%20193.523H17.8535C26.8256%20176.353%2040.6531%20153.395%2061.3592%20129.364C61.3592%20129.364%20106.22%2077.2735%20160.65%2050.3573C236.842%2012.6922%20364.052%2040.6463%20476.52%20127.535V127.517Z%22%20fill%3D%22url%28%23paint0_linear_14292_15763%29%22%2F%3E%20%3Cpath%20d%3D%22M521.185%20165.516L541.011%20193.523H653.18C653.18%20193.523%20539.85%20-59.8056%20211.842%2027.5225C211.842%2027.5225%20409.175%2014.856%20521.167%20165.516H521.185Z%22%20fill%3D%22url%28%23paint1_linear_14292_15763%29%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22paint0_linear_14292_15763%22%20x1%3D%2217.8535%22%20y1%3D%22101.366%22%20x2%3D%22653.18%22%20y2%3D%22101.366%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22paint1_linear_14292_15763%22%20x1%3D%2217.8535%22%20y1%3D%22101.366%22%20x2%3D%22653.18%22%20y2%3D%22101.366%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%20%3C%2FlinearGradient%3E%20%3CclipPath%20id%3D%22clip0_14292_15763%22%3E%20%3Crect%20width%3D%22471%22%20height%3D%22190.608%22%20fill%3D%22white%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3C%2Fsvg%3E) no-repeat right bottom / contain;
    pointer-events: none;
    z-index: -1;
}

.home3_content a.button_link {
    margin-top: 2.5rem;
}

.home3_item {
    width: 100%;
    transition: .8s all;
}

.home3_item .box_img {
    height: 46rem;
}

.home3_item .box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home3_item .wrap_top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 2.15rem;
    z-index: 9;
    justify-content: center;
    align-items: center;
}

.home3_item .box_content {
    position: absolute;
    bottom: 0;
    z-index: 2;
    padding: 2rem 3rem;
    filter: brightness(0) invert(1);
    font-size: .8rem;
    transition: .5s all;
}

.home3_item:before,.home3_item:after {
    content: '';
    position: absolute;
    top: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%);
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: .5s all;
}

.home3_item h3 {
    color: #FFF;
    font-size: 1.3rem;
    font-weight: 400;
}

.home3_item .box_content.if_hover {
    opacity: 0;
}

.home3_item .box_content:not(.if_hover) .content {
    display: none;
}

.home3_item.active .box_content.if_hover {
    opacity: 1;
}

.home3_item.active .box_content {
    opacity: 0;
}

.home3_item.relative.active {
    width: 28rem;
    flex: 0 0 auto;
}

.home3_item.relative.active:before {
    opacity: 0;
}

.home3_item:before {
}

.home3_item:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.00) 16.57%, rgba(0, 0, 0, 0.00) 58.86%, rgba(0, 0, 0, 0.65) 84.08%);
}

.home3_item.active:after {
    opacity: 1;
}

.home3_item .wrap_top .box_logo {
    position: absolute;
    right: 2.15rem;
    opacity: 0;
    transition: .5s all;
}

.home3_item .number {
    font-size: 2.5rem;
    color: #fff;
}

.home3_item.relative.active .wrap_top.flex {
    justify-content: flex-start;
}

.home3_item.active .wrap_top .box_logo {
    opacity: 1;
}

.home3_item .wrap_top .box_logo img {
    width: 3.9rem;
    height: auto;
}

section.home4 {
    padding: 7rem 0;
    z-index: 2;
    position: relative;
}

.sub_title {
    color: var(--Main, #1765B0);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.home4_item {
    transition: .5s all;
    padding: 1.2rem 0;
    border-top: 1px solid rgba(23, 101, 176, 0.15);
    align-items: center;
    opacity: 0.3;
    cursor: pointer;
    /* position: relative; */
}

.home4_item h3 {
    color: var(--Main, #1765B0);
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0;
    line-height: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

.home4_item .content {
    margin-top: 1rem;
    display: none;
}

.home4_item .box_content {
    width: 36rem;
}

.home4_item .arrow {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .5s all;
}

.home4_item .arrow svg {
    width: 1.4rem;
    height: auto;
}

.home4_item.active .arrow {
    opacity: 1;
}

/* [next] text "Khám phá sản phẩm" chỉ dùng cho toggle mobile (≤767px), ẩn ở desktop */
.home4_item .arrow span {
    display: none;
}

.home4_items {
    margin-top: 2.45rem;
}

.home4_item:hover, .home4_item.active {
    opacity: 1;
}

section.home5 {
    padding: 5rem 0 0;
}

.home5_content {
    width: 22rem;
}

.home5_title {
    margin-bottom: 2.3rem;
}

.item_project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.item_project .box_img {
    height: 38rem;
    position: relative;
}

.home5_slider {
    margin-right: 14rem;
    overflow: unset;
}

.item_project .box_content {
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(23, 101, 176, 0.7) 47.14%, rgba(58, 178, 227, 0.7) 106.45%);
    width: 28rem;
    backdrop-filter: blur(30px);
    padding: 3.2rem 6rem 3.2rem 2.8rem;
    clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0 100%, 0% 15%);
}

.item_project .box_content>* {
    filter: brightness(0) invert(1);
}

.item_project span.sub_title {
    font-size: 0.7rem;
    font-weight: 400;
}

.item_project h3 {
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
}

.item_project .box_content svg {
    right: 2rem;
    bottom: 2rem;
    position: absolute;
}

.item_project {
    margin-right: .2rem;
    position: relative;
}

.home5_slider {
    margin-right: 13rem !important;
    overflow: unset !important;
}

/* [next] 2 mũi tên 2 bên slider dự án (home5), template không có sẵn nên tự thêm theo dáng .arrow_slider chung */
.home5_slider > .arrow_slider {
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
    border-color: #fff;
}

.home5_slider > .arrow_slider path {
    stroke: #fff;
}

.home5_slider > .arrow_slider:hover {
    background: #1765B0;
    border-color: #1765B0;
}

.home5_slider > .arrow_slider.prev {
    left: 1rem;
}

.home5_slider > .arrow_slider.next {
    right: -12rem;
}

@media only screen and (max-width: 767px) {
    .home5_slider > .arrow_slider {
        display: none;
    }
}

section.about_sec_6 {
    padding: 7rem 0;
}

.about_sec_6_content {
    text-align: left;
    max-width: 37rem;
    margin: 0 0 4rem !important;
}

section.home7 {
    background: #F1F6F8;
    padding-top: 5.5rem;
    padding-bottom: 4rem;
}

.home7_title {
    align-items: center;
}

.home7_title .content {
    max-width: 28.6rem;
}

section.home7 .mfr_grid {
    position: relative;
}

section.home7 .mfr_grid:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(241, 246, 248, 0) 0%, #F1F6F8 100%);
    height: 15rem;
    z-index: 2;
}

.mfr_card_arrow svg {
    width: .6rem;
    height: auto;
}

.about_sec_6_slider .item {
    padding-bottom: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #C9DEE5;
    border-radius: 1rem;
    background: #fff;
}

.about_sec_6_slider .item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
}

.about_sec_6_slider .swiper-slide {
    padding: 0 .7rem;
}

.about_sec_6_slider {
    margin: 0 -0.7rem;
}

section.home8 {
    padding: 7rem 0;
}

.home8_box .wrap_slider {
    padding-left: 10.75rem;
}

.arrow_slider {
    display: flex;
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #1765B0;
    align-items: center;
    justify-content: center;
    transition: .5s all;
    cursor: pointer;
}

.wrap_slider {
    position: relative;
}

.arrow_slider svg {
    width: .9rem;
    height: auto;
}

.arrow_slider svg path {
    transition: .5s all;
}

.arrow_slider:hover {
    background: #1765B0;
}

.arrow_slider:hover path {
    stroke: #fff;
}

.home8_box .arrow_slider {
    left: 0;
    bottom: 0;
}

.home8_box .arrow_slider.next {
    transform: translate(100%, -100%);
}

.arrow_slider.next svg {
    transform: rotate(180deg);
}

/* Mobile-only slider controls: prev + dots + next */
.slider_controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-top: 1.5rem;
}

.slider_controls .arrow_slider {
    position: static;
}

.slider_controls .arrow_slider svg {
    width: .9rem;
    height: auto;
}

.slider_controls .arrow_slider:hover path {
    fill: #fff;
}

.slider_dots {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.slider_dots .swiper-pagination-bullet {
    background: #C9D9EC;
    opacity: 1;
    margin: 0;
}

.slider_dots .swiper-pagination-bullet-active {
    background: #1765B0;
}

@media only screen and (max-width: 767px) {
    .slider_controls {
        display: flex;
    }

    .home8_box .wrap_slider > .arrow_slider,
    .rel_arrows {
        display: none;
    }

    div#home8Controls {}

    .slider_controls .slider_dots {
        justify-content: center;
    }

    .slider_controls .arrow_slider {
        transform: unset !important;
        width: 2.5rem;
        height: 2.5rem;
        min-height: unset;
        flex: 0 0 auto;
    }

    .slider_controls .arrow_slider svg {
        width: .6rem;
    }

    .home8_wrap a.button_link {
        display: none;
    }
}

.item_post .box_img {
    padding-bottom: 125%;
    position: relative;
    overflow: hidden;
}

.item_post .box_img img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1;
    transition: .6s all;
}

.item_post .box_img:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.53) 47.54%, rgba(0, 0, 0, 0.80) 100%);
    z-index: 2;
}

.item_post:hover .box_img img {
    scale: 1.1;
}

.item_post .box_content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    filter: brightness(0) invert(1);
    z-index: 2;
    padding: 0 1.25rem 2rem;
}

.box_meta {
    display: flex;
    gap: .6rem;
    font-size: 0.65rem;
}

.item_post h3 {
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    margin: 0 0 1rem;
}

.home8_wrap {
    margin-bottom: 3.5rem;
}

.home8_mobile_cta {
    display: none;
}

@media only screen and (max-width: 767px) {
    .home8_mobile_cta {
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }
}

nav.banner_breadcrumb li {
    margin: 0;
    display: flex;
}

nav.banner_breadcrumb li svg {
    filter: brightness(0) invert(1);
    height: 1rem;
}

.contact_info {
    padding-right: 4rem;
}

.contact_info_item+.contact_info_item {
    margin-top: .8rem;
}

.contact_social p {
    margin: 0;
    color: var(--Main, #1765B0);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    flex: 0 0 auto;
}

.contact_form_box input::placeholder, .contact_form_box select, .contact_form_box textarea::placeholder {
    color: #fff;
    opacity: 0.7;
}

form {
    margin: 0;
}

.faq_item:first-child .faq_item_head {
    border-top: none;
    padding-top: 0;
}

.faq_item:first-child {
    border-top: none;
}

.policy_sidebar_wrap {
    position: sticky;
    top: 5rem;
}

.policy_sidebar_wrap p.heading_title {
    margin-bottom: 2.5rem;
}

.policy_content {
    padding-left: 4rem;
}

.policy_nav li.active a {
    padding: 1rem;
    background: #1765b024;
}

.recruit_card_arrow svg {
    width: 1rem;
    height: auto;
}

.recruit_sec_1 h2.heading_title {
    margin-bottom: .5rem;
}

.jd_section+.jd_section {
    border-top: 1px solid rgba(23, 101, 176, 0.15);
}

.jd_main h1.heading_title {
    margin-bottom: 3rem;
}

.box_sidebar_td {
    padding-left: 4.8rem;
    position: sticky;
    top: 5rem;
}

.jd_breadcrumb {
    margin-bottom: 3.2rem;
    padding-top: 1rem;
}

.box_sidebar_td p.heading_title {
    margin: 0 0 1.5rem;
}

.jd_other_card p:last-child {
    margin: 0;
}

.mfr_header_left {
    width: 31rem;
}

.mfr_header_left p {
    margin: 0;
}

span.mfr_filter_static {
    font-weight: 400;
}

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

ul.about_sec_1_imgs li {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

ul.about_sec_1_imgs li img {
    position: absolute;
    max-width: unset;
}

section.about_sec_1 {
    padding: 5.5rem 0 2rem;
}

.about_sec_1_content {
    margin: 5rem 0;
    position: relative;
}

.about_sec_1_content::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 454px;
    height: 132px;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='454' height='132' viewBox='0 0 454 132' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.15'%3E%3Cpath d='M327.76 84.5435C165.778 1.66054 78.131 131.711 78.131 131.711H0C6.41139 119.442 16.2925 103.036 31.089 85.8635C31.089 85.8635 63.1459 48.6397 102.042 29.4055C156.488 2.49025 247.392 22.4661 327.76 84.556V84.5435Z' fill='url(%23paint0_linear_14292_5717)'/%3E%3Cpath d='M359.678 111.697L373.846 131.711H454.001C454.001 131.711 373.016 -49.3166 138.623 13.0876C138.623 13.0876 279.636 4.03624 359.665 111.697H359.678Z' fill='url(%23paint1_linear_14292_5717)'/%3E%3Crect y='32' width='454' height='100' fill='url(%23paint2_linear_14292_5717)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_14292_5717' x1='2.90398' y1='73.7824' x2='330.639' y2='77.7172' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233AB2E3'/%3E%3Cstop offset='0.4' stop-color='%231765B0'/%3E%3Cstop offset='0.91' stop-color='%231765B0'/%3E%3Cstop offset='1' stop-color='%231765B0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_14292_5717' x1='138.623' y1='65.8496' x2='454.001' y2='65.8496' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233AB2E3'/%3E%3Cstop offset='0.12' stop-color='%2337ABDE'/%3E%3Cstop offset='0.28' stop-color='%232F9AD3'/%3E%3Cstop offset='0.46' stop-color='%23227EC0'/%3E%3Cstop offset='0.6' stop-color='%231765B0'/%3E%3Cstop offset='0.94' stop-color='%231765B0'/%3E%3Cstop offset='1' stop-color='%231765B0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_14292_5717' x1='227' y1='32' x2='227' y2='132' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='white'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

li.about_sec_1_img {
}

ul.about_sec_1_imgs li:nth-child(1) img {
    max-width: 7.5rem;
}

ul.about_sec_1_imgs li:nth-child(1) {
    left: -15rem;
    top: 7rem;
}

ul.about_sec_1_imgs li:nth-child(2) {
    left: -7rem;
    top: 20rem;
}

ul.about_sec_1_imgs li:nth-child(2) img {
    max-width: 8rem;
}

ul.about_sec_1_imgs li:nth-child(3) {
    right: -8rem;
    top: 5rem;
}

ul.about_sec_1_imgs li:nth-child(3) img {
    max-width: 8rem;
}

ul.about_sec_1_imgs li:nth-child(4) {
    right: -14rem;
    top: 19rem;
}

ul.about_sec_1_imgs li:nth-child(4) img {
    max-width: 13rem;
}

.about_sec_2_sub {
    margin-top: 2rem;
    color: #1765B0;
    font-weight: 600;
}

.about_sec_2_item span {
    font-weight: 600;
}

.about_sec_2_item h3 {
    font-size: 1.4rem;
    color: #1765B0;
    font-weight: 700;
}

section.about_sec_4 {
    position: relative;
    z-index: 0;
    background: radial-gradient(98.05% 185.05% at 98.05% 90.92%, #3AB2E3 0%, #2482C3 39.65%, #1765B0 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    padding: 5rem 0 7rem;
}

section.about_sec_4 .row {
    filter: brightness(0) invert(1);
}

.about_sec_4_item {
    padding: 0 2.2rem 0 1.2rem;
    border-left: 1px solid #FFFFFF26;
}

.about_sec_4_item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5rem;
}

.about_sec_4_item .icon {
    height: 2.5rem;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    transition: .3s transform;
}

.about_sec_4_item:hover .icon {
    transform: translateY(-.5rem);
}

section.about_sec_4 h2.heading_title {
    margin-bottom: 3rem;
}

.about_sec_5_left {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

section.about_sec_5 {
    padding: 7.5rem 0;
}

.about_sec_5_left svg {
    width: 6.9rem;
    flex: 0 0 auto;
    height: auto;
}

.about_sec_5_item img {
    width: 100%;
    height: auto;
    display: block;
    clip-path: polygon(0 0, 90% 0%, 100% 14%, 100% 100%, 0 100%, 0% 50%);
}

.about_sec_5_item h3 {
    color: #1765B0;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 1rem 0 .5rem;
}

.about_sec_5_right {
    padding-left: 5rem;
}

.about_sec_5_right .content {
    padding-bottom: 4.5rem;
    margin-bottom: 4.5rem;
    border-bottom: 1px solid #1765B026;
}

.about_sec_5_slider .box_img {
    height: 12rem;
    width: 100%;
    overflow: hidden;
}

.about_sec_5_slider .box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s transform;
}

.about_sec_5_slider .item:hover .box_img img {
    transform: scale(1.1);
}

.about_sec_5_slider h3 {
    margin: 1rem 0 0 0;
    color: #1765B0;
    font-size: 1rem;
    font-weight: 600;
}

section.about_sec_6.about_page .about_sec_6_content {
    margin: 0 auto 3.5rem !important;
    text-align: center;
}

.sp_banner_content h1.heading_title {
    color: #fff;
}

section.product_banner {
    margin-bottom: 5rem;
}
.sp_filter_input::placeholder {
    color: #1765B0;
    opacity: .75;
}
.pc_card_brand svg {
    width: 4rem;
    height: auto;
}

.rel_slider_wrap .pc_card {
    margin: 0 3rem;
    display: block; /* [next] thẻ là <a> (inline) nên max-width không ăn */
    max-width: 19.25rem; /* [next] ~370px ở 1920px (1rem = 1vw từ 1200px) */
}

.rel_slider_wrap {
    margin: 0 -3rem !important;
}
.news_featured_card .box_img {
    width: 48rem;
    flex: 0 0 auto;
    height: 30rem;
    overflow: hidden;
}

.news_featured_card .box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1;
    transition: 1s all;
}

.news_featured_card:hover .box_img img {
    scale: 1.05;
}

h3.news_featured_title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1765B0;
    line-height: 1.2;
    margin: 1.5rem 0;
}

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

.news_grid_header h2.heading_title {
    margin: 0;
}
.news_featured_overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
li {}

span.article_tag {
    font-weight: 600;
    text-decoration: underline;
}

p.related_item_date {
    margin: 0;
}

.related_item {
    border-top: 1px solid #1765B026;
}

.article_sidebar p.heading_title {
    margin-bottom: 1.5rem;
}
a.link_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.service_item .box_img {
    padding-bottom: 150%;
    position: relative;
    overflow: hidden;
}

.service_item .box_img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1;
    transition: .5s all;
}

.service_item_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    padding: 2rem;
    transition: .5s all;
}

.service_item_overlay h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #fff;
    font-weight: 700;
}

.service_item_overlay .content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    color: #fff;
    font-size: .85rem;
    line-height: 1.6;
    transition: 1s all;
}

.service_item:hover .service_item_overlay {
    padding-top: 6rem;
    background: linear-gradient(180deg, rgba(23, 101, 176, 0) 0%, rgba(23, 101, 176, .85) 40%, rgba(23, 101, 176, .92) 100%);
}

.service_item:hover .service_item_overlay .content {
    max-height: 12rem;
    opacity: 1;
    margin-top: 0;
}

.service_item .box_img:before, .service_item .box_img:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.571176) 49.67%, rgba(0, 0, 0, 0.701116) 76.82%, rgba(0, 0, 0, 0.8) 100%);
    height: 8rem;
    width: 100%;
    z-index: 2;
}

.service_item .box_img:after {
    top: 0;
    bottom: unset;
    transform: rotate(180deg);
}

.service_item:hover .box_img img {
    scale: 1.1;
}

.service_item.relative a {
    z-index: 10;
}

.service_item:before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 3.3rem;
    height: 2.7rem;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2263%22%20height%3D%2252%22%20viewBox%3D%220%200%2063%2052%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M17.508%2040.1498C39.9709%2051.4749%2052.1282%2033.7058%2052.1282%2033.7058H62.9639C62.0747%2035.382%2060.7043%2037.6234%2058.6522%2039.9695C58.6522%2039.9695%2054.2064%2045.0549%2048.8121%2047.6827C41.2611%2051.3598%2028.654%2048.6307%2017.508%2040.1481V40.1498Z%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M13.0813%2036.44L11.1164%2033.7058H0C0%2033.7058%2011.2315%2058.4376%2043.7368%2049.912C43.7368%2049.912%2024.1803%2051.1486%2013.0813%2036.44Z%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M45.4559%2011.5502C22.9912%200.226821%2010.8357%2017.9942%2010.8357%2017.9942H0C0.889172%2016.318%202.25954%2014.0766%204.31161%2011.7305C4.31161%2011.7305%208.75747%206.64507%2014.1518%204.01731C21.7028%200.340176%2034.3098%203.06926%2045.4559%2011.5519V11.5502Z%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M49.8826%2015.26L51.8475%2017.9942H62.9639C62.9639%2017.9942%2051.7324%20-6.73759%2019.2253%201.78802C19.2253%201.78802%2038.7819%200.551427%2049.8808%2015.26H49.8826Z%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M9.63967%2021.0771H3.56715V24.4777H9.15847C9.56993%2024.4777%209.87679%2024.5739%2010.079%2024.7663C10.2813%2024.9586%2010.3824%2025.2128%2010.3824%2025.5271C10.3824%2025.8414%2010.283%2026.099%2010.0825%2026.2965C9.88201%2026.4958%209.57342%2026.5937%209.15673%2026.5937H3.56715V30.5336H9.84889C10.2726%2030.5336%2010.5916%2030.6366%2010.8061%2030.841C11.0205%2031.0454%2011.1286%2031.3185%2011.1286%2031.6585C11.1286%2031.9986%2011.0205%2032.2528%2010.8061%2032.4572C10.5916%2032.6616%2010.2726%2032.7646%209.84889%2032.7646H2.52455C1.937%2032.7646%201.51508%2032.6289%201.25879%2032.3593C1.00075%2032.0879%200.87348%2031.65%200.87348%2031.0454V20.634C0.87348%2020.2304%200.931015%2019.9023%201.04608%2019.6464C1.16115%2019.3923%201.34073%2019.205%201.58656%2019.0883C1.83239%2018.9715%202.14447%2018.9131%202.52629%2018.9131H9.63967C10.0686%2018.9131%2010.3894%2019.0127%2010.5968%2019.2102C10.8061%2019.4094%2010.9107%2019.6688%2010.9107%2019.9899C10.9107%2020.3111%2010.8061%2020.5808%2010.5968%2020.7783C10.3876%2020.9775%2010.0686%2021.0754%209.63967%2021.0754V21.0771Z%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M17.2848%2027.0385V20.3781C17.2848%2019.8113%2017.4069%2019.3854%2017.6527%2019.102C17.8985%2018.8186%2018.2193%2018.6761%2018.6186%2018.6761C19.0178%2018.6761%2019.3665%2018.8186%2019.6123%2019.102C19.8582%2019.3854%2019.9802%2019.8113%2019.9802%2020.3781V27.1896C19.9802%2027.9642%2020.0639%2028.6117%2020.2295%2029.1304C20.3952%2029.6508%2020.6916%2030.0527%2021.1152%2030.3395C21.5389%2030.6263%2022.1317%2030.7689%2022.8936%2030.7689C23.9466%2030.7689%2024.6911%2030.4769%2025.127%2029.8947C25.5628%2029.3125%2025.7808%2028.4279%2025.7808%2027.2446V20.3764C25.7808%2019.8027%2025.9011%2019.3768%2026.1434%2019.0968C26.3857%2018.8169%2026.7083%2018.6761%2027.1145%2018.6761C27.5208%2018.6761%2027.8485%2018.8169%2028.0996%2019.0968C28.3506%2019.3768%2028.4762%2019.8044%2028.4762%2020.3764V27.0368C28.4762%2028.1205%2028.3751%2029.0239%2028.1728%2029.7487C27.9706%2030.4735%2027.587%2031.1089%2027.0239%2031.6568C26.5392%2032.1223%2025.976%2032.4623%2025.3362%2032.677C24.6946%2032.8917%2023.9449%2032.9982%2023.0853%2032.9982C22.0619%2032.9982%2021.1815%2032.8831%2020.444%2032.653C19.7048%2032.4228%2019.1033%2032.0673%2018.6377%2031.5847C18.1722%2031.1038%2017.8305%2030.4855%2017.6126%2029.7332C17.3946%2028.981%2017.2866%2028.081%2017.2866%2027.0368L17.2848%2027.0385Z%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M44.0297%2021.2282H41.0885V31.2893C41.0885%2031.8681%2040.9647%2032.2992%2040.7154%2032.5791C40.4678%2032.8591%2040.147%2032.9999%2039.753%2032.9999C39.3589%2032.9999%2039.0277%2032.8573%2038.7766%2032.574C38.5256%2032.2906%2038.4%2031.8629%2038.4%2031.2893V21.2282H35.4588C34.9985%2021.2282%2034.6568%2021.1235%2034.4336%2020.9122C34.2105%2020.701%2034.0971%2020.4227%2034.0971%2020.0758C34.0971%2019.7289%2034.214%2019.4335%2034.4458%2019.2257C34.6777%2019.0178%2035.0159%2018.9131%2035.457%2018.9131H44.0262C44.4917%2018.9131%2044.8387%2019.0196%2045.0653%2019.2342C45.292%2019.4489%2045.4053%2019.7289%2045.4053%2020.0758C45.4053%2020.4227%2045.2902%2020.701%2045.0601%2020.9122C44.83%2021.1235%2044.4848%2021.2282%2044.0245%2021.2282H44.0297Z%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M61.8777%2028.3902C61.8777%2028.8316%2061.773%2029.3073%2061.5638%2029.8208C61.3546%2030.3344%2061.0268%2030.8376%2060.5788%2031.3322C60.1307%2031.8269%2059.5588%2032.2287%2058.8632%2032.5362C58.1675%2032.8453%2057.3568%2032.9999%2056.431%2032.9999C55.7284%2032.9999%2055.0903%2032.9312%2054.515%2032.7921C53.9396%2032.653%2053.4183%2032.4383%2052.9493%2032.1446C52.4803%2031.8509%2052.0497%2031.4662%2051.6557%2030.987C51.3052%2030.5525%2051.0054%2030.0664%2050.7578%2029.5271C50.5102%2028.9879%2050.3237%2028.4142%2050.1999%2027.8028C50.0761%2027.1914%2050.0133%2026.5439%2050.0133%2025.8569C50.0133%2024.7422%2050.1685%2023.7444%2050.4806%2022.8616C50.7927%2021.9805%2051.239%2021.2248%2051.8196%2020.5996C52.4001%2019.9745%2053.0818%2019.4953%2053.8612%2019.169C54.6422%2018.8409%2055.4739%2018.6778%2056.3578%2018.6778C57.4353%2018.6778%2058.3942%2018.9011%2059.2346%2019.3493C60.0749%2019.7959%2060.72%2020.3489%2061.1681%2021.0067C61.6161%2021.6645%2061.8393%2022.2862%2061.8393%2022.8719C61.8393%2023.193%2061.7312%2023.4764%2061.5133%2023.722C61.2953%2023.9676%2061.0321%2024.0913%2060.7235%2024.0913C60.3783%2024.0913%2060.1202%2024.0054%2059.9476%2023.8354C59.775%2023.6654%2059.5832%2023.3717%2059.3705%2022.956C59.0201%2022.269%2058.6069%2021.7555%2058.1309%2021.4155C57.655%2021.0754%2057.0709%2020.9054%2056.3753%2020.9054C55.2682%2020.9054%2054.386%2021.3433%2053.7287%2022.2192C53.0714%2023.0952%2052.7436%2024.3386%2052.7436%2025.9513C52.7436%2027.0282%2052.8883%2027.9247%2053.1795%2028.6392C53.4706%2029.3537%2053.8821%2029.8878%2054.4138%2030.2399C54.9456%2030.592%2055.5698%2030.7689%2056.2846%2030.7689C57.0587%2030.7689%2057.7142%2030.5697%2058.2495%2030.1695C58.7847%2029.7693%2059.1892%2029.1819%2059.4612%2028.4073C59.5763%2028.0415%2059.7192%2027.7444%2059.8884%2027.5142C60.0575%2027.2841%2060.3295%2027.169%2060.706%2027.169C61.0268%2027.169%2061.3023%2027.2858%2061.5324%2027.5194C61.7626%2027.753%2061.8777%2028.0415%2061.8777%2028.3884V28.3902Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E") no-repeat left top / contain;
    z-index: 9;
    pointer-events: none;
}

section.serSec3 {
    padding: 5rem 0;
}

section.serSec4 {
    padding: 5rem 0;
    background: linear-gradient(180deg, #F1F6F8 47.19%, rgba(241, 246, 248, 0) 100%);
}

section.serSec5 .bg {
    width: 100%;
    height: auto;
    display: block;
}

section.serSec5 {
    position: relative;
    cursor: pointer; /* [next] bấm cả section mở popup "Giá trị bền vững" */
}

section.serSec5:after {
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.9) 70%, #FFFFFF 100%);
    height: 13.1578rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.serSec5_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 42rem;
    padding: 5rem;
    background: linear-gradient(-90deg, rgba(58, 178, 227, 0.7) 4.96%, rgba(23, 101, 176, 0.7) 59.94%);
    backdrop-filter: blur(20px);
    clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
}

.serSec5_content>* {
    filter: brightness(0) invert(1);
}

.serSec5_content .content {
    margin-bottom: 2rem;
}

.serSec5_content a.button_link .icon:before {
    opacity: .2;
}

@media only screen and (max-width: 767px) {
    .serSec5_content {
        position: relative;
        width: 100%;
        padding: 2rem;
        clip-path: none;
    }


    .serSec5_content:after {
        content: "";
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.9) 70%, #FFFFFF 100%);
        height: 5.1578rem;
        position: absolute;
        bottom: initial;
        left: 0;
        right: 0;
        top: -5.1578rem;
    }

    section.serSec5:after {
        display: none;
    }
}

.serSec3_wrap h2.heading_title {
    margin: 0;
}

.serSec3_wrap {
    margin-bottom: 2rem;
}

.ser_mobile_cta {
    display: none;
}
@media (min-width: 1200px) {
    html {
        font-size: 1vw;
    }
}

@media only screen and (max-width: 1199px) {
    :root {
        --container-w: 950px
    }

    .load_home_page svg {
        width: 320px;
    }
}

@media only screen and (max-width: 991px) {
    :root {
        --container-w: 720px
    }

    .load_home_page svg {
        width: 320px;
    }

    .search-tabs .search-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 767px) {
    .grid-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .load_home_page svg {
        width: 240px;
    }

    #search-lightbox {
        margin-left: -20px;
        margin-right: -20px;
        max-width: calc(100% + 40px);
    }

    #search-lightbox .search-lightbox-title {
        margin-bottom: 20px;
        font-size: 20px;
    }

    #search-lightbox .search-keywords {
        margin-top: 20px;
    }

    #search-lightbox .search-keywords > a {
        font-size: 14px;
    }

    .search-tabs .search-grid {
        grid-template-columns: 1fr 1fr;
        grid-gap: 1.5rem 1rem
    }

    .search-page {
        padding: 3rem 0;
    }

    .search-page h1 {
        margin-bottom: 2rem;
    }

    .search-tabs .search-tabs-title .search-tab-title {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

@media(max-width: 767px) {
    .ct_info {
        padding-left:0;
        margin-top: 1.5rem;
    }

    .pc_card {
        flex: 0 0 calc(50% - .5rem);
    }
}

@media(max-width: 480px) {
    .pc_card {
        flex:0 0 100%;
    }
}

@media(max-width: 767px) {
    .jd_form_row {
        grid-template-columns:1fr;
    }

    .jd_welfare_grid {
        grid-template-columns: 1fr;
    }

    .jd_main {
        padding: 1.2rem;
    }
}

@media(max-width: 767px) {
    .policy_sidebar_wrap {
        margin-bottom:2rem;
    }
}

@media(max-width: 767px) {
    .pc_grid {
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width: 480px) {
    .pc_grid {
        grid-template-columns:1fr;
    }
}

@media(max-width: 767px) {
    .project_grid {
        grid-template-columns:1fr 1fr;
    }

    .popup_sub {
        flex-direction: column;
    }

    .popup_sub_img {
        width: 100%;
    }

    .popup_head,.popup_body {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        clip-path: polygon(0 0, 92% 0%, 100% 14%, 100% 100%, 0 100%, 0% 50%);
    }
}

@media(max-width: 480px) {
    .project_grid {
        grid-template-columns:1fr;
    }
}

@media(max-width: 767px) {
}

@media(max-width: 480px) {
    .project_grid {
        grid-template-columns:1fr;
    }
}

@media(max-width: 767px) {
    .faq_left_title {
        position:static;
        margin-bottom: 2rem;
        padding: 0;
    }
}

@media(max-width: 767px) {
    .form_row {
        grid-template-columns:1fr;
    }

    .contact_form_box {
        margin-top: 2rem;
    }
}

@media(max-width: 767px) {
    .mfr_grid {
        grid-template-columns:repeat(2,1fr);
    }

    .mfr_header {
        flex-direction: column;
    }
}

@media(max-width: 767px) {
    .sp_grid {
        grid-template-columns:repeat(2,1fr);
    }

    .sp_filter_left {
        flex-direction: column;
        align-items: stretch;
    }

    .sp_filter_input {
        min-width: auto;
    }
}

@media(max-width: 480px) {
    .sp_grid {
        grid-template-columns:1fr;
    }
}

@media(max-width: 767px) {
    .doc_grid {
        grid-template-columns:1fr;
    }
}

@media(max-width: 767px) {
    .article_sidebar {
        padding-left:0;
        margin-top: 2rem;
    }
}

@media(max-width: 767px) {
    .news_grid {
        grid-template-columns:1fr 1fr;
    }

    .news_list_col {
        padding-left: 0;
        margin-top: 1.5rem;
    }
}

@media(max-width: 480px) {
    .news_grid {
        grid-template-columns:1fr;
    }
}

@media(max-width: 767px) {
    .recruit_card {
        padding:1.2rem 3.5rem 1.2rem 1.2rem;
    }

    .recruit_card_tags {
        gap: .3rem;
    }
}

/* ============================================================
   HEADER
   ============================================================ */
#header {
    position: fixed;
    top: 0;
    z-index: 200;
    width: 100%;
    transition: background .3s ease, box-shadow .3s ease;
}

#header.header_scrolled .header_inner:before {
    opacity: 0;
}

#header.header_scrolled .header_logo_link {
    filter: none;
}

body.header_style_2 {
    padding-top: 6rem;
}

body.header_style_2 a.header_logo_link {
    filter: none;
}

body.header_style_2 .header_inner:before {
    display: none;
}

body.header_style_2 .header_right:before {
    background: #F1F6F8;
}

.header_wrap {
}

.header_inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.header_logo_link {
    display: flex;
    align-items: center;
    height: auto;
    padding: 1rem 0 0 2.56rem;
    flex-shrink: 0;
    text-decoration: none;
    filter: brightness(0) invert(1);
    transition: .5s all;
}

.header_logo_img {
    height: 4.5rem;
    display: block;
}

.header_right {
    display: flex;
    align-items: flex-start;
    width: auto;
    position: relative;
}

.header_right:before {
    content: '';
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 3% 99%, 0 60%);
    z-index: 0;
    pointer-events: none;
}

/* [next] Nhát cắt chéo ở góc dưới-trái chỉ hợp khi header_right thấp (thanh nav gọn); .header_nav_sub giờ
   có thể cao tới 80vh khi mở (gộp toàn bộ menu, hiển thị dọc) -> mốc "60%" của polygon rơi vào giữa danh
   sách, cắt xéo cả 1 mảng lớn. Mở menu thì bỏ hẳn nhát cắt, trả về hình chữ nhật thường. */
#header.open .header_right:before {
    clip-path: none;
}

/* Nav "card" nổi bên phải: nền riêng, góc trên-trái vát chéo, góc dưới-trái bo tròn */
.header_nav {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    border-radius: 0 0 0 1.25rem;
}

.header_nav_row {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding: 0 1.5rem 0 1.75rem;
    flex-shrink: 0;
    width: auto;
}

.header_nav_list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .1rem;
}

.header_nav_list > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    margin: 0 1.25rem;
    font-size: .9rem;
    font-weight: 600;
    color: #1765B0;
    text-decoration: none;
    white-space: nowrap;
    line-height: 3.5rem;
}

.header_nav_list > li.active > a {
    font-weight: 700;
}

.header_nav_list > li.has_sub {
    position: relative;
}

.header_submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(.5rem);
    min-width: 13rem;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 1rem 2rem rgba(23,101,176,.15);
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .3s all;
    z-index: 10;
}

.header_nav_list > li.has_sub:hover .header_submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.header_submenu li a {
    display: block;
    padding: .55rem 1.25rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
    color: #1765B0;
    text-decoration: none;
    white-space: nowrap;
    transition: .25s background;
}

.header_submenu li a:hover {
    background: rgba(23,101,176,.08);
}

.header_nav_list > li > a:before,.header_nav_sub > ul > li > a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: .2rem;
    border-radius: 0;
    background: #1765B0;
    transition: .5s all;
}

.header_search_btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: .4rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}

/* Sub row — chỉ hiện khi mở menu */
.header_nav_search {
    display: none;
}

.header_nav_sub {
    position: relative;
    z-index: 2;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: max-height .4s ease, opacity .3s ease;
}

/* [next] .header_nav_sub gộp LUÔN TOÀN BỘ menu (không chỉ phần dư sau mấy mục đầu ở .header_nav_list —
   xem renderNavItems trong header.component.js) và hiển thị DỌC, đủ chỗ cho mọi mục kể cả submenu con
   mở accordion nên max-height tính theo viewport (80vh) + tự cuộn thay vì 1 con số cố định. */
.header_nav.open .header_nav_sub {
    max-height: 80vh;
    overflow-y: auto;
    opacity: 1;
    border-top: 1px solid rgba(23,101,176,.15);
}

/* Thanh cuộn riêng cho .header_nav_sub (Chrome/Safari/Edge) khi menu gộp dài hơn 80vh */
.header_nav_sub::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.header_nav_sub::-webkit-scrollbar {
    width: 0.217rem;
    background-color: #F5F5F5;
}

.header_nav_sub::-webkit-scrollbar-thumb {
    background-color: #1765b0;
}

.header_nav_sub > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header_nav_sub > ul > li {
    width: 100%;
}

.header_nav_sub > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    font-size: .9rem;
    font-weight: 600;
    color: #1765B0;
    text-decoration: none;
    white-space: nowrap;
    line-height: normal;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid rgba(23,101,176,.12);
    transition: .3s all;
}

.header_nav_sub > ul > li:last-child > a {
    border-bottom: none;
}

/* Bỏ vạch xanh mọc-từ-giữa (dùng cho hàng ngang .header_nav_list), hàng dọc tô nền đầy khi hover/active thay cho nó */
.header_nav_sub > ul > li > a:before {
    display: none;
}

.header_nav_sub > ul > li > a:hover {
    background: rgba(23,101,176,.08);
}

.header_nav_sub > ul > li.active > a {
    background: rgb(23 101 176);
    color: #fff;
    padding-left: .75rem;
    padding-right: .75rem;
}

/* Mũi tên đổi màu trắng khi mục cha đang active (nền xanh đặc, xem rule trên) để không bị chìm vào nền.
   [next] Chỉ áp dụng cho mũi tên của CHÍNH mục đó trong menu dọc (selector cũ `li.has_sub.active .header_nav_arrow`
   là con cháu nên làm trắng luôn mũi tên ở hàng ngang .header_nav_list và mũi tên ">" của các mục con nền trắng ->
   mất mũi tên khi đang ở trang Dịch vụ/Sản phẩm; feedback lần 3, slide 8). */
.header_nav_sub > ul > li.has_sub.active > a .header_nav_arrow svg path {
    stroke: #fff;
}

/* Submenu con bên trong .header_nav_sub: luôn dạng accordion bấm mở (không hover) vì cả khối đã hiển thị dọc,
   xem headerSubmenuToggle() trong frontend.js (đã bỏ điều kiện <=767px riêng cho .header_nav_sub) */
.header_nav_sub .header_submenu {
    position: static;
    transform: unset !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 0 0 3rem;
    transition: max-height .4s cubic-bezier(.4,0,.2,1); /* [next] mượt hơn ease, JS toggleSubmenuSmooth() chạy theo chiều cao thật */
}

/* [next] Mở thì KHÔNG giới hạn chiều cao: menu CMS nhập dài (vd Sản phẩm > Thiết bị cơ khí 11 mục con) vượt 30rem
   làm các mục phía sau bị cắt mất (overflow:hidden). Cả khối .header_nav_sub đã tự cuộn (80vh) nên cao bao nhiêu cũng được. */
.header_nav_sub li.has_sub.open > .header_submenu {
    max-height: none;
}

.header_nav_sub .header_submenu li a {
    padding: .6rem 0;
    border-bottom: none;
}

.header_nav_sub .header_submenu li a:hover {
    background: transparent;
}

/* [next] Bọc mũi tên trong .header_nav_arrow (header.component.js) để đặt width/height cố định cho VÙNG
   chứa mà không kéo méo tỷ lệ svg gốc (11x7) như trước gán thẳng width/height lên <svg>. Đặt absolute +
   height:100% để cả chiều cao dòng đều bấm mở được, không chỉ đúng vị trí mũi tên. */
.header_nav_sub > ul > li.has_sub > a .header_nav_arrow {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 100%;
}

/* Chừa chỗ cho vùng bấm mũi tên (giờ absolute, không còn chiếm chỗ trong flex) để chữ dài không bị đè lên */
.header_nav_sub > ul > li.has_sub > a {
    padding-right: 3rem;
}

.header_nav_sub > ul > li.has_sub > a svg {
    transition: transform .25s ease;
}

.header_nav_sub > ul > li.has_sub.open > a svg {
    transform: rotate(180deg);
}

.header_nav_sub .header_submenu li.has_sub.open > a svg {
    transform: translateY(-50%) rotate(0deg);
}

.header_burger_btn {
    position: relative;
    background: #1765B0;
    border: none;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 3.5rem;
    width: 3.5rem;
}

.header_burger_btn .icon_burger,
.header_burger_btn .icon_close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
    transition: transform .35s ease, opacity .25s ease;
}

/* [next] icon_burger đổi từ <svg> sang 3 <span> (3 vạch); tỉ lệ 44:22 giữ bằng aspect-ratio, co theo nút (rem) để không tràn khi nút nhỏ lại ở màn hẹp. Bỏ top/left/transform của rule dùng chung với icon_close (center bằng absolute) vì icon_burger giờ tự căn giữa bằng position: relative */
.header_burger_btn .icon_burger {
    position: relative;
    display: block;
    width: 2.75rem;
    max-width: calc(100% - 1rem);
    aspect-ratio: 44 / 22;
    height: auto;
    top: unset;
    left: unset;
    transform: unset;
}

.header_burger_btn .icon_close {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.header_burger_btn.active .icon_burger {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.header_burger_btn.active .icon_close {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* [next] 3 vạch icon_burger dựng bằng <span> (trước là <path> SVG); vị trí/kích thước quy ra % theo toạ độ gốc viewBox 44x22 */
.header_burger_btn .icon_burger_line {
    position: absolute;
    right: 0;
    height: 6.818%;
    border-radius: 999px;
    background: #D8D8D8;
    transition: top .3s ease, width .3s ease, background .3s ease;
}

.header_burger_btn .icon_burger_line_top {
    top: 0;
    width: 65.909%;
}

.header_burger_btn .icon_burger_line_mid {
    top: 45.455%;
    width: 97.727%;
}

.header_burger_btn .icon_burger_line_bottom {
    top: 90.909%;
    width: 65.909%;
}

/* hover 3 line icon_burger: đổi vị trí cho nhau theo vòng (trên↔giữa↔dưới), độ dài trên-giữa-dưới đổi thành dài-ngắn-dài + sáng màu */
.header_burger_btn:hover .icon_burger_line {
    background: #fff;
}

.header_burger_btn:hover .icon_burger_line_top {
    top: 90.909%;
    width: 97.727%;
}

.header_burger_btn:hover .icon_burger_line_mid {
    top: 0;
    width: 97.727%;
}

.header_burger_btn:hover .icon_burger_line_bottom {
    top: 45.455%;
    width: 65.909%;
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
    background: #1765B0;
    color: #fff;
}

.footer_top {
    padding: 3.5rem 0;
}

.footer_tagline {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.35;
    color: #fff;
    margin: 0;
    max-width: 28rem;
}

.footer_nav_cols {
    display: flex;
    gap: 3rem;
    height: 100%;
}

.footer_nav_col {
    flex: 1;
}

.footer_nav_title {
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    margin: 0 0 .75rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(255,255,255,.2);
    position: relative;
}

.footer_nav_col > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.footer_nav_col > ul > li > a {
    position: relative;
    font-size: .7rem;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: color .2s;
    display: inline-block;
}

.footer_nav_col > ul > li > a:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -.2rem;
    width: 0;
    height: 1px;
    background: #3AB2E3;
    transition: .3s width;
}

.footer_nav_col > ul > li > a:hover {
    color: #fff;
}

.footer_nav_col > ul > li > a:hover:before {
    width: 100%;
}

.footer_social {
    display: flex;
    gap: .5rem;
    margin-top: 1.5rem;
}

.footer_social_btn {
    border-radius: 0.25rem;
    width: 1.9rem;
    height: 1.9rem;
    border: 1.5px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s;
    flex-shrink: 0;
}

.footer_social_btn:hover {
    border-color: #fff;
}

.footer_mid {
    border-top: 1px solid rgba(255,255,255,.2);
    padding: 1rem 0;
}

.footer_brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.footer_logo {
    width: 6rem;
    flex-shrink: 0;
}

.footer_brand_name {
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    margin: 0 0 .4rem;
}

.footer_brand_addr {
    font-size: .7rem;
    color: rgba(255,255,255,.8);
    margin: 0;
    line-height: 1.55;
}

.footer_contact {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: .5rem;
}

.footer_phone {
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    margin: 0 0 .4rem;
}

.footer_email a {
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    text-decoration: none;
}

.footer_bottom {
    border-top: 1px solid rgba(255,255,255,.2);
    padding: 1rem 0;
}

.footer_bottom_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer_copyright {
    font-size: .6rem;
    color: rgba(255,255,255,.65);
    margin: 0;
}

.footer_legal {
    display: flex;
    gap: 1.5rem;
    width: 50%;
    justify-content: space-between;
}

.footer_legal a {
    font-size: .8rem;
    color: #fff;
    text-decoration: underline;
    transition: color .2s;
    font-weight: 700;
}

.footer_legal a:hover {
    color: #fff;
}

/* ===================== ABOUT SEC 2 - Scroll Animation ===================== */
.about_sec_2_wrapper {
    position: relative; /* [next] bỏ height 300vh: không còn hiệu ứng theo scroll */
}

section.about_sec_2 {
    position: relative; /* [next] bỏ sticky */
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background: radial-gradient(50% 50% at 50% 50%, #F1F6F8 0%, #F8FBFC 70%, #FFFFFF 100%);
}

section.about_sec_2 > .row {
    flex: 1;
    margin-top: 0 !important;
    align-items: stretch;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

section.about_sec_2 > .row > .col {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
}

.about_sec_2_content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 3rem 0 2.5rem;
    box-sizing: border-box;
}

.about_sec_2_sub_wrap {
    text-align: center;
    flex-shrink: 0;
}

.about_sec_2 .title_nen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.about_sec_2 .title_nen > svg {
    position: absolute;
    top: 71%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    width: 100%;
    max-width: 900px;
    height: auto;
    opacity: 1;
}

.about_sec_2_title {
    position: relative;
    z-index: 1;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    background: linear-gradient( to right, rgb(23, 101, 176) var(--fill-pct, 0%), rgba(23, 101, 176, 0.3) var(--fill-pct, 0%) );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.about_sec_2_items {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-bottom: 1rem;
}

.about_sec_2_item {
    flex: 1;
    max-width: 23rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.about_sec_2_item.sec2_visible {
    opacity: 1;
    transform: translateY(0);
}

.about_sec_2_item:nth-child(2).sec2_visible {
    transition-delay: 0.18s;
}

/* ===================== ABOUT SEC 3 ===================== */
section.about_sec_3 {
}

section.about_sec_3_top {
    padding: 5rem 0 0;
    background: linear-gradient(180deg, #D3E6F9 0%, #F1F6F8 50%, #FFFFFF 100%);
}

section.about_sec_3_bottom {
    padding-bottom: 5rem;
}

.about_sec_3_slider {
    margin-top: 3rem;
}

.about_sec_3_slide .icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about_sec_3_slide h3 {
    color: #1765B0;
    font-weight: 600;
    font-size: 1rem;
    margin: 1.2rem 0;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid #1765B026;
    transition: .5s all;
    min-height: 5rem; /* [next] đồng chiều cao tiêu đề giữa các slide */
}

.about_sec_3_slide:hover h3 {
    border-color: transparent;
}

.about_sec_3_slide {
    padding: 1.3rem;
    transition: .5s all;
    cursor: pointer;
    position: relative;
}

.about_sec_3_slide:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(39.96deg, #1765B0 44.28%, #3AB2E3 100%);
    z-index: -1;
    opacity: 0;
    transition: .5s all;
    clip-path: polygon(0 0, 85% 0%, 100% 19%, 100% 100%, 0 100%, 0% 50%);
}

.about_sec_3_slide > * {
    filter: brightness(1) invert(0);
    transition: .5s all;
}

.about_sec_3_slide:hover > * {
    filter: brightness(0) invert(1);
}

.about_sec_3_slide:hover:before {
    opacity: 1;
}

.about_sec_3_items {
    margin-top: 5rem;
}

.about_sec_3_item {
    display: flex;
    align-items: center;
}

.about_sec_3_item .box_img, .about_sec_3_item .box_content {
    width: 50%;
}

.about_sec_3_item .box_img img {
    max-width: calc(100% + 2rem);
    float: right;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 87% 100%, 0 100%, 0% 50%);
    transform: translateX(3.5rem);
}

.about_sec_3_item .box_img {
    padding-right: 3rem;
}

.about_sec_3_item .box_content {
    padding: 0 7rem;
}

.about_sec_3_item:nth-child(even) .box_img {
    order: 2;
    padding: 0 0 0 3rem;
}

.about_sec_3_item:nth-child(even) .box_img img {
    float: left;
    clip-path: polygon(13% 0%, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 25%);
    transform: translateX(-3.5rem);
}

.about_sec_3_item h3 {
    color: #1765B0;
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 1.4rem;
    line-height: 1.2;
}

/* about_sec_6 */
section.about_sec_6 {
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
}

section.about_sec_6::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../image/bg_about_sec6.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

section.about_sec_6 .row {
    position: relative;
    z-index: 1;
}

section.home5+section.about_sec_6:before {
    width: 45rem;
    height: 25rem;
    right: 0;
    left: unset;
    top: 2rem;
}

.about_sec_6_content {
    max-width: 35rem;
    margin: 0 auto 4rem;
}

.about_sec_6_slider {
    overflow: hidden;
}

.about_sec_6_slider .item img {
    max-width: 60%;
    object-fit: contain;
    opacity: 1;
    transition: filter .3s, opacity .3s, transform .3s;
}

.about_sec_6_slider .item:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* ===================== DICH VU SEC 2 ===================== */
.serSec2_wrapper {
    position: relative; /* [next] bỏ height 300vh: không còn hiệu ứng theo scroll */
}

section.serSec2 {
    position: relative; /* [next] bỏ sticky */
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #fff;
}

/* [next] Lớp nền nằm dưới video để video (mix-blend-mode) hoà màu vào thay vì nền trắng */
.serSec2_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background: radial-gradient(83.6% 100% at 50% 100%, #1765B0 0%, #3AB2E3 100%);
}

section.serSec2 video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    mix-blend-mode: soft-light;
}

section.serSec2 > .row {
    position: relative;
    z-index: 1;
    flex: 1;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.serSec2_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 50rem;
    margin: auto;
}

.serSec2_title {
    font-size: clamp(1.6rem, 3.2vw, 3.2rem);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    -webkit-text-stroke: 1px rgba(23, 101, 176, 0.3);
    background: linear-gradient(to right, #fff var(--fill-pct, 0%), rgba(255, 255, 255, 0) var(--fill-pct, 0%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.serSec2_title.filled {
    -webkit-text-stroke-width: 0; /* [next] fill xong (scroll hết 80%) thì bỏ viền chữ */
}

.serSec2_title svg {
    display: block;
    margin: 0 auto 1rem;
    max-width: 100%;
}

/* ===================== DICH VU RESPONSIVE ===================== */

/* ── 1199px: Desktop lớn ── */
@media (max-width: 1199px) {
    section.serSec2 > .row {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    section.serSec3 .row,
    section.serSec4 .row {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 850px) {
    .serSec2_title {
        font-size: 4vw;
    }
    .serSec2_title svg {
        width: 75%;
        height: auto;
    }
    section.serSec3,
    section.serSec4 {
        padding: 3rem 0;
    }
    .serSec3_wrap {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .service_item h3 {
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 4vw !important;
    }
    section.serSec2 {
        align-items: center;
    }
    section.serSec2 > .row {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .serSec2_title {
        font-size: 6.5vw;
    }
    .serSec2_title svg {
        width: 100%;
        height: auto;
    }
    section.serSec3,
    section.serSec4 {
        padding: 2.5rem 0;
    }
    section.serSec3 .row,
    section.serSec4 .row {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .serSec3_wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    .serSec3_wrap h2.heading_title {
        text-align: center;
    }
    .serSec3_wrap > a.button_link {
        display: none;
    }
    .ser_mobile_cta {
        display: block;
        text-align: center;
        margin-top: 1.5rem;
    }
    .service_item h3 {
        font-size: 4vw;
        padding: 0;
    }
    .service_item .box_img:before {
        height: 6rem;
    }
    .service_item .service_item_overlay {
        padding-top: 6rem;
        background: linear-gradient(180deg, rgba(23, 101, 176, 0) 0%, rgba(23, 101, 176, .85) 40%, rgba(23, 101, 176, .92) 100%);
    }
    .service_item .service_item_overlay .content {
        max-height: 12rem;
        opacity: 1;
        margin-top: 0;
    }
    .service_item .box_img img {
        scale: 1.1;
    }
}

/* ============================================================
   RESPONSIVE TOÀN TRANG — 1199px / 850px / 767px
   ============================================================ */

/* ── 1199px ── */
@media (max-width: 1199px) {
    .home1_content {
        width: 30rem;
    }
    .home3_content {
        width: 30rem;
        padding: 5rem 8rem 4rem 3rem;
    }
}

/* ── 850px ── */
@media (max-width: 850px) {
    /* Global */
    .heading_title {
        font-size: 2rem;
    }

    /* HOME1 */
    .home1_content {
        width: 26rem;
    }
    .home1_content h1 {
        font-size: 2rem;
    }
    .home1_item .num b {
        font-size: 3rem;
    }
    .home1_item .num sub {
        font-size: 2.2rem;
    }

    /* HOME2 */
    section.home2 {
        padding: 5rem 0 6rem;
    }
    .home2_img {
        margin-left: 3rem;
    }

    /* HOME3 */
    .home3_content {
        width: 26rem;
        padding: 4rem 5rem 4rem 2rem;
    }
    .home3_item .box_img {
        height: 36rem;
    }

    /* HOME4 */
    section.home4 {
        padding: 4rem 0;
    }
    .home4_item h3 {
        font-size: 2rem;
    }

    /* HOME5 */
    section.home5 {
        padding: 3rem 0 0;
    }
    .home5_content {
        width: 18rem;
    }
    .home5_slider {
        margin-right: 6rem !important;
    }
    .item_project .box_img {
        height: 28rem;
    }

    /* ABOUT */
    section.about_sec_1 {
        padding: 5rem 0 4rem;
    }
    .about_sec_2_wrapper {
        height: 250vh;
    }
    .about_sec_2_title {
        font-size: 3.5vw;
    }
    .about_sec_2_items {
        gap: 1rem;
    }
    section.about_sec_3 {
        padding: 3.5rem 0;
    }
    section.about_sec_4 {
        padding: 3rem 0 5rem;
    }
    section.about_sec_5 {
        padding: 4rem 0;
    }
    .about_sec_5_right {
        padding-left: 2.5rem;
    }
    section.about_sec_6 {
        padding: 4rem 0;
    }

    /* PRODUCT BANNER */
    .sp_banner {
        padding: 3rem;
    }
    section.product_banner {
        margin-bottom: 3rem;
    }

    /* NHÀ SẢN XUẤT */
    section.mfr_sec_1 {
        padding: 4rem 0;
    }
    .mfr_grid {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 2rem;
    }

    /* DỰ ÁN */
    section.project_sec {
        padding: 3rem 0;
    }
    .project_grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    /* TIN TỨC */
    .news_grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* TUYỂN DỤNG */
    section.recruit_sec_1 {
        padding: 4rem 0 1rem;
    }
    section.recruit_sec_2 {
        padding: 1rem 0 3.5rem;
    }

    /* CHI TIẾT TUYỂN DỤNG */
    section.jd_sec {
        padding: 0 0 3rem;
    }

    /* LIÊN HỆ */
    section.contact_sec_1 {
        padding: 2.5rem 0;
    }

    /* CHÍNH SÁCH */
    section.policy_sec_1 {
        padding: 4rem 0;
    }

    /* FAQ */
    section.faq_sec_1 {
        padding: 3rem 0 4rem;
    }

    /* TÀI LIỆU */
    section.document_sec_1 {
        padding: 2.5rem 0 3rem;
    }
}

/* ── 767px (mobile) ── */
@media (max-width: 767px) {
    /* Global */
    .heading_title {
        font-size: 7vw;
    }
    .jd_breadcrumb {
        margin-bottom: 1.5rem;
        padding-top: .5rem;
    }
    .jd_breadcrumb ul {
        flex-wrap: nowrap;
    }
    .jd_breadcrumb ul>*:not(:last-child) {
        flex: 0 0 auto;
    }

    /* BANNER */
    .banner_page_box {
        padding: 1.2rem 1.5rem 1.5rem;
    }

    /* HOME1 */
    section.home1 .row:not(.row_bottom) {
        height: auto;
        padding: 30vw 0 2rem;
    }
    .row.row_bottom {
        padding: 0 0 1.5rem;
    }
    .home1_content {
        width: 100%;
        clip-path: polygon(0 0, 95% 0%, 100% 10%, 100% 100%, 0 100%, 0% 50%);
    }
    .home1_content h1 {
        font-size: 6vw;
    }
    ul.list_link {
        gap: 1.2rem;
    }
    .home1_items {
        gap: 1.5rem;
    }
    .home1_item {
        width: 100%;
        gap: 1rem;
    }
    .home1_item .num b {
        font-size: 2.2rem;
    }
    .home1_item .num sub {
        font-size: 1.8rem;
    }
    .home1_item .box_content b {
        font-size: 1.1rem;
    }

    /* HOME2 */
    section.home2 {
        padding: 3rem 0 4rem;
    }
    .home2_img {
        margin-left: 0;
        margin-top: 2rem;
    }

    /* HOME3 */
    .home3_wrap {
        flex-direction: column;
    }
    .home3_items {
        flex-direction: column;
    }
    .home3_content {
        width: 100%;
        flex: auto;
        padding: 2.5rem 1.2rem 2rem;
        text-align: center;
    }
    .home3_item .box_img {
        height: 34rem;
    }
    .home3_item.relative.active {
        width: 100%;
    }

    /* HOME4 */
    section.home4 {
        padding: 3rem 0;
    }
    .home4_item h3 {
        font-size: 6vw;
    }
    .home4_item .box_content {
        width: 100%;
    }

    /* HOME5 */
    section.home5 {
        padding: 2.5rem 0 0;
    }
    .home5_content {
        width: 100%;
    }
    .home5_slider {
        margin-right: 0 !important;
    }
    section.home5 div#home5Controls {
        margin: 1.5rem 10px 0;
    }
    .item_project .box_img {
        height: 22rem;
    }
    .item_project .box_content {
        width: 100%;
        clip-path: none;
        padding: 1.5rem;
    }

    /* ABOUT SEC 1 */
    section.about_sec_1 {
        padding: 3rem 0 2rem;
    }
    ul.about_sec_1_imgs {
        display: none;
    }
    .about_sec_1_content {
        margin: 2rem 0;
    }

    /* ABOUT SEC 2 */
    .about_sec_2_wrapper {
        height: auto;
    }
    .about_sec_2_title {
        font-size: 6vw;
    }
    .about_sec_2_items {
        flex-direction: column;
        align-items: center;
    }
    .about_sec_2_item {
        max-width: 100%;
    }

    /* ABOUT SEC 3,4,5,6 */
    section.about_sec_3 {
        padding: 2.5rem 0;
    }
    section.about_sec_4 {
        padding: 2.5rem 0 3.5rem;
        clip-path: none;
    }
    section.about_sec_4 .arrow_slider:hover {
        background: rgb(255 255 255 / 20%);
    }
    section.about_sec_5 {
        padding: 2.5rem 0;
    }
    .about_sec_5_left {
        flex-direction: column;
        gap: .8rem;
    }
    .about_sec_5_left svg {
        width: 4rem;
    }
    .about_sec_5_right {
        padding-left: 0;
        margin-top: 2rem;
    }
    .about_sec_5_right .content {
        padding-bottom: 2.5rem;
        margin-bottom: 2.5rem;
    }
    section.about_sec_6 {
        padding: 2.5rem 0;
    }
    section.home5+section.about_sec_6:before {
        width: 100%;
        height: 100%;
    }
    .about_sec_6_content {
        text-align: center;
        margin-bottom: 2rem !important;
    }

    /* PRODUCT BANNER */
    .sp_banner {
        padding: 1.5rem;
    }
    section.product_banner {
        margin-bottom: 2rem;
    }
    .sp_banner_content {
        max-width: 100%;
    }

    /* NHÀ SẢN XUẤT */
    section.mfr_sec_1 {
        padding: 2.5rem 0;
    }

    /* DỰ ÁN */
    section.project_sec {
        padding: 2.5rem 0;
    }
    .project_grid {
        grid-template-rows: auto;
    }

    /* TIN TỨC */
    section.news_featured_sec {
        padding: 2rem 0 0;
    }
    /* news_featured_card: desktop là flex-row, box_img = 48rem → bị đẩy ra ngoài màn hình */
    .news_featured_card {
        flex-direction: column;
        gap: 0rem;
    }
    .news_featured_card .box_img {
        width: 100%;
        height: 14rem;
    }
    .news_featured_overlay {
        padding: 1.2rem 0 1.5rem;
    }
    h3.news_featured_title {
        font-size: 1.1rem;
        margin: .6rem 0 .8rem;
    }
    p.news_featured_excerpt {
        display: none;
    }
    section.news_grid_sec {
        padding: 2.5rem 0 3rem;
    }
    .news_card img {
        height: 7rem;
    }

    /* TIN TỨC CHI TIẾT */
    section.article_sec {
        padding: 0 0 3rem;
    }

    /* TUYỂN DỤNG */
    section.recruit_sec_1 {
        padding: 3rem 0 1rem;
    }
    section.recruit_sec_2 {
        padding: 1rem 0 3rem;
    }

    /* CHI TIẾT TUYỂN DỤNG */
    section.jd_sec {
        padding: 0 0 2.5rem;
    }

    /* LIÊN HỆ */
    section.contact_sec_1 {
        padding: 2rem 0;
    }
    .contact_info {
        padding-right: 0;
    }

    /* CHÍNH SÁCH */
    section.policy_sec_1 {
        padding: 2.5rem 0;
    }

    /* FAQ */
    section.faq_sec_1 {
        padding: 2.5rem 0 3rem;
    }

    /* TÀI LIỆU */
    section.document_sec_1 {
        padding: 2rem 0 3rem;
    }
}

/* ── index.html bổ sung 850px ── */
@media (max-width: 850px) {
    section.home7 {
        padding: 3rem 0 2.5rem;
    }
    section.home8 {
        padding: 4rem 0;
    }
    .home8_box .wrap_slider {
        padding-left: 5rem;
    }
}

/* ── index.html bổ sung 767px ── */
@media (max-width: 767px) {
    /* home1: section phải đủ chiều cao chứa video */
    section.home1 {
        min-height: 100svh;
        overflow: hidden;
    }
    section.home1 .row:not(.row_bottom) {
        min-height: 65svh;
    }

    /* home2: 2 cột medium-5/7 không có small-12 → stack dọc */
    section.home2 .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* home3: đưa nội dung text lên trên items */
    .home3_content {
        order: -1;
    }

    /* home5: title + button stack dọc */
    .home5_title {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* home7 */
    section.home7 {
        padding: 2.5rem 0 2rem;
    }
    .home7_title {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    /* home8 */
    section.home8 {
        padding: 3rem 0;
    }
    .home8_wrap {
        flex-direction: column;
        gap: 1rem;
    }
    .home8_box .wrap_slider {
        padding-left: 0;
    }

    /* project_cta */
    .project_cta_bg {
        height: 32rem;
    }
    .project_cta_title {
        font-size: 5.5vw;
    }
}

/* ============================================================
   tin-tuc-emagazine-chi-tiet
   ============================================================ */
.emagazine_article_sec {
    padding: 2.5rem 0 5rem;
    background: #fff;
    line-height: 1.8;
}

.emagazine_head {
    margin-bottom: 2rem;
}

.emagazine_head_desc {
}

.emagazine_share_top {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .8rem;
}

.emagazine_share_top a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

.emagazine_share_top a svg path {
    transition: .25s;
}

.emagazine_share_top a:hover svg path {
    fill: #0d4f90;
}

.emagazine_banner {
    margin: 1.8rem 0 2.5rem;
}

.emagazine_banner img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Mục lục */
.emagazine_toc {
    max-width: 47rem;
    margin: 0 auto 3rem;
    box-shadow: 0 .3rem 1.5rem rgba(23,101,176,.08);
}

.emagazine_toc_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #E0EAF5;
    margin-bottom: .8rem;
}

.emagazine_toc .article_toc_title {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.emagazine_toc_chevron {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid #1765B04D;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .25s;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.emagazine_toc_chevron:hover {
    border-color: #1765B0;
    background: #EEF4FB;
}

.emagazine_toc_chevron svg {
    transition: transform .25s;
}

.emagazine_toc.collapsed .emagazine_toc_chevron svg {
    transform: rotate(180deg);
}

.emagazine_toc.collapsed .emagazine_toc_body {
    display: none;
}

/* Quote / nhận định chuyên gia */
.emagazine_quote {
    display: flex;
    align-items: stretch;
    margin-bottom: 2.5rem;
    overflow: hidden;
    margin-left: -7.5rem;
    margin-right: -7.5rem;
}

.emagazine_quote_img {
    flex: 0 0 50%;
}

.emagazine_quote_img img {
    width: 100%;
    height: 100%;
    min-height: 16rem;
    object-fit: cover;
    display: block;
}

.emagazine_quote_content {
    flex: 1;
    background: linear-gradient(90deg, #1765B0 47.14%, #3AB2E3 106.45%);
    color: #fff;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(90% 0, 100% 15%, 100% 100%, 0 100%, 0 0);
}

.emagazine_quote_content p {
}

.emagazine_quote_content p.emagazine_quote_name {
    font-weight: 700;
    margin: 0 0 .2rem;
    text-align: right;
}

.emagazine_quote_content p.emagazine_quote_role {
    font-size: .75rem;
    opacity: .85;
    margin: 0;
    text-align: right;
}

/* Đoạn thân bài */
.emagazine_body {
    margin-bottom: 2.5rem;
    max-width: 47rem;
    margin: 0 auto 3rem;
}

.emagazine_body p {
    margin: 0;
}

/* Khối nội dung đánh số 01/02/03... */
.emagazine_block {
    display: flex;
    align-items: center;
    gap: 5rem;
    margin-bottom: 3rem;
    scroll-margin-top: 6rem;
}

.emagazine_block.img-left {
    margin-left: -7.5rem;
    margin-right: -7.5rem;
    margin-top: 3rem;
}

.emagazine_block.img-right {
    flex-direction: row-reverse;
    margin-left: -7.5rem;
    margin-right: -7.5rem;
}

.emagazine_block.img-full {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    margin-left: -7.5rem;
    margin-right: -7.5rem;
}

.emagazine_block.img-full .emagazine_block_media {
    order: 2;
}

.emagazine_block.img-full .emagazine_block_content {
    order: 1;
}

.emagazine_block_media {
    flex: 0 0 50%;
}

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

.emagazine_block.img-full .emagazine_block_media img {
    height: auto;
}

.emagazine_block_content {
    flex: 1;
}

.emagazine_block_head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.emagazine_block_num {
    font-size: 2.5rem;
    font-weight: 400;
    color: #1765B0;
    line-height: 1;
    flex-shrink: 0;
    border-right: 1px solid #1765B026;
    padding-right: .8rem;
}

.emagazine_block_content h3 {
    font-size: 1rem !important;
    color: #1765B0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600;
}

.emagazine_block_content p {
}

.emagazine_block_note {
    font-size: .78rem !important;
    color: #8C8C8C !important;
}

.emagazine_block_note strong {
    color: #1765B0;
}

.emagazine_related_sec {
    padding: 4rem 0;
    background: linear-gradient(180deg, #F1F6F8 0%, rgba(241, 246, 248, 0) 100%);
}

.emagazine_related_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.emagazine_related_head h2.heading_title {
    margin: 0;
}

.emagazine_related_arrows {
    display: flex;
    gap: .6rem;
    flex-shrink: 0;
}

.emagazine_related_arrows .arrow_slider {
    position: static;
}

.emagazine_related_slider .news_card {
    background: #fff;
    padding: 0 0 1.5rem;
}

.emagazine_related_slider .news_card_body {
    padding: 1.5rem 1.2rem 0;
}

.home2_img .inner {
    width: 100%;
}
.home4_item .box_hover {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: .5s all;
    z-index: 9;
}

.home4_item:hover .box_hover {
    opacity: 1;
}

.box_hover {
    max-width: 28rem;
}
.footer_nav_title:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: #3AB2E3;
    width: 3.5rem;
    height: 2px;
    position: absolute;
    bottom: 0;
}

.footer_nav_col > ul li {
    margin: 0;
}

.footer_brand {
    max-width: 28rem;
    align-items: center;
}

.footer_mid .row {
    align-items: center;
}

p.footer_email {
    margin: 0;
}
.emagazine_banner {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.emagazine_article_sec .row {
    max-width: 62rem !important;
}

.emagazine_block.img-full .emagazine_block_content h3 {
    width: auto;
}
.header_burger_btn {
    margin: 0;
}

ul.header_nav_list li {
    margin: 0;
}

.header_search_btn svg {
    width: 1.2rem;
    height: auto;
}
/* [next] Hàng dọc full-width (xem .header_nav_sub > ul > li ở trên) không còn cần khoảng cách ngang kiểu hàng nằm ngang cũ */
.header_nav_sub li {
    margin: 0;
}
.header_inner:before {
    height: 8rem;
    position: absolute;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #1D1B1B 0%, rgba(29, 27, 27, 0) 100%);
    content: '';
    top: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.header_nav_list > li.active > a:before, .header_nav_list > li > a:hover:before,.header_nav_sub > ul > li > a:hover:before {width: 100%;}

.header_nav_sub > ul > li > a {
    position: relative;
    font-weight: 400;
    font-size: 1.25rem;
}

@media only screen and (max-width: 767px) {
    .header_logo_link {
        padding: .3rem .3rem .3rem .5rem;
        position: relative;
        z-index: 999;
    }

    .header_logo_img {
        height: 2.75rem;
    }

    .header_inner {
    }

    .header_inner:before {
        display: none;
    }

    .header_search_btn {
        display: none;
    }

    .header_nav_sub {
        border: none !important;
    }

    .header_right:before {
        display: none;
    }

    .header_nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 300;
        width: 82%;
        max-width: 320px;
        height: 100vh;
        overflow-y: auto;
        background: #fff;
        border-radius: 0;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 1.5rem;
        transform: translateX(-200%);
        transition: transform .4s ease;
        box-shadow: .5rem 0 2rem rgba(0,0,0,.15);
        padding-top: 4rem;
    }

    .header_nav.open {
        transform: translateX(0);
    }

    body.nav_open:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .5);
        z-index: 150;
    }

    .header_nav_row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: auto;
        padding: 0 1.5rem;
        gap: 0;
    }

    /* [next] .header_nav_sub đã gộp LUÔN mainItems (xem header.component.js) nên ở mobile (sidebar trượt ra,
       toàn bộ menu chỉ hiện trong 1 danh sách) ẩn hẳn .header_nav_list để không lặp lại 5 mục đầu 2 lần. */
    .header_nav_list {
        display: none;
    }

    .header_nav_list > li.active > a,
    .header_nav_sub > ul > li.active > a {
        background: rgb(23 101 176);
        color: #fff;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .header_submenu {
        position: static;
        transform: unset !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border-radius: 0;
        min-width: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding: 0 0 0 1rem;
        transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s cubic-bezier(.4,0,.2,1);
    }

    /* [next] Bỏ dấu ">" ngay sau .header_nav_list (chỉ khớp li cấp gốc) -> khớp li.has_sub.open ở BẤT KỲ
       độ sâu nào, để submenu lồng tầng 3 trở đi (CMS cho lồng, template gốc không có sẵn UI) cũng tự mở
       theo đúng kiểu accordion khi CHÍNH nó có class "open" (không phải bật tất cả tầng cùng lúc — tầng
       con vẫn nằm trong tầng cha đang max-height:0 nên vẫn ẩn cho tới khi cha cũng được mở). max-height
       tăng lên 30rem (từ 20rem) vì tầng gốc "Sản phẩm" (6 mục) mở kèm 1 tầng con (vd 3 mục) có thể cao
       hơn 20rem, tràn/mất nội dung. */
    .header_nav_list li.has_sub.open > .header_submenu {
        max-height: none; /* [next] menu dài bị cắt ở 30rem, xem .header_nav_sub li.has_sub.open > .header_submenu */
        padding: 0 0 .5rem 1rem;
    }

    .header_submenu li a {
        padding: .6rem 0;
        border-bottom: none;
    }

    .header_search_btn {
        margin: 1rem 0 0;
    }

    .header_nav_sub {
        padding: 0 1.5rem;
    }

    .header_nav_sub > ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .header_nav_sub li {
        margin: 0;
        width: 100%;
    }

    .header_nav_sub > ul > li > a {
        width: 100%;
        line-height: normal;
        padding: .9rem 0;
        border-bottom: 1px solid rgba(23,101,176,.12);
    }

    .header_nav_search {
        display: block;
        padding: 1rem 1.5rem 1.5rem;
    }

    .header_nav_search_form {
        display: flex;
        align-items: center;
        border: 1.5px solid #1765B0;
    }

    .header_nav_search_input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        padding: .7rem .9rem;
        font-size: .85rem;
        color: #3A3838;
        margin: 0;
    }

    .header_nav_search_input::placeholder {
        color: #ABABAB;
    }

    .header_nav_search_btn {
        width: 2.6rem;
        height: 2.6rem;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: #1765B0;
        cursor: pointer;
        margin: 0;
        padding: .2rem;
    }

    .header_nav_search_btn svg circle,
    .header_nav_search_btn svg path {
        stroke: #fff;
    }

    .emagazine_quote,
    .emagazine_block.img-full,
    .emagazine_block.img-left,
    .emagazine_block.img-right {
        margin-left: initial;
        margin-right: initial;
    }
}

body.nav_open {
    overflow: hidden;
}
ul.list_link li {
    margin: 0;
}
@media only screen and (min-width: 768px) {
    body.nav_open .header_right:before {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 99%, 0 50%);
    }
}
@media only screen and (max-width: 1199px) {
    html {
        font-size: 1vw;
    }
    .button_link .icon svg {
        max-width: 54%;
    }
}
@media only screen and (max-width: 850px) {
    html {
        font-size: 1.2vw;
    }

}
@media (max-width: 767px) {

    /* ===== GIỚI THIỆU ===== */

    /* about_sec_1 */
    section.about_sec_1 {
        padding: 4rem 0 3rem;
    }
    section.about_sec_1 .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .about_sec_1_content {
        margin: 1.5rem 0 0;
    }
    .about_sec_1_content::before {
        display: none;
    }
    ul.about_sec_1_imgs {
        display: flex !important;
        flex-wrap: wrap;
        margin: 2rem -0.5rem 0;
        order: 2;
    }
    ul.about_sec_1_imgs li {
        position: relative;
        top: unset !important;
        left: unset !important;
        right: inherit !important;
        display: block !important;
        padding: .5rem;
        animation: none !important;
    }
    ul.about_sec_1_imgs li:nth-child(1) {
        width: 30% !important;
    }
    ul.about_sec_1_imgs li:nth-child(2) {
        width: 70% !important;
    }
    ul.about_sec_1_imgs li:nth-child(3) {
        width: 40% !important;
    }
    ul.about_sec_1_imgs li:nth-child(4) {
        width: 60% !important;
    }
    ul.about_sec_1_imgs img {
        position: unset !important;
        width: 100%;
        height: 8rem;
        object-fit: cover;
        max-width: unset !important;
        border-radius: .7rem;
    }
    section.about_sec_1 .col {
        display: flex;
        flex-direction: column;
    }
    section.about_sec_1 {
        padding-top: 0;
    }

    /* about_sec_3: col large-7 medium-7 heading → full width */
    section.about_sec_3 .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    section.about_sec_3_bottom {
        padding-bottom: 0;
    }

    /* about_sec_3_item: box_img + box_content từ 50/50 → stack dọc */
    .about_sec_3_item {
        flex-direction: column;
    }
    .about_sec_3_item .box_img,
    .about_sec_3_item .box_content {
        width: 100%;
        padding: 0 0 1.5rem;
    }
    .about_sec_3_item .box_img img {
        max-width: 100%;
        float: none;
        clip-path: none;
        transform: unset !important;
    }
    .about_sec_3_item:nth-child(even) .box_img {
        order: unset;
        padding: 0 0 1.5rem;
    }
    .about_sec_3_item:nth-child(even) .box_img img {
        float: none;
        clip-path: none;
    }
    .about_sec_3_item h3 {
        font-size: 7vw;
    }
    .about_sec_3_items {
        margin-top: 2.5rem;
    }

    section.about_sec_5 .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .about_sec_5_left > svg {
        display: none;
    }

    section.article_sec .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    section.jd_sec .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .box_sidebar_td {
        margin-top: 2rem;
        padding-left: 0;
    }
    .jd_sidebar_email {
        clip-path: none;
    }
    .jd_main h1.heading_title {
        margin-bottom: 1.5rem;
    }
    .form_bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .form_file_name {
        max-width: 9rem;
    }

    section.contact_sec_1 .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .contact_info h2 {
        font-size: 1.6rem;
    }
    .contact_social {
        flex-wrap: wrap;
        gap: .8rem;
    }
    .contact_form_box {
        margin-top: 2rem;
        clip-path: none;
        padding: 1.8rem 1.5rem;
    }
    .contact_form_box h3 {
        font-size: 1.6rem;
        margin-bottom: 1.2rem;
    }

    /* ===== FAQ ===== */
    /* col large-3/9 medium-3/9 small-12 → stack */
    section.faq_sec_1 .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .faq_left_title {
        position: static;
        font-size: 7vw;
        margin-bottom: 1.5rem;
        padding-right: 0;
    }

    /* ===== CHÍNH SÁCH ===== */
    /* col large-3/9 medium-4/8 small-12 → stack */
    section.policy_sec_1 .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .policy_sidebar_wrap {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #E0EAF5;
    }

    /* ===== DỰ ÁN ===== */
    /* project_grid 2 cột → 1 cột (thẻ 14rem / ~375px phone quá hẹp) */
    .project_grid {
        grid-template-columns: 1fr;
    }
    .project_card {
        height: 18rem;
    }

    /* ===== DỊCH VỤ (serSec) ===== */
    /* service_slider Swiper đã init, padding tránh touch */
    section.serSec3 .service_slider,
    section.serSec4 .service_slider {
        overflow: visible;
    }

    /* ===== TIN TỨC EMAGAZINE CHI TIẾT ===== */
    .emagazine_head .row {
        flex-direction: column;
    }
    .emagazine_head_desc {
        margin-top: 1rem;
    }
    .emagazine_banner img {
        height: 14rem;
    }
    .emagazine_toc {
        max-width: 100%;
    }
    .emagazine_quote {
        flex-direction: column;
    }
    .emagazine_quote_img img {
        min-height: 12rem;
    }
    .emagazine_quote_content {
        padding: 1.5rem;
    }
    .emagazine_block,
    .emagazine_block.img-right {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .emagazine_block_media img {
        height: 12rem;
    }
    .emagazine_block_num {
        font-size: 1.8rem;
    }
    .emagazine_related_slider .swiper-wrapper {
        flex-wrap: nowrap;
    }
    .home2_img {
        align-items: flex-start;
        margin-left: 4rem;
    }

    .project_cta_content {
        max-width: 100%;
    }

    .project_cta_bg {
        height: 100%;
        object-fit: cover;
    }

    .project_cta {
        padding: 3rem 0;
    }

    .home4_item {
        flex-wrap: wrap;
    }

    /* [next] toggle +/- bằng h3 (thay hover): dấu hiển thị trên h3, bấm để mở/đóng box_hover + arrow bên dưới */
    .home4_item h3 {
        position: relative;
        padding-right: 2.4rem;
    }

    .home4_item h3::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.8rem;
        line-height: 1;
        font-weight: 300;
        color: #1765B0;
    }

    .home4_item.active h3::after {
        content: '\2212';
    }

    /* [next] arrow dời xuống dưới box_hover (đổi thành thẻ a có icon + text), chỉ hiện khi item đang mở */
    .home4_item .arrow {
        position: static;
        width: auto;
        height: auto;
        justify-content: flex-start;
        gap: .5rem;
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height .4s ease, opacity .35s ease, margin-top .4s ease;
    }

    .home4_item .arrow span {
        display: inline-block;
        color: #1765B0;
        font-size: .9rem;
        font-weight: 600;
    }

    .home4_item.active .arrow {
        max-height: 3rem;
        opacity: 1;
        margin-top: 1rem;
        pointer-events: auto;
    }

    .home4_item .box_hover {
        position: unset !important;
        right: 0;
        top: -4rem;
        width: 100% !important;
        max-width: unset;
        pointer-events: unset !important;
        display: block !important;
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        overflow: hidden;
        transition: max-height .4s ease, opacity .35s ease, margin-top .4s ease;
        background: #f1f6f8;
        border-radius: 1rem;
    }

    .home4_item.active .box_hover {
        max-height: 20rem;
        opacity: 1;
        margin-top: 2rem;
        transform: unset;
    }

    .home4_item .box_hover img {
        max-height: 20rem;
        height: 100%;
        display: block;
        margin: auto;
    }

    .home2_img .box_svg {
        display: none;
    }

    .home1_item {
        flex-direction: column;
        text-align: center;
        width: 100%;
        gap: 0;
    }

    .home1_content {
        padding: 1rem;
    }

    section.home1 {
        min-height: 100vh;
    }

    .button_link .icon {
        width: 2rem;
        height: 2rem;
        margin-left: .7rem;
    }

    .button_link .icon svg {
        max-width: 50%;
    }

    .item_project .box_content {
        padding-right: 6rem;
    }

    .item_project .box_content svg {
        width: 1rem;
        height: 1rem;
    }

    .home8_box {
        padding: 0 10px;
    }

    section.home1 video {
        height: 100%;
        object-fit: cover;
    }

    .row.row_bottom {
        position: absolute;
        padding: 0;
    }
    .about_sec_5_left {
        display: block;
    }

    .about_sec_5_right {
        display: flex;
        flex-direction: column;
    }

    .about_sec_5_slider {
        width: 100%;
        display: none !important;
    }

    section.about_sec_5 .col.large-6.medium-6:nth-child(1) {
        order: 2;
    }

    .footer_nav_cols {
        flex-direction: column;
        padding: 3rem 0;
    }

    .footer_nav_col > ul > li > a {
        font-size: 1rem;
    }

    .footer_nav_title {
        font-size: 1.2rem;
    }

    .footer_tagline {
        font-size: 2rem;
    }

    .footer_bottom_inner {
        flex-direction: column;
        gap: 1rem;
    }

    .footer_legal {
        width: 100%;
    }

    .footer_logo {
        width: 4rem;
    }

    .footer_contact {
        padding-top: 2rem;
    }

    .footer_top {
        padding-bottom: 0;
    }
    section.serSec3 .row, section.serSec4 .row {
        padding: 0;
    }
    .sp_grid {
        gap: 1rem !important;
        grid-template-columns: 1fr 1fr;
    }

    .sp_card_name {
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        font-size: 1rem;
    }

    .sp_filter_left {
        width: 100%;
        flex-direction: unset;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sp_filter_sec .sp_filter_left > * {
        width: 48%;
    }

    .sp_filter_bar {
        width: 100%;
    }

    .sp_filter_select {
        width: 100%;
        justify-content: space-between;
    }

    .sp_filter_search {
        width: 100%;
    }

    .mfr_filter_toggle {
        padding: 0;
    }
    .sp_dd_btn {
        width: 100%;
        justify-content: space-between;
    }
    div#dd_danhmuc {
        width: 100%;
    }
    .rel_title {
        font-size: 1.5rem;
    }
    .ct_gallery_main {
        height: 15rem;
    }
    .ct_specs_table td {
        font-size: .9rem;
    }

    .ct_specs_title {
        font-size: 1.1rem;
    }

    .ct_specs_toggle {
        justify-content: center;
        margin-bottom: .5rem;
    }
    .mfr_header_left {
        width: 100%;
    }
    .news_grid_header {
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .policy_sidebar_wrap p.heading_title {
        margin-bottom: 1.5rem;
    }

    .policy_content {
        padding: 0;
    }

    .policy_content h1 {
        font-size: 2rem;
    }
    .banner_page_box h1 {
        font-size: 1.6rem;
    }

    .banner_breadcrumb ul li, .banner_breadcrumb ul li a {
        font-size: .7rem;
    }

    .banner_breadcrumb ul {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .banner_breadcrumb ul li:not(:last-child) {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .banner_breadcrumb ul li:last-child {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .faq_num {
        font-size: 1.8rem;
    }
    .project_grid {
        display: flex;
        flex-direction: column;
        gap: 1rem !important;
    }

    .project_cats {
        transform: unset;
        position: unset;
        order: -1;
    }

    .project_header {
        align-items: center;
        justify-content: center;
    }
    .popup_modal {
        padding: 1rem;
    }

    .popup_head_title {
        font-size: 1.5rem;
    }

    .popup_sec_num {
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
    }

    .popup_sec_title {
        font-size: 1rem;
    }
}

/* [next] Riêng trang Dịch vụ: template nạp swiper.css TRƯỚC frontend.css nên .slider_dots { display: flex }
   thắng .swiper-pagination-lock { display: none } (dots vẫn hiện dù đủ slide). Các page khác nạp swiper.css
   SAU frontend.css nên dots bị ẩn khi đủ slide. Next nạp css theo thứ tự chung của các page khác, nên khai báo
   lại riêng cho 2 slider của trang Dịch vụ để giống hệt template. */
#serviceSlider1Controls .slider_dots,
#serviceSlider2Controls .slider_dots {
    display: flex;
}

/* [next] Trang chi tiết danh mục: tiêu đề từng danh mục con lặp trước lưới sản phẩm (Figma 14292-16206, template không có) */
.pc_group_title {
    font-size: 2rem;
    line-height: 2.75rem;
    font-weight: 400;
    color: #1765B0;
    margin: 0 0 3.5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #DCE7F3;
}

.pc_group_title a {
    color: inherit;
    text-decoration: none;
}

.pc_group_title a:hover {
    text-decoration: underline;
}

.pc_grid + .load_more_wrap,
.pc_grid + .pc_group_title {
    margin-top: 5rem;
}

.load_more_wrap + .pc_group_title {
    margin-top: 5rem;
}

@media(max-width: 767px) {
    .pc_group_title {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-bottom: 2rem;
    }
}

/* [next] Chi tiết tin: ảnh đầu bài là thumbnail của bài (tỉ lệ bất kỳ, có thể dọc) -> khung ngang cố định theo tỉ lệ ảnh mẫu của template */
.article_main .article_featured_img {
    aspect-ratio: 932 / 605;
}

/* [next] Chi tiết tin: tiêu đề mục trong nội dung do trình soạn thảo là h2 -> hiển thị như h3 của template */
.article_main h2 {
    font-size: .9rem !important;
    font-weight: 700;
    color: #1765B0 !important;
    margin: 1.5rem 0 .6rem;
    padding: 0 !important;
}

/* [next] Chi tiết Emagazine: nội dung là HTML từ trình soạn thảo (p/h2/h3/ul/ol) thay cho các block cố định của template */
.emagazine_body p {
    margin: 0 0 1rem;
}

.emagazine_body h2,
.emagazine_body h3 {
    font-size: 1.1rem !important;
    font-weight: 700;
    color: #1765B0 !important;
    margin: 2rem 0 .8rem;
    padding: 0 !important;
    scroll-margin-top: 6rem;
}

.emagazine_body ul,
.emagazine_body ol {
    padding-left: 1.2rem;
    margin: .5rem 0 1rem;
}

.emagazine_body li {
    line-height: 1.8;
    margin-bottom: .2rem;
}

.emagazine_body img {
    max-width: 100%;
    height: auto;
}

/* [next] Chi tiết Emagazine: banner là thumbnail của bài (tỉ lệ bất kỳ) -> khung cố định theo tỉ lệ ảnh mẫu e1.jpg của template */
.emagazine_banner img {
    aspect-ratio: 1920 / 700;
}

/* [next] Mục lục Emagazine: số thứ tự đã nằm trong chữ ("1. ...", "2.1. ...") nên bỏ số tự động của <ol> (tránh "1. 1. ..."), giữ thụt lề cho mục con */
.emagazine_toc ol {
    list-style: none;
    padding-left: 0;
}

.emagazine_toc ol ol {
    padding-left: 1.2rem;
}

/* [next] Form Đăng ký ứng tuyển: ô bẫy spam (ẩn khỏi người dùng) + thông báo kết quả gửi form */
.form_hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.form_status {
    margin: 1rem 0 0;
    font-size: .8rem;
}

.form_status.success {
    color: #9BE7A9;
}

.form_status.error {
    color: #FFD1D1;
}

.form_status.sending {
    opacity: .8;
}

/* [next] Trang Tìm kiếm: thông báo không có kết quả */
.search_empty {
    color: #1765B0;
    margin: 2rem 0 3rem;
}

/* [next] Trang Tìm kiếm: khoảng cách phía trên khối kết quả (chỉ trang này, không ảnh hưởng .pc_sec ở trang danh mục) */
.pc_sec.search_results {
    padding-top: 3.75rem;
}

/* [next] Dropdown "Loại sản phẩm" (trang Danh mục sản phẩm): danh mục con thụt lề để phân biệt với danh mục cha, template không có case này */
.sp_filter_select_option.category-child {
    padding-left: 2rem;
}

/* [next] Dropdown "Loại sản phẩm" (id="dd_loai", trang Chi tiết danh mục sản phẩm): cùng ý trên nhưng cho hệ ".sp_dd_item" */
.sp_dd_item.category-child {
    padding-left: 2rem;
}

/* [next] Ẩn dropdown "Loại sản phẩm" (#dd_loai) ở trang Chi tiết danh mục sản phẩm theo yêu cầu — giữ nguyên DOM/dữ liệu
   (productList.component.js), chỉ ẩn bằng CSS để dễ bật lại sau này */
#dd_loai {
    display: none;
}

/* [next] Nút "Loại sản phẩm: <tên danh mục>" (Figma 14292-16347): phần tên danh mục in đậm, ".sp_filter_select" gốc có font-weight 400 nên "Loại sản phẩm:"
   giữ nguyên, chỉ đậm phần giá trị đã chọn — cùng kiểu ".mfr_filter_static" (nhạt) / phần còn lại (đậm) bên cạnh, template thiếu case này cho ô này */
.sp_filter_select_value {
    font-weight: 700;
    overflow: hidden;
}

/* [next] Trang 404 (src/app/not-found.js, không có mẫu riêng trong template gốc): khối "404" nền lớn + tiêu đề + mô tả + nút
   về trang chủ, dựa theo mẫu chung Thuỷ Thủ Agency đã dùng ở dự án khác, đổi màu/nút theo hệ thống EUTC (.button_link) */
.wrapper-notfound {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 55vh;
    padding: 4rem 1.5rem;
    overflow: hidden;
}

.wrapper-notfound .bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20rem;
    font-weight: 700;
    line-height: 1;
    color: #1765B0;
    opacity: .06;
    white-space: nowrap;
    pointer-events: none;
}

.wrapper-notfound .content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    max-width: 34rem;
}

.wrapper-notfound .title {
    font-size: 1.75rem;
    font-weight: 700;
}

.wrapper-notfound .subtitle {
    opacity: .75;
}

.wrapper-notfound .button_link {
    margin-top: 1rem;
}

@media (max-width: 767px) {
    .wrapper-notfound .bg-text {
        font-size: 8rem;
    }

    .wrapper-notfound .title {
        font-size: 1.25rem;
    }
}

/* [next] Lưới dự án (trang Danh sách dự án / Dự án theo danh mục): lặp mẫu masonry theo từng NHÓM 5 THẺ.
   Template gốc chỉ có đúng 5 thẻ tĩnh nên CSS chỉ khai báo 2 hàng (grid-template-rows: 15rem 15rem) và vị trí cho
   .project_card:nth-child(1..5). Bản Next bấm "XEM THÊM" để hiện thêm dự án, từ thẻ thứ 6 trở đi rơi vào hàng NGẦM
   (grid-auto-rows mặc định = auto) mà toàn bộ nội dung thẻ đều position:absolute => hàng cao 0px, thẻ mới thêm không
   nhìn thấy (bấm XEM THÊM tưởng như không có gì xảy ra). Thêm grid-auto-rows và đổi nth-child(n) -> nth-child(5n+n)
   để mỗi nhóm 5 thẻ lặp lại đúng mẫu của template. 5 thẻ đầu giữ nguyên vị trí như template (n = 0).
   Chỉ áp dụng từ 851px trở lên = đúng khoảng template dùng lưới masonry 3 cột (đã đo: 1440/1024 khớp template từng px).
   768-850px template đặt 2 cột + grid-template-rows:auto nên CHÍNH TEMPLATE đã vỡ sẵn (hàng cao 0px) -> không đụng vào
   để giữ y hệt template; <=767px lưới chuyển sang display:flex 1 cột nên thêm bao nhiêu thẻ cũng hiện đúng. */
@media (min-width: 851px) {
    .project_grid {
        grid-auto-rows: 15rem;
    }

    .project_card:nth-child(5n+1) {
        grid-column: 1;
        grid-row: auto;
    }

    .project_card:nth-child(5n+2) {
        grid-column: 2;
        grid-row: span 2;
    }

    .project_card:nth-child(5n+3) {
        grid-column: 3;
        grid-row: auto;
    }

    .project_card:nth-child(5n+4) {
        grid-column: 1;
        grid-row: auto;
    }

    .project_card:nth-child(5n+5) {
        grid-column: 3;
        grid-row: auto;
    }
}

/* [next] Ảnh hover của thẻ danh mục sản phẩm (trang Danh mục sản phẩm).
   Template chỉ có ảnh chính (.sp_card_img) + video hover (.sp_card_video); CMS nay có thêm field `hinh_anh_hover`
   (ảnh thứ 2 của từng danh mục) nên thêm lớp ảnh phủ kín thẻ, mờ sẵn và hiện dần khi hover — dùng đúng cơ chế
   opacity .35s của .sp_card_video để cảm giác chuyển giống hệt template. */
.sp_card_img_hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    z-index: 0;
}

.sp_card:hover .sp_card_img_hover {
    opacity: 1;
}

/* [next] Thẻ dự án kiểu "Sourcing" (trang chi tiết danh mục dự án) — theo Figma 14292-15919, KHÁC template
   du-an-sourcing-toan-cau.html: template dùng lưới masonry + chữ đè lên ảnh, Figma là lưới 3 cột ĐỀU NHAU và chữ
   nằm DƯỚI ảnh trên nền trắng. Giữ nguyên DOM/tên class của template, chỉ thêm biến thể .sourcing_grid/.sourcing_card.
   Số đo lấy từ Figma: thẻ 454x382, ảnh 454x278, khoảng cách 24px (1920px = 100rem nên 24px = 1.25rem).
   Đặt CUỐI file để thắng các rule nth-child masonry ở trên (dùng .project_grid.sourcing_grid cho đủ độ ưu tiên). */
.project_grid.sourcing_grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    /* Khoảng cách ngang 24px = 1.25rem (Figma); khoảng cách DỌC do margin-bottom của thẻ đảm nhiệm nên row-gap = 0,
       tránh cộng dồn hai lần. */
    column-gap: 1.25rem;
    row-gap: 0;
}

.project_grid.sourcing_grid .project_card {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    /* Figma: các hàng cách nhau ~69px (1920px ≈ 100rem ⇒ 1rem ≈ 19.2px) */
    margin-bottom: 3.64rem;
}

/* Ảnh trở lại luồng thường (template để position:absolute vì chữ đè lên) */
.project_grid.sourcing_grid .project_card_img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 454 / 278;
    object-fit: cover;
    display: block;
}

/* Khối chữ: bỏ nền gradient, xuống dưới ảnh */
.project_grid.sourcing_grid .project_card_overlay {
    position: static;
    background: none;
    padding: 1.2rem 0 0;
}

.project_grid.sourcing_grid .project_card_cat,
.project_grid.sourcing_grid .project_card_title {
    color: #1765B0;
}

/* Giới hạn bề ngang tiêu đề để xuống dòng như Figma (thẻ rộng 454px, tiêu đề ngắt ở ~336px = 17.5rem) */
.project_grid.sourcing_grid .project_card_title {
    max-width: 17.5rem;
}

/* Bỏ lớp phủ + icon khi hover của thẻ dự án thường (Figma bản này không có) */
.project_grid.sourcing_grid .project_card:after,
.project_grid.sourcing_grid .project_card:before {
    content: none;
}

@media (max-width: 850px) {
    .project_grid.sourcing_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .project_grid.sourcing_grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .project_grid.sourcing_grid .project_card {
        height: auto;
    }
    .home4_item .arrow {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.home4_item .arrow svg {
    order: 2;
    width: 1rem;
    height: auto;
}

.home4_item .arrow span {
    text-decoration: underline;
    font-size: 1.2rem;
    font-weight: 500;
}
header#header.open .header_logo_link {
    filter: unset;
}
}

/* [next] Loader trang chủ: rút ngắn hiệu ứng TẮT cho khớp nhịp mới của homeLoader.component.js (400ms rồi 100ms).
   Template gốc: .mask span + logo chạy 1s nhưng có transition-delay .8s => sau khi thêm class .complete vẫn phải
   ~1.8s loader mới biến mất hẳn, nên dù JS đếm nhanh người dùng vẫn thấy lâu. Hạ delay .8s -> .1s và thời lượng
   1s -> .4s (tổng còn ~0.5s). Selector phải có `div.` cho đủ độ ưu tiên vì template khai báo `div.load_home_page`. */
div.load_home_page {
    transition-duration: .4s;
}

div.load_home_page .mask,
div.load_home_page .mask span,
.load_home_page--logo {
    transition-duration: .4s;
}

div.load_home_page.complete .mask span,
div.load_home_page.complete .load_home_page--logo {
    transition-delay: .1s;
}

/* [next] Trạng thái "loader đã xong" đặt trên <body> (class home-loaded) thay vì thêm .complete vào chính div loader:
   div đó do React render nên sửa class trước khi hydrate sẽ gây lỗi hydration mismatch. Xem homeLoader.component.js.
   Các rule dưới đây là bản sao của .load_home_page.complete trong template. */
body.home-loaded div.load_home_page {
    visibility: hidden;
}

body.home-loaded div.load_home_page .mask {
    background-color: transparent;
}

body.home-loaded div.load_home_page .mask span {
    width: 0;
    opacity: 0;
    transition-delay: .1s;
}

body.home-loaded div.load_home_page .load_home_page--logo {
    opacity: 0;
    transition-delay: .1s;
}

/* [next] Slider logo "Được tin tưởng" (about_sec_6) phải trôi LIÊN TỤC, không khựng lại từng nhịp.
   Swiper chạy marquee bằng autoplay `delay: 0` + `speed: 3000`: mỗi slide là 1 transition 3 giây, hết
   transition là autoplay đẩy tiếp slide sau. Nhưng slider này bật `freeMode`, mà CSS của Swiper có
   `.swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out }` ⇒ mỗi bước 3 giây đều
   CHẬM DẦN VỀ 0 ở cuối slide, nhìn thành "chạy — dừng — chạy — dừng" (đo bằng Chrome headless, lấy
   translateX của .swiper-wrapper mỗi 250ms: tốc độ dao động 4 → 85 px/s, cứ ~3 giây lại gần như đứng
   hẳn một nhịp). Đổi sang `linear` thì tốc độ đều suốt vòng lặp (đo lại 15 giây: 635px, trung bình
   42 px/s, không nhịp nào tụt xuống gần 0) ⇒ trôi đều, không ngừng.
   Selector phải có ĐỦ 3 class (`.about_sec_6_slider.swiper > .swiper-wrapper`) mới thắng được rule của
   Swiper: rule kia là 2 class, mà `swiper-bundle.min.css` nạp SAU `frontend.css` (thứ tự của template)
   nên bằng điểm là Swiper thắng. Đặt qua biến `--swiper-wrapper-transition-timing-function` cũng không
   ăn thua vì rule free-mode gán thẳng giá trị, không đi qua biến. */
.about_sec_6_slider.swiper > .swiper-wrapper {
    transition-timing-function: linear;
}

/* [next] Thanh admin kiểu WordPress ở đầu trang, CHỈ hiện khi đang đăng nhập admin
   (src/components/share/adminBar/adminBar.component.js). Đây là BẢN SAO của
   eutc-api-demo/public/admin-assets/css/admin-bar.css để 2 nơi nhìn giống nhau —
   sửa 1 bên nhớ sửa cả bên kia. Class đều có tiền tố "tt-ab" nên không đụng class nào của template.
   Thanh này không ảnh hưởng khách vãng lai: chưa đăng nhập thì component không render gì và
   class `tt-has-admin-bar` cũng không được thêm vào <body> ⇒ giao diện y hệt template. */
.tt-admin-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: #1d2327;
    color: #f0f0f1;
    font-size: 13px;
    line-height: 32px;
    z-index: 100000;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.tt-ab-inner {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 8px;
}

.tt-ab-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    color: #f0f0f1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tt-ab-item:hover,
.tt-ab-item:focus-within {
    background: #2c3338;
    color: #72aee6;
}

.tt-ab-spacer { flex: 1 1 auto; }

.tt-ab-brand { font-weight: 700; letter-spacing: .04em; }

.tt-ab-sub {
    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    min-width: 180px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #2c3338;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}

.tt-ab-item:hover > .tt-ab-sub,
.tt-ab-item:focus-within > .tt-ab-sub { display: block; }

.tt-ab-right > .tt-ab-sub { left: auto; right: 0; }

.tt-ab-sub a,
.tt-ab-sub button {
    display: block;
    width: 100%;
    padding: 5px 14px;
    background: none;
    border: 0;
    color: #f0f0f1;
    font: inherit;
    line-height: 22px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tt-ab-sub a:hover,
.tt-ab-sub button:hover { background: #1d2327; color: #72aee6; }

/* Chừa chỗ cho thanh. Dùng MARGIN chứ không phải padding: template đã có
   `body.header_style_2 { padding-top: 6rem }` — thêm padding-top ở đây sẽ GHI ĐÈ (không cộng dồn)
   và làm hỏng khoảng đệm dưới header trên các trang đó. Margin thì cộng thêm, không đụng padding.
   #header của template là position:fixed top:0 nên margin của body không đẩy được nó -> hạ riêng. */
body.tt-has-admin-bar { margin-top: 32px; }
body.tt-has-admin-bar #header { top: 32px; }

@media (max-width: 600px) {
    .tt-ab-hide-sm { display: none; }
}

/* [next] Slider about_sec_3 (Swiper): slide cao theo nội dung dài nhất, không co cứng theo ảnh */
.about_sec_3_slider .swiper-slide {
    height: auto;
}

.about_sec_3_slider .swiper-slide > * {
    height: 100%;
}

/* [next] Popup "Giá trị bền vững" (serSec5, trang Dịch vụ) — bấm section mở popup nội dung + ảnh cố định
   theo thiết kế do khách cung cấp (chưa có field CMS). Cùng khuôn với .popup_overlay (project popup) nhưng
   đổi hẳn màu/bố cục nên tách class riêng để không đụng .popup_* đang dùng cho popup dự án. */
.value_popup_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 65, .55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.value_popup_overlay.active {
    display: flex;
}

.value_popup {
    position: relative;
    width: 100%;
    max-width: 74rem;
    max-height: 90vh;
    background: linear-gradient(180deg, #EFF6FC 0%, #E4EFFA 100%);
}

.value_popup_close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 2.2rem;
    height: 2.2rem;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    margin: 0;
    transition: .2s;
}

.value_popup_close svg {
    width: 1.4rem;
    height: auto;
}

.value_popup_close path {
    transition: .2s;
}

.value_popup_close:hover path {
    stroke: #3AB2E3;
}

.value_popup_scroll {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3.5rem 3.5rem 3rem;
    background: linear-gradient(180deg, #D3E6F9 0%, #F1F6F8 50%);
}

.value_popup_scroll::-webkit-scrollbar-track {
    background-color: #cedbff52;
}

.value_popup_scroll::-webkit-scrollbar {
    width: .117rem;
    background-color: #cedbff52;
}

.value_popup_scroll::-webkit-scrollbar-thumb {
    background-color: #1765B0;
}

.value_popup_hero_img {
    /* [next] để nguyên tỉ lệ gốc của ảnh (không ép aspect-ratio/cover) vì ảnh trong item_img có vệt cắt chéo
       ở góc trái-trên là chi tiết thiết kế đã "in" sẵn vào ảnh nguồn, ép crop sẽ cắt mất chi tiết đó */
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 2.5rem;
}

.value_popup_hero_row {
    display: flex;
    gap: 3rem;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(23, 101, 176, .15);
}

.value_popup_hero_title {
    font-size: 1.5rem;
    font-weight: 400;
    color: #1765B0;
    text-transform: uppercase;
    margin: 0;
    padding-right: 2rem;
    line-height: 1.4;
    width: 22rem;
    flex: 0 0 auto;
}

.value_popup_hero_desc {
    flex: 1;
    color: #2E75B3;
    font-size: .95rem;
    line-height: 1.6;
}

.value_popup_hero_desc p {
    margin: 0 0 1rem;
}

.value_popup_hero_desc p:last-child {
    margin-bottom: 0;
}

.value_popup_group {
    display: flex;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.value_popup_group:last-child {
    margin-bottom: 0;
}

.value_popup_group_label {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    color: #1765B0;
    text-transform: uppercase;
    padding-right: 2rem;
    border-right: 1px solid rgba(23, 101, 176, .15);
    align-self: stretch;
    width: 20rem;
    margin-right: 2rem;
    flex: 0 0 auto;
}

.value_popup_group_single .value_popup_group_label {
    position: relative;
    padding-bottom: 6rem;
}

.value_popup_wave {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 11rem;
    height: auto;
}

.value_popup_group_items {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.value_popup_item h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1765B0;
    margin: 0 0 .8rem;
}

.value_popup_item p {
    color: #2E75B3;
    font-size: .95rem;
    line-height: 1.8;
    margin: 0 0 1.5rem;
}

.value_popup_item_img {
    overflow: hidden;
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%, 0% 28%);
}

.value_popup_item_img img {
    width: 100%;
    height: auto;
    display: block;
}

@media only screen and (max-width: 850px) {
    .value_popup_scroll {
        padding: 4.5rem 1.5rem 2rem;
    }

    .value_popup_hero_row,
    .value_popup_group {
        flex-direction: column;
        gap: 1.5rem;
    }

    .value_popup_hero_title,
    .value_popup_group_label {
        flex: none;
        border-right: none;
        border-bottom: 1px solid rgba(23, 101, 176, .15);
        padding-right: 0;
        padding-bottom: 1.2rem;
    }

    .value_popup_group_single .value_popup_group_label {
        padding-bottom: 1.2rem;
    }

    .value_popup_wave {
        display: none;
    }
}

/* [next] Popup dự án (.popup_section): đường kẻ phân cách giữa các section + layout ảnh/nội dung nằm ngang */
.popup_section+.popup_section {
    margin: 0;
    border-top: 1px solid rgb(23 101 176 / 30%);
    margin-top: 2.5rem;
    padding-top: 2.5rem;
}

.popup_section .wrap_content {
    display: flex;
    gap: 3.5rem;
}

.popup_section .wrap_content .box_img {
    width: 25rem;
    flex: 0 0 auto;
}

.popup_body {
    padding: 0;
    margin-top: 3rem;
    padding-right: 3rem;
}

/* [next] Đặt CUỐI file để đè lên các rule .popup_body/.wrap_content/.box_img ở trên (cùng độ ưu tiên, thắng theo thứ tự sau) */
@media only screen and (max-width: 767px) {
    .popup_section .wrap_content {
        display: block;
    }

    .popup_body {
        padding: 0 1rem 0;
        overflow-x: hidden;
    }

    .popup_section .wrap_content .box_img {
        width: 100%;
    }
}

/* [next] Trang Dịch vụ: neo #thu-mua/#ky-thuat (menu Dịch vụ) cuộn tới serSec3/serSec4 không bị #header (fixed)
   che mất đầu section — cùng giá trị 6rem đã dùng cho các neo khác (mục lục bài viết, khối Emagazine). */
.serSec3,
.serSec4 {
    scroll-margin-top: 6rem;
}

/* [next] Submenu header quá 2 tầng (vd Sản phẩm > Thiết bị cơ khí > Động cơ & Hộp số...) — admin › Menu
   cho lồng bao nhiêu tầng cũng được nhưng template gốc chỉ vẽ sẵn UI cho ĐÚNG 2 tầng (.header_nav_list
   > li.has_sub > .header_submenu, xuống-giữa khi hover). Từ tầng 3 trở đi dùng lại NGUYÊN class
   "header_submenu" (đệ quy, xem header.component.js) nên phân biệt bằng chính độ sâu selector
   (.header_submenu .header_submenu = 1 submenu nằm trong 1 submenu khác) — không cần thêm class mới.
   Tầng lồng xổ SANG TRÁI (right:100%) thay vì xuống-giữa như tầng 1, vì "Sản phẩm" nằm gần mép phải
   header, xổ sang phải sẽ tràn ra ngoài màn hình ở độ rộng desktop vừa (1024–1366px). Mặc định ẨN kể cả
   khi tầng cha đang hiện (rule gốc .header_nav_list > li.has_sub:hover .header_submenu là selector
   dạng "con cháu" nên vô tình hiện luôn mọi tầng cùng lúc khi hover tầng 1) — chỉ hiện khi hover ĐÚNG
   mục cấp 2 đang chứa nó, đúng kiểu flyout xổ từng cấp. Không đụng gì tới mobile (khối @media 767px ở
   trên đã ép position:static/max-height cho MỌI .header_submenu bất kể độ sâu, tự đúng cho tầng lồng). */
.header_submenu li.has_sub {
    position: relative;
}

/* [next] Mũi tên đặt "position: absolute" (không dùng display:flex như bản đầu) để KHÔNG đụng vào
   layout chữ — bản đầu dùng flex làm chữ của mục có submenu (Thiết bị cơ khí, Các thiết bị khác) bắt
   đầu lệch trái/phải khác với mục không có submenu trong CÙNG danh sách (menu cấp 2 nhìn "lệch dòng"
   đúng lỗi đã gặp), vì text node + khoảng trắng trước <svg> bị coi là 1 flex-item riêng nên trình
   duyệt tính vị trí bắt đầu khác đi. Chừa thêm padding-right cho mũi tên, còn lại giữ NGUYÊN
   display:block + padding gốc của .header_submenu li a (áp dụng chung mọi mục, có hay không có
   submenu) nên chữ luôn bắt đầu cùng 1 vị trí. */
.header_submenu li.has_sub > a {
    position: relative;
    padding-right: 2rem;
}

.header_submenu li.has_sub > a svg {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%) rotate(-90deg);
}

/* [next] Vùng bấm cho mũi tên submenu cấp 2 trở lên (renderSubmenu, header.component.js bọc thêm
   div.header_nav_arrow quanh <svg>). Div này CHỈ để mở rộng diện tích bấm, không đụng tới style định
   vị/xoay của <svg> ở rule ngay trên: vì div cũng "position: absolute" với top/right/bottom trùng khít
   mép của chính <a> (cha có position:relative), nó trở thành positioning context GẦN HƠN cho <svg>
   nhưng top/right tính ra vẫn y hệt như tính theo <a> (3 cạnh trùng nhau), chỉ cạnh trái hẹp hơn -> vị
   trí/góc xoay hiển thị của mũi tên không đổi, chỉ thêm vùng vô hình để chạm trúng dễ hơn trên mobile
   (trước đây chỉ có đúng 11x7px của <svg>, rất hay chạm hụt sang chữ bên cạnh và bị điều hướng nhầm
   trang thay vì mở submenu). */
.header_submenu li.has_sub > a .header_nav_arrow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
}

/* .header_nav_sub = menu dọc bấm mở ở mọi độ rộng màn hình (xem ghi chú đầu file) nên cần vùng bấm
   rộng hơn hẳn so với flyout desktop (hover là chính, click chỉ là phụ) */
.header_nav_sub .header_submenu li.has_sub > a .header_nav_arrow {
    width: 2.75rem;
}

/* [next] Selector dài hơn (.header_nav_list li.has_sub ... thay vì chỉ .header_submenu .header_submenu)
   để ĐỘ ƯU TIÊN CSS bằng đúng rule gốc "(.header_nav_list > li.has_sub:hover .header_submenu)" ở trên —
   rule gốc là selector "con cháu" (dùng dấu cách, không phải ">") nên khi hover tầng 1 nó khớp LUÔN cả
   tầng 3 (cháu của cháu) và ĐANG THẮNG vì có độ ưu tiên cao hơn bản đầu (chỉ .header_submenu
   .header_submenu, 2 class) — hover "Sản phẩm" bị lộ luôn tầng 3, đúng lỗi đã gặp. Cân bằng lại độ ưu
   tiên (đều 4 class + 1 thẻ) thì rule NẰM SAU (rule ẩn tầng lồng, rồi rule hiện khi hover đúng tầng 2)
   mới thắng được. */
.header_nav_list li.has_sub .header_submenu .header_submenu {
    top: 0;
    left: auto;
    right: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(.5rem);
}

/* [next] PHẢI bắt đầu bằng .header_submenu (không phải .header_nav_list) — nếu không selector này khớp
   LUÔN cả li.has_sub CẤP GỐC (vd "Sản phẩm", cũng nằm trong .header_nav_list), lúc hover "Sản phẩm" nó
   đè mất transform:translateX(-50%) (rule gốc dùng để canh GIỮA tầng 2) bằng translateX(0) ở đây — tầng
   2 bị chạy lệch sang phải đúng lỗi đã gặp. Bắt buộc phải có tổ tiên .header_submenu thì mới CHỈ khớp
   tầng 3 trở đi (tầng 2 luôn nằm trong .header_nav_list > li, không nằm trong .header_submenu nào cả). */
.header_submenu li.has_sub:hover > .header_submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* [next] Mobile chạm ngón tay (không có hover thật) hay bị "dính" nền hover (rgba(23,101,176,.08) ở
   rule gốc .header_submenu li a:hover) sau khi chạm mở submenu — trông như đang chọn nhầm dòng. Tắt
   hẳn nền hover trong menu mobile, giữ nguyên cho desktop (rule gốc nằm ngoài media query này).
   Mũi tên cũng xoay theo khi bấm mở (.open, gán bởi headerSubmenuToggle() trong frontend.js) để báo
   đúng trạng thái đang mở/đóng, giống mọi accordion thông thường — template gốc chưa có transition
   này (mũi tên đứng yên dù bấm mở hay đóng). Tầng 1 mặc định chỉ hướng xuống (path vẽ sẵn hình "V",
   không xoay) -> mở thì xoay 180° thành hướng lên. Tầng 2 trở đi mặc định xoay -90° để hướng sang
   phải (khớp flyout desktop, xem .header_submenu li.has_sub > a svg ở trên) -> mở thì xoay về 0° cho
   hướng xuống, PHẢI giữ nguyên translateY(-50%) (đang dùng để canh giữa theo chiều dọc) kèm theo
   trong cùng 1 khai báo transform, nếu không nó bị mất luôn (transform không cộng dồn giữa 2 rule). */
@media only screen and (max-width: 767px) {
    .header_submenu li a:hover {
        background: transparent;
    }

    .header_nav_list li.has_sub > a svg {
        transition: transform .25s ease;
    }

    .header_nav_list > li.has_sub.open > a svg {
        transform: rotate(180deg);
    }

    .header_submenu li.has_sub.open > a svg {
        transform: translateY(-50%) rotate(0deg);
    }

    /* [next] Giảm thụt lề submenu lồng trong menu dọc mobile: rule gốc .header_nav_sub .header_submenu
       (padding: 0 0 0 3rem) thụt quá sâu ở màn hình hẹp, làm tên danh mục dài dễ bị chật/xuống dòng.
       Chỉ áp dụng cho mobile, desktop/tablet giữ nguyên 3rem (rule gốc nằm ngoài media query này). */
    .header_nav_sub .header_submenu {
        padding-left: 1rem;
    }
}

/* [next] Giới thiệu sec1 (hero): nền xanh bên dưới, chữ trắng, logo header âm bản (trắng) khi chưa cuộn */
section.about_sec_1 {
    margin-top: -6rem; /* body.header_style_2 có padding-top 6rem: kéo hero lên để nền xanh phủ cả vùng header */
    padding-top: 9.5rem;
    background: radial-gradient(83.6% 100% at 50% 100%, #1765B0 0%, #3AB2E3 100%);
    padding-bottom: 6rem;
}

/* [next] Logo chìm (2 vòng cung của logo EUTC phía trên tiêu đề) — bản nền trắng dùng màu xanh + lớp trắng mờ
   nên trên nền xanh không thấy được và đã bị ẩn; khách báo thiếu (feedback lần 3, slide 6). Vẽ lại cùng hình,
   màu TRẮNG mờ dần xuống dưới, không có lớp phủ trắng. */
section.about_sec_1 .about_sec_1_content::before {
    background-image: url("data:image/svg+xml,%3Csvg width='454' height='132' viewBox='0 0 454 132' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.25'%3E%3Cpath d='M327.76 84.5435C165.778 1.66054 78.131 131.711 78.131 131.711H0C6.41139 119.442 16.2925 103.036 31.089 85.8635C31.089 85.8635 63.1459 48.6397 102.042 29.4055C156.488 2.49025 247.392 22.4661 327.76 84.556V84.5435Z' fill='url%28%23g%29'/%3E%3Cpath d='M359.678 111.697L373.846 131.711H454.001C454.001 131.711 373.016 -49.3166 138.623 13.0876C138.623 13.0876 279.636 4.03624 359.665 111.697H359.678Z' fill='url%28%23g%29'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='g' x1='227' y1='0' x2='227' y2='132' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

section.about_sec_1 .heading_title,
section.about_sec_1 .content {
    color: #fff;
}

body:has(.about_sec_1) #header:not(.header_scrolled) a.header_logo_link {
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    section.about_sec_1 {
        padding-top: 4.5rem;
        padding-bottom: 2rem;
    }
}

/* [next] Giới thiệu sec2: 2 khối hover nền xanh cắt góc phải trên (giống about_sec_3_slide) */
.about_sec_2_item {
    position: relative;
    padding: 1.3rem;
    cursor: pointer;
    isolation: isolate;
}

.about_sec_2_item:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(39.96deg, #1765B0 44.28%, #3AB2E3 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity .5s;
    clip-path: polygon(0 0, 85% 0%, 100% 19%, 100% 100%, 0 100%, 0% 50%);
}

.about_sec_2_item:hover:before {
    opacity: 1;
}

.about_sec_2_item span,
.about_sec_2_item h3,
.about_sec_2_item .content {
    transition: color .5s;
}

.about_sec_2_item:hover span,
.about_sec_2_item:hover h3,
.about_sec_2_item:hover .content,
.about_sec_2_item:hover .content * {
    color: #fff !important;
}

/* [next] Dịch vụ sec2: nền + video hiện bằng transition khi cuộn tới section (thay cho hiệu ứng theo scroll) */
section.serSec2 video,
.serSec2_bg {
    transition: opacity 1s ease;
}

section.serSec2.serSec2_on video,
section.serSec2.serSec2_on .serSec2_bg {
    opacity: 1;
}

/* [next] Ảnh mặc định (logo EUTC, /assets/image/header_logo.svg) khi sản phẩm / danh mục chưa có ảnh.
   SVG chỉ 109x91 nên đặt chiều rộng theo từng khung để không nhỏ xíu; danh mục dùng object-fit: contain
   (mặc định cover sẽ cắt logo). */
.pc_card_img[src$="header_logo.svg"] {
    width: 45%;
    object-fit: contain;
}

.ct_gallery_main_img[src$="header_logo.svg"] {
    width: 40%;
}

.sp_card_img[src$="header_logo.svg"] {
    object-fit: contain;
    padding: 22% 30% 34%;
    background: #f2f4f7;
}

/* [next] Thẻ sản phẩm không có ảnh hover (không render thẻ img hover): giữ ảnh chính khi rê chuột,
   rule gốc `.pc_card:hover .pc_card_img { opacity: 0 }` sẽ làm ảnh biến mất. */
.pc_card:hover .pc_card_top .pc_card_img {
    opacity: 1;
}

.pc_card:hover .pc_card_top:has(.pc_card_img_hover) .pc_card_img {
    opacity: 0;
}

@media (max-width: 767px) {
    .project_cats {
        flex-wrap: wrap;
    }
}

/* [next] Chi tiết sản phẩm: chỉ có 1 ảnh thì thumbnail nằm giữa (slide rộng 1/5 nên mặc định bị dạt trái) */
.ct_gallery_thumbs .swiper-wrapper:has(> .swiper-slide:only-child) {
    justify-content: center;
}

/* [next] Sản phẩm liên quan: mobile thẻ full width (bỏ giới hạn max-width của desktop) */
@media (max-width: 767px) {
    .rel_slider_wrap .pc_card {
        max-width: none;
    }
}

/* [next] Nút chuyển ngôn ngữ (cờ) ngay sau nút tìm kiếm trong #headerNav */
.header_lang_btn {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: .4rem;
    margin: 0;
    line-height: 1;
}
.header_lang_flag {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
}
@media (max-width: 850px) {
    .header_lang_btn {
        margin: 1rem 0 0;
    }
    .header_lang_flag {
        width: 2rem;
        height: 2rem;
    }
}

/* [next] Trang chủ "Sản phẩm EUTC": tên danh mục bọc trong link (feedback lần 3, slide 1) — giữ nguyên màu/cỡ chữ của h3.
   Mobile (<=767px) bấm tên vẫn mở/đóng accordion như cũ (jQuery home4Hover chặn điều hướng), đi trang qua nút mũi tên. */
.home4_item h3 a {
    color: inherit;
    text-decoration: none;
}

/* [next] Thẻ sản phẩm chưa có ảnh (ảnh mặc định = logo EUTC, PRODUCT_PLACEHOLDER trong util/productCards.js):
   chỉ hiện logo, ẩn chữ "EUTC" viền dọc trang trí bên phải (feedback lần 3, slide 3). */
.pc_card_top:has(> img.pc_card_img[src="/assets/image/header_logo.svg"]) .pc_card_brand {
    display: none;
}

/* [next] "Dự án nổi bật" ở trang chủ: slide có liên kết (dự án -> mở popup, link khác -> đi trang) thì hiện con trỏ tay */
.item_project.has_link {
    cursor: pointer;
}

/* [next] Banner đồng thuận cookie + hộp thoại tùy chỉnh (feedback lần 3, slide 10; component share/cookieConsent).
   Template không có khối này — dựng theo đặc tả trên trang CMS "Chính sách cookie và quy chuẩn thiết kế banner cookies":
   thanh cố định ở đáy màn hình, nút [Chấp thuận tất cả] nền #1765B0, [Tùy chỉnh cài đặt] nền trắng; modal 4 nhóm có
   công tắc bật/tắt (Thiết yếu khoá luôn bật). Góc vuông, font, màu theo hệ của site (popup dự án, button_link).
   z-index: trên #header (200), dưới loader trang chủ; modal trên popup dự án (1000). */
.cookie_banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: #fff;
    border-top: 3px solid #1765B0;
    box-shadow: 0 -.5rem 2rem rgba(13, 58, 122, .15);
    animation: cookie_slide_up .4s ease;
}

@keyframes cookie_slide_up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.cookie_banner_inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 75rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
}

.cookie_banner_content {
    flex: 1;
    min-width: 0;
}

.cookie_banner_title,
.cookie_modal_title {
    margin: 0 0 .4rem;
    color: #1765B0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.cookie_banner_text,
.cookie_modal_text {
    margin: 0;
    color: #1765B0;
    font-size: .8rem;
    line-height: 1.6;
}

a.cookie_banner_link {
    color: #1765B0;
    font-weight: 700;
    text-decoration: underline;
}

.cookie_banner_actions,
.cookie_modal_actions {
    display: flex;
    gap: .75rem;
    flex-shrink: 0;
}

.cookie_btn {
    margin: 0;
    min-height: 2.75rem;
    padding: .6rem 1.4rem;
    border: 1px solid #1765B0;
    border-radius: 0;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s, color .25s;
}

.cookie_btn_primary {
    background: #1765B0;
    color: #fff;
}

.cookie_btn_primary:hover {
    background: #0d3a7a;
    border-color: #0d3a7a;
    color: #fff;
}

.cookie_btn_outline {
    background: #fff;
    color: #1765B0;
}

.cookie_btn_outline:hover {
    background: rgba(23, 101, 176, .08);
    color: #1765B0;
}

.cookie_modal_overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, .55);
    overflow-y: auto;
}

.cookie_modal {
    position: relative;
    width: 100%;
    max-width: 40rem;
    margin: auto;
    padding: 2rem;
    background: linear-gradient(180deg, #D3E6F9 0%, #F1F6F8 30%);
}

.cookie_modal_close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    cursor: pointer;
}

.cookie_modal_title {
    padding-right: 2.5rem;
}

.cookie_groups {
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.cookie_group {
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(23, 101, 176, .15);
}

.cookie_group:last-child {
    border-bottom: 1px solid rgba(23, 101, 176, .15);
}

.cookie_group_head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cookie_group_name {
    flex: 1;
    margin: 0;
    color: #1765B0;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

.cookie_group_always {
    color: #1765B0;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: .7;
}

.cookie_group_desc {
    margin: .4rem 0 0;
    padding-right: 3.5rem;
    color: #1765B0;
    font-size: .75rem;
    line-height: 1.6;
    opacity: .85;
}

.cookie_switch {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
}

.cookie_switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.cookie_switch.locked input {
    cursor: not-allowed;
}

.cookie_switch_track {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: #B9C7D6;
    transition: background .25s;
}

.cookie_switch_track::after {
    content: "";
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #fff;
    transition: transform .25s;
}

.cookie_switch input:checked + .cookie_switch_track {
    background: #1765B0;
}

.cookie_switch input:checked + .cookie_switch_track::after {
    transform: translateX(1.25rem);
}

.cookie_switch.locked .cookie_switch_track {
    opacity: .55;
}

.cookie_switch input:focus-visible + .cookie_switch_track {
    outline: 2px solid #3AB2E3;
    outline-offset: 2px;
}

.cookie_modal_actions {
    justify-content: flex-end;
}

/* Nút "Cài đặt Cookie" trong dải link chân trang: cùng kiểu chữ với .footer_legal a */
.footer_legal .footer_cookie_btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    line-height: inherit;
    text-decoration: underline;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

@media (max-width: 849px) {
    .cookie_banner_inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }

    .cookie_banner_actions,
    .cookie_modal_actions {
        flex-direction: column-reverse;
    }

    .cookie_btn {
        width: 100%;
        min-height: 3rem;
        font-size: .85rem;
    }

    .cookie_banner_text {
        max-height: 30vh;
        overflow-y: auto;
    }

    .cookie_modal_overlay {
        align-items: flex-end;
        padding: 0;
    }

    .cookie_modal {
        padding: 1.5rem 1rem 1rem;
    }

    .cookie_group_desc {
        padding-right: 0;
    }
}

/* [next] Submenu accordion (menu dọc + menu mobile): các mục con hiện dần + trượt nhẹ xuống khi mở, đi cùng hiệu ứng
   max-height của toggleSubmenuSmooth() (frontend.js) cho cảm giác mượt hơn chỉ kéo giãn khung. */
.header_nav_sub .header_submenu > li {
    opacity: 0;
    transform: translateY(-.4rem);
    transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1);
}

.header_nav_sub li.has_sub.open > .header_submenu > li {
    opacity: 1;
    transform: none;
    transition-delay: .08s;
}

@media only screen and (max-width: 767px) {
    .header_nav_list .header_submenu > li {
        opacity: 0;
        transform: translateY(-.4rem);
        transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1);
    }

    .header_nav_list li.has_sub.open > .header_submenu > li {
        opacity: 1;
        transform: none;
        transition-delay: .08s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header_nav_sub .header_submenu,
    .header_nav_sub .header_submenu > li,
    .header_nav_list .header_submenu,
    .header_nav_list .header_submenu > li {
        transition: none !important;
    }
}

/* [next] Form "Đăng ký tư vấn" (Liên hệ) — ô "Quốc gia" (feedback khách 11/2026):
   - template đặt color #fff cho select nên <option> thừa hưởng chữ trắng trên nền trắng ⇒ danh sách trông trống;
   - mũi tên template vẽ màu xám #888 ⇒ đổi trắng cho giống chữ;
   - danh sách xổ xuống sát lề trái (select có padding:0 !important), dòng "Quốc gia" (option disabled) hiện thành dải xám.
   Trình duyệt hỗ trợ `appearance: base-select` (Chrome/Edge 135+) thì tuỳ biến hẳn khung danh sách; còn lại chỉ chỉnh được màu/lề option. */
.contact_form_box select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E");
}

.contact_form_box select option {
    color: #3A3838;
    background: #fff;
    padding: .4rem .8rem;
}

.contact_form_box select option[disabled] {
    display: none;
}

@supports (appearance: base-select) {
    .contact_form_box select,
    .contact_form_box select::picker(select) {
        appearance: base-select;
    }

    .contact_form_box select {
        display: flex;
        align-items: center;
        padding: 0 1.6rem 0 0 !important;
        border-color: rgba(255, 255, 255, 0.30);
        border-width: 0 0 1px;
        font: inherit;
        font-size: .75rem;
        line-height: normal;
        color: #fff;
        cursor: pointer;
    }

    /* mũi tên dùng ảnh nền ở trên (cùng vị trí template), bỏ mũi tên mặc định của base-select */
    .contact_form_box select::picker-icon {
        display: none;
    }

    .contact_form_box select::picker(select) {
        border: none;
        border-radius: 0;
        padding: .3rem 0;
        margin-top: .25rem;
        background: #fff;
        box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    }

    .contact_form_box select option {
        padding: .55rem 1rem;
        font-size: .75rem;
        line-height: 1.4;
        color: #3A3838;
        background: #fff;
        cursor: pointer;
    }

    .contact_form_box select option::checkmark {
        display: none;
    }

    .contact_form_box select option:hover,
    .contact_form_box select option:focus-visible {
        background: #EAF2FB;
        color: #1765B0;
        outline: none;
    }

    .contact_form_box select option:checked {
        background: #1765B0;
        color: #fff;
    }
}