/* =========================================================
   BRANDINFO - SƠ ĐỒ LỢI ÍCH WEBSITE BÁN HÀNG

   Section: bi-benefits-section
   Row: bi-benefits-map

   Cột trái:
   bi-benefits-side bi-benefits-left

   Cột giữa:
   bi-benefits-center

   Cột phải:
   bi-benefits-side bi-benefits-right

   Icon Box:
   bi-benefit-point

   Image:
   bi-benefit-device
   ========================================================= */

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

.bi-benefits-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 15% 45%,
            rgba(0, 127, 192, 0.09),
            transparent 30%),
        radial-gradient(circle at 87% 45%,
            rgba(158, 203, 59, 0.12),
            transparent 28%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f5fbff 52%,
            #fbfff3 100%);
}

/* Họa tiết mờ */
.bi-benefits-section::before,
.bi-benefits-section::after {
    content: "";
    position: absolute;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(0, 127, 192, 0.08);
    border-radius: 50%;

    pointer-events: none;
}

.bi-benefits-section::before {
    top: -210px;
    left: -170px;
}

.bi-benefits-section::after {
    right: -190px;
    bottom: -230px;

    border-color: rgba(158, 203, 59, 0.12);
}

/* =========================
   ROW NỘI DUNG
   ========================= */

.bi-benefits-map {
    position: relative;
    z-index: 1;

    align-items: center !important;

    width: 100%;
    max-width: 1320px !important;

    margin-right: auto !important;
    margin-left: auto !important;
}

/* =========================================================
   6 ĐƯỜNG NỐI TỪ ICON BOX ĐẾN HÌNH TRUNG TÂM
   ========================================================= */

.bi-benefits-map::before {
    content: "";

    position: absolute;
    top: 25px;
    right: 20px;
    bottom: 25px;
    left: 20px;
    z-index: 0;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 620' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M260 95 C390 95 430 205 535 255' stroke='%23007FC0' stroke-dasharray='6 8'/%3E%3Cpath d='M260 310 C400 310 440 310 535 310' stroke='%239ECB3B' stroke-dasharray='6 8'/%3E%3Cpath d='M260 525 C390 525 430 415 535 365' stroke='%23007FC0' stroke-dasharray='6 8'/%3E%3Cpath d='M940 95 C810 95 770 205 665 255' stroke='%239ECB3B' stroke-dasharray='6 8'/%3E%3Cpath d='M940 310 C800 310 760 310 665 310' stroke='%23007FC0' stroke-dasharray='6 8'/%3E%3Cpath d='M940 525 C810 525 770 415 665 365' stroke='%239ECB3B' stroke-dasharray='6 8'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke-width='3'%3E%3Ccircle cx='260' cy='95' r='6' stroke='%23007FC0'/%3E%3Ccircle cx='260' cy='310' r='6' stroke='%239ECB3B'/%3E%3Ccircle cx='260' cy='525' r='6' stroke='%23007FC0'/%3E%3Ccircle cx='940' cy='95' r='6' stroke='%239ECB3B'/%3E%3Ccircle cx='940' cy='310' r='6' stroke='%23007FC0'/%3E%3Ccircle cx='940' cy='525' r='6' stroke='%239ECB3B'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    opacity: 0.72;

    pointer-events: none;
}

/* Các cột phải nằm trên đường nối */
.bi-benefits-map>.col {
    position: relative;
    z-index: 2;
}

/* =========================
   CỘT CHỨA 3 LỢI ÍCH
   ========================= */

.bi-benefits-side>.col-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 25px;
}

/* =========================
   TỪNG ICON BOX
   ========================= */

.bi-benefit-point.icon-box {
    position: relative;

    display: flex !important;
    align-items: center !important;

    gap: 17px;

    width: 100%;
    min-height: 125px;

    margin: 0 !important;
    padding: 17px 19px;

    background: rgba(255, 255, 255, 0.86);

    border: 1px solid rgba(0, 127, 192, 0.11);
    border-radius: 18px;

    box-shadow:
        0 10px 28px rgba(0, 77, 116, 0.07);

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

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

/* Vạch màu nhỏ cạnh mỗi lợi ích */
.bi-benefit-point.icon-box::before {
    content: "";

    position: absolute;
    top: 20px;
    bottom: 20px;

    width: 3px;

    background: linear-gradient(180deg,
            #007fc0,
            #9ecb3b);

    border-radius: 99px;

    opacity: 0.75;
}

.bi-benefits-left .bi-benefit-point::before {
    right: 0;
}

.bi-benefits-right .bi-benefit-point::before {
    left: 0;
}

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

.bi-benefit-point .icon-box-img {
    display: flex !important;
    flex: 0 0 72px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 13px !important;

    background:
        linear-gradient(145deg,
            rgba(0, 127, 192, 0.11),
            rgba(158, 203, 59, 0.12)) !important;

    border: 1px solid rgba(0, 127, 192, 0.12);
    border-radius: 50%;

    box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, 0.65);

    transform: none !important;
    transition: none !important;
}

.bi-benefit-point .icon-box-img img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain;

    filter: none !important;
    transform: none !important;
    transition: none !important;
}

/* Không đổi nền icon khi hover */
.bi-benefit-point:hover .icon-box-img,
.bi-benefit-point:hover .icon-box-img img {
    background:
        linear-gradient(145deg,
            rgba(0, 127, 192, 0.11),
            rgba(158, 203, 59, 0.12)) !important;

    filter: none !important;
    transform: none !important;
}

/* =========================
   NỘI DUNG ICON BOX
   ========================= */

.bi-benefit-point .icon-box-text {
    flex: 1 1 auto;

    width: auto !important;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}

.bi-benefit-point .icon-box-text h3 {
    margin: 0 0 7px !important;

    color: #007fc0;

    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.bi-benefit-point .icon-box-text p {
    margin: 0 !important;

    color: #53666f;

    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 400;
}

/* =========================
   CỘT BÊN TRÁI
   ========================= */

.bi-benefits-left .bi-benefit-point {
    flex-direction: row-reverse !important;

    text-align: right;
}

.bi-benefits-left .bi-benefit-point .icon-box-text,
.bi-benefits-left .bi-benefit-point .icon-box-text h3,
.bi-benefits-left .bi-benefit-point .icon-box-text p {
    text-align: right !important;
}

/* =========================
   CỘT BÊN PHẢI
   ========================= */

.bi-benefits-right .bi-benefit-point {
    flex-direction: row !important;

    text-align: left;
}

.bi-benefits-right .bi-benefit-point .icon-box-text,
.bi-benefits-right .bi-benefit-point .icon-box-text h3,
.bi-benefits-right .bi-benefit-point .icon-box-text p {
    text-align: left !important;
}

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

.bi-benefit-point:hover {
    border-color: rgba(158, 203, 59, 0.48);

    box-shadow:
        0 18px 38px rgba(0, 92, 132, 0.13);

    transform: translateY(-5px);
}

/* =========================
   HÌNH LAPTOP VÀ ĐIỆN THOẠI
   ========================= */

.bi-benefits-center {
    position: relative;
}

.bi-benefits-center>.col-inner {
    position: relative;

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

    min-height: 540px;
    padding: 28px;

    background:
        radial-gradient(circle at center,
            rgba(0, 127, 192, 0.12),
            rgba(158, 203, 59, 0.06) 42%,
            transparent 70%);

    border-radius: 40px;
}

/* Vòng sáng phía sau thiết bị */
.bi-benefits-center>.col-inner::before,
.bi-benefits-center>.col-inner::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    border: 1px solid rgba(0, 127, 192, 0.12);
    border-radius: 50%;

    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bi-benefits-center>.col-inner::before {
    width: 410px;
    height: 410px;
}

.bi-benefits-center>.col-inner::after {
    width: 500px;
    height: 500px;

    border-color: rgba(158, 203, 59, 0.13);
}

.bi-benefit-device {
    position: relative;
    z-index: 2;

    width: 100%;
}

.bi-benefit-device img {
    display: block;

    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    filter: drop-shadow(0 24px 35px rgba(0, 76, 112, 0.17));

    transition: transform 0.35s ease;
}

.bi-benefit-device:hover img {
    transform: translateY(-5px);
}

/* =========================================================
   TABLET VÀ MOBILE
   ========================================================= */

@media screen and (max-width: 849px) {

    /* Ẩn đường nối vì các cột đã xuống hàng */
    .bi-benefits-map::before {
        display: none;
    }

    /* Đưa hình thiết bị lên trước */
    .bi-benefits-center {
        order: -1;
    }

    .bi-benefits-center>.col-inner {
        min-height: auto;
        margin-bottom: 30px;
        padding: 20px;
    }

    .bi-benefits-center>.col-inner::before {
        width: 330px;
        height: 330px;
    }

    .bi-benefits-center>.col-inner::after {
        width: 400px;
        height: 400px;
    }

    .bi-benefits-side>.col-inner {
        gap: 16px;
    }

    /* Mobile và tablet đều căn trái */
    .bi-benefits-left .bi-benefit-point,
    .bi-benefits-right .bi-benefit-point {
        flex-direction: row !important;
        text-align: left;
    }

    .bi-benefits-left .bi-benefit-point::before,
    .bi-benefits-right .bi-benefit-point::before {
        right: auto;
        left: 0;
    }

    .bi-benefits-left .bi-benefit-point .icon-box-text,
    .bi-benefits-left .bi-benefit-point .icon-box-text h3,
    .bi-benefits-left .bi-benefit-point .icon-box-text p {
        text-align: left !important;
    }
}

@media screen and (max-width: 549px) {

    .bi-benefit-point.icon-box {
        min-height: auto;
        padding: 15px;
        border-radius: 15px;
    }

    .bi-benefit-point .icon-box-img {
        flex-basis: 60px !important;

        width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;

        padding: 11px !important;
    }

    .bi-benefit-point .icon-box-text h3 {
        font-size: 17px;
    }

    .bi-benefit-point .icon-box-text p {
        font-size: 14px;
        line-height: 1.6;
    }

    .bi-benefits-center>.col-inner::before,
    .bi-benefits-center>.col-inner::after {
        display: none;
    }
}

/* Tiêu đề căn trái */
.bi-benefits-section .bi-benefit-point .icon-box-text h3 {
    text-align: left !important;
}

/* Nội dung căn đều hai bên */
.bi-benefits-section .bi-benefit-point .icon-box-text p {
    text-align: justify !important;
    text-align-last: left;
}

/* =====================================================
   TẮT HOÀN TOÀN HOVER ĐỔI MÀU ICON Ở SECTION LỢI ÍCH
   ===================================================== */

.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img,
.bi-benefits-section
.bi-benefit-point
.icon-box-img:hover {
    background:
        linear-gradient(
            145deg,
            rgba(0, 127, 192, 0.11),
            rgba(158, 203, 59, 0.12)
        ) !important;

    background-color: transparent !important;
    border-color: rgba(0, 127, 192, 0.12) !important;

    box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, 0.65) !important;

    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Khóa các lớp icon bên trong của Flatsome */
.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img .icon,

.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img .icon-inner,

.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img a,

.bi-benefits-section
.bi-benefit-point
.icon-box-img:hover .icon,

.bi-benefits-section
.bi-benefit-point
.icon-box-img:hover .icon-inner,

.bi-benefits-section
.bi-benefit-point
.icon-box-img:hover a {
    color: inherit !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Icon dạng ảnh PNG hoặc WebP */
.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img img,

.bi-benefits-section
.bi-benefit-point
.icon-box-img:hover img {
    opacity: 1 !important;
    visibility: visible !important;

    filter: none !important;
    mix-blend-mode: normal !important;

    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Icon dạng SVG */
.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img svg,

.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img svg *,

.bi-benefits-section
.bi-benefit-point
.icon-box-img:hover svg,

.bi-benefits-section
.bi-benefit-point
.icon-box-img:hover svg * {
    color: inherit !important;

    background: transparent !important;
    box-shadow: none !important;

    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Xóa lớp nền ảo nếu Flatsome tạo khi hover */
.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img::before,

.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img::after,

.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img .icon-inner::before,

.bi-benefits-section
.bi-benefit-point:hover
.icon-box-img .icon-inner::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   BRANDINFO - QUY TRÌNH THIẾT KẾ WEBSITE 6 BƯỚC
   Section class: bi-process-section
   Row class: bi-process-row
   ========================================================= */

.bi-process-section {
    --process-blue: #007fc0;
    --process-green: #9ecb3b;
    --process-dark: #16223e;
    --process-text: #5c6975;
    --process-line: rgba(0, 127, 192, 0.28);

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 8% 25%,
            rgba(0, 127, 192, 0.07),
            transparent 28%),
        radial-gradient(circle at 92% 70%,
            rgba(158, 203, 59, 0.10),
            transparent 28%),
        #f8faf7;
}

/* =========================================================
   ROW 6 BƯỚC
   ========================================================= */

.bi-process-row {
    position: relative;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100%;
    max-width: 1440px !important;

    margin: 0 auto !important;
}

/* Đường ngang nối 6 bước */
.bi-process-row::before {
    content: "";

    position: absolute;
    top: 31px;
    right: 7%;
    left: 7%;
    z-index: 0;

    height: 2px;

    background: linear-gradient(90deg,
            rgba(0, 127, 192, 0.30),
            rgba(158, 203, 59, 0.45));

    pointer-events: none;
}

/* Đồng bộ các Column */
.bi-process-row>.col {
    position: relative;
    z-index: 1;

    display: flex !important;
    align-items: stretch !important;

    width: 16.666667% !important;
    max-width: 16.666667% !important;
    flex: 0 0 16.666667% !important;

    padding-bottom: 20px;
}

.bi-process-row>.col>.col-inner {
    display: flex !important;

    width: 100%;
    height: 100%;
}

/* Text element */
.bi-process-row .text {
    width: 100%;
    height: 100%;
}

/* =========================================================
   TỪNG BƯỚC
   ========================================================= */

.bi-process-item {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    text-align: center;
}

/* Số thứ tự */
.bi-process-number {
    position: relative;
    z-index: 3;

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

    width: 62px;
    height: 62px;

    margin: 0 auto 24px;

    color: var(--process-blue);
    background: #ffffff;

    border: 2px solid rgba(0, 127, 192, 0.32);
    border-radius: 50%;

    box-shadow:
        0 7px 18px rgba(0, 93, 138, 0.09);

    font-size: 18px;
    line-height: 1;
    font-weight: 700;

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

/* Đường dọc từ số xuống card */
.bi-process-number::after {
    content: "";

    position: absolute;
    top: 60px;
    left: 50%;

    width: 2px;
    height: 26px;

    background: var(--process-line);

    transform: translateX(-50%);
}

/* =========================================================
   CARD NỘI DUNG
   ========================================================= */

.bi-process-card {
    position: relative;

    display: flex;
    flex: 1;
    flex-direction: column;

    width: 100%;
    min-height: 260px;

    padding: 34px 18px 24px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(0, 127, 192, 0.13);
    border-radius: 17px;

    box-shadow:
        0 10px 26px rgba(20, 57, 81, 0.07);

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

/* Thanh trang trí trên card */
.bi-process-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 48px;
    height: 4px;

    background: linear-gradient(90deg,
            var(--process-blue),
            var(--process-green));

    border-radius: 0 0 8px 8px;

    transform: translateX(-50%);
    transition: width 0.3s ease;
}

/* Tiêu đề */
.bi-process-card h3 {
    margin: 0 0 16px !important;

    color: var(--process-dark);

    font-size: 17px;
    line-height: 1.45;
    font-weight: 700;

    text-align: center;
}

/* Mô tả */
.bi-process-card p {
    margin: 0 !important;

    color: var(--process-text);

    font-size: 14.5px;
    line-height: 1.75;
    font-weight: 400;

    text-align: justify;
    text-align-last: center;
}

/* =========================================================
   HOVER
   ========================================================= */

.bi-process-item:hover .bi-process-number {
    color: #ffffff;

    background: var(--process-blue);
    border-color: var(--process-blue);

    transform: translateY(-4px);
}

.bi-process-item:hover .bi-process-card {
    border-color: rgba(158, 203, 59, 0.55);

    box-shadow:
        0 18px 38px rgba(20, 72, 99, 0.12);

    transform: translateY(-5px);
}

.bi-process-item:hover .bi-process-card::before {
    width: 90px;
}

/* Xen kẽ màu xanh lá */
.bi-process-row>.col:nth-child(even) .bi-process-number {
    color: #6e9f10;
    border-color: rgba(158, 203, 59, 0.50);
}

.bi-process-row>.col:nth-child(even) .bi-process-item:hover .bi-process-number {
    color: #ffffff;
    background: var(--process-green);
    border-color: var(--process-green);
}

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

@media screen and (max-width: 1100px) {
    .bi-process-row {
        flex-wrap: wrap !important;
    }

    .bi-process-row::before {
        display: none;
    }

    .bi-process-row>.col {
        width: 33.333333% !important;
        max-width: 33.333333% !important;
        flex-basis: 33.333333% !important;
    }

    .bi-process-card {
        min-height: 230px;
    }
}

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

@media screen and (max-width: 549px) {
    .bi-process-row>.col {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;

        padding-bottom: 18px;
    }

    .bi-process-number {
        width: 56px;
        height: 56px;

        margin-bottom: 20px;

        font-size: 17px;
    }

    .bi-process-number::after {
        top: 54px;
        height: 22px;
    }

    .bi-process-card {
        min-height: auto;
        padding: 30px 20px 23px;

        border-radius: 15px;
    }

    .bi-process-card h3 {
        font-size: 17px;
    }

    .bi-process-card p {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* =========================================================
   BRANDINFO - TRANG ĐIỀU HƯỚNG VỀ CHÚNG TÔI

   Section: brandinfo-about-gateway
   Row: brandinfo-about-gateway-row
   Column: brandinfo-about-gateway-col

   Icon Box: brandinfo-about-gateway-icon
   Image: brandinfo-about-gateway-image
   Text: brandinfo-about-gateway-text
   Button: brandinfo-about-gateway-btn
   ========================================================= */

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

.brandinfo-about-gateway {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(0, 127, 192, 0.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(158, 203, 59, 0.09),
            transparent 24%
        ),
        #ffffff;
}

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

.brandinfo-about-gateway-row {
    position: relative;
    z-index: 2;

    align-items: stretch !important;

    max-width: 1250px !important;
    margin: 55px auto 0 !important;
}

/* =========================================================
   COLUMN
   ========================================================= */

.brandinfo-about-gateway-row > .col {
    display: flex !important;
    align-items: stretch !important;

    padding-bottom: 25px;
}

.brandinfo-about-gateway-row > .col > .col-inner {
    display: flex !important;

    width: 100%;
    height: 100%;

    padding: 0 !important;
}

/* =========================================================
   TOÀN BỘ ICON BOX CHÍNH LÀ CARD
   ========================================================= */

.brandinfo-about-gateway-icon {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 500px;

    margin: 0 !important;
    padding: 65px 25px 28px !important;

    overflow: visible !important;
    text-align: center;

    background: rgba(255, 255, 255, 0.97);

    border: 1px solid rgba(0, 127, 192, 0.11);
    border-radius: 22px;

    box-shadow:
        0 12px 30px rgba(15, 61, 91, 0.09),
        0 3px 8px rgba(15, 61, 91, 0.04);

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

.brandinfo-about-gateway-icon:hover {
    border-color: rgba(158, 203, 59, 0.38);

    box-shadow:
        0 20px 42px rgba(15, 61, 91, 0.14),
        0 4px 10px rgba(15, 61, 91, 0.05);

    transform: translateY(-6px);
}

/* =========================================================
   ICON TRÒN NẰM NỔI TRÊN CARD
   ========================================================= */

.brandinfo-about-gateway-icon > .icon-box-img {
    position: absolute !important;
    top: -39px !important;
    left: 50% !important;
    z-index: 5;

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

    width: 78px !important;
    height: 78px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;

    box-shadow:
        0 9px 22px rgba(0, 91, 150, 0.16) !important;

    transform: translateX(-50%) !important;
}

/* Giữ nguyên màu sắc và chi tiết của ảnh icon */
.brandinfo-about-gateway-icon > .icon-box-img img {
    display: block !important;

    width: 78px !important;
    height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;

    margin: 0 !important;

    object-fit: contain !important;

    opacity: 1 !important;
    filter: none !important;

    background: transparent !important;

    box-shadow: none !important;
    transform: none !important;
}

/* Không đổi màu icon khi hover */
.brandinfo-about-gateway-icon:hover > .icon-box-img,
.brandinfo-about-gateway-icon:hover > .icon-box-img img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
}

.brandinfo-about-gateway-icon:hover > .icon-box-img img {
    transform: none !important;
}

/* =========================================================
   KHỐI CHỨA IMAGE, TEXT VÀ BUTTON
   ========================================================= */

.brandinfo-about-gateway-icon > .icon-box-text {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   ẢNH MINH HỌA
   ========================================================= */

.brandinfo-about-gateway-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 245px !important;

    margin: 0 0 20px !important;
}

.brandinfo-about-gateway-image .img-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    background: transparent !important;
}

.brandinfo-about-gateway-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: 310px !important;
    max-height: 245px !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    background: transparent !important;
}

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

.brandinfo-about-gateway-text {
    width: 100% !important;
    min-height: 112px;

    margin: 0 0 20px !important;
    padding: 0 !important;

    text-align: center !important;
}

.brandinfo-about-gateway-text h3,
.brandinfo-about-gateway-text h4,
.brandinfo-about-gateway-text h5 {
    margin: 0 0 10px !important;

    color: #007fc0;

    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;

    text-align: center !important;
}

.brandinfo-about-gateway-text p {
    margin: 0 !important;

    color: #5f6d78;

    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;

    text-align: center !important;
}

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

.brandinfo-about-gateway-btn {
    margin: auto auto 0 !important;
    text-align: center !important;
}

.brandinfo-about-gateway-btn.button,
.brandinfo-about-gateway-btn .button {
    min-width: 145px;

    margin: 0 !important;
    padding: 10px 22px !important;

    color: #007fc0 !important;
    background: transparent !important;

    border: 2px solid #007fc0 !important;
    border-radius: 10px !important;

    box-shadow: none !important;

    font-size: 15px;
    line-height: 1.4 !important;
    font-weight: 700;
    text-transform: none !important;
}

.brandinfo-about-gateway-btn.button:hover,
.brandinfo-about-gateway-btn .button:hover {
    color: #ffffff !important;
    background: #007fc0 !important;
}

/* Nút card thứ hai màu xanh lá */
.brandinfo-about-gateway-row
> .col:nth-child(2)
.brandinfo-about-gateway-btn.button,

.brandinfo-about-gateway-row
> .col:nth-child(2)
.brandinfo-about-gateway-btn .button {
    color: #75b928 !important;
    border-color: #75b928 !important;
}

.brandinfo-about-gateway-row
> .col:nth-child(2)
.brandinfo-about-gateway-btn.button:hover,

.brandinfo-about-gateway-row
> .col:nth-child(2)
.brandinfo-about-gateway-btn .button:hover {
    color: #ffffff !important;
    background: #75b928 !important;
}

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

@media screen and (max-width: 849px) {
    .brandinfo-about-gateway-row {
        margin-top: 45px !important;
    }

    .brandinfo-about-gateway-icon {
        min-height: 470px;
        padding: 60px 20px 24px !important;
    }

    .brandinfo-about-gateway-image {
        height: 220px !important;
    }

    .brandinfo-about-gateway-image img {
        max-height: 220px !important;
    }
}

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

@media screen and (max-width: 549px) {
    .brandinfo-about-gateway-row {
        margin-top: 35px !important;
    }

    .brandinfo-about-gateway-row > .col {
        padding-bottom: 55px;
    }

    .brandinfo-about-gateway-icon {
        min-height: auto;
        padding: 55px 18px 24px !important;

        border-radius: 18px;
    }

    .brandinfo-about-gateway-icon > .icon-box-img {
        top: -34px !important;

        width: 68px !important;
        height: 68px !important;
    }

    .brandinfo-about-gateway-icon > .icon-box-img img {
        width: 68px !important;
        height: 68px !important;
        max-width: 68px !important;
        max-height: 68px !important;
    }

    .brandinfo-about-gateway-image {
        height: 205px !important;
    }

    .brandinfo-about-gateway-image img {
        max-height: 205px !important;
    }

    .brandinfo-about-gateway-text {
        min-height: auto;
    }
}

/* ==============================
   SECTION MẪU WEBSITE
============================== */
.web-mau-section {
    padding: 30px 20px 35px !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.3) 35%, transparent 65%),
        linear-gradient(100deg, #8fc5fb 0%, #dcecf9 45%, #edf3de 75%, #bde8ce 100%);
    overflow: hidden;
}

.web-mau-section > .section-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* ==============================
   TIÊU ĐỀ
============================== */
.web-mau-title {
    text-align: center;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    color: #152546;
    margin: 0 0 28px !important;
}

.web-mau-title .green {
    color: #8cc63f;
}

.web-mau-title .blue {
    color: #0a84c6;
}

/* ==============================
   ROW DANH SÁCH
============================== */
.web-mau-list {
    margin-bottom: 18px !important;
}

.web-mau-list > .col {
    padding: 0 12px 18px !important;
}

/* ==============================
   CARD
============================== */
.web-mau-item > .col-inner {
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
    padding-bottom: 18px;
    transition: all .25s ease;
}

.web-mau-item > .col-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

/* ==============================
   IMAGE BOX BÊN TRONG
============================== */
.web-mau-item .box {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent !important;
}

.web-mau-item .box-image {
    background: rgba(235,241,245,.8);
    overflow: hidden;
    margin: 0 !important;
}

/* nếu ảnh đang là image-cover */
.web-mau-item .box-image .image-cover {
    padding-top: 56% !important;
}

/* nếu là img thường */
.web-mau-item .box-image img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: contain;
    padding: 18px;
    transition: transform .25s ease;
}

.web-mau-item:hover .box-image img {
    transform: scale(1.02);
}

/* ==============================
   PHẦN TEXT
============================== */
.web-mau-item .box-text {
    text-align: center;
    padding: 14px 16px 0 !important;
}

.web-mau-item .box-text h3,
.web-mau-item .box-text h4,
.web-mau-item .box-text p:first-child {
    margin: 0 0 14px;
    color: #2a2a2a;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 500;
}

/* ==============================
   BUTTON
============================== */
.web-mau-item .button,
.web-mau-item .button.primary,
.web-mau-item .button.is-outline {
    margin: 0 !important;
    padding: 7px 16px !important;
    min-height: auto;
    border-radius: 999px !important;
    border: 1px solid rgba(120,120,120,.35) !important;
    background: rgba(255,255,255,.92) !important;
    color: #444 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: all .25s ease;
}

.web-mau-item .button:hover,
.web-mau-item .button.primary:hover,
.web-mau-item .button.is-outline:hover {
    background: #fff !important;
    color: #0b84c8 !important;
    transform: translateY(-1px);
}

/* ==============================
   TABLET
============================== */
@media (max-width: 849px) {
    .web-mau-title {
        font-size: 32px;
    }

    .web-mau-item .box-image img {
        height: 220px;
    }

    .web-mau-item .box-text h3,
    .web-mau-item .box-text h4,
    .web-mau-item .box-text p:first-child {
        font-size: 18px;
    }
}

/* ==============================
   MOBILE
============================== */
@media (max-width: 549px) {
    .web-mau-section {
        padding: 24px 12px 28px !important;
    }

    .web-mau-title {
        font-size: 24px;
        margin-bottom: 20px !important;
    }

    .web-mau-list > .col {
        padding: 0 0 15px !important;
    }

    .web-mau-item .box-image img {
        height: 200px;
        padding: 14px;
    }

    .web-mau-item .box-text {
        padding: 12px 12px 0 !important;
    }

    .web-mau-item .box-text h3,
    .web-mau-item .box-text h4,
    .web-mau-item .box-text p:first-child {
        font-size: 16px;
    }
}
.web-mau-content {
    padding: 16px 20px 20px;
    text-align: center;
}

.web-mau-content h3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: #1b2b48;
}

.web-mau-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #555;
}

/* =========================================
   HOVER ẢNH - HIỆN XEM CHI TIẾT
========================================= */

/* Khung ảnh */
.web-mau-item .box-image {
    position: relative;
    overflow: hidden;
}

/* Ảnh */
.web-mau-item .box-image img {
    transition: transform .45s ease,
                filter .45s ease;
}

/* Lớp phủ tối */
.web-mau-item .box-image::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(10, 28, 45, 0.48);

    opacity: 0;
    transition: opacity .35s ease;

    z-index: 2;
    pointer-events: none;
}

/* Chữ XEM CHI TIẾT */
.web-mau-item .box-image::after {
    content: "Xem chi tiết";

    position: absolute;
    top: 50%;
    left: 50%;

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

    padding: 10px 22px;

    background: rgba(255,255,255,.95);
    border-radius: 50px;

    color: #172536;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    opacity: 0;

    z-index: 3;

    box-shadow: 0 5px 18px rgba(0,0,0,.18);

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .25s ease,
        color .25s ease;

    pointer-events: none;
}

/* Khi hover vào card */
.web-mau-item:hover .box-image::before {
    opacity: 1;
}

.web-mau-item:hover .box-image::after {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Zoom ảnh */
.web-mau-item:hover .box-image img {
    transform: scale(1.05);
}

.web-mau-item .box-image::after {
    border: 1px solid rgba(255,255,255,.7);
}

.web-mau-item:hover .box-image::after {
    background: #ffffff;
    color: #0786c9;
}
.feature-highlight-row {
    max-width: 1240px;
    margin: 0 auto;
    align-items: center !important;
    padding: 55px 0 65px;
}

.feature-highlight-row>.col:first-child {
    flex-basis: 40% !important;
    max-width: 40% !important;
}

.feature-highlight-row>.col:last-child {
    flex-basis: 60% !important;
    max-width: 60% !important;
}

/* Nội dung bên trái */
.feature-highlight-row>.col:first-child .col-inner {
    max-width: 450px;
    margin-top: -70px;
}

.feature-highlight-row h2 {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    color: rgb(0, 127, 193);
    margin-bottom: 16px;
}

.feature-highlight-row>.col:first-child p {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
}

/* Cột tính năng bên phải */
.feature-highlight-row>.col:last-child .col-inner {
    max-width: 650px;
    margin: 0 auto;
}

/* Ảnh */
.feature-highlight-row img {
    max-height: 370px;
    width: auto;
    object-fit: contain;
}

/* Tiêu đề từng tính năng */
.feature-highlight-row h3 {
    color: rgb(0, 127, 193);
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 8px;
}

/* Mobile */
@media(max-width:849px) {
    .feature-highlight-row {
        padding: 35px 15px;
    }

    .feature-highlight-row>.col:first-child,
    .feature-highlight-row>.col:last-child {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    .feature-highlight-row>.col:first-child .col-inner {
        margin-top: 0;
        max-width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }
}

/* ==============
Dự án nổi bật
=============== */
.bds-web-slider {
    overflow: hidden;
}

.bds-web-slider .flickity-viewport {
    overflow: visible !important;
    padding: 35px 0 45px;
}

.bds-web-slider .flickity-slider > * {
    width: 56% !important;
    margin: 0 10px;
    opacity: .35;
    transform: scale(.86);
    filter: brightness(.6);
    transition:
        transform .45s ease,
        opacity .45s ease,
        filter .45s ease;
    z-index: 1;
}

.bds-web-slider .flickity-slider > *.is-selected {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    z-index: 5;
}

.bds-web-slider img {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

/* Tablet */
@media (max-width: 849px) {
    .bds-web-slider .flickity-slider > * {
        width: 75% !important;
        transform: scale(.9);
    }

    .bds-web-slider .flickity-slider > *.is-selected {
        transform: scale(1);
    }
}

/* Mobile */
@media (max-width: 549px) {
    .bds-web-slider .flickity-slider > * {
        width: 88% !important;
        margin: 0 6px;
        opacity: .3;
        transform: scale(.92);
    }

    .bds-web-slider .flickity-slider > *.is-selected {
        opacity: 1;
        transform: scale(1);
    }

    .bds-web-slider img {
        border-radius: 12px;
    }
}

/* =========================================================
   BRANDINFO SECTION GRADIENT
   Class dùng cho Section: bi-bluegreen-glow
========================================================= */

.bi-bluegreen-glow {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            rgba(0, 127, 192, 0.20) 0%,
            rgba(0, 162, 205, 0.14) 30%,
            rgba(255, 255, 255, 0.92) 55%,
            rgba(158, 203, 59, 0.14) 78%,
            rgba(158, 203, 59, 0.22) 100%
        ) !important;
}


/* =========================================================
   LỚP ÁNH SÁNG XANH DƯƠNG - GÓC PHẢI TRÊN
========================================================= */

.bi-bluegreen-glow::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -160px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 127, 192, 0.24) 0%,
            rgba(0, 127, 192, 0.12) 38%,
            rgba(0, 127, 192, 0) 72%
        );

    pointer-events: none;
    z-index: 0;
}


/* =========================================================
   LỚP ÁNH SÁNG XANH LÁ - GÓC TRÁI DƯỚI
========================================================= */

.bi-bluegreen-glow::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -180px;

    width: 560px;
    height: 560px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(158, 203, 59, 0.22) 0%,
            rgba(158, 203, 59, 0.10) 38%,
            rgba(158, 203, 59, 0) 72%
        );

    pointer-events: none;
    z-index: 0;
}


/* =========================================================
   ĐƯA NỘI DUNG SECTION LÊN TRÊN GRADIENT
========================================================= */

.bi-bluegreen-glow > .section-content {
    position: relative;
    z-index: 1;
}


/* =========================================================
   COLUMN - KHÔNG GLOW, KHÔNG SHADOW BẮT BUỘC
========================================================= */

.bi-bluegreen-glow .col > .col-inner {
    position: relative;
    z-index: 1;

    box-shadow: none !important;
}


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

@media (max-width: 549px) {

    .bi-bluegreen-glow {
        background:
            linear-gradient(
                145deg,
                rgba(0, 127, 192, 0.18) 0%,
                rgba(255, 255, 255, 0.94) 55%,
                rgba(158, 203, 59, 0.16) 100%
            ) !important;
    }

    .bi-bluegreen-glow::before {
        width: 340px;
        height: 340px;
        top: -130px;
        right: -140px;
    }

    .bi-bluegreen-glow::after {
        width: 360px;
        height: 360px;
        bottom: -160px;
        left: -150px;
    }
}

/* =========================================================
   FORM TƯ VẤN BRANDINFO
   Xanh logo  : #007FC0
   Xanh lá    : #9ECB3B
   Navy       : #172536
========================================================= */

.form-tu-van-brandinfo{
    width:100%;
    padding:30px !important;

    background:
        linear-gradient(
            145deg,
            #007fc0 0%,
            #078ac9 55%,
            #1096ce 100%
        ) !important;

    border-radius:22px !important;

    box-shadow:
        0 14px 35px rgba(0,127,192,.16);
}


/* =========================================================
   KHOẢNG CÁCH FIELD
========================================================= */

.form-tu-van-brandinfo p{
    margin:0 0 14px !important;
}

.form-tu-van-brandinfo .wpcf7-form-control-wrap{
    display:block;
    width:100%;
    margin-bottom:14px;
}


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

.form-tu-van-brandinfo input[type="text"],
.form-tu-van-brandinfo input[type="email"],
.form-tu-van-brandinfo input[type="tel"],
.form-tu-van-brandinfo select,
.form-tu-van-brandinfo textarea{
    width:100% !important;

    margin:0 !important;
    padding:0 17px !important;

    background:#fff !important;

    border:1px solid rgba(255,255,255,.55) !important;
    border-radius:12px !important;

    box-shadow:
        0 4px 14px rgba(0,67,110,.06) !important;

    outline:none !important;

    color:#172536 !important;

    font-family:inherit !important;
    font-size:15px !important;
    font-weight:400 !important;

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


/* INPUT HEIGHT */

.form-tu-van-brandinfo input[type="text"],
.form-tu-van-brandinfo input[type="email"],
.form-tu-van-brandinfo input[type="tel"],
.form-tu-van-brandinfo select{
    height:52px !important;
    min-height:52px !important;
}


/* TEXTAREA */

.form-tu-van-brandinfo textarea{
    height:125px !important;
    min-height:125px !important;

    padding-top:15px !important;
    padding-bottom:15px !important;

    resize:vertical;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.form-tu-van-brandinfo input::placeholder,
.form-tu-van-brandinfo textarea::placeholder{
    color:#8795a5 !important;
    opacity:1;
}


/* =========================================================
   FOCUS - XANH LÁ LOGO
========================================================= */

.form-tu-van-brandinfo input[type="text"]:focus,
.form-tu-van-brandinfo input[type="email"]:focus,
.form-tu-van-brandinfo input[type="tel"]:focus,
.form-tu-van-brandinfo select:focus,
.form-tu-van-brandinfo textarea:focus{
    border-color:#9ecb3b !important;

    box-shadow:
        0 0 0 4px rgba(158,203,59,.18),
        0 6px 18px rgba(0,67,110,.08) !important;
}


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

.form-tu-van-brandinfo select{
    cursor:pointer;
    color:#172536 !important;
}


/* =========================================================
   NÚT
========================================================= */

.form-tu-van-brandinfo .text-center{
    position:relative;

    width:100%;

    margin-top:22px;

    text-align:center !important;
}


.form-tu-van-brandinfo input[type="submit"]{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    width:auto !important;
    min-width:200px !important;

    height:52px !important;

    margin:0 auto !important;
    padding:0 34px !important;

    background:#9ecb3b !important;

    border:0 !important;
    border-radius:999px !important;

    box-shadow:
        0 9px 22px rgba(20,79,34,.16) !important;

    color:#fff !important;

    font-family:inherit !important;
    font-size:16px !important;
    font-weight:700 !important;

    line-height:1 !important;

    text-transform:none !important;
    letter-spacing:0 !important;

    cursor:pointer;

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


/* HOVER BUTTON */

.form-tu-van-brandinfo input[type="submit"]:hover{
    background:#8fbd2f !important;

    transform:translateY(-2px);

    box-shadow:
        0 13px 28px rgba(20,79,34,.22) !important;
}


/* =========================================================
   SPINNER
========================================================= */

.form-tu-van-brandinfo .wpcf7-spinner{
    position:absolute !important;

    top:50%;
    left:calc(50% + 115px);

    margin:0 !important;

    transform:translateY(-50%);
}


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

.form-tu-van-brandinfo .wpcf7-not-valid{
    border-color:#ff7f7f !important;
}

.form-tu-van-brandinfo .wpcf7-not-valid-tip{
    margin-top:6px;

    color:#fff !important;

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


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

@media(max-width:549px){

    .form-tu-van-brandinfo{
        padding:22px 18px !important;

        border-radius:18px !important;
    }

    .form-tu-van-brandinfo input[type="text"],
    .form-tu-van-brandinfo input[type="email"],
    .form-tu-van-brandinfo input[type="tel"],
    .form-tu-van-brandinfo select{
        height:50px !important;
        min-height:50px !important;
    }

    .form-tu-van-brandinfo textarea{
        height:115px !important;
        min-height:115px !important;
    }

    .form-tu-van-brandinfo input[type="submit"]{
        width:100% !important;
        min-width:0 !important;

        height:50px !important;
    }

    .form-tu-van-brandinfo .wpcf7-spinner{
        left:auto;
        right:14px;
    }

}


/* =========================================================
   BUTTON BRANDINFO
   Blue  : #007FC0
   Green : #9ECC3B
   Orange: #FCB13D
========================================================= */


/* =========================================================
   BUTTON XANH DƯƠNG
   Class: bi-btn-blue
========================================================= */

.bi-btn-blue{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:54px !important;
    padding:0 32px !important;

    background:#007fc0 !important;
    background-image:none !important;

    border:0 !important;
    border-radius:13px !important;

    box-shadow:0 8px 20px rgba(0,127,192,.16) !important;

    color:#fff !important;

    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    text-transform:none !important;
    letter-spacing:0 !important;
    text-decoration:none !important;

    cursor:pointer;

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* Bỏ icon / mũi tên nếu có */

.bi-btn-blue i,
.bi-btn-blue svg,
.bi-btn-blue::before,
.bi-btn-blue::after{
    display:none !important;
}


/* Hover */

.bi-btn-blue:hover,
.bi-btn-blue:focus{
    background:#fcb13d !important;
    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:0 12px 26px rgba(252,177,61,.28) !important;
}


/* =========================================================
   BUTTON XANH LÁ
   Class: bi-btn-green
========================================================= */

.bi-btn-green{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:54px !important;
    padding:0 32px !important;

    background:#9ecc3b !important;
    background-image:none !important;

    border:0 !important;
    border-radius:13px !important;

    box-shadow:0 8px 20px rgba(158,204,59,.18) !important;

    color:#fff !important;

    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    text-transform:none !important;
    letter-spacing:0 !important;
    text-decoration:none !important;

    cursor:pointer;

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* Bỏ icon / mũi tên nếu có */

.bi-btn-green i,
.bi-btn-green svg,
.bi-btn-green::before,
.bi-btn-green::after{
    display:none !important;
}


/* Hover */

.bi-btn-green:hover,
.bi-btn-green:focus{
    background:#fcb13d !important;
    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:0 12px 26px rgba(252,177,61,.28) !important;
}


/* =========================================================
   TRẠNG THÁI CLICK
========================================================= */

.bi-btn-blue:active,
.bi-btn-green:active{
    transform:translateY(0);
}


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

@media(max-width:549px){

    .bi-btn-blue,
    .bi-btn-green{
        min-height:50px !important;
        padding:0 26px !important;

        border-radius:12px !important;

        font-size:15px !important;
    }

}


/* =========================================================
   CF7 - ÁP DỤNG BUTTON BRANDINFO XANH LÁ
========================================================= */

.form-tu-van-brandinfo input[type="submit"].bi-btn-green{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:200px !important;
    min-height:54px !important;
    height:54px !important;

    margin:0 auto !important;
    padding:0 32px !important;

    background:#9ecc3b !important;
    background-image:none !important;

    border:0 !important;
    border-radius:13px !important;

    box-shadow:0 8px 20px rgba(158,204,59,.18) !important;

    color:#fff !important;

    font-family:inherit !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    text-transform:none !important;
    letter-spacing:0 !important;
    text-decoration:none !important;

    cursor:pointer !important;

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* HOVER -> CAM THƯƠNG HIỆU */

.form-tu-van-brandinfo input[type="submit"].bi-btn-green:hover,
.form-tu-van-brandinfo input[type="submit"].bi-btn-green:focus{
    background:#fcb13d !important;
    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:0 12px 26px rgba(252,177,61,.28) !important;
}


/* CLICK */

.form-tu-van-brandinfo input[type="submit"].bi-btn-green:active{
    transform:translateY(0);
}


/* MOBILE */

@media(max-width:549px){

    .form-tu-van-brandinfo input[type="submit"].bi-btn-green{
        width:100% !important;
        min-width:0 !important;
        min-height:50px !important;
        height:50px !important;

        padding:0 26px !important;

        border-radius:12px !important;

        font-size:15px !important;
    }

}