@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,600i,700,700i,800,800i|PT+Sans:400,400i,700,700i,800,800i");


/* ============================================================
   GLOBAL BODY
============================================================ */

html {
    margin: 0;
    padding: 0;
}


body {
    margin: 0;
    padding: 0;

    font-family: 'Nunito', sans-serif;

    color: #414040;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.5;

    background: #ffffff;
}


/* ============================================================
   BOX SIZING
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ============================================================
   IMAGE BASELINE
============================================================ */

img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   LINK RESET
============================================================ */

a {
    color: inherit;
    text-decoration: none;
}


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


/* ============================================================
   BUTTON / FORM BASELINE
============================================================ */

button,
input,
select,
textarea {
    font-family: inherit;
}


button,
input,
select,
textarea {
    outline: none;
}


/* ============================================================
   HEADING BASELINE
============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {

    margin-top: 0;

    color: #333333;

    font-family: 'Nunito', sans-serif;

    font-weight: 600;

    line-height: 1.2;
}


/* ============================================================
   PARAGRAPH
============================================================ */

p {
    margin-top: 0;

    margin-bottom: 15px;
}


/* ============================================================
   LIST RESET
============================================================ */

ul,
ol {
    margin-top: 0;
}


ul,
ol {
    padding-left: 20px;
}


/* ============================================================
   SECTION BASELINE
============================================================ */

section {
    position: relative;
}


/* ============================================================
   GLOBAL CONTAINER
   Giữ behavior của .thm-container từ theme cũ.
============================================================ */

.thm-container {

    width: 100%;

    max-width: 1500px;

    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 15px;

    margin-left: auto;
    margin-right: auto;

    display: block;
}


/* ============================================================
   THM CONTAINER RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .thm-container {
        max-width: 1000px;
    }

}


@media (max-width: 991px) {

    .thm-container {
        max-width: 870px;
    }

}


@media (max-width: 767px) {

    .thm-container {
        max-width: 750px;
    }

}


@media (max-width: 570px) {

    .thm-container {
        max-width: 550px;
    }

}


/* ============================================================
   STANDARD SECTION PADDING
============================================================ */

.sec-pad {
    padding-top: 50px;
    padding-bottom: 50px;
}


/* ============================================================
   PT SANS UTILITY
   Dùng khi một component cũ/new cần giữ đúng typography
   PT Sans của theme.
============================================================ */

.font-pt-sans {
    font-family: 'PT Sans', sans-serif;
}


/* ============================================================
   NUNITO UTILITY
============================================================ */

.font-nunito {
    font-family: 'Nunito', sans-serif;
}


/* ============================================================
   ACCESSIBILITY / FOCUS
============================================================ */

:focus-visible {
    outline: 2px solid rgba(255, 189, 0, 0.65);

    outline-offset: 2px;
}


/* ============================================================
   CLEARFIX
   Giữ utility cơ bản cho các page legacy.
============================================================ */

.clearfix::before,
.clearfix::after {
    display: table;

    content: "";
}


.clearfix::after {
    clear: both;
}


/* ============================================================
   RESPONSIVE TEXT SAFETY
============================================================ */

@media (max-width: 767px) {

    body {
        font-size: 16px;
    }

}


/* ============================================================
   END HPTECH BASE
============================================================ */

/* ============================================================
   HPTECH DESIGN SYSTEM
   Consolidated component CSS
   Source: PHP inline <style> blocks audited from current theme
   ============================================================ */

:root {
    --hp-navy: #103451;
    --hp-navy-dark: #08283f;
    --hp-navy-deep: #061f33;
    --hp-yellow: #ffbd00;
    --hp-yellow-light: #ffc52a;
    --hp-yellow-dark: #d99d00;
    --hp-bg: #f3f6f9;
    --hp-text: #143653;
    --hp-muted: #8195a7;
}

/* Global utility kept outside components */
.hp-lightbox-open { overflow: hidden !important; }



/* ============================================================
   HPTECH BASE / GLOBAL
   Merged from hp.min.css
   ============================================================ */



/* ============================================================
   HERO + QUICK QUOTE
   Source: slide.php
   ============================================================ */

/* ============================================================
   HPTECH HERO
============================================================ */

.hp-hero {

    --hero-navy:
        #103451;

    --hero-navy-dark:
        #08283f;

    --hero-navy-deep:
        #061f33;

    --hero-yellow:
        #ffbd00;

    --hero-yellow-light:
        #ffc52a;

    position: relative;

    width: 100%;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden;

    background:
        var(--hero-navy-deep);

}

/* ============================================================
   SLIDE
============================================================ */

.hp-hero-slide {

    position: relative;

    height: 670px !important;

    min-height: 670px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden;

    background:
        center center / cover no-repeat;

}

/* ============================================================
   OVERLAY
============================================================ */

.hp-hero-overlay {

    position: absolute;

    z-index: 1;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(5,24,39,.92) 0%,
            rgba(8,40,63,.78) 34%,
            rgba(8,40,63,.43) 64%,
            rgba(8,40,63,.16) 100%
        );

}

/* ============================================================
   GRID
============================================================ */

.hp-hero-grid {

    position: absolute;

    z-index: 2;

    inset: 0;

    opacity: .24;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.8),
            transparent 82%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.8),
            transparent 82%
        );

}

/* ============================================================
   CONTAINER
============================================================ */

.hp-hero-container {

    position: relative;

    z-index: 5;

    width:
        calc(100% - 70px) !important;

    max-width:
        1400px !important;

    height:
        100% !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

}

/* ============================================================
   HERO CONTENT
============================================================ */

.hp-hero-content {

    position:
        absolute !important;

    left:
        0 !important;

    top:
        50% !important;

    width:
        625px !important;

    max-width:
        53% !important;

    transform:
        translateY(-50%) !important;

}

/* ============================================================
   EYEBROW
============================================================ */

.hp-hero-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        16px;

    color:
        var(--hero-yellow);

    font-size:
        12px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        2.8px;

}

.hp-hero-line {

    width:
        34px;

    height:
        2px;

    background:
        var(--hero-yellow);

}

.hp-hero-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--hero-yellow);

    box-shadow:
        0 0 0 5px
        rgba(255,189,0,.11);

}

/* ============================================================
   HERO TITLE
============================================================ */

.hp-hero-content h1 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        58px;

    line-height:
        1.02;

    font-weight:
        900;

    letter-spacing:
        -1.7px;

}

.hp-hero-content h1 strong {

    display:
        block;

    color:
        var(--hero-yellow);

}

/* ============================================================
   DESCRIPTION
============================================================ */

.hp-hero-description {

    max-width:
        620px;

    margin:
        20px 0 0 !important;

    color:
        rgba(255,255,255,.86);

    font-size:
        16px;

    line-height:
        1.72;

}

.hp-hero-description strong {

    color:
        #ffffff;

}

/* ============================================================
   FEATURES
============================================================ */

.hp-hero-features {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        20px;

}

.hp-hero-features span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        38px;

    padding:
        8px 12px;

    background:
        rgba(255,255,255,.09);

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:
        5px;

    color:
        rgba(255,255,255,.93);

    font-size:
        10.5px;

    line-height:
        1;

    font-weight:
        800;

    white-space:
        nowrap;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

}

.hp-hero-features b {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        17px;

    height:
        17px;

    border-radius:
        50%;

    background:
        rgba(255,189,0,.14);

    color:
        var(--hero-yellow);

    font-size:
        10px;

}

/* ============================================================
   BUTTONS
============================================================ */

.hp-hero-actions {

    display:
        flex;

    gap:
        11px;

    margin-top:
        21px !important;

}

.hp-hero-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-width:
        125px;

    height:
        46px;

    padding:
        0 18px;

    border-radius:
        6px;

    font-size:
        12px;

    font-weight:
        900;

    text-decoration:
        none !important;

}

.hp-hero-btn-primary {

    background:
        var(--hero-yellow);

    color:
        var(--hero-navy) !important;

    box-shadow:
        0 8px 20px
        rgba(255,189,0,.18);

}

.hp-hero-btn-primary:hover {

    background:
        var(--hero-yellow-light);

    color:
        var(--hero-navy) !important;

    transform:
        translateY(-2px);

}

.hp-hero-btn-outline {

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        rgba(255,255,255,.40);

    color:
        #ffffff !important;

}

.hp-hero-btn-outline:hover {

    background:
        rgba(255,255,255,.11);

    border-color:
        #ffffff;

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

}

/* ============================================================
   HERO MINI STATS
============================================================ */

.hp-hero-mini {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        25px !important;

    padding-top:
        17px;

    border-top:
        1px solid
        rgba(255,255,255,.18);

}

.hp-hero-mini div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}

.hp-hero-mini strong {

    color:
        #ffffff;

    font-size:
        22px;

    line-height:
        1;

    font-weight:
        900;

}

.hp-hero-mini span {

    color:
        rgba(255,255,255,.53);

    font-size:
        8px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        1.05px;

}

.hp-hero-mini i {

    width:
        1px;

    height:
        34px;

    background:
        rgba(255,255,255,.18);

}

/* ============================================================
   CONTROLS
============================================================ */

.hp-hero-control {

    position:
        absolute;

    z-index:
        30;

    top:
        50%;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius:
        50%;

    background:
        rgba(8,40,63,.30);

    color:
        #ffffff !important;

    font-size:
        20px;

    text-decoration:
        none !important;

}

.hp-hero-control:hover {

    background:
        var(--hero-yellow);

    border-color:
        var(--hero-yellow);

    color:
        var(--hero-navy) !important;

}

.hp-hero-control-prev {
    left: 17px;
}

.hp-hero-control-next {
    right: 17px;
}

/* ============================================================
   INDICATORS
============================================================ */

.hp-hero-indicators {

    position:
        absolute;

    z-index:
        30;

    left:
        50%;

    bottom:
        20px;

    width:
        auto;

    margin:
        0;

    padding:
        0;

    transform:
        translateX(-50%);

}

.hp-hero-indicators li {

    width:
        7px;

    height:
        7px;

    margin:
        0 4px;

    border:
        1px solid
        rgba(255,255,255,.45);

    border-radius:
        50%;

    background:
        transparent;

}

.hp-hero-indicators li.active {

    width:
        27px;

    border-radius:
        8px;

    border-color:
        var(--hero-yellow);

    background:
        var(--hero-yellow);

}

/* ============================================================
   QUICK QUOTE / GLASS
============================================================ */

.hp-hero-quote {

    position:
        absolute !important;

    z-index:
        40 !important;

    top:
        50% !important;

    right:
        max(
            25px,
            calc(
                (100% - 1400px) / 2
            )
        ) !important;

    width:
        450px !important;

    max-width:
        450px !important;

    margin:
        0 !important;

    padding:
        24px 24px 17px;

    transform:
        translateY(-50%) !important;

    /* ========================================================
       TRANSPARENT GLASS
    ======================================================== */

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.58),
            rgba(255,255,255,.38)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.65) !important;

    border-radius:
        17px !important;

    backdrop-filter:
        blur(12px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(135%) !important;

    box-shadow:

        0 24px 60px
        rgba(4,22,35,.24),

        0 8px 25px
        rgba(16,52,81,.10),

        inset 0 1px 0
        rgba(255,255,255,.80) !important;

    outline:
        1px solid
        rgba(255,255,255,.10) !important;

}

/* ============================================================
   GLASS LIGHT
============================================================ */

.hp-hero-quote::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            transparent 42%
        );

    pointer-events:
        none;

}

/* ============================================================
   QUOTE HEAD
============================================================ */

.hp-quote-head {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        18px;

}

.hp-quote-kicker {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #8d6700;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        2.4px;

}

.hp-quote-head h2 {

    margin:
        0;

    color:
        #0e304b !important;

    font-size:
        28px;

    line-height:
        1.12;

    font-weight:
        900;

    letter-spacing:
        -.4px;

}

.hp-quote-head h2 strong {

    color:
        #a97800;

}

.hp-quote-online {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        32px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(16,52,81,.10);

    border-radius:
        7px;

    background:
        rgba(255,255,255,.35);

    color:
        #60778b;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        1px;

}

.hp-quote-online i {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--hero-yellow);

}

/* ============================================================
   TABS
============================================================ */

.hp-quote-tabs {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        6px;

    margin-bottom:
        18px;

    padding:
        5px;

    background:
        rgba(215,225,233,.34);

    border:
        1px solid
        rgba(16,52,81,.08);

    border-radius:
        10px;

}

.hp-quote-tab {

    min-height:
        48px;

    padding:
        7px 12px;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        #557085;

    cursor:
        pointer;

    text-align:
        left;

}

.hp-quote-tab.active {

    background:
        rgba(255,255,255,.64);

    color:
        #103451;

    box-shadow:
        0 5px 15px
        rgba(16,52,81,.07);

}

.hp-tab-main {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        900;

}

.hp-tab-sub {

    display:
        block;

    color:
        #142d43;

    font-size:
        12px;

    line-height:
        1;

}

/* ============================================================
   FORM
============================================================ */

.hp-quote-form {

    position:
        relative;

    z-index:
        2;

    display:
        none;

}

.hp-quote-form.active {

    display:
        block;

    animation:
        hpQuoteFormIn .22s ease both;

}

@keyframes hpQuoteFormIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

/* ============================================================
   FORM TITLE
============================================================ */

.hp-quote-form-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        13px;

}

.hp-quote-form-title span {

    color:
        #8d6700;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        2px;

}

.hp-quote-form-title b {

    color:
        rgba(16,52,81,.15);

    font-size:
        42px;

    line-height:
        .8;

    font-weight:
        900;

}

/* ============================================================
   FORM ROW
============================================================ */

.hp-form-row {

    margin-bottom:
        14px;

}

.hp-form-two {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

}

.hp-form-field {

    min-width:
        0;

}

.hp-form-field label {

    display:
        block;

    margin:
        0 0 7px;

    color:
        #4f687d;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        800;

}

/* ============================================================
   INPUT / SELECT
============================================================ */

.hp-form-field input,
.hp-form-field select {

    width:
        100%;

    height:
        46px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(111,135,151,.42) !important;

    border-radius:
        8px;

    outline:
        none;

    background:
        rgba(255,255,255,.48) !important;

    color:
        #0f3551;

    font-family:
        inherit;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        700;

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.38);

}

.hp-form-field input::placeholder {

    color:
        #7b8f9f;

}

.hp-form-field input:focus,
.hp-form-field select:focus {

    border-color:
        rgba(255,189,0,.75) !important;

    background:
        rgba(255,255,255,.67) !important;

    box-shadow:
        0 0 0 3px
        rgba(255,189,0,.12);

}

/* ============================================================
   SIZE
============================================================ */

.hp-size {

    display:
        grid;

    grid-template-columns:
        1fr 30px 1fr;

    gap:
        7px;

    align-items:
        center;

}

.hp-size-input {

    position:
        relative;

}

.hp-size-input input {

    padding-right:
        42px;

}

.hp-size-input span {

    position:
        absolute;

    top:
        50%;

    right:
        11px;

    transform:
        translateY(-50%);

    color:
        #72889a;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        800;

}

.hp-size > b {

    text-align:
        center;

    color:
        #60798d;

    font-size:
        18px;

    font-weight:
        700;

}

/* ============================================================
   SUBMIT
============================================================ */

.hp-quote-submit {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    min-height:
        52px;

    margin-top:
        8px;

    padding:
        0 15px 0 18px;

    border:
        1px solid
        var(--hero-yellow) !important;

    border-radius:
        9px;

    background:
        rgba(255,189,0,.92) !important;

    color:
        #103451;

    font-family:
        inherit;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        .5px;

    cursor:
        pointer;

    box-shadow:
        0 9px 22px
        rgba(255,189,0,.20);

}

.hp-quote-submit:hover {

    background:
        var(--hero-yellow-light) !important;

}

.hp-quote-submit b {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(16,52,81,.11);

    font-size:
        16px;

}

/* ============================================================
   NOTE
============================================================ */

.hp-quote-note {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        10px;

    color:
        #03111b;

    font-size:
        11px;

    line-height:
        1.4;

}

.hp-quote-note span {

    width:
        19px;

    height:
        19px;

    flex:
        0 0 19px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(255,189,0,.15);

    color:
        #9a7000;

    font-size:
        12px;

    font-weight:
        900;

}

/* ============================================================
   FORM FOOTER
============================================================ */

.hp-quote-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        15px;

    padding-top:
        12px;

    border-top:
        1px solid
        rgba(16,52,81,.12);

    color:
        #04131f;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        1.2px;

}

.hp-quote-bottom i {

    flex:
        1;

    height:
        1px;

    background:
        rgba(16,52,81,.12);

}

.hp-quote-bottom span:last-child {

    color:
        #9b7000;

}

/* ============================================================
   DESKTOP 1400+
============================================================ */

@media (min-width: 1400px) {

    .hp-hero-slide {

        height:
            670px !important;

        min-height:
            670px !important;

    }

    .hp-hero-container {

        max-width:
            1400px !important;

    }

    .hp-hero-content h1 {

        font-size:
            58px;

    }

    .hp-hero-quote {

        width:
            450px !important;

        max-width:
            450px !important;

    }

}

/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1500px) {

    .hp-hero-slide {

        height:
            680px !important;

        min-height:
            680px !important;

    }

    .hp-hero-container {

        max-width:
            1450px !important;

    }

    .hp-hero-content h1 {

        font-size:
            61px;

    }

    .hp-hero-quote {

        width:
            460px !important;

        max-width:
            460px !important;

    }

}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1180px) {

    .hp-hero-slide {

        height:
            640px !important;

        min-height:
            640px !important;

    }

    .hp-hero-container {

        width:
            calc(100% - 45px) !important;

    }

    .hp-hero-content {

        width:
            550px !important;

        max-width:
            53% !important;

    }

    .hp-hero-content h1 {

        font-size:
            47px;

    }

    .hp-hero-description {

        font-size:
            14px;

    }

    .hp-hero-quote {

        right:
            18px !important;

        width:
            390px !important;

        max-width:
            390px !important;

    }

    .hp-quote-head h2 {

        font-size:
            24px;

    }

    .hp-form-field input,
    .hp-form-field select {

        height:
            43px;

        font-size:
            12px;

    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .hp-hero-slide {

        height:
            930px !important;

        min-height:
            930px !important;

    }

    .hp-hero-container {

        width:
            calc(100% - 22px) !important;

    }

    .hp-hero-content {

    top:
        29% !important;

    width:
        100% !important;

    max-width:
        100% !important;

    transform:
        translateY(calc(-50% - 25px)) !important;

}

    .hp-hero-content h1 {

        font-size:
            33px;

    }

    .hp-hero-description {

        font-size:
            11px;

    }

    .hp-hero-features {

        gap:
            6px;

    }

    .hp-hero-features span {

        min-height:
            32px;

        padding:
            6px 8px;

        font-size:
            8.5px;

    }

    .hp-hero-mini strong {

        font-size:
            18px;

    }

    .hp-hero-mini span {

        font-size:
            6.5px;

    }

    .hp-hero-quote {

        position:
            absolute !important;

        top:
            auto !important;
        transform: translateY(25px) !important;    

        left:
            10px !important;

        right:
            10px !important;

        bottom:
            30px !important;

        width:
            auto !important;

        max-width:
            none !important;

        padding:
            17px !important;
        border-radius:
            13px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.64),
                rgba(255,255,255,.46)
            ) !important;

        backdrop-filter:
            blur(12px)
            saturate(135%) !important;

        -webkit-backdrop-filter:
            blur(12px)
            saturate(135%) !important;

    }

    .hp-quote-head h2 {

        font-size:
            22px;

    }

    .hp-quote-form-title b {

        font-size:
            34px;

    }

    .hp-tab-main {

        font-size:
            11px;

    }

    .hp-tab-sub {

        font-size:
            12px;

    }

    .hp-form-field label {

        font-size:
            12px;

    }

    .hp-form-field input,
    .hp-form-field select {

        height:
            42px;

        font-size:
            12px;

    }

    .hp-quote-submit {

        min-height:
            46px;

        font-size:
            12px;

    }

}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 400px) {

    .hp-hero-slide {

        height:
            920px !important;

        min-height:
            920px !important;

    }

    .hp-hero-content {

    top:
        28% !important;

    transform:
        translateY(calc(-50% - 25px)) !important;

}

    .hp-hero-content h1 {

        font-size:
            30px;

    }

    .hp-hero-quote {

        left:
            8px !important;

        right:
            8px !important;

        bottom:
            25px !important;

        padding:
            25px !important;
        transform: translateY(25px) !important;
    }

}

/* ============================================================
   CAROUSEL FADE
============================================================ */

.hp-hero .carousel-fade .item {

    opacity:
        0;

    transition:
        opacity .8s ease-in-out;

}

.hp-hero .carousel-fade .item.active {

    opacity:
        1;

}
/* =====================================================
   QUICK QUOTE - DESKTOP
===================================================== */

.quick-quote,
.quick-quote-section,
#quick-quote {
    position: relative;
    z-index: 5;
    width: 100%;
    margin-top: 50px;
    clear: both;
}

.quick-quote h2,
.quick-quote-section h2,
#quick-quote h2 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.quick-quote label {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.quick-quote input,
.quick-quote select {
    min-height: 48px;
    font-size: 17px;
    line-height: 1.4;
    padding: 10px 14px;
}

.quick-quote button,
.quick-quote .btn {
    min-height: 50px;
    font-size: 17px;
    font-weight: 700;
    padding: 12px 20px;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    /* Không cho Quick Quote chồng lên banner */
    .quick-quote,
    .quick-quote-section,
    #quick-quote {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        margin-top: 30px !important;
        padding-top: 10px;
        clear: both;
        z-index: 5;
    }

    /* Tiêu đề Quick Quote */
    .quick-quote h2,
    .quick-quote-section h2,
    #quick-quote h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        margin-bottom: 18px !important;
    }

    /* Chữ mô tả */
    .quick-quote p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    /* Label */
    .quick-quote label {
        display: block;
        font-size: 16px !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;
        margin-bottom: 7px;
    }

    /* Input + Select */
    .quick-quote input,
    .quick-quote select {
        width: 100% !important;
        min-height: 50px !important;
        height: 50px !important;

        font-size: 17px !important;
        line-height: 1.4 !important;

        padding: 11px 14px !important;
        border-radius: 8px;
        box-sizing: border-box;
    }

    /* Khoảng cách giữa các trường */
    .quick-quote .form-group {
        margin-bottom: 16px !important;
    }

    /* Nút báo giá */
    .quick-quote button,
    .quick-quote .btn {
        width: 100% !important;
        min-height: 52px !important;

        font-size: 17px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;

        padding: 13px 18px !important;
        margin-top: 8px;
    }
}

/* =====================================================
   MOBILE NHỎ - iPhone SE / 360px
===================================================== */

@media (max-width: 390px) {

    .quick-quote,
    .quick-quote-section,
    #quick-quote {
        margin-top: 25px !important;
        padding-left: 14px;
        padding-right: 14px;
    }

    .quick-quote h2,
    .quick-quote-section h2,
    #quick-quote h2 {
        font-size: 24px !important;
    }

    .quick-quote label {
        font-size: 15px !important;
    }

    .quick-quote input,
    .quick-quote select {
        font-size: 16px !important;
        min-height: 48px !important;
        height: 48px !important;
    }

    .quick-quote button,
    .quick-quote .btn {
        font-size: 16px !important;
        min-height: 50px !important;
    }
}


/* ============================================================
   PRODUCTS + LIGHTBOX
   Source: sanpham.php
   ============================================================ */

/* ============================================================
   ROOT
============================================================ */

.hp-lab-products {

    position: relative;

    width: 100%;

    padding: 95px 0 85px;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(255,189,0,.045),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(16,52,81,.06),
            transparent 30%
        ),
        var(--hp-bg);

    overflow: hidden;
}

/* ============================================================
   RESET
============================================================ */

.hp-lab-products *,
.hp-lab-products *::before,
.hp-lab-products *::after {

    box-sizing: border-box;
}

/* ============================================================
   BACKGROUND
============================================================ */

.hp-lab-products::before {

    content: "";

    position: absolute;

    width: 720px;
    height: 720px;

    top: -500px;
    right: -280px;

    border: 1px solid rgba(16,52,81,.035);

    border-radius: 50%;

    pointer-events: none;
}

.hp-lab-products::after {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    bottom: -380px;
    left: -300px;

    border: 1px solid rgba(255,189,0,.055);

    border-radius: 50%;

    pointer-events: none;
}

/* ============================================================
   CONTAINER
============================================================ */

.hp-lab-container {

    position: relative;

    z-index: 3;

    width: calc(100% - 70px);

    max-width: 1400px;

    margin: 0 auto;
}

/* ============================================================
   HEADER
============================================================ */

.hp-lab-header {

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;
}

.hp-lab-kicker {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    margin-bottom: 13px;

    color: #997000;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;
}

.hp-kicker-line {

    flex: 0 0 auto;

    width: 30px;
    height: 2px;

    background: var(--hp-yellow);
}

.hp-lab-header h2 {

    margin: 0;

    color: var(--hp-navy);

    font-size: 42px;

    line-height: 1.15;

    font-weight: 900;

    letter-spacing: -.8px;
}

.hp-lab-header h2 span {

    color: var(--hp-navy);
}

.hp-lab-header p {

    max-width: 750px;

    margin: 17px auto 0;

    color: #73899d;

    font-size: 16px;

    line-height: 1.75;
}

.hp-header-line {

    position: relative;

    width: 90px;
    height: 3px;

    margin: 23px auto 0;

    background: #dfe7ed;

    overflow: hidden;
}

.hp-header-line span {

    display: block;

    width: 35px;
    height: 100%;

    margin-left: 28px;

    background: var(--hp-yellow);
}

/* ============================================================
   GRID
============================================================ */

.hp-lab-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}

/* ============================================================
   CARD
============================================================ */

.hp-lab-card {

    position: relative;

    min-width: 0;
}

.hp-lab-card-link {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;
    height: 100%;

    min-height: 480px;

    overflow: hidden;

    background: var(--hp-white);

    border: 1px solid #dbe4eb;

    border-radius: 9px;

    text-decoration: none !important;

    box-shadow:
        0 12px 35px rgba(16,52,81,.055);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease,
        border-color .4s ease;
}

.hp-lab-card-link:hover {

    transform: translateY(-8px);

    border-color: rgba(255,189,0,.6);

    box-shadow:
        0 28px 55px rgba(16,52,81,.14);
}

/* ============================================================
   IMAGE AREA
============================================================ */

.hp-lab-top {

    position: relative;

    width: 100%;

    height: 335px;

    flex: 0 0 335px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fafcfd 0%,
            #edf2f6 100%
        );

    border-bottom: 1px solid #e2e9ee;
}

/* ============================================================
   TECH GRID
============================================================ */

.hp-lab-grid-pattern {

    position: absolute;

    inset: 0;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(16,52,81,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16,52,81,.045) 1px,
            transparent 1px
        );

    background-size: 22px 22px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 82%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 82%
        );
}

/* ============================================================
   GLOW
============================================================ */

.hp-lab-image-glow {

    position: absolute;

    width: 255px;
    height: 255px;

    left: 50%;
    top: 52%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,189,0,.14),
            transparent 68%
        );

    transition:
        transform .6s ease;
}

.hp-lab-card-link:hover
.hp-lab-image-glow {

    transform:
        translate(-50%, -50%)
        scale(1.32);
}

/* ============================================================
   IMAGE FRAME
============================================================ */

.hp-lab-image-wrap {

    position: absolute;

    z-index: 4;

    top: 15px;
    left: 18px;
    right: 18px;
    bottom: 10px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    padding: 0;

    margin: 0;

    width: auto;
    height: auto;

    background: transparent;

    cursor: zoom-in;

    appearance: none;

    -webkit-appearance: none;
}

/* ============================================================
   FIXED PRODUCT FRAME
============================================================ */

.hp-lab-product-frame {

    width: 96%;
    height: 96%;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;
}

/* ============================================================
   PRODUCT IMAGE
============================================================ */

.hp-lab-image {

    display: block;

    width: 96%;
    height: 96%;

    max-width: 96%;
    max-height: 96%;

    object-fit: contain;

    object-position: center;

    transform-origin: center;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        filter .3s ease;
}

.hp-lab-card-link:hover
.hp-lab-image {

    transform: scale(1.06);
}

/* ============================================================
   ZOOM ICON
============================================================ */

.hp-image-zoom {

    position: absolute;

    right: 13px;
    bottom: 13px;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(16,52,81,.9);

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 50%;

    opacity: 0;

    transform:
        translateY(8px)
        scale(.9);

    transition:
        opacity .3s ease,
        transform .3s ease,
        background .3s ease;

    pointer-events: none;
}

.hp-zoom-icon {

    color: #ffffff;

    font-size: 24px;

    line-height: 1;

    font-weight: 300;
}

.hp-lab-card-link:hover
.hp-image-zoom {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.hp-image-zoom:hover {

    background: var(--hp-yellow);
}

/* ============================================================
   CORNER
============================================================ */

.hp-lab-corner {

    position: absolute;

    z-index: 6;

    bottom: 14px;
    left: 14px;

    width: 28px;
    height: 28px;

    border-left: 2px solid rgba(16,52,81,.22);

    border-bottom: 2px solid rgba(16,52,81,.22);

    pointer-events: none;
}

.hp-lab-corner span:first-child {

    position: absolute;

    width: 7px;
    height: 2px;

    left: 7px;
    bottom: -2px;

    background: var(--hp-yellow);
}

.hp-lab-corner span:last-child {

    position: absolute;

    width: 2px;
    height: 7px;

    left: -2px;
    bottom: 7px;

    background: var(--hp-yellow);
}

/* ============================================================
   VIEW
============================================================ */

.hp-lab-view {

    position: absolute;

    z-index: 10;

    right: 15px;
    bottom: 14px;

    display: flex;

    align-items: center;

    gap: 7px;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity .35s ease,
        transform .35s ease;

    pointer-events: none;
}

.hp-lab-card-link:hover
.hp-lab-view {

    opacity: 1;

    transform: translateY(0);
}

.hp-lab-view span {

    color: var(--hp-navy);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}

.hp-lab-view b {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--hp-yellow);

    color: var(--hp-navy);

    font-size: 15px;
}

/* ============================================================
   DARK BODY
============================================================ */

.hp-lab-body {

    position: relative;

    display: flex;

    flex-direction: column;

    flex: 0 0 auto;

    min-height: 145px;

    padding: 14px 20px 12px;

    background: var(--hp-navy);

    color: #fff;

    overflow: hidden;
}

.hp-lab-body::before {

    content: "";

    position: absolute;

    width: 105px;
    height: 105px;

    right: -62px;
    bottom: -62px;

    border-radius: 50%;

    border: 1px solid rgba(255,189,0,.16);
}

.hp-lab-body::after {

    content: "";

    position: absolute;

    width: 58px;
    height: 58px;

    right: -29px;
    bottom: -29px;

    border-radius: 50%;

    background: rgba(255,189,0,.05);
}

/* ============================================================
   CATEGORY
============================================================ */

.hp-lab-category {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 5px;

    color: rgba(255,255,255,.48);

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.hp-category-dot {

    width: 5px;
    height: 5px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--hp-yellow);
}

/* ============================================================
   TITLE
============================================================ */

.hp-lab-body h3 {

    position: relative;

    z-index: 2;

    margin: 0;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.15px;

    transition:
        color .3s ease;
}

.hp-lab-card-link:hover
.hp-lab-body h3 {

    color: var(--hp-yellow);
}

/* ============================================================
   DESCRIPTION
============================================================ */

.hp-lab-body p {

    position: relative;

    z-index: 2;

    margin: 5px 0 0;

    color: rgba(255,255,255,.62);

    font-size: 11px;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;
}

/* ============================================================
   FOOTER
============================================================ */

.hp-lab-footer {

    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px solid rgba(255,255,255,.08);
}

.hp-lab-detail {

    color: rgba(255,255,255,.48);

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.1px;

    transition:
        color .3s ease;
}

.hp-lab-card-link:hover
.hp-lab-detail {

    color: rgba(255,255,255,.85);
}

/* ============================================================
   ARROW
============================================================ */

.hp-lab-arrow {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    border-radius: 50%;

    background: rgba(255,255,255,.08);

    color: #ffffff;

    overflow: hidden;

    transition:
        background .3s ease,
        color .3s ease,
        transform .35s ease;
}

.hp-lab-arrow span {

    transition:
        transform .35s ease;
}

.hp-lab-card-link:hover
.hp-lab-arrow {

    background: var(--hp-yellow);

    color: var(--hp-navy);

    transform: translateX(4px);
}

.hp-lab-card-link:hover
.hp-lab-arrow span {

    transform: translateX(2px);
}

/* ============================================================
   YELLOW EDGE
============================================================ */

.hp-lab-yellow-edge {

    position: absolute;

    z-index: 20;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: var(--hp-yellow);

    transition:
        width .45s cubic-bezier(.2,.8,.2,1);
}

.hp-lab-card-link:hover
.hp-lab-yellow-edge {

    width: 100%;
}

/* ============================================================
   BOTTOM NOTE
============================================================ */

.hp-lab-bottom {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 34px;

    color: #92a3b1;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.hp-lab-bottom-left {

    display: flex;

    align-items: center;

    gap: 7px;

    white-space: nowrap;
}

.hp-bottom-dot {

    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--hp-yellow);
}

.hp-lab-bottom-line {

    height: 1px;

    flex: 1;

    background: #dce4ea;
}

.hp-lab-bottom-right {

    white-space: nowrap;

    color: #a6b4c0;
}

/* ============================================================
   LIGHTBOX
============================================================ */

.hp-image-lightbox {

    position: fixed;

    z-index: 999999;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.hp-image-lightbox.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}

/* BACKDROP */

.hp-lightbox-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(3, 17, 29, .72);

    /*
     * Làm mờ website phía sau
     */
    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);
}

/* DIALOG */

.hp-lightbox-dialog {

    position: relative;

    z-index: 2;

    max-width: min(1100px, 92vw);

    max-height: 90vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform:
        scale(.92);

    opacity: 0;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        opacity .3s ease;
}

.hp-image-lightbox.is-open
.hp-lightbox-dialog {

    transform: scale(1);

    opacity: 1;
}

/* CLOSE */

.hp-lightbox-close {

    position: absolute;

    z-index: 5;

    top: -18px;

    right: -18px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,.2);

    border-radius: 50%;

    background:
        rgba(16,52,81,.9);

    color: #ffffff;

    font-size: 28px;

    line-height: 1;

    font-weight: 300;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.hp-lightbox-close:hover {

    background: var(--hp-yellow);

    color: var(--hp-navy);

    transform: rotate(90deg);
}

/* IMAGE */

.hp-lightbox-image-wrap {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    max-width: 90vw;

    max-height: 80vh;

    padding: 15px;

    background:
        rgba(255,255,255,.05);

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 14px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);
}

.hp-lightbox-image {

    display: block;

    max-width: 85vw;

    max-height: 76vh;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 8px;
}

/* CAPTION */

.hp-lightbox-caption {

    margin-top: 12px;

    color: rgba(255,255,255,.86);

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;

    text-align: center;
}

/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1500px) {

    .hp-lab-container {

        max-width: 1450px;
    }

    .hp-lab-grid {

        gap: 28px;
    }

    .hp-lab-card-link {

        min-height: 505px;
    }

    .hp-lab-top {

        height: 355px;

        flex-basis: 355px;
    }

    .hp-lab-image-wrap {

        top: 12px;
        left: 15px;
        right: 15px;
        bottom: 8px;
    }

    .hp-lab-product-frame {

        width: 98%;
        height: 98%;
    }

    .hp-lab-image {

        width: 97%;
        height: 97%;

        max-width: 97%;
        max-height: 97%;
    }

    .hp-lab-body {

        min-height: 145px;
    }

    .hp-lab-body h3 {

        font-size: 19px;
    }

    .hp-lab-body p {

        font-size: 12px;
    }
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .hp-lab-container {

        width: calc(100% - 45px);
    }

    .hp-lab-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .hp-lab-top {

        height: 310px;

        flex-basis: 310px;
    }

    .hp-lab-image-wrap {

        top: 15px;
        left: 20px;
        right: 20px;
        bottom: 8px;
    }

    .hp-lab-product-frame {

        width: 96%;
        height: 96%;
    }

    .hp-lab-image {

        width: 95%;
        height: 95%;

        max-width: 95%;
        max-height: 95%;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .hp-lab-products {

        padding: 70px 0 70px;
    }

    .hp-lab-container {

        width: calc(100% - 20px);
    }

    .hp-lab-header {

        margin-bottom: 35px;
    }

    .hp-lab-header h2 {

        font-size: 30px;
    }

    .hp-lab-header p {

        font-size: 13px;

        line-height: 1.7;
    }

    .hp-lab-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 13px;
    }

    .hp-lab-card-link {

        min-height: 375px;

        border-radius: 7px;
    }

    /* IMAGE */

    .hp-lab-top {

        height: 205px;

        flex-basis: 205px;
    }

    .hp-lab-image-glow {

        width: 145px;
        height: 145px;
    }

    .hp-lab-image-wrap {

        top: 8px;
        left: 5px;
        right: 5px;
        bottom: 5px;
    }

    .hp-lab-product-frame {

        width: 97%;
        height: 97%;
    }

    .hp-lab-image {

        width: 95%;
        height: 95%;

        max-width: 95%;
        max-height: 95%;
    }

    /* HOVER ZOOM ICON */

    .hp-image-zoom {

        width: 32px;
        height: 32px;

        right: 8px;
        bottom: 8px;
    }

    .hp-zoom-icon {

        font-size: 19px;
    }

    /* BODY */

    .hp-lab-body {

        min-height: 124px;

        padding: 10px 12px 9px;
    }

    .hp-lab-category {

        font-size: 7px;

        margin-bottom: 5px;
    }

    .hp-lab-body h3 {

        font-size: 14px;

        line-height: 1.25;
    }

    .hp-lab-body p {

        margin-top: 5px;

        font-size: 9px;

        line-height: 1.4;
    }

    .hp-lab-footer {

        margin-top: 7px;

        padding-top: 7px;
    }

    .hp-lab-detail {

        font-size: 6px;

        letter-spacing: .8px;
    }

    .hp-lab-arrow {

        width: 25px;
        height: 25px;

        font-size: 11px;
    }

    .hp-lab-view {

        display: none;
    }

    .hp-lab-bottom {

        display: none;
    }

    /* LIGHTBOX MOBILE */

    .hp-image-lightbox {

        padding: 15px;
    }

    .hp-lightbox-dialog {

        max-width: 96vw;

        max-height: 90vh;
    }

    .hp-lightbox-image-wrap {

        max-width: 94vw;

        max-height: 80vh;

        padding: 8px;

        border-radius: 10px;
    }

    .hp-lightbox-image {

        max-width: 90vw;

        max-height: 74vh;
    }

    .hp-lightbox-close {

        top: -12px;
        right: -8px;

        width: 36px;
        height: 36px;

        font-size: 24px;
    }

    .hp-lightbox-caption {

        font-size: 12px;

        margin-top: 9px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 400px) {

    .hp-lab-grid {

        gap: 9px;
    }

    .hp-lab-card-link {

        min-height: 350px;
    }

    .hp-lab-top {

        height: 180px;

        flex-basis: 180px;
    }

    .hp-lab-image-wrap {

        top: 5px;
        left: 3px;
        right: 3px;
        bottom: 3px;
    }

    .hp-lab-product-frame {

        width: 98%;
        height: 98%;
    }

    .hp-lab-image {

        width: 96%;
        height: 96%;

        max-width: 96%;
        max-height: 96%;
    }

    .hp-lab-body {

        min-height: 116px;

        padding: 9px 10px;
    }

    .hp-lab-body h3 {

        font-size: 13px;
    }

    .hp-lab-body p {

        font-size: 8.5px;
    }

    .hp-lab-detail {

        font-size: 5.5px;
    }
}


/* ============================================================
   SERVICES
   Source: dichvu.php
   ============================================================ */

/* =========================================================
   HPTECH SERVICES
   ========================================================= */

.hp-services-section {
    width: 100%;
    padding: 75px 0 90px;

    background: #f4f7fa;
    box-sizing: border-box;
}

.hp-container {
    width: min(1400px, calc(100% - 50px));
    margin: 0 auto;
}

/* HEADING */

.hp-heading {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

.hp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #b87900;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 3px;
}

.hp-eyebrow::before,
.hp-eyebrow::after {
    content: "";

    width: 24px;
    height: 2px;

    background: #ffbd00;
}

.hp-heading h2 {
    margin: 12px 0;

    color: #0d2f4d;

    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
}

.hp-heading p {
    margin: 0 auto;

    color: #71859a;

    font-size: 17px;
    line-height: 1.75;
}

/* GRID */

.hp-services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}

/* CARD */

.hp-service-card {
    position: relative;

    min-width: 0;
    min-height: 295px;

    display: flex;
    flex-direction: column;

    padding: 28px 26px 22px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dce5ed;
    border-radius: 16px;

    text-decoration: none !important;

    box-shadow:
        0 8px 25px rgba(20, 48, 75, .06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* TOP LINE */

.hp-service-card::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;
    right: 0;

    height: 3px;

    background: #ffbd00;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .3s ease;
}

.hp-service-card:hover::before {
    transform: scaleX(1);
}

.hp-service-card:hover {

    transform: translateY(-6px);

    border-color: #cbd9e5;

    box-shadow:
        0 18px 40px rgba(20, 48, 75, .12);
}

/* NUMBER */

.hp-number {

    position: absolute;

    top: 13px;
    right: 20px;

    color: #dce5ec;

    font-size: 48px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;

    pointer-events: none;

    transition: color .25s ease;
}

.hp-service-card:hover .hp-number {
    color: #f3d77a;
}

/* ICON */

.hp-icon {

    position: relative;
    z-index: 2;

    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 19px;

    background: #123653;

    border-radius: 15px;

    box-shadow:
        0 8px 18px rgba(18, 54, 83, .18);
}

.hp-icon::after {

    content: "";

    position: absolute;

    right: -7px;
    bottom: -7px;

    width: 16px;
    height: 16px;

    background: #ffbd00;

    border: 3px solid #ffffff;

    border-radius: 50%;
}

.hp-icon img {

    width: 40px;
    height: 40px;

    object-fit: contain;
}

/* CONTENT */

.hp-service-content {

    display: flex;
    flex-direction: column;

    flex: 1;
}

.hp-category {

    margin-bottom: 8px;

    color: #98aabd;

    font-size: 11px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.hp-service-content h3 {

    margin: 0 0 9px;

    color: #0e304d;

    font-size: 21px;
    line-height: 1.35;

    font-weight: 800;
}

.hp-service-content p {

    margin: 0;

    max-width: 95%;

    color: #71859a;

    font-size: 15px;
    line-height: 1.7;
}

/* BOTTOM */

.hp-service-bottom {

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 17px;

    border-top: 1px solid #e5ebf0;

    color: #183b59;

    font-size: 13px;
    font-weight: 800;
}

.hp-arrow {

    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #183b59;

    background: #ffbd00;

    border-radius: 50%;

    font-size: 18px;

    transition: .25s ease;
}

.hp-service-card:hover .hp-arrow {

    color: #ffffff;

    background: #e5a900;

    transform: translateX(4px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .hp-container {
        width: min(1100px, calc(100% - 40px));
    }

    .hp-services-grid {
        gap: 16px;
    }

    .hp-service-card {
        padding: 24px 20px 20px;
    }

}

@media (max-width: 992px) {

    .hp-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}

@media (max-width: 600px) {

    .hp-services-section {
        padding: 50px 0 60px;
    }

    .hp-container {
        width: calc(100% - 24px);
    }

    .hp-heading {
        margin-bottom: 30px;
    }

    .hp-heading h2 {
        font-size: 28px;
    }

    .hp-heading p {
        font-size: 15px;
    }

    .hp-services-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .hp-service-card {

        min-height: 285px;

        padding: 18px 13px 14px;

        border-radius: 12px;
    }

    .hp-number {

        top: 8px;
        right: 10px;

        font-size: 35px;
    }

    .hp-icon {

        width: 52px;
        height: 52px;

        margin-bottom: 14px;

        border-radius: 12px;
    }

    .hp-icon img {

        width: 32px;
        height: 32px;
    }

    .hp-icon::after {

        width: 13px;
        height: 13px;

        right: -6px;
        bottom: -6px;
    }

    .hp-category {
        font-size: 9px;
        letter-spacing: .8px;
    }

    .hp-service-content h3 {

        font-size: 16px;

        margin-bottom: 7px;
    }

    .hp-service-content p {

        font-size: 12px;
        line-height: 1.55;
    }

    .hp-service-bottom {

        padding-top: 12px;

        font-size: 10px;
    }

    .hp-arrow {

        width: 26px;
        height: 26px;

        font-size: 15px;
    }
}


/* ============================================================
   FACTORY / PRODUCTION
   Source: quytrinhsanxuatpcb(1).php
   ============================================================ */

/* ============================================================
   HPTECH FACTORY SECTION
============================================================ */

.hp-factory-section {

    --factory-navy: #103451;
    --factory-navy-dark: #08283f;

    --factory-yellow: #ffbd00;
    --factory-yellow-dark: #d99d00;

    --factory-bg: #f3f6f9;

    --factory-white: #ffffff;

    --factory-text: #173953;
    --factory-muted: #74899c;

    --factory-border: #dce5ec;

    position: relative;

    width: 100%;

    padding: 90px 0 85px;

    background:

        radial-gradient(
            circle at 8% 15%,
            rgba(255,189,0,.045),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 80%,
            rgba(16,52,81,.055),
            transparent 30%
        ),

        var(--factory-bg);

    overflow: hidden;

}

/* ============================================================
   RESET
============================================================ */

.hp-factory-section *,
.hp-factory-section *::before,
.hp-factory-section *::after {

    box-sizing: border-box;

}

/* ============================================================
   BACKGROUND CIRCLES
============================================================ */

.hp-factory-section::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    top: -440px;

    right: -230px;

    border-radius: 50%;

    border: 1px solid rgba(16,52,81,.04);

    pointer-events: none;

}

.hp-factory-section::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    left: -260px;

    bottom: -260px;

    border-radius: 50%;

    border: 1px solid rgba(255,189,0,.055);

    pointer-events: none;

}

/* ============================================================
   CONTAINER
============================================================ */

.hp-factory-container {

    position: relative;

    z-index: 2;

    width: calc(100% - 70px);

    max-width: 1400px;

    margin: 0 auto;

}

/* ============================================================
   HEADER
============================================================ */

.hp-factory-heading {

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

}

.hp-factory-kicker {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 11px;

    margin-bottom: 13px;

    color: #997000;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;

}

.hp-factory-kicker span {

    display: block;

    width: 30px;

    height: 2px;

    background: var(--factory-yellow);

}

.hp-factory-heading h2 {

    margin: 0;

    color: var(--factory-navy);

    font-size: 40px;

    line-height: 1.18;

    font-weight: 900;

    letter-spacing: -.7px;

}

.hp-factory-heading h2 strong {

    display: inline-block;

    color: var(--factory-navy);

}

.hp-factory-heading p {

    max-width: 760px;

    margin: 16px auto 0;

    color: var(--factory-muted);

    font-size: 16px;

    line-height: 1.75;

}

/* ============================================================
   MAIN LAYOUT
============================================================ */

.hp-factory-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 55px;

    align-items: center;

}

/* ============================================================
   LEFT CONTENT
============================================================ */

.hp-factory-content {

    min-width: 0;

}

/* EXPERIENCE */

.hp-experience {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 22px;

    padding: 10px 16px 10px 10px;

    background: #ffffff;

    border: 1px solid var(--factory-border);

    border-radius: 8px;

    box-shadow:
        0 7px 20px rgba(16,52,81,.055);

}

.hp-experience-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 58px;

    background: var(--factory-navy);

    color: var(--factory-yellow);

    border-radius: 6px;

    font-size: 25px;

    line-height: 1;

    font-weight: 900;

}

.hp-experience-text {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.hp-experience-text strong {

    color: var(--factory-navy);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.4px;

}

.hp-experience-text span {

    color: #8295a6;

    font-size: 9px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: .8px;

}

/* CONTENT TITLE */

.hp-factory-content h3 {

    margin: 0 0 18px;

    color: var(--factory-navy);

    font-size: 30px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.4px;

}

.hp-factory-content h3 span {

    color: #b27b00;

}

/* PARAGRAPHS */

.hp-factory-description {

    margin: 0 0 12px;

    color: var(--factory-muted);

    font-size: 15px;

    line-height: 1.75;

}

/* ============================================================
   HIGHLIGHTS
============================================================ */

.hp-factory-highlights {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 25px;

}

.hp-highlight {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    min-width: 0;

    padding: 12px 10px;

    background: #ffffff;

    border: 1px solid #e1e8ee;

    border-radius: 7px;

    transition:

        border-color .25s ease,

        box-shadow .25s ease;

}

.hp-highlight:hover {

    border-color: rgba(255,189,0,.5);

    box-shadow:
        0 7px 17px rgba(16,52,81,.07);

}

.hp-highlight-icon {

    width: 23px;

    height: 23px;

    flex: 0 0 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--factory-yellow);

    color: var(--factory-navy);

    font-size: 12px;

    font-weight: 900;

}

.hp-highlight div {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

}

.hp-highlight strong {

    color: var(--factory-navy);

    font-size: 11px;

    line-height: 1.3;

    font-weight: 800;

}

.hp-highlight div span {

    color: #8b9cac;

    font-size: 9px;

    line-height: 1.3;

}

/* ============================================================
   VIDEO
============================================================ */

.hp-factory-video {

    position: relative;

    min-width: 0;

}

.hp-video-frame {

    position: relative;

    width: 100%;

    height: 460px;

    overflow: hidden;

    border-radius: 12px;

    background: var(--factory-navy);

    box-shadow:
        0 22px 55px rgba(16,52,81,.15);

}

.hp-video-frame img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:

        transform .8s ease;

}

.hp-video-frame:hover img {

    transform: scale(1.045);

}

/* ============================================================
   VIDEO OVERLAY
============================================================ */

.hp-video-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to bottom,
            rgba(8,40,63,.12),
            rgba(8,40,63,.70)
        );

}

/* ============================================================
   VIDEO GRID
============================================================ */

.hp-video-frame::after {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .18;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black
        );

}

/* ============================================================
   CORNERS
============================================================ */

.hp-video-corner {

    position: absolute;

    z-index: 5;

    width: 35px;

    height: 35px;

}

.hp-video-corner-tl {

    top: 15px;
    left: 15px;

    border-left: 2px solid rgba(255,255,255,.7);

    border-top: 2px solid rgba(255,255,255,.7);

}

.hp-video-corner-br {

    right: 15px;
    bottom: 15px;

    border-right: 2px solid rgba(255,255,255,.7);

    border-bottom: 2px solid rgba(255,255,255,.7);

}

/* ============================================================
   PLAY BUTTON
============================================================ */

.hp-video-play {

    position: absolute;

    z-index: 8;

    left: 50%;
    top: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    transform:
        translate(-50%, -50%);

    color: var(--factory-navy);

    text-decoration: none;

}

.hp-play-ring {

    position: absolute;

    inset: 0;

    border: 1px solid rgba(255,255,255,.55);

    border-radius: 50%;

    transition:

        transform .35s ease,

        border-color .35s ease;

}

.hp-video-play:hover .hp-play-ring {

    transform: scale(1.18);

    border-color: var(--factory-yellow);

}

.hp-play-icon {

    position: relative;

    z-index: 2;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding-left: 3px;

    border-radius: 50%;

    background: var(--factory-yellow);

    color: var(--factory-navy);

    font-size: 20px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.20);

    transition:

        transform .3s ease,

        background .3s ease;

}

.hp-video-play:hover .hp-play-icon {

    transform: scale(1.08);

    background: #ffc52a;

}

/* ============================================================
   VIDEO LABEL
============================================================ */

.hp-video-label {

    position: absolute;

    z-index: 8;

    top: 18px;

    left: 18px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 11px;

    background: rgba(8,40,63,.86);

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 5px;

    color: #fff;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.2px;

}

.hp-video-status {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--factory-yellow);

    box-shadow:
        0 0 0 4px rgba(255,189,0,.12);

}

/* ============================================================
   VIDEO BOTTOM
============================================================ */

.hp-video-bottom {

    position: absolute;

    z-index: 8;

    left: 20px;

    right: 20px;

    bottom: 17px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: rgba(255,255,255,.7);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.4px;

}

.hp-video-bottom span:last-child {

    color: var(--factory-yellow);

}

/* ============================================================
   GALLERY
============================================================ */

.hp-factory-gallery {

    display: grid;

    grid-template-columns:
        1.3fr 1fr 1fr;

    gap: 14px;

    margin-top: 22px;

}

.hp-gallery-item {

    position: relative;

    height: 205px;

    overflow: hidden;

    border-radius: 9px;

    background: var(--factory-navy);

}

.hp-gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform .5s ease;

}

.hp-gallery-item:hover img {

    transform: scale(1.07);

}

/* GALLERY OVERLAY */

.hp-gallery-overlay {

    position: absolute;

    inset: auto 0 0 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 15px;

    background:
        linear-gradient(
            to top,
            rgba(8,40,63,.88),
            transparent
        );

    color: #fff;

}

.hp-gallery-overlay span {

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.3px;

}

.hp-gallery-overlay b {

    color: var(--factory-yellow);

    font-size: 17px;

    font-weight: 900;

}

/* ============================================================
   BOTTOM BAR
============================================================ */

.hp-factory-bottom {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 28px;

    color: #91a2b2;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.4px;

}

.hp-factory-bottom-left {

    display: flex;

    align-items: center;

    gap: 7px;

    white-space: nowrap;

}

.hp-live-dot {

    width: 6px;

    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: var(--factory-yellow);

}

.hp-factory-line {

    flex: 1;

    height: 1px;

    background: #dce4ea;

}

.hp-factory-bottom-right {

    white-space: nowrap;

    color: #a4b2bd;

}

/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1500px) {

    .hp-factory-container {

        max-width: 1450px;

    }

    .hp-factory-layout {

        gap: 70px;

    }

    .hp-video-frame {

        height: 500px;

    }

    .hp-gallery-item {

        height: 220px;

    }

}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .hp-factory-container {

        width: calc(100% - 45px);

    }

    .hp-factory-layout {

        gap: 30px;

    }

    .hp-video-frame {

        height: 400px;

    }

    .hp-factory-content h3 {

        font-size: 27px;

    }

    .hp-factory-description {

        font-size: 14px;

    }

    .hp-factory-highlights {

        grid-template-columns:
            1fr;

    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .hp-factory-section {

        padding: 65px 0 70px;

    }

    .hp-factory-container {

        width: calc(100% - 20px);

    }

    /* HEADER */

    .hp-factory-heading {

        margin-bottom: 32px;

    }

    .hp-factory-kicker {

        font-size: 9px;

        letter-spacing: 1.8px;

    }

    .hp-factory-kicker span {

        width: 16px;

    }

    .hp-factory-heading h2 {

        font-size: 29px;

        line-height: 1.25;

    }

    .hp-factory-heading p {

        font-size: 13px;

        line-height: 1.65;

    }

    /* LAYOUT */

    .hp-factory-layout {

        grid-template-columns: 1fr;

        gap: 28px;

    }

    /* CONTENT */

    .hp-experience {

        margin-bottom: 17px;

        padding: 8px 12px 8px 8px;

    }

    .hp-experience-number {

        width: 55px;

        height: 50px;

        font-size: 22px;

    }

    .hp-experience-text strong {

        font-size: 10px;

    }

    .hp-experience-text span {

        font-size: 8px;

    }

    .hp-factory-content h3 {

        font-size: 24px;

        margin-bottom: 14px;

    }

    .hp-factory-description {

        font-size: 13px;

        line-height: 1.7;

    }

    .hp-factory-highlights {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 7px;

        margin-top: 19px;

    }

    .hp-highlight {

        display: block;

        padding: 9px 7px;

    }

    .hp-highlight-icon {

        margin-bottom: 7px;

    }

    .hp-highlight strong {

        font-size: 9px;

    }

    .hp-highlight div span {

        font-size: 7px;

    }

    /* VIDEO */

    .hp-video-frame {

        height: 290px;

        border-radius: 9px;

    }

    .hp-video-play {

        width: 65px;

        height: 65px;

    }

    .hp-play-icon {

        width: 48px;

        height: 48px;

        font-size: 17px;

    }

    .hp-video-label {

        top: 10px;

        left: 10px;

        padding: 7px 8px;

        font-size: 7px;

    }

    .hp-video-bottom {

        left: 12px;

        right: 12px;

        bottom: 11px;

        font-size: 6px;

    }

    /* GALLERY */

    .hp-factory-gallery {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;

        margin-top: 12px;

    }

    .hp-gallery-item {

        height: 135px;

    }

    .hp-gallery-large {

        grid-column: span 2;

    }

    .hp-gallery-overlay {

        padding: 8px 9px;

    }

    .hp-gallery-overlay span {

        font-size: 6px;

    }

    .hp-gallery-overlay b {

        font-size: 13px;

    }

    /* BOTTOM */

    .hp-factory-bottom {

        display: none;

    }

}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 400px) {

    .hp-factory-container {

        width: calc(100% - 16px);

    }

    .hp-factory-heading h2 {

        font-size: 26px;

    }

    .hp-factory-description {

        font-size: 12px;

    }

    .hp-video-frame {

        height: 250px;

    }

    .hp-gallery-item {

        height: 120px;

    }

}


/* ============================================================
   CONTACT PAGE
   Source: lienhe(1).php
   ============================================================ */

/* ============================================================
   HPTECH CONTACT PAGE
============================================================ */

.hp-contact-page {

    --hp-yellow-light:
        #ffc52a;

    --hp-text:
        #183c59;

    --hp-muted:
        #74899c;

    --hp-border:
        #dce6ed;

    width:
        100%;

    background:
        var(--hp-bg);

    color:
        var(--hp-text);

    overflow:
        hidden;

}

/* ============================================================
   CONTAINER
============================================================ */

.hp-contact-container {

    position:
        relative;

    z-index:
        2;

    width:
        calc(100% - 70px);

    max-width:
        1400px;

    margin:
        0 auto;

}

/* ============================================================
   HERO
============================================================ */

.hp-contact-hero {

    position:
        relative;

    min-height:
        365px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            120deg,
            #061f33 0%,
            #0c344f 52%,
            #103f5a 100%
        );

}

.hp-contact-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255,189,0,.12),
            transparent 26%
        );

}

.hp-contact-hero-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;

    mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.9),
            transparent 85%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.9),
            transparent 85%
        );

}

.hp-contact-hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,189,0,.08);

}

.hp-contact-hero-glow-1 {

    width:
        640px;

    height:
        640px;

    top:
        -390px;

    right:
        -180px;

}

.hp-contact-hero-glow-2 {

    width:
        430px;

    height:
        430px;

    bottom:
        -330px;

    left:
        -200px;

    border-color:
        rgba(255,255,255,.05);

}

.hp-contact-hero-inner {

    position:
        relative;

    max-width:
        780px;

    padding:
        58px 0 64px;

}

.hp-contact-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        17px;

    color:
        var(--hp-yellow);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2.5px;

}

.hp-contact-eyebrow span {

    width:
        32px;

    height:
        2px;

    background:
        var(--hp-yellow);

}

.hp-contact-eyebrow i {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--hp-yellow);

}

.hp-contact-hero h1 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        54px;

    line-height:
        1.05;

    font-weight:
        900;

    letter-spacing:
        -1.2px;

}

.hp-contact-hero h1 strong {

    display:
        block;

    color:
        var(--hp-yellow);

}

.hp-contact-hero-inner > p {

    max-width:
        690px;

    margin:
        20px 0 0;

    color:
        rgba(255,255,255,.72);

    font-size:
        16px;

    line-height:
        1.75;

}

.hp-contact-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        27px;

}

/* ============================================================
   BUTTON
============================================================ */

.hp-contact-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        47px;

    padding:
        0 20px;

    border-radius:
        7px;

    font-size:
        12px;

    line-height:
        1;

    font-weight:
        900;

    text-decoration:
        none !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}

.hp-contact-btn span {

    font-size:
        15px;

}

.hp-contact-btn-primary {

    background:
        var(--hp-yellow);

    color:
        var(--hp-navy) !important;

    box-shadow:
        0 9px 22px
        rgba(255,189,0,.18);

}

.hp-contact-btn-primary:hover {

    background:
        var(--hp-yellow-light);

    color:
        var(--hp-navy) !important;

    transform:
        translateY(-2px);

}

.hp-contact-btn-outline {

    border:
        1px solid
        rgba(255,255,255,.35);

    background:
        rgba(255,255,255,.04);

    color:
        #ffffff !important;

}

.hp-contact-btn-outline:hover {

    border-color:
        #ffffff;

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

}

.hp-contact-btn-light {

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.22);

    color:
        #ffffff !important;

}

/* ============================================================
   QUICK CONTACT
============================================================ */

.hp-contact-quick-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        18px;

    margin-top:
        -44px;

    position:
        relative;

    z-index:
        5;

}

.hp-contact-quick-card {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-height:
        132px;

    padding:
        20px;

    border:
        1px solid
        var(--hp-border);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 18px 42px
        rgba(16,52,81,.08);

    text-decoration:
        none !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.hp-contact-quick-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255,189,0,.55);

    box-shadow:
        0 24px 48px
        rgba(16,52,81,.12);

}

.hp-contact-quick-icon {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        #103451;

    color:
        var(--hp-yellow);

    font-size:
        17px;

}

.hp-contact-quick-content {

    min-width:
        0;

    flex:
        1;

}

.hp-contact-quick-content small {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #9b7200;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}

.hp-contact-quick-content strong {

    display:
        block;

    color:
        var(--hp-navy);

    font-size:
        15px;

    line-height:
        1.25;

    font-weight:
        800;

}

.hp-contact-quick-content em {

    display:
        block;

    margin-top:
        7px;

    color:
        #8295a6;

    font-size:
        12px;

    font-style:
        normal;

}

.hp-contact-quick-arrow {

    color:
        #a8b6c1;

    font-size:
        18px;

}

/* ============================================================
   MAIN
============================================================ */

.hp-contact-main {

    padding:
        70px 0 85px;

}

.hp-contact-main-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(330px,.75fr);

    gap:
        28px;

    align-items:
        start;

}

/* ============================================================
   FORM CARD
============================================================ */

.hp-contact-form-card {

    padding:
        34px;

    border:
        1px solid
        var(--hp-border);

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 18px 45px
        rgba(16,52,81,.07);

}

.hp-contact-section-kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        10px;

    color:
        #9b7200;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2px;

}

.hp-contact-section-kicker span {

    width:
        23px;

    height:
        2px;

    background:
        var(--hp-yellow);

}

.hp-contact-form-card h2 {

    margin:
        0;

    color:
        var(--hp-navy);

    font-size:
        31px;

    line-height:
        1.15;

    font-weight:
        900;

}

.hp-contact-form-card h2 strong {

    color:
        #a67700;

}

.hp-contact-form-intro {

    max-width:
        670px;

    margin:
        12px 0 28px;

    color:
        #7a8d9e;

    font-size:
        14px;

    line-height:
        1.7;

}

/* ============================================================
   FORM GRID
============================================================ */

.hp-contact-form-grid-2 {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        17px;

}

.hp-contact-field {

    margin-bottom:
        18px;

}

.hp-contact-field label {

    display:
        block;

    margin:
        0 0 7px;

    color:
        #35556e;

    font-size:
        12px;

    line-height:
        1.3;

    font-weight:
        800;

}

.hp-contact-field label span {

    color:
        #c39200;

}

.hp-contact-input-wrap {

    position:
        relative;

}

.hp-contact-input-wrap > i {

    position:
        absolute;

    z-index:
        2;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #8a9dac;

    font-size:
        12px;

    pointer-events:
        none;

}

.hp-contact-input-wrap input,
.hp-contact-input-wrap select,
.hp-contact-input-wrap textarea {

    width:
        100%;

    margin:
        0 !important;

    padding:
        0 14px 0 40px !important;

    border:
        1px solid
        #d7e2e9 !important;

    border-radius:
        8px !important;

    outline:
        none !important;

    background:
        #f9fbfc !important;

    color:
        #163b57 !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    line-height:
        1.3 !important;

    box-shadow:
        none !important;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}

.hp-contact-input-wrap input,
.hp-contact-input-wrap select {

    height:
        47px !important;

}

.hp-contact-input-wrap textarea {

    min-height:
        145px;

    padding-top:
        14px !important;

    padding-bottom:
        14px !important;

    resize:
        vertical;

}

.hp-contact-input-wrap select {

    appearance:
        auto;

    -webkit-appearance:
        auto;

}

.hp-contact-input-wrap textarea + i,
.hp-contact-textarea-wrap > i {

    top:
        18px;

    transform:
        none;

}

.hp-contact-input-wrap input::placeholder,
.hp-contact-input-wrap textarea::placeholder {

    color:
        #9aaab7;

    opacity:
        1;

}

.hp-contact-input-wrap input:focus,
.hp-contact-input-wrap select:focus,
.hp-contact-input-wrap textarea:focus {

    border-color:
        rgba(255,189,0,.72) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 3px
        rgba(255,189,0,.10) !important;

}

/* ============================================================
   NOTE
============================================================ */

.hp-contact-form-note {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        5px 0 24px;

    padding:
        12px 13px;

    border:
        1px solid
        #e8eef2;

    border-radius:
        7px;

    background:
        #f8fafb;

    color:
        #758a9b;

    font-size:
        12px;

    line-height:
        1.5;

}

.hp-contact-form-note > span {

    width:
        25px;

    height:
        25px;

    flex:
        0 0 25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        6px;

    background:
        #fff4ce;

    color:
        #9b7200;

}

.hp-contact-form-note a {

    color:
        #987000 !important;

    font-weight:
        800;

    text-decoration:
        none !important;

}

/* ============================================================
   SUCCESS
============================================================ */

.hp-contact-success {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        20px;

    padding:
        12px 14px;

    border:
        1px solid
        #d8eadf;

    border-radius:
        7px;

    background:
        #f2faf5;

    color:
        #317048;

    font-size:
        12px;

    font-weight:
        700;

}

.hp-contact-success span {

    width:
        23px;

    height:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #d8efdf;

}

/* ============================================================
   ERROR
============================================================ */

.hp-contact-error {

    margin-bottom:
        20px;

    padding:
        12px 14px;

    border:
        1px solid
        #efd7d7;

    border-radius:
        7px;

    background:
        #fff7f7;

    color:
        #a34f4f;

    font-size:
        12px;

    font-weight:
        700;

}

/* ============================================================
   FORM FOOTER
============================================================ */

.hp-contact-form-footer {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}

.hp-contact-submit {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    min-width:
        185px;

    min-height:
        52px;

    padding:
        0 12px 0 18px;

    border:
        1px solid
        var(--hp-yellow) !important;

    border-radius:
        8px;

    background:
        var(--hp-yellow) !important;

    color:
        var(--hp-navy) !important;

    font-family:
        inherit !important;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .4px;

    cursor:
        pointer;

    box-shadow:
        0 10px 22px
        rgba(255,189,0,.15);

}

.hp-contact-submit b {

    width:
        31px;

    height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(16,52,81,.10);

    font-size:
        15px;

}

.hp-contact-form-footer > p {

    margin:
        0;

    color:
        #92a2ae;

    font-size:
        12px;

    line-height:
        1.5;

}

.hp-contact-form-footer > p i {

    margin-right:
        4px;

    color:
        #a67b00;

}

/* ============================================================
   SIDEBAR
============================================================ */

.hp-contact-sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    position:
        sticky;

    top:
        110px;

}

/* ============================================================
   INFO CARD
============================================================ */

.hp-contact-info-card,
.hp-contact-location-card {

    padding:
        25px;

    border:
        1px solid
        var(--hp-border);

    border-radius:
        12px;

    background:
        #ffffff;

    box-shadow:
        0 15px 35px
        rgba(16,52,81,.055);

}

.hp-contact-sidebar-kicker {

    margin-bottom:
        7px;

    color:
        #9b7200;

    font-size:
       10px;

    font-weight:
        900;

    letter-spacing:
        1.7px;

}

.hp-contact-info-card h3,
.hp-contact-location-card h3 {

    margin:
        0;

    color:
        var(--hp-navy);

    font-size:
        23px;

    line-height:
        1.15;

    font-weight:
        900;

}

.hp-contact-sidebar-desc {

    margin:
        11px 0 21px;

    color:
        #758a9b;

    font-size:
        12px;

    line-height:
        1.7;

}

/* ============================================================
   CONTACT ROW
============================================================ */

.hp-contact-info-row {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        13px;

    color:
        inherit;

    text-decoration:
        none !important;

}

.hp-contact-info-icon {

    width:
        37px;

    height:
        37px;

    flex:
        0 0 37px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        #103451;

    color:
        var(--hp-yellow);

    font-size:
        12px;

}

.hp-contact-info-row small {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #9baab6;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.2px;

}

.hp-contact-info-row strong {

    display:
        block;

    color:
        var(--hp-navy);

    font-size:
        12px;

    font-weight:
        800;

}

/* ============================================================
   LOCATION
============================================================ */

.hp-contact-location {

    display:
        grid;

    grid-template-columns:
        36px 1fr;

    gap:
        11px;

    margin-top:
        20px;

    padding-top:
        18px;

    border-top:
        1px solid
        #e8eef2;

}

.hp-contact-location-icon {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        #fff5cf;

    color:
        #9c7400;

    font-size:
        12px;

}

.hp-contact-location small {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #9baab6;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.3px;

}

.hp-contact-location strong {

    display:
        block;

    color:
        #3d5b71;

    font-size:
        12px;

    line-height:
        1.65;

    font-weight:
        700;

}

.hp-contact-location a {

    display:
        inline-block;

    margin-top:
        7px;

    color:
        #9b7200 !important;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none !important;

}

/* ============================================================
   SUPPORT
============================================================ */

.hp-contact-support-card {

    display:
        flex;

    gap:
        13px;

    padding:
        22px;

    border:
        1px solid
        rgba(255,189,0,.28);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #103451,
            #08283f
        );

    color:
        #ffffff;

    box-shadow:
        0 15px 35px
        rgba(16,52,81,.12);

}

.hp-contact-support-icon {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        rgba(255,189,0,.12);

    color:
        var(--hp-yellow);

}

.hp-contact-support-card span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        rgba(255,255,255,.43);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}

.hp-contact-support-card h4 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        900;

}

.hp-contact-support-card p {

    margin:
        8px 0 10px;

    color:
        rgba(255,255,255,.64);

    font-size:
        11px;

    line-height:
        1.65;

}

.hp-contact-support-card a {

    color:
        var(--hp-yellow) !important;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none !important;

}

/* ============================================================
   FACEBOOK
============================================================ */

.hp-contact-facebook-card {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        62px;

    padding:
        11px 13px;

    border:
        1px solid
        var(--hp-border);

    border-radius:
        9px;

    background:
        #ffffff;

    text-decoration:
        none !important;

}

.hp-contact-facebook-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #1877f2;

    color:
        #ffffff;

}

.hp-contact-facebook-card small {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #9aa9b5;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.1px;

}

.hp-contact-facebook-card strong {

    display:
        block;

    color:
        var(--hp-navy);

    font-size:
        11px;

    line-height:
        1.35;

    font-weight:
        800;

}

.hp-contact-facebook-card > b {

    margin-left:
        auto;

    color:
        #a67b00;

    font-size:
        15px;

}

/* ============================================================
   CTA
============================================================ */

.hp-contact-cta {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            120deg,
            #061f33,
            #103451
        );

}

.hp-contact-cta-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;

}

.hp-contact-cta-inner {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    min-height:
        225px;

    padding:
        45px 0;

}

.hp-contact-cta-kicker {

    margin-bottom:
        8px;

    color:
        var(--hp-yellow);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2px;

}

.hp-contact-cta h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        31px;

    line-height:
        1.15;

    font-weight:
        900;

}

.hp-contact-cta h2 strong {

    color:
        var(--hp-yellow);

}

.hp-contact-cta p {

    margin:
        10px 0 0;

    color:
        rgba(255,255,255,.60);

    font-size:
        12px;

}

.hp-contact-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}

/* ============================================================
   1500+
============================================================ */

@media (min-width: 1500px) {

    .hp-contact-container {

        max-width:
            1450px;

    }

}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .hp-contact-main-grid {

        grid-template-columns:
            1fr;

    }

    .hp-contact-sidebar {

        position:
            static;

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }

    .hp-contact-support-card,
    .hp-contact-facebook-card {

        align-self:
            stretch;

    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .hp-contact-container {

        width:
            calc(100% - 20px);

    }

    .hp-contact-hero {

        min-height:
            410px;

    }

    .hp-contact-hero-inner {

        padding:
            56px 0 75px;

    }

    .hp-contact-hero h1 {

        font-size:
            38px;

    }

    .hp-contact-hero-inner > p {

        font-size:
            13px;

    }

    .hp-contact-hero-actions {

        margin-top:
            21px;

    }

    .hp-contact-quick-grid {

        grid-template-columns:
            1fr;

        gap:
            10px;

        margin-top:
            -35px;

    }

    .hp-contact-quick-card {

        min-height:
            105px;

        padding:
            15px;

    }

    .hp-contact-main {

        padding:
            48px 0 55px;

    }

    .hp-contact-form-card {

        padding:
            20px;

        border-radius:
            11px;

    }

    .hp-contact-form-card h2 {

        font-size:
            26px;

    }

    .hp-contact-form-grid-2 {

        grid-template-columns:
            1fr;

        gap:
            0;

    }

    .hp-contact-form-footer {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

    .hp-contact-sidebar {

        display:
            flex;

    }

    .hp-contact-cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

    .hp-contact-cta h2 {

        font-size:
            26px;

    }

}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .hp-contact-hero h1 {

        font-size:
            33px;

    }

    .hp-contact-btn {

        width:
            100%;

    }

    .hp-contact-quick-content strong {

        font-size:
            13px;

    }

    .hp-contact-sidebar {

        gap:
            12px;

    }

}


/* ============================================================
   FOOTER
   Source: footer(1).php
   ============================================================ */

/* ============================================================
   HPTECH PREMIUM FOOTER
============================================================ */

.hp-footer {

    --footer-navy:
        #08283f;

    --footer-navy-deep:
        #061f33;

    --footer-yellow:
        #ffbd00;

    --footer-yellow-light:
        #ffc52a;

    --footer-text:
        rgba(255,255,255,.74);

    --footer-muted:
        rgba(255,255,255,.42);

    --footer-line:
        rgba(255,255,255,.09);

    position:
        relative;

    width:
        100%;

    background:
        var(--footer-navy);

    color:
        var(--footer-text);

    overflow:
        hidden;

}

/* ============================================================
   DECORATIVE CIRCLES
============================================================ */

.hp-footer::before {

    content:
        "";

    position:
        absolute;

    width:
        760px;

    height:
        760px;

    top:
        -560px;

    right:
        -250px;

    border:
        1px solid
        rgba(255,255,255,.035);

    border-radius:
        50%;

    pointer-events:
        none;

}

.hp-footer::after {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    bottom:
        -390px;

    left:
        -290px;

    border:
        1px solid
        rgba(255,189,0,.045);

    border-radius:
        50%;

    pointer-events:
        none;

}

/* ============================================================
   CONTAINER
============================================================ */

.hp-footer-container {

    position:
        relative;

    z-index:
        2;

    width:
        calc(100% - 70px);

    max-width:
        1400px;

    margin:
        0 auto;

}

/* ============================================================
   MAIN
============================================================ */

.hp-footer-main {

    position:
        relative;

    padding:
        65px 0 38px;

    background:

        radial-gradient(
            circle at 20% 10%,
            rgba(255,189,0,.035),
            transparent 28%
        );

}

/* ============================================================
   TOP BRAND LINE
============================================================ */

.hp-footer-top {

    margin-bottom:
        36px;

}

.hp-footer-brand-line {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}

.hp-footer-brand-label {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--footer-yellow);

    font-size:
        11.5px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.8px;

}

.hp-footer-status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--footer-yellow);

    box-shadow:
        0 0 0 5px
        rgba(255,189,0,.08);

}

.hp-footer-brand-rule {

    flex:
        1;

    height:
        1px;

    background:
        var(--footer-line);

}

.hp-footer-brand-caption {

    color:
        rgba(255,255,255,.34);

    font-size:
        9.2px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        1.3px;

}

/* ============================================================
   GRID
============================================================ */

.hp-footer-grid {

    display:
        grid;

    grid-template-columns:
        1.55fr
        1fr
        1fr
        1fr
        1.4fr;

    gap:
        42px;

}

/* ============================================================
   COMPANY
============================================================ */

.hp-footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    margin-bottom:
        20px;

}

.hp-footer-logo img {

    display:
        block;

    width:
        190px;

    height:
        auto;

    object-fit:
        contain;

}

.hp-footer-description {

    max-width:
        370px;

    margin:
        0 0 13px;

    color:
        rgba(255,255,255,.61);

    font-size:
        14.95px;

    line-height:
        1.8;

}

/* ============================================================
   MINI TITLE
============================================================ */

.hp-footer-mini-title {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        21px;

    margin-bottom:
        10px;

    color:
        rgba(255,255,255,.50);

    font-size:
        9.2px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}

.hp-footer-mini-title > span {

    width:
        20px;

    height:
        2px;

    background:
        var(--footer-yellow);

}

/* ============================================================
   SHIPPING
============================================================ */

.hp-footer-shipping {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}

.hp-footer-shipping-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        64px;

    height:
        35px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        5px;

    background:
        rgba(255,255,255,.05);

}

.hp-footer-shipping-item img {

    display:
        block;

    max-width:
        53px;

    max-height:
        25px;

    object-fit:
        contain;

}

/* ============================================================
   CERTIFICATIONS
============================================================ */

.hp-footer-cert-title {

    margin-top:
        18px;

}

.hp-footer-certifications {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}

.hp-footer-cert {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        44px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        6px;

    background:
        #ffffff;

}

.hp-footer-cert img {

    width:
        37px;

    max-height:
        33px;

    object-fit:
        contain;

}

/* ============================================================
   HEADINGS
============================================================ */

.hp-footer-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        18px;

}

.hp-footer-heading-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    border-radius:
        8px;

    background:
        rgba(255,255,255,.07);

    color:
        var(--footer-yellow);

    font-size:
        13px;

}

.hp-footer-heading > div > span {

    display:
        block;

    margin-bottom:
        4px;

    color:
        rgba(255,255,255,.34);

    font-size:
        9.2px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}

.hp-footer-heading h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        18.4px;

    line-height:
        1.1;

    font-weight:
        900;

}

/* ============================================================
   LINKS
============================================================ */

.hp-footer-links {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}

.hp-footer-links li {

    margin:
        0;

    padding:
        1px 0;

    border-bottom:
        1px solid
        var(--footer-line);

}

.hp-footer-links li:last-child {

    border-bottom:
        0;

}

.hp-footer-links a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    min-height:
        41px;

    color:
        rgba(255,255,255,.58) !important;

    font-size:
        13.8px;

    line-height:
        1.4;

    font-weight:
        600;

    text-decoration:
        none !important;

    transition:
        color .2s ease,
        padding-left .2s ease;

}

.hp-footer-links a span {

    color:
        rgba(255,189,0,.44);

    font-size:
        15px;

    transition:
        transform .2s ease,
        color .2s ease;

}

.hp-footer-links a:hover {

    color:
        #ffffff !important;

    padding-left:
        4px;

}

.hp-footer-links a:hover span {

    color:
        var(--footer-yellow);

    transform:
        translateX(3px);

}

/* ============================================================
   CONTACT
============================================================ */

.hp-footer-contact-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        15px;

    color:
        rgba(255,255,255,.64) !important;

    font-size:
        13.8px;

    line-height:
        1.65;

    font-weight:
        600;

    text-decoration:
        none !important;

}

.hp-footer-contact-item:hover {

    color:
        #ffffff !important;

}

.hp-contact-icon {

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 30px;

    border-radius:
        7px;

    background:
        rgba(255,189,0,.08);

    color:
        var(--footer-yellow);

    font-size:
        11px;

}

.hp-footer-contact-item small {

    display:
        block;

    margin-bottom:
        4px;

    color:
        rgba(255,255,255,.31);

    font-size:
        8.05px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.1px;

}

/* ============================================================
   FACEBOOK
============================================================ */

.hp-footer-facebook {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        48px;

    margin-top:
        8px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        7px;

    background:
        rgba(255,255,255,.04);

    color:
        rgba(255,255,255,.76) !important;

    font-size:
        11.5px;

    font-weight:
        800;

    text-decoration:
        none !important;

}

.hp-footer-facebook:hover {

    background:
        rgba(255,189,0,.10);

    border-color:
        rgba(255,189,0,.35);

    color:
        #ffffff !important;

}

.hp-footer-facebook-icon {

    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 27px;

    border-radius:
        50%;

    background:
        #1877f2;

    color:
        #ffffff;

}

.hp-footer-facebook > span:last-child {

    margin-left:
        auto;

    color:
        var(--footer-yellow);

    font-size:
        14px;

}

/* ============================================================
   KEYWORDS
============================================================ */

.hp-footer-keywords {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        38px;

    padding:
        19px 0;

    border-top:
        1px solid
        var(--footer-line);

    border-bottom:
        1px solid
        var(--footer-line);

}

.hp-footer-keywords-title {

    flex:
        0 0 auto;

    color:
        rgba(255,255,255,.45);

    font-size:
        10.35px;

    line-height:
        1.3;

    font-weight:
        900;

    letter-spacing:
        1.2px;

}

.hp-footer-keywords-title span {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--footer-yellow);

    font-size:
        8.05px;

    letter-spacing:
        1.6px;

}

.hp-footer-keywords-list {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px 10px;

}

.hp-footer-keywords-list a {

    color:
        rgba(255,255,255,.50) !important;

    font-size:
        11.5px;

    line-height:
        1.35;

    font-weight:
        600;

    text-decoration:
        none !important;

    transition:
        color .2s ease;

}

.hp-footer-keywords-list a:hover {

    color:
        var(--footer-yellow) !important;

}

.hp-footer-keywords-list > span {

    color:
        rgba(255,255,255,.17);

    font-size:
        10.35px;

}

/* ============================================================
   COPYRIGHT
============================================================ */

.hp-footer-bottom {

    background:
        var(--footer-navy-deep);

    border-top:
        1px solid
        rgba(255,255,255,.05);

}

.hp-footer-bottom
.hp-footer-container {

    min-height:
        54px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        20px;

}

.hp-footer-bottom-left {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        rgba(255,255,255,.40);

    font-size:
        10.35px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .6px;

}

.hp-footer-bottom-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--footer-yellow);

}

.hp-footer-bottom-center {

    color:
        rgba(255,255,255,.30);

    font-size:
        10.35px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        1.1px;

}

.hp-footer-bottom-center span {

    margin:
        0 7px;

    color:
        rgba(255,189,0,.45);

}

.hp-footer-bottom-right {

    text-align:
        right;

}

.hp-footer-bottom-right a {

    color:
        rgba(255,255,255,.42) !important;

    font-size:
        10.35px;

    font-weight:
        700;

    text-decoration:
        none !important;

}

.hp-footer-bottom-right a:hover {

    color:
        var(--footer-yellow) !important;

}

/* ============================================================
   FLOATING ZALO
============================================================ */

.hp-zalo {

    position:
        fixed;

    z-index:
        99999;

    right:
        20px;

    bottom:
        22px;

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none !important;

}

.hp-zalo-ring {

    position:
        absolute;

    inset:
        0;

    border:
        1px solid
        rgba(255,189,0,.60);

    border-radius:
        50%;

    animation:
        hpZaloPulse
        2.2s
        ease-out
        infinite;

}

.hp-zalo-icon {

    position:
        relative;

    z-index:
        2;

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--footer-yellow);

    color:
        var(--footer-navy);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.22);

    transition:
        transform .25s ease;

}

.hp-zalo-icon svg {

    width:
        27px;

    height:
        27px;

}

.hp-zalo-text {

    position:
        absolute;

    right:
        66px;

    top:
        50%;

    transform:
        translateY(-50%)
        translateX(5px);

    padding:
        8px 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        6px;

    background:
        var(--footer-navy-deep);

    color:
        #ffffff;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        800;

    white-space:
        nowrap;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .2s ease,
        transform .2s ease;

}

.hp-zalo:hover .hp-zalo-icon {

    transform:
        scale(1.07);

}

.hp-zalo:hover .hp-zalo-text {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(-50%)
        translateX(0);

}

@keyframes hpZaloPulse {

    0% {

        transform:
            scale(1);

        opacity:
            .8;

    }

    70% {

        transform:
            scale(1.35);

        opacity:
            0;

    }

    100% {

        transform:
            scale(1.35);

        opacity:
            0;

    }

}

/* ============================================================
   1500PX+
============================================================ */

@media (min-width: 1500px) {

    .hp-footer-container {

        max-width:
            1450px;

    }

    .hp-footer-grid {

        gap:
            46px;

    }

    .hp-footer-description {

        font-size:
            15.5px;

    }

    .hp-footer-links a {

        font-size:
            14px;

        min-height:
            43px;

    }

    .hp-footer-contact-item {

        font-size:
            14px;

    }

    .hp-footer-heading h3 {

        font-size:
            19px;

    }

}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1150px) {

    .hp-footer-container {

        width:
            calc(100% - 45px);

    }

    .hp-footer-grid {

        grid-template-columns:
            1.3fr
            1fr
            1fr;

        gap:
            30px;

    }

    .hp-footer-company {

        grid-column:
            span 3;

        padding-bottom:
            20px;

        border-bottom:
            1px solid
            var(--footer-line);

    }

    .hp-footer-keywords {

        display:
            block;

    }

    .hp-footer-keywords-title {

        margin-bottom:
            10px;

    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .hp-footer-main {

        padding:
            50px 0 28px;

    }

    .hp-footer-container {

        width:
            calc(100% - 20px);

    }

    .hp-footer-top {

        margin-bottom:
            27px;

    }

    .hp-footer-brand-line {

        flex-wrap:
            wrap;

    }

    .hp-footer-brand-rule {

        flex-basis:
            100%;

        order:
            3;

        margin-top:
            7px;

    }

    .hp-footer-brand-caption {

        margin-left:
            auto;

        font-size:
            8px;

    }

    .hp-footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            30px 20px;

    }

    .hp-footer-company {

        grid-column:
            span 2;

    }

    .hp-footer-logo img {

        width:
            165px;

    }

    .hp-footer-description {

        font-size:
            12.65px;

        line-height:
            1.75;

    }

    .hp-footer-heading {

        margin-bottom:
            12px;

    }

    .hp-footer-heading-icon {

        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;

    }

    .hp-footer-heading h3 {

        font-size:
            14.95px;

    }

    .hp-footer-heading > div > span {

        font-size:
            7px;

    }

    .hp-footer-links a {

        min-height:
            36px;

        font-size:
            11.5px;

    }

    .hp-footer-contact-item {

        font-size:
            11.5px;

    }

    .hp-footer-contact-item small {

        font-size:
            6.9px;

    }

    .hp-footer-facebook {

        min-height:
            44px;

        font-size:
            10.35px;

    }

    .hp-footer-keywords {

        margin-top:
            30px;

    }

    .hp-footer-keywords-list a {

        font-size:
            10.35px;

    }

    .hp-footer-bottom
    .hp-footer-container {

        min-height:
            auto;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;

        padding:
            16px 0;

    }

    .hp-footer-bottom-center {

        display:
            none;

    }

    .hp-footer-bottom-left {

        font-size:
            8.5px;

    }

    .hp-footer-bottom-right {

        text-align:
            left;

    }

    .hp-footer-bottom-right a {

        font-size:
            8.5px;

    }

    .hp-zalo {

        right:
            14px;

        bottom:
            15px;

        width:
            52px;

        height:
            52px;

    }

    .hp-zalo-icon {

        width:
            44px;

        height:
            44px;

    }

    .hp-zalo-icon svg {

        width:
            24px;

        height:
            24px;

    }

    .hp-zalo-text {

        display:
            none;

    }

}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .hp-footer-grid {

        grid-template-columns:
            1fr;

    }

    .hp-footer-company {

        grid-column:
            auto;

    }

    .hp-footer-brand-caption {

        width:
            100%;

        margin-left:
            0;

        margin-top:
            3px;

    }

}
.pcb-products-section {
    width: 100%;
    padding: 65px 0 75px;
    background: #f4f7fa;
    box-sizing: border-box;
}

.pcb-container {
    width: min(1400px, calc(100% - 50px));
    margin: 0 auto;
}

/* HEADING */

.pcb-heading {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

.pcb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #b87900;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.pcb-eyebrow::before,
.pcb-eyebrow::after {
    content: "";
    width: 24px;
    height: 2px;
    background: #ffbd00;
}

.pcb-heading h2 {
    margin: 12px 0 12px;

    color: #0d2f4d;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.pcb-heading p {
    margin: 0 auto;

    color: #71859a;
    font-size: 17px;
    line-height: 1.75;
}


/* GRID */

.pcb-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}


/* CARD */

.pcb-card {
    position: relative;
    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #dce5ed;
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(20, 48, 75, 0.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.pcb-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;

    height: 3px;

    background: #ffbd00;
    z-index: 2;
}

.pcb-card:hover {
    transform: translateY(-6px);

    border-color: #cbd9e5;

    box-shadow:
        0 18px 40px rgba(20, 48, 75, 0.13);
}


/* IMAGE */

.pcb-image-box {
    position: relative;
    height: 190px;

    padding: 10px 0 0 0;

    background: #f8fafc;
    border-bottom: 1px solid #e2e9ef;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.pcb-image-box::after {
    content: "";
    position: absolute;

    width: 190px;
    height: 190px;

    border: 1px solid #e7edf2;
    border-radius: 50%;

    pointer-events: none;
}

.pcb-image-box img {
    position: relative;
    z-index: 1;

    width: 100%;
    

    object-fit: contain;
}


/* BADGE */

.pcb-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;

    padding: 7px 11px;

    color: #ffffff;
    background: #123653;

    border-radius: 5px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
}


/* CONTENT */

.pcb-card-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 20px 18px 17px;
}


/* TITLE */

.pcb-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    min-height: 38px;
}

.pcb-card-title h3 {
    margin: 0;

    color: #102f4a;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 800;
}

.pcb-price {
    flex-shrink: 0;

    padding: 7px 9px;

    color: #a66c00;
    background: #fff8df;

    border: 1px solid #ffd979;
    border-radius: 6px;

    font-size: 11px;
    font-weight: 800;
}


/* INFO */

.pcb-info {
    margin-top: 12px;

    border-top: 1px solid #e5ebf0;
}

.pcb-info > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 37px;

    border-bottom: 1px solid #e5ebf0;

    font-size: 14px;
}

.pcb-info span {
    color: #8196aa;
}

.pcb-info strong {
    color: #183b59;
    font-weight: 700;
    text-align: right;
}


/* FOOTER */

.pcb-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 16px;
}

.pcb-time {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

    color: #8194a6;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
}

.pcb-time-icon {
    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #173c59;
    background: #f0f4f7;

    border-radius: 50%;

    font-size: 14px;
}

.pcb-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 16px;

    color: #152f46 !important;
    background: #ffbd00;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none !important;

    box-shadow: 0 5px 12px rgba(255, 189, 0, .20);

    transition: .25s ease;
}

.pcb-button span {
    font-size: 17px;
    line-height: 1;
}

.pcb-button:hover {
    color: #ffffff !important;
    background: #e5a900;

    transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .pcb-container {
        width: min(1100px, calc(100% - 40px));
    }

    .pcb-products-grid {
        gap: 16px;
    }

    .pcb-card-title h3 {
        font-size: 18px;
    }

    .pcb-card-content {
        padding: 18px 15px;
    }

}


@media (max-width: 992px) {

    .pcb-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .pcb-image-box {
        height: 200px;
    }

}


@media (max-width: 600px) {

    .pcb-products-section {
        padding: 45px 0 55px;
    }

    .pcb-container {
        width: calc(100% - 24px);
    }

    .pcb-heading {
        margin-bottom: 30px;
    }

    .pcb-heading h2 {
        font-size: 28px;
    }

    .pcb-heading p {
        font-size: 15px;
    }

    .pcb-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pcb-image-box {
        height: 130px;
        padding: 15px 8px 5px;
    }

    .pcb-image-box img {
        width: 100%;
    }

    .pcb-image-box::after {
        width: 120px;
        height: 120px;
    }

    .pcb-badge {
        top: 8px;
        left: 8px;
        padding: 5px 7px;
        font-size: 9px;
    }

    .pcb-card-content {
        padding: 14px 11px 12px;
    }

    .pcb-card-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .pcb-card-title h3 {
        font-size: 16px;
    }

    .pcb-price {
        font-size: 9px;
        padding: 5px 7px;
    }

    .pcb-info {
        margin-top: 8px;
    }

    .pcb-info > div {
        min-height: 32px;
        font-size: 11px;
    }

    .pcb-card-footer {
        align-items: stretch;
        flex-direction: column;
        margin-top: 10px;
    }

    .pcb-time {
        font-size: 9px;
    }

    .pcb-button {
        justify-content: center;
        width: 100%;
        padding: 9px 8px;
        font-size: 12px;
    }
}


/* ============================================================
   HPTECH FEEDBACK
============================================================ */

.hp-feedback-section {

    --feedback-navy: #103451;
    --feedback-navy-dark: #08283f;

    --feedback-yellow: #ffbd00;

    --feedback-bg: #f3f6f9;

    --feedback-white: #ffffff;

    --feedback-text: #163953;

    --feedback-muted: #788d9f;

    position: relative;

    width: 100%;

    padding: 90px 0 85px;

    background:

        radial-gradient(
            circle at 10% 15%,
            rgba(255,189,0,.045),
            transparent 24%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(16,52,81,.055),
            transparent 30%
        ),

        var(--feedback-bg);

    overflow: hidden;
}


/* ============================================================
   RESET
============================================================ */

.hp-feedback-section *,
.hp-feedback-section *::before,
.hp-feedback-section *::after {

    box-sizing: border-box;
}


/* ============================================================
   BACKGROUND
============================================================ */

.hp-feedback-section::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -460px;
    right: -220px;

    border:
        1px solid
        rgba(16,52,81,.035);

    border-radius: 50%;

    pointer-events: none;
}


.hp-feedback-section::after {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    bottom: -260px;
    left: -230px;

    border:
        1px solid
        rgba(255,189,0,.05);

    border-radius: 50%;

    pointer-events: none;
}


/* ============================================================
   CONTAINER
============================================================ */

.hp-feedback-container {

    position: relative;

    z-index: 2;

    width: calc(100% - 70px);

    max-width: 1400px;

    margin: 0 auto;
}


/* ============================================================
   HEADER
============================================================ */

.hp-feedback-header {

    max-width: 850px;

    margin: 0 auto 45px;

    text-align: center;
}


.hp-feedback-kicker {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    margin-bottom: 13px;

    color: #997000;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;
}


.hp-feedback-kicker span {

    width: 30px;
    height: 2px;

    background: var(--feedback-yellow);
}


.hp-feedback-header h2 {

    margin: 0;

    color: var(--feedback-navy);

    font-size: 40px;

    line-height: 1.18;

    font-weight: 900;

    letter-spacing: -.7px;
}


.hp-feedback-header h2 strong {

    color: var(--feedback-navy);
}


.hp-feedback-header p {

    max-width: 730px;

    margin: 16px auto 0;

    color: var(--feedback-muted);

    font-size: 16px;

    line-height: 1.75;
}


.hp-feedback-heading-line {

    width: 90px;
    height: 3px;

    margin: 22px auto 0;

    background: #dfe7ed;

    overflow: hidden;
}


.hp-feedback-heading-line span {

    display: block;

    width: 35px;
    height: 100%;

    margin-left: 28px;

    background: var(--feedback-yellow);
}


/* ============================================================
   CAROUSEL
============================================================ */

.hp-feedback-carousel {

    position: relative;
}


.hp-feedback-viewport {

    width: 100%;

    overflow: hidden;
}


.hp-feedback-track {

    display: flex;

    gap: 20px;

    transition:
        transform .65s
        cubic-bezier(.2,.8,.2,1);

    will-change: transform;
}


/* ============================================================
   FEEDBACK CARD
============================================================ */

.hp-feedback-card {

    position: relative;

    flex: 0 0
        calc(
            (100% - 40px) / 3
        );

    min-height: 320px;

    padding: 25px 24px 20px;

    overflow: hidden;

    background: #fff;

    border:
        1px solid
        #dbe4eb;

    border-radius: 13px;

    box-shadow:
        0 9px 28px
        rgba(16,52,81,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.hp-feedback-card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(255,189,0,.45);

    box-shadow:
        0 20px 42px
        rgba(16,52,81,.11);
}


/* ============================================================
   QUOTE
============================================================ */

.hp-feedback-quote {

    position: absolute;

    z-index: 0;

    top: -8px;
    right: 16px;

    color:
        rgba(16,52,81,.055);

    font-family: Georgia, serif;

    font-size: 100px;

    line-height: 1;

    font-weight: 900;

    pointer-events: none;

    transition:
        color .35s ease,
        transform .35s ease;
}


.hp-feedback-card:hover
.hp-feedback-quote {

    color:
        rgba(255,189,0,.12);

    transform:
        translateY(-4px);
}


/* ============================================================
   TOP
============================================================ */

.hp-feedback-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 16px;
}


/* AVATAR */

.hp-feedback-avatar {

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    padding: 3px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--feedback-yellow),
            #f5e2a0
        );
}


.hp-feedback-avatar img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    background: #eef2f5;

    border: 2px solid #fff;
}


/* CUSTOMER */

.hp-feedback-customer {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.hp-feedback-verified {

    display: flex;

    align-items: center;

    gap: 5px;

    color: #8a9aab;

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.1px;
}


.hp-feedback-check {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background:
        var(--feedback-yellow);

    color:
        var(--feedback-navy);

    font-size: 9px;

    font-weight: 900;
}


.hp-feedback-email {

    overflow: hidden;

    color:
        var(--feedback-navy);

    font-size: 13px;

    line-height: 1.3;

    font-weight: 800;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* FLAG */

.hp-feedback-flag {

    margin-left: auto;

    align-self: flex-start;
}


.hp-feedback-flag img {

    display: block;

    width: 30px;
    height: 15px;

    object-fit: cover;

    border-radius: 2px;

    box-shadow:
        0 2px 6px
        rgba(16,52,81,.10);
}


/* ============================================================
   STARS
============================================================ */

.hp-feedback-stars {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 2px;

    margin-bottom: 14px;
}


.hp-feedback-stars span {

    color:
        var(--feedback-yellow);

    font-size: 17px;

    line-height: 1;
}


/* ============================================================
   TEXT
============================================================ */

.hp-feedback-text {

    position: relative;

    z-index: 2;

    min-height: 96px;

    margin: 0;

    color:
        #516a7f;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 500;
}


/* ============================================================
   FOOTER
============================================================ */

.hp-feedback-footer {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: auto;

    padding-top: 15px;

    border-top:
        1px solid
        #e7edf2;
}


.hp-feedback-footer span {

    color: #9aaaba;

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.hp-feedback-footer i {

    color: #d5dfe7;

    font-size: 24px;

    line-height: 1;

    font-style: normal;

    font-weight: 900;
}


/* ============================================================
   ARROWS
============================================================ */

.hp-feedback-nav {

    position: absolute;

    z-index: 10;

    top: 50%;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        #d7e0e7;

    border-radius: 50%;

    background: #ffffff;

    color:
        var(--feedback-navy);

    font-size: 20px;

    line-height: 1;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 18px
        rgba(16,52,81,.08);

    transform:
        translateY(-50%);

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}


.hp-feedback-nav:hover {

    background:
        var(--feedback-yellow);

    border-color:
        var(--feedback-yellow);

    color:
        var(--feedback-navy);
}


.hp-feedback-nav:active {

    transform:
        translateY(-50%)
        scale(.94);
}


.hp-feedback-prev {

    left: -55px;
}


.hp-feedback-next {

    right: -55px;
}


/* ============================================================
   DOTS
============================================================ */

.hp-feedback-dots {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 28px;
}


.hp-feedback-dots button {

    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #cfd9e2;

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.hp-feedback-dots button.active {

    width: 24px;

    border-radius: 8px;

    background:
        var(--feedback-yellow);
}


/* ============================================================
   COUNTER
============================================================ */

.hp-feedback-stats {

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    align-items: stretch;

    margin-top: 45px;

    padding:
        24px 0;

    border-top:
        1px solid
        #dce5ec;

    border-bottom:
        1px solid
        #dce5ec;
}


.hp-stat-item {

    position: relative;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:
        4px 14px;

    text-align: center;

    transition:
        transform .3s ease;
}


.hp-stat-item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;

    height: 34px;

    background: #d8e1e8;

    transform:
        translateY(-50%);
}


.hp-stat-item:hover {

    transform:
        translateY(-3px);
}


.hp-stat-number {

    min-height: 35px;

    display: flex;

    align-items: baseline;

    justify-content: center;

    color:
        var(--feedback-navy);

    font-size: 30px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.7px;
}


.hp-stat-item:first-child
.hp-stat-number {

    color: #b27b00;
}


.hp-stat-item:hover
.hp-stat-number {

    color: #b27b00;
}


.hp-stat-label {

    margin-top: 7px;

    color: #8a9baa;

    font-size: 9px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1150px) {

    .hp-feedback-container {

        width:
            calc(100% - 100px);
    }


    .hp-feedback-card {

        flex-basis:
            calc(
                (100% - 20px) / 2
            );
    }


    .hp-feedback-prev {

        left: -50px;
    }


    .hp-feedback-next {

        right: -50px;
    }


    .hp-feedback-stats {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        row-gap: 22px;
    }


    .hp-stat-item:nth-child(3)::after,
    .hp-stat-item:nth-child(6)::after {

        display: none;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .hp-feedback-section {

        padding: 65px 0 70px;
    }


    .hp-feedback-container {

        width:
            calc(100% - 20px);
    }


    .hp-feedback-header {

        margin-bottom: 32px;
    }


    .hp-feedback-kicker {

        font-size: 9px;

        letter-spacing: 1.8px;
    }


    .hp-feedback-kicker span {

        width: 17px;
    }


    .hp-feedback-header h2 {

        font-size: 28px;

        line-height: 1.25;
    }


    .hp-feedback-header p {

        font-size: 13px;

        line-height: 1.65;
    }


    .hp-feedback-track {

        gap: 0;
    }


    .hp-feedback-card {

        flex: 0 0 100%;

        min-height: 285px;

        padding: 20px 17px 17px;

        border-radius: 11px;
    }


    .hp-feedback-quote {

        font-size: 78px;
    }


    .hp-feedback-avatar {

        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }


    .hp-feedback-email {

        font-size: 12px;
    }


    .hp-feedback-text {

        min-height: 82px;

        font-size: 14px;

        line-height: 1.65;
    }


    .hp-feedback-stars span {

        font-size: 15px;
    }


    .hp-feedback-nav {

        width: 36px;
        height: 36px;

        font-size: 17px;
    }


    .hp-feedback-prev {

        left: -6px;
    }


    .hp-feedback-next {

        right: -6px;
    }


    .hp-feedback-dots {

        margin-top: 22px;
    }


    /* ==============================
       STATS - 3 CỘT / 2 HÀNG
    ============================== */

    .hp-feedback-stats {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        margin-top: 32px;

        padding: 18px 0;

        row-gap: 20px;
    }


    .hp-stat-item {

        padding:
            3px 7px;
    }


    .hp-stat-item:not(:last-child)::after {

        height: 27px;
    }


    .hp-stat-number {

        font-size: 21px;

        letter-spacing: -.4px;
    }


    .hp-stat-label {

        margin-top: 5px;

        font-size: 6.5px;

        letter-spacing: .7px;
    }


    .hp-stat-item:nth-child(3)::after,
    .hp-stat-item:nth-child(6)::after {

        display: none;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 400px) {

    .hp-feedback-container {

        width:
            calc(100% - 16px);
    }


    .hp-feedback-card {

        min-height: 275px;

        padding:
            18px 14px 15px;
    }


    .hp-feedback-text {

        font-size: 13px;
    }


    .hp-feedback-stats {

        gap: 0;
    }


    .hp-stat-number {

        font-size: 19px;
    }


    .hp-stat-label {

        font-size: 6px;
    }

}
.hp-header {
    --hp-navy: #103451;
    --hp-navy-dark: #08283f;
    --hp-navy-deep: #061f33;
    --hp-yellow: #ffbd00;
    --hp-yellow-light: #ffc52a;

    position: sticky !important;
    top: -42px !important;
    z-index: 999999 !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.hp-header,
.hp-header *,
.hp-mainbar,
.hp-mainbar * {
    box-sizing: border-box;
}

.hp-header,
.hp-mainbar,
.hp-mainbar .hp-header-container {
    overflow: visible !important;
}

.hp-header a {
    text-decoration: none !important;
}

.hp-header-container {
    width: calc(100% - 70px);
    max-width: 1400px;
    margin: 0 auto;
}


/* TOPBAR */

.hp-topbar {
    height: 42px;
    background: var(--hp-navy-deep);
    border-top: 2px solid var(--hp-yellow);
}

.hp-topbar .hp-header-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hp-topbar-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.hp-top-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.86) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.hp-top-icon {
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-yellow);
}

.hp-top-time em {
    margin-left: 5px;
    color: rgba(255,255,255,.42);
    font-size: 9px;
    font-style: normal;
}

.hp-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.42);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.hp-top-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hp-yellow);
}


/* MAIN BAR */

.hp-mainbar {
    position: relative !important;
    top: auto !important;
    z-index: 999999 !important;
    height: 90px;
    background: rgba(16,52,81,.98) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 25px rgba(4,22,35,.16);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.hp-mainbar .hp-header-container {
    height: 100%;
    min-height: 90px;
    display: flex;
    align-items: center;
    gap: 20px;
}


/* LOGO */

.hp-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 185px;
}

.hp-brand img {
    width: 165px;
    height: 44px;
    display: block;
    object-fit: contain;
}


/* NAV */

.hp-nav {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.hp-nav-list {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 2px;
}

.hp-nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
}

.hp-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
    color: rgba(255,255,255,.92) !important;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    transition: color .25s ease;
}

.hp-nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    background: var(--hp-yellow);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.hp-nav-item:hover .hp-nav-link,
.hp-nav-item.active .hp-nav-link {
    color: #fff !important;
}

.hp-nav-item:hover .hp-nav-link::after,
.hp-nav-item.active .hp-nav-link::after {
    transform: scaleX(1);
}

.hp-nav-icon {
    margin-right: 7px;
    color: var(--hp-yellow);
}

.hp-nav-badge {
    margin-left: 8px;
    padding: 4px 6px;
    border-radius: 3px;
    background: rgba(255,189,0,.15);
    color: var(--hp-yellow);
    font-size: 7px;
    font-weight: 900;
}

.hp-nav-trigger-row {
    display: flex;
    height: 100%;
}

.hp-mega-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hp-yellow);
    cursor: pointer;
}

.hp-mega-toggle i {
    font-size: 9px;
    transition: transform .25s ease;
}

.hp-has-mega:hover .hp-mega-toggle i {
    transform: rotate(180deg);
}


/* MEGA */

.hp-mega-menu {
    position: absolute;
    z-index: 9999999;
    top: calc(100% - 1px);
    left: 50%;
    width: min(1260px, calc(100vw - 40px));
    padding: 30px 32px 32px;
    background: rgba(255,255,255,.985);
    border: 1px solid #dce5ec;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 28px 65px rgba(16,52,81,.20);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%,10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.hp-has-mega:hover .hp-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%,0);
}

.hp-mega-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5ebef;
}

.hp-mega-kicker {
    display: block;
    margin-bottom: 7px;
    color: #9a7000;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.hp-mega-top h3 {
    margin: 0;
    color: #103451;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 900;
}

.hp-mega-top h3 strong {
    color: #b27b00;
}

.hp-mega-top p {
    margin: 8px 0 0;
    color: #8094a5;
    font-size: 11px;
    line-height: 1.55;
}

.hp-mega-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--hp-yellow);
    border-radius: 7px;
    background: var(--hp-yellow);
    color: #103451 !important;
    font-size: 11px;
    font-weight: 900;
}

.hp-mega-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 26px;
}

.hp-mega-column {
    min-width: 0;
}

.hp-mega-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
}

.hp-mega-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border-radius: 9px;
    background: #103451;
    color: var(--hp-yellow);
}

.hp-mega-icon.premium {
    background: #fff5cf;
    color: #a47700;
}

.hp-mega-heading strong {
    display: block;
    margin-bottom: 5px;
    color: #103451;
    font-size: 12px;
    font-weight: 900;
}

.hp-mega-heading small {
    display: block;
    color: #91a2af;
    font-size: 9px;
}

.hp-mega-column > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 47px;
    padding: 0;
    border-bottom: 1px solid #e7edf1;
    color: #4e677a !important;
    font-size: 14px;
    font-weight: 650;
}

.hp-mega-column > a:last-child {
    border-bottom: 0;
}

.hp-mega-column > a:hover {
    padding-left: 7px;
    color: #9a7000 !important;
}

.hp-mega-column > a b {
    color: #b3c0c9;
    font-size: 15px;
}

.hp-mega-column > a:hover b {
    color: var(--hp-yellow);
}

.hp-mega-banner {
    position: relative;
    display: block;
    min-height: 250px;
    height: 100%;
    overflow: hidden;
    border-radius: 11px;
    background: #103451;
}

.hp-mega-banner img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    display: block;
    object-fit: cover;
    opacity: .68;
    transition: transform .55s ease, opacity .55s ease;
}

.hp-mega-banner:hover img {
    transform: scale(1.06);
    opacity: .82;
}

.hp-mega-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    background: linear-gradient(to top, rgba(6,31,51,.95), rgba(6,31,51,.08));
}

.hp-mega-banner-overlay span {
    color: var(--hp-yellow);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.hp-mega-banner-overlay strong {
    margin-top: 6px;
    color: #fff;
    font-size: 24px;
    line-height: 1.12;
    font-weight: 900;
}

.hp-mega-banner-overlay small {
    margin-top: 10px;
    color: rgba(255,255,255,.75);
    font-size: 10px;
}


/* ACCOUNT */

.hp-header-account {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.hp-account-btn,
.hp-account-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    background: rgba(255,255,255,.055);
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
}

.hp-account-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hp-yellow);
    color: #103451;
}

.hp-account-user {
    padding-left: 6px;
}

.hp-account-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: #fff;
}

.hp-account-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hp-account-user-name {
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hp-account-user > i {
    color: var(--hp-yellow);
    font-size: 8px;
}

.hp-account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 99999999;
    width: 230px;
    padding: 9px;
    border: 1px solid #dce5ec;
    border-radius: 10px;
    background: rgba(255,255,255,.985);
    box-shadow: 0 20px 40px rgba(16,52,81,.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(7px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.hp-header-account:hover .hp-account-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.hp-account-dropdown-title {
    padding: 9px 11px;
    color: #9a7000;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.hp-account-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px;
    border-radius: 6px;
    color: #536b7e !important;
    font-size: 11px;
    font-weight: 700;
}

.hp-account-dropdown-link:hover {
    background: #fff8e3;
    color: #a47700 !important;
}

.hp-account-profile-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #edf1f4;
}

.hp-account-avatar.large {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.hp-account-profile-head strong {
    display: block;
    max-width: 140px;
    overflow: hidden;
    color: #103451;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hp-account-profile-head small {
    display: block;
    max-width: 140px;
    margin-top: 3px;
    overflow: hidden;
    color: #97a6b2;
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hp-account-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    margin-top: 5px;
    border-radius: 6px;
    background: #fff1d2;
    color: #936c00 !important;
    font-size: 10px;
    font-weight: 900;
}


/* MOBILE BUTTON */

.hp-nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 8px;
    margin-left: auto;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;
    background: rgba(255,255,255,.05);
    cursor: pointer;
}

.hp-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: #fff;
    transition: transform .25s ease, opacity .25s ease;
}

.hp-nav-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hp-nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.hp-nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* LARGE */

@media (min-width: 1500px) {
    .hp-header-container { max-width: 1450px; }

    .hp-mainbar,
    .hp-mainbar .hp-header-container {
        height: 92px;
        min-height: 92px;
    }

    .hp-brand { width: 190px; }

    .hp-brand img {
        width: 170px;
        height: 45px;
    }

    .hp-nav-link {
        padding: 0 15px;
        font-size: 14px;
    }

    .hp-mega-menu {
        width: min(1300px, calc(100vw - 40px));
    }
}


/* TABLET */

@media (max-width: 1180px) {
    .hp-header-container {
        width: calc(100% - 35px);
    }

    .hp-brand {
        width: 150px;
    }

    .hp-brand img {
        width: 135px;
        height: 37px;
    }

    .hp-nav-link {
        padding: 0 8px;
        font-size: 11px;
    }

    .hp-top-contact {
        font-size: 10px;
    }

    .hp-mega-menu {
        width: calc(100vw - 30px);
    }
}


/* ============================================================
   MOBILE - FULL FIX
============================================================ */

@media (max-width: 991px) {

    .hp-header {
        top: -38px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .hp-topbar {
        height: 38px !important;
        min-height: 38px !important;
    }

    .hp-topbar .hp-header-container {
        width: 100% !important;
        padding: 6px 10px !important;
        margin: 0 !important;
    }

    .hp-topbar-left {
        width: 100%;
        gap: 12px;
    }

    .hp-top-contact {
        font-size: 9px;
    }

    .hp-top-contact:nth-child(3),
    .hp-topbar-right {
        display: none !important;
    }

    .hp-mainbar {
        width: 100% !important;
        height: 74px !important;
        min-height: 74px !important;
        overflow: visible !important;
    }

    .hp-mainbar .hp-header-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 74px !important;
        min-height: 74px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
    }


    /* LOGO: nhường không gian */

    .hp-brand {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
    }

    .hp-brand img {
        width: 125px !important;
        max-width: 100% !important;
        height: auto !important;
    }


    /* HAMBURGER */

    .hp-nav-toggle {
        display: block !important;
        position: relative !important;
        z-index: 1000001 !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        margin: 0 0 0 6px !important;
    }


    /* ACCOUNT - KHÓA KÍCH THƯỚC */

    .hp-header-account {
        position: relative !important;
        z-index: 1000001 !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        margin: 0 0 0 6px !important;
        overflow: visible !important;
    }

    .hp-account-user {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    /* QUAN TRỌNG:
       mobile chỉ hiển thị avatar,
       ẩn tên và mũi tên */

    .hp-account-user-name {
        display: none !important;
    }

    .hp-account-user > i {
        display: none !important;
    }

    .hp-account-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        flex: 0 0 34px !important;
        margin: 0 !important;
    }

    /* chưa đăng nhập */

    .hp-account-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .hp-account-btn > span:last-child {
        display: none !important;
    }

    .hp-account-icon {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }


    /* MOBILE NAV */

    .hp-nav {
        position: fixed !important;
        top: 74px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 74px) !important;
        max-height: calc(100vh - 74px) !important;
        margin: 0 !important;
        padding: 8px 12px 40px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
        background: linear-gradient(180deg,#08283f 0%,#061f33 100%) !important;
        border-top: 1px solid rgba(255,255,255,.10) !important;
        box-shadow: 0 25px 50px rgba(0,0,0,.35) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-12px) !important;
        transition: opacity .22s ease, visibility .22s ease, transform .22s ease !important;
    }

    .hp-nav.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .hp-nav-list {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hp-nav-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .hp-nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 58px !important;
        height: auto !important;
        padding: 0 14px !important;
        color: #fff !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }

    .hp-nav-link::after {
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 32px !important;
        height: 3px !important;
    }

    .hp-nav-trigger-row {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
    }

    .hp-nav-trigger-row .hp-nav-link {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .hp-mega-toggle {
        display: flex !important;
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        height: 58px !important;
    }


    /* MOBILE MEGA */

    .hp-mega-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 12px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
        background: rgba(0,0,0,.14) !important;
        border: 0 !important;
        border-top: 1px solid rgba(255,255,255,.06) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .hp-has-mega.is-open .hp-mega-menu {
        display: block !important;
    }

    .hp-mega-top {
        display: block !important;
        margin: 0 0 10px !important;
        padding: 6px 4px 14px !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .hp-mega-kicker {
        font-size: 9px !important;
    }

    .hp-mega-top h3 {
        margin: 0 !important;
        color: #fff !important;
        font-size: 21px !important;
    }

    .hp-mega-top h3 strong {
        color: var(--hp-yellow) !important;
    }

    .hp-mega-top p {
        margin: 7px 0 0 !important;
        color: rgba(255,255,255,.52) !important;
        font-size: 10px !important;
        line-height: 1.55 !important;
    }

    .hp-mega-cta {
        margin-top: 12px !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 10px !important;
    }

    .hp-mega-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .hp-mega-column {
        width: 100% !important;
        min-width: 0 !important;
    }

    .hp-mega-heading {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    .hp-mega-icon {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
    }

    .hp-mega-heading strong {
        color: #fff !important;
        font-size: 10px !important;
    }

    .hp-mega-heading small {
        color: rgba(255,255,255,.43) !important;
        font-size: 8px !important;
    }

    .hp-mega-column > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 47px !important;
        padding: 0 4px !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
        color: rgba(255,255,255,.78) !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .hp-mega-column > a b {
        color: rgba(255,255,255,.35) !important;
    }

    .hp-mega-banner {
        display: block !important;
        width: 100% !important;
        height: 210px !important;
        min-height: 210px !important;
        margin-top: 5px !important;
        overflow: hidden !important;
    }

    .hp-mega-banner img {
        width: 100% !important;
        height: 210px !important;
        min-height: 210px !important;
        object-fit: cover !important;
    }


    /* ACCOUNT DROPDOWN */

    .hp-account-dropdown {
        position: fixed !important;
        top: 82px !important;
        right: 10px !important;
        width: 230px !important;
        z-index: 99999999 !important;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .hp-header {
        top: -38px !important;
    }

    .hp-mainbar,
    .hp-mainbar .hp-header-container {
        height: 68px !important;
        min-height: 68px !important;
    }

    .hp-mainbar .hp-header-container {
        padding: 0 8px !important;
    }

    .hp-brand img {
        width: 120px !important;
    }

    .hp-nav-toggle {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        flex-basis: 40px !important;
        height: 40px !important;
        margin-left: 5px !important;
    }

    .hp-header-account {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        flex-basis: 40px !important;
        margin-left: 5px !important;
    }

    .hp-account-user,
    .hp-account-btn {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .hp-account-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
    }

    .hp-nav {
        top: 68px !important;
        height: calc(100vh - 68px) !important;
        max-height: calc(100vh - 68px) !important;
    }

    .hp-account-dropdown {
        top: 76px !important;
    }
}