.section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* Bảng màu trắng — xanh dương — đen, không dùng tông tím */
    background: linear-gradient(90deg, #0F172A, #0d47a1 45%, #4DB2E5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* đây là phần style của phần card game */
/* NGUYÊN TẮC: ảnh game phải RÕ. Không phủ kính, không backdrop-filter, không
   làm mờ gì lên ảnh — đó là thứ đáng nhìn nhất của thẻ.
   Chữ trắng đọc được nhờ MỘT DẢI TỐI MỎNG ở đáy thẻ (đúng chỗ đặt tên game và
   icon nền tảng) cộng text-shadow, chứ không phải nhờ bôi mờ cả tấm ảnh. */
.game-card {
    position: relative;
    /* Tỉ lệ thay cho chiều cao cố định: thẻ luôn cùng dáng ở mọi bề ngang cột,
       không bị dẹt ở màn rộng hay cao lêu nghêu ở màn hẹp. */
    aspect-ratio: 62 / 43;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(13,71,161,0.45);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .game-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 56px -20px rgba(13,71,161,0.55);
    }

    /* Dải tối CHỈ ở đáy. Phần ảnh phía trên không bị đụng tới. */
    .game-card .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(6,18,38,0.72) 0%, rgba(6,18,38,0.34) 22%, rgba(6,18,38,0) 46%);
    }

/* Link phủ kín thẻ: bấm chỗ nào trên thẻ cũng mở trang chi tiết game.
   KHÔNG bọc cả thẻ trong <a> như bản cũ — bên trong thẻ còn hai <a> nút tròn,
   mà <a> lồng <a> là HTML sai: trình duyệt tự đóng thẻ ngoài rồi DỰNG LẠI một
   <a> mới bọc lấy icon + tên + nền tảng. Hậu quả là .card-content chỉ còn đúng
   một flex item nên margin-top:auto vô tác dụng, và vùng bấm cũng sai lệch. */
.game-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-content {
    position: absolute;
    /* inset thay cho height:100%: chiều cao thẻ đến từ aspect-ratio, phần trăm
       chiều cao dựa vào đó là không chắc ăn giữa các trình duyệt. */
    inset: 0;
    z-index: 2;
    padding: 20px;
    color: #fff;
    /* Cột dọc để icon bám mép trên, còn tên game + nền tảng bị đẩy xuống đáy
       (nhờ margin-top:auto ở .game-title) giống bố cục ảnh mẫu. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Chỉ là lớp hiển thị, không chắn chuột — để link phủ bên dưới vẫn bấm được. */
    pointer-events: none;
}

.game-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    border: 3px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    object-fit: cover;
    /* Nền trắng đặc: icon game thường là PNG có nền trong suốt, để nền tối
       xuyên qua thì icon trông bẩn. */
    background-color: #fff;
}

.game-title {
    margin-top: auto; /* đẩy xuống đáy thẻ */
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 1.35rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

.platforms {
    display: flex;
    gap: 8px;
}

    .platforms img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    }

/* Hai nút tròn (.play-btn "chơi ngay" và .view-btn "xem chi tiết") đã bỏ khỏi
   card game: cả thẻ giờ là một link tới trang chi tiết nên hai nút thành thừa.
   Toàn bộ style của chúng đã xoá theo, đừng đi tìm ở đâu khác. */

/*style của animation panner hiệu ứng chạy viền*/
@keyframes wave1 {
    0% {
        transform: translateX(0);
    }

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

@keyframes wave2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-25%);
    }
}

/* ===== WEBVIP BOX ===== */
.webvip-box {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(13,71,161,0.13);
    overflow: hidden;
    font-family: 'Roboto', Arial, sans-serif;
    color: #1e293b;
}

@media (max-width: 768px) {
    .webvip-box { border-radius: 14px; }
}

/* @keyframes rainbowBorder đã xoá: nút "Tất cả sản phẩm" là chỗ duy nhất dùng nó,
   mà nút đó nay dùng nền gradient xanh phẳng, không còn viền cầu vồng chạy. */

/* ===== HAI CỘT ẢNH CUỘN (KHỐI "VỀ CHÚNG TÔI") =====
   Chạy hoàn toàn bằng CSS, không có JS nào tham gia.

   Danh sách ảnh được render ĐÚNG HAI LẦN từ code-behind (xem Load_Post trong
   Default.aspx.cs). Đó là điều kiện để keyframe translateY(-50%) dịch vừa đúng
   một bộ ảnh: khi bộ thứ nhất trôi hết thì bộ thứ hai đã nằm sẵn ở đúng vị trí
   xuất phát, nên vòng lặp không nhảy khựng. Đổi số lần lặp thì phải đổi cả -50%. */
.img-scroll {
    position: relative;
    /* Cao đúng bằng cột nội dung bên cạnh (660px) để hai cột ảnh cao ngang khối chữ. */
    height: 630px;
    overflow: hidden;
    /*box-shadow: 0 10px 25px rgba(0,0,0,.25);*/
}

    /* Trước đây cột thứ hai tụt xuống 90px cho hai dải so le. Bỏ đi để HAI CỘT ẢNH
       BẰNG NHAU: cùng thẳng hàng mép trên, cùng cao 500px (đi kèm việc bỏ margin-top
       -90px ở .auto-scroll--down bên dưới). */
    .img-scroll--offset {
        margin-top: 0;
    }

.auto-scroll {
    position: absolute;
    width: 100%;
    will-change: transform;
}

/* GIỮ CHỖ CHO ẢNH — đây là thứ quyết định tốc độ cuộn có ổn định hay không.
   translateY(-50%) quy chiếu theo chiều cao của chính track, mà chiều cao track
   là tổng chiều cao các ảnh. Ảnh không có width/height và .r-img-box không có
   CSS nào trên trang công khai, nên trước khi ảnh tải xong track gần như cao 0:
   animation đã chạy trong lúc track còn phình dần, đích -50% dời theo, thành ra
   mỗi lượt truy cập cuộn một tốc độ khác nhau (cache nóng thì nhanh và đều,
   cache nguội thì ì rồi giật).
   aspect-ratio làm chiều cao xác định ngay từ lúc áp CSS, trước cả ảnh đầu tiên.
   1147/893 là kích thước thật của toàn bộ ảnh đang dùng nên contain không cắt mà
   cũng không chừa viền; ảnh sau này khác tỉ lệ sẽ được thu vừa khung, không bị cắt. */
.img-scroll .r-img-box img {
    aspect-ratio: 1147 / 893;
    object-fit: contain;
}

.auto-scroll--down {
    /* Không còn -90px: phần bù cho cột so le đã bỏ (xem .img-scroll--offset). Hai dải
       vẫn phủ kín khung nhờ ảnh được nhân đôi trong track. */
    animation: scrollDown 20s linear infinite;
}

.auto-scroll--up {
    animation: scrollUp 20s linear infinite;
}

/* Dải ảnh chạy vô tận là loại chuyển động dễ gây khó chịu nhất — dừng hẳn khi
   người dùng đã khai báo muốn giảm chuyển động. */
@media (prefers-reduced-motion: reduce) {
    .auto-scroll--down,
    .auto-scroll--up {
        animation: none;
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }

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

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

    100% {
        transform: translateY(-50%);
    }
}

/* ===== NỀN CONTAINER "CÁC DỊCH VỤ CỦA CHÚNG TÔI" =====
   Cùng cách làm với .custom-header-content và .intro-bg-content: ảnh tmt_test5.png
   gốc 1920x936 (tỉ lệ 0.4875), luôn hiện TRỌN ảnh, không cắt cạnh nào ở mọi bề
   ngang màn hình.
   Lưu ý: đây là nền của CẢ container (tiêu đề h2 + đế .bg-service), không phải nền
   của riêng đế .bg-service — đế đó vẫn giữ gradient sáng riêng của nó. */
.service-bg-content {
    position: relative;
    z-index: 1;
    /* Nội dung cách mép trên/dưới của nền đúng 10px. Nền (::before) cao 100% theo
       khối này, nên chiều cao khối = nội dung + 10px trên + 10px dưới → nền tự thu
       lại vừa khít nội dung, không còn khoảng trống thừa. */
    padding-top: 40px;
    padding-bottom: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* BACKGROUND FULL WIDTH nhưng gắn theo container dịch vụ */
    .service-bg-content::before {
        content: "";
        max-width: 1905px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        /* Nối màu cho phần nền nếu ảnh không phủ hết. */
        background-color: #eef1fa;
        background-image: url('/Content/Images/tmt_test6.png');
        /* cover: ảnh luôn phủ KÍN khung dù nội dung ngắn hay dài — khi nội dung dài
           hơn ảnh gốc, nền vẫn trùm trọn nội dung, không bị tràn ra ngoài.
           center top: khi nội dung ngắn phải cắt bớt ảnh, luôn cắt từ MÉP DƯỚI lên,
           giữ nguyên phần trên của ảnh cho hiển thị đầy đủ. */
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        z-index: -1;
    }

/*style background dịch vụ*/
.bg-service {
    position: relative;
    background: linear-gradient( 120deg, #233057, #4DB2E5, #2F3A5F );
    background-size: 400% 400%;
    animation: gradientMove 8s ease-in-out infinite;
    padding: 20px 20px;
    border-radius: 25px;
    overflow: hidden;
}

    /* Glow nhẹ tăng độ nổi */
    .bg-service::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 30% 30%, rgba(77,178,229,0.25), transparent 60% );
        z-index: 0;
    }

    /* Overlay giữ độ dịu */
    .bg-service::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(35, 48, 87, 0.55);
        z-index: 0;
    }

    .bg-service > * {
        position: relative;
        z-index: 1;
    }

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* phần này style của container banner*/
/* Ảnh nền banner là tmt_test3.png, kích thước gốc 1920x936 (tỉ lệ 0.4875).
   Yêu cầu: LUÔN thấy trọn ảnh, không cắt cạnh nào, ở mọi bề ngang màn hình.
   => bề ngang ảnh khoá đúng bằng bề ngang khối nền (background-size: 100% auto),
      chiều cao ảnh tự suy ra theo tỉ lệ, và khối nền phải cao ít nhất bằng đó.
   Biến --banner-bg-ratio để hai chỗ (min-height của khối cha và tính toán ở đây)
   không lệch nhau khi đổi ảnh. */
.custom-header-content {
    --banner-bg-ratio: 0.4875; /* 936 / 1920 */
    position: relative;
    z-index: 1;
    /* Căn khối chữ vào ĐÚNG giữa ảnh nền theo chiều dọc.
       padding trên/dưới PHẢI bằng 0: min-height tính theo border-box, nên padding
       lệch nhau bao nhiêu thì tâm nội dung lệch khỏi tâm ảnh bấy nhiêu.
       Bỏ padding không làm mục kế tiếp nhích lên: chiều cao khối vẫn do min-height
       quyết định (nội dung + padding luôn thấp hơn min-height ở khổ desktop). */
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    /* Khối ::before định vị absolute nên KHÔNG tự đẩy cao khối cha. Nếu ảnh cao hơn
       nội dung (màn hình rộng, nội dung ngắn) mà không có min-height thì phần dưới
       ảnh sẽ tràn đè lên mục kế tiếp. min() để khớp đúng max-width 1905px bên dưới. */
    min-height: calc(min(100vw, 1905px) * var(--banner-bg-ratio));
}

    /* BACKGROUND FULL WIDTH nhưng gắn theo container banner*/
    .custom-header-content::before {
        content: "";
        max-width:1905px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        /* Màn hình hẹp (mobile) nội dung xếp chồng nên cao hơn ảnh nhiều; màu này
           lấy theo nền sáng ở mép dưới ảnh để phần dư bên dưới nối liền, không thấy
           đường cắt. */
        background-color: #f4f7fb;
        background-image: url('/Content/Images/tmt_test3.png');
        /* KHÔNG dùng cover (cắt ảnh) cũng không dùng contain (contain sẽ thu ảnh lại
           cho vừa chiều cao khi nội dung thấp, để hở hai bên). 100% auto = phủ kín bề
           ngang, cao theo tỉ lệ gốc, trọn ảnh. */
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
        z-index: -1;
    }

/* ===== CHỮ + NÚT TRÊN BANNER TRANG CHỦ =====
   Màn hình / laptop / điện thoại nằm sẵn trong ảnh nền tmt_test3.png ở trên,
   chiếm khoảng nửa phải. Nên khối chữ bị giới hạn ở nửa trái để không đè lên
   chúng — đó là lý do cột chỉ col-lg-6 và .hero-copy còn chặn thêm max-width. */
.hero-copy {
    /* Là flex item duy nhất của .custom-header-content (khối cha đã display:flex
       để căn giữa dọc), nên tự đặt bề ngang thay cho lưới .row/.col. */
    width: 100%;
    /* 660px = đủ chứa dòng "Chuyên nghiệp" ở cỡ tối đa 5rem (625px) + khoảng dư.
       Vẫn cách xa cụm thiết bị trong ảnh nền (bắt đầu ở khoảng 60% bề ngang). */
    max-width: 660px;
}

.hero-title {
    margin: 0 0 1.1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .5px;
    text-transform: uppercase;
}

    /* clamp() thay cho media query: cỡ chữ co giãn liên tục theo bề ngang màn
       hình, khớp với ảnh nền vốn cũng co giãn theo % (background-size: 100% auto).
       Nếu chia nấc bằng media query thì chữ sẽ nhảy bậc còn ảnh thì không.

       nowrap: mỗi dòng tiêu đề luôn nằm gọn một dòng, không bao giờ rớt chữ.
       Đổi lại, cỡ chữ và bề ngang chỗ chứa phải khớp nhau — xem ghi chú ở
       .hero-title__line2 trước khi sửa cỡ chữ hoặc sửa nội dung tiêu đề. */
    .hero-title span {
        display: block;
        white-space: nowrap;
    }

.hero-title__line1 {
    color: #12275B;
    font-size: clamp(1.7rem, 3.8vw, 3.1rem);
}

/* Cỡ tối đa 5rem = 80px. Ở cỡ đó chữ "Chuyên nghiệp" rộng 625px (đo thực tế:
   7,81 × cỡ chữ), nên .hero-copy phải rộng ít nhất bấy nhiêu — đó là lý do
   max-width của nó là 660px chứ không phải con số tròn trịa nào khác.

   6.25vw để chạm đúng 80px ở màn hình 1280px rồi dừng lại. KHÔNG tăng hệ số này
   lên nữa: màn hẹp hơn sẽ cho chữ to hơn phần chứa, mà đã nowrap thì chữ không
   xuống dòng — nó tràn ra và bị html{overflow-x:clip} cắt cụt.
   Đổi nội dung tiêu đề dài hơn cũng phải tính lại theo đúng cách này. */
.hero-title__line2 {
    color: #2F7FD4;
    font-size: clamp(2rem, 6.25vw, 5rem);
}

.hero-desc {
    max-width: 520px;
    margin: 0 0 1.7rem;
    color: #55647E;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.75;
}

.hero-actions {
    /* Grid với grid-auto-columns:1fr → HAI NÚT LUÔN BẰNG NHAU (từ PC đến mobile): cả hai
       cùng bằng bề rộng nút rộng hơn ("Nhận tư vấn miễn phí"), nút "Giới thiệu công ty"
       tự giãn cho khớp — không xuống dòng. width:fit-content để cụm ôm sát nội dung và
       canh trái (là block nên bỏ qua text-align:center của cha ở mobile). Mobile chỉ đổi
       hướng dòng sang cột (xem media query bên dưới). */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 14px;
    width: fit-content;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    /* Căn giữa nhãn: khi grid giãn nút hẹp cho bằng nút rộng, chữ nằm giữa cho cân. */
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

    .hero-btn:hover {
        transform: translateY(-2px);
    }

.hero-btn--primary {
    background: linear-gradient(90deg, #0d47a1, #4DB2E5);
    color: #fff;
    box-shadow: 0 8px 20px rgba(13,71,161,.28);
}

    .hero-btn--primary:hover,
    .hero-btn--primary:focus {
        color: #fff;
        opacity: .9;
        box-shadow: 0 12px 26px rgba(13,71,161,.38);
    }

.hero-btn--ghost {
    background: rgba(255,255,255,.85);
    color: #12275B;
    box-shadow: 0 6px 18px rgba(13,71,161,.15);
}

    .hero-btn--ghost i {
        color: #2F7FD4;
    }

    .hero-btn--ghost:hover {
        background: #fff;
        box-shadow: 0 10px 24px rgba(13,71,161,.22);
    }

/* Chỉ ĐIỆN THOẠI (≤767.98px) mới đổi bố cục: cột chữ chiếm trọn bề ngang nên sẽ nằm
   ĐÈ lên đám thiết bị trong ảnh nền. Đẩy chữ xuống hẳn dưới ảnh: padding-top = đúng
   chiều cao ảnh nền (bề ngang màn hình × tỉ lệ ảnh) + một khoảng thở. Cùng biến
   --banner-bg-ratio với ::before nên đổi ảnh chỉ phải sửa một chỗ.

   NGƯỠNG 767.98px chứ không phải 991.98px: từ 768px trở lên (iPad dọc, iPad ngang,
   laptop) dùng NGUYÊN bố cục desktop — chữ căn trái, đè lên nửa trái ảnh, không rớt
   xuống dưới. Ở 768px cột chữ rộng 660px còn cụm thiết bị trong ảnh bắt đầu từ ~60%
   bề ngang, nên chữ vẫn không đè lên thiết bị. */
@media (max-width: 767.98px) {
    .custom-header-content {
        padding-top: calc(100vw * var(--banner-bg-ratio) + 24px);
        padding-bottom: 30px;
    }

    .hero-copy {
        max-width: none;
        text-align: center;
    }

    .hero-desc {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        text-align:start;
    }

    /* .hero-actions canh trái mặc định (là grid block, width:fit-content) — bỏ center. */
}

/* ===== ẢNH BANNER RIÊNG CHO ĐIỆN THOẠI =====
   PC dùng tmt_test3.png (1920x936) — bố cục ngang, thiết bị dồn nửa phải, nửa trái
   trống để chừa chỗ chữ. Ép nguyên ảnh đó xuống khổ dọc của điện thoại thì thiết bị
   nhỏ xíu và nửa trái trống trải. Nên điện thoại dùng ảnh dựng riêng tmt_test3_2.png
   (375x390) — thiết bị đã căn giữa và lấp đầy khung.

   Chỉ cần đổi --banner-bg-ratio: biến này đã điều khiển sẵn cả padding-top của khối
   cha (đẩy chữ xuống dưới ảnh) lẫn chiều cao ảnh nền, nên đổi một chỗ là khớp cả hai.
   background-size/position của ::before giữ nguyên (100% auto + center top) — vẫn
   đúng cho ảnh mới: phủ kín bề ngang, hiện TRỌN ảnh, không cắt cạnh nào.

   Ngưỡng 767.98px chứ không phải 991.98px: ảnh gốc chỉ rộng 375px (đúng khổ điện
   thoại). Dùng cho tablet 768–991px sẽ phải phóng to hơn 2x và vỡ nét, nên khổ đó
   vẫn giữ ảnh desktop. */
@media (max-width: 767.98px) {
    .custom-header-content {
        --banner-bg-ratio: 1.30; /* 390 / 375 */
        /* Chữ ĐÈ LÊN ảnh và nằm SÁT TRÊN CÙNG: khối gốc là flex + align-items:center
           (căn giữa dọc), đổi sang flex-start để nội dung dính mép trên.
           min-height giữ khối cao ít nhất bằng ảnh; nếu chữ cao hơn thì khối tự giãn. */
        align-items: flex-start;
        padding-top: 14px;
        padding-bottom: 24px;
        min-height: calc(100vw * var(--banner-bg-ratio));
    }

        .custom-header-content::before {
            background-image: url('/Content/Images/tmt_test3_2.png');
            /* cover chứ không phải 100% auto: chữ đè lên ảnh nên khối có thể cao hơn
               ảnh, cover đảm bảo ảnh luôn phủ kín, không hở mảng nền phẳng phía dưới. */
            background-size: cover;
            background-position: center top;
        }

        /* KHÔNG dùng lớp voan mờ phủ lên ảnh (đã bỏ theo yêu cầu). Chữ nằm sát mép trên
           nên rơi vào vùng trời sáng của ảnh, vẫn đủ tương phản mà ảnh giữ nguyên độ nét
           và độ tươi, không bị bạc màu. */

    /* Chữ to hơn và màu đậm hơn cho dễ đọc khi nằm đè lên ảnh.
       VẪN dùng clamp() chứ không đặt cỡ cố định: .hero-title span có white-space:nowrap
       nên cỡ chữ phải co theo bề ngang, không thì máy nhỏ (320px) chữ tràn ra ngoài và
       bị cắt cụt. Hệ số vw đã tính để dòng dài nhất vừa khít ở 320px lẫn 430px. */
    .hero-title__line1 {
        color: #0B1E4D;
        font-size: clamp(1.65rem, 8vw, 2.3rem);
    }

    .hero-title__line2 {
        color: #0D47A1;
        font-size: clamp(1.9rem, 10vw, 2.6rem);
    }

    /* Xám -> đen theo yêu cầu. */
    .hero-desc {
        color: #000;
    }

    /* Mobile: xếp DỌC — vẫn grid 1 cột 1fr nên HAI NÚT BẰNG NHAU, ôm sát, canh trái.
       Thứ tự markup: "Giới thiệu công ty" trên, "Nhận tư vấn miễn phí" dưới. */
    .hero-actions {
        grid-auto-flow: row;
    }

        /* Nút "Nhận tư vấn miễn phí" vốn rộng hơn "Giới thiệu công ty" ĐÚNG BẰNG phần
           icon + gap (~20px). Ẩn icon trên mobile → hai nút gần như bằng nhau tuyệt đối
           (đo thực: 90.8px so với 91.8px) mà KHÔNG phải đụng cỡ chữ/padding và chữ cũng
           không bị xuống dòng. Chỉ ẩn ở mobile; desktop/tablet vẫn giữ icon. */
        .hero-btn--ghost i {
            display: none;
        }
}

/* ===== NỀN KHỐI GIỚI THIỆU "VỀ CHÚNG TÔI" =====
   Cùng cách làm với .custom-header-content ở trên: ảnh tmt_test4.png gốc 1920x964
   (tỉ lệ 0.502083), luôn hiện TRỌN ảnh, không cắt cạnh nào ở mọi bề ngang màn hình. */
.intro-bg-content {
    position: relative;
    z-index: 1;
    /* Nội dung cách mép trên/dưới của nền đúng 10px. Nền (::before) cao 100% theo
       khối này, nên chiều cao khối = nội dung + 10px trên + 10px dưới → nền tự thu
       lại vừa khít nội dung, không còn khoảng trống thừa. */
    padding-top: 40px;
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* BACKGROUND FULL WIDTH nhưng gắn theo container giới thiệu */
    .intro-bg-content::before {
        content: "";
        max-width: 1905px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        /* Nối màu cho phần nền nếu ảnh không phủ hết. */
        background-color: #f1f4fb;
        background-image: url('/Content/Images/tmt_test4.png');
        /* cover: ảnh luôn phủ KÍN khung dù nội dung ngắn hay dài — khi nội dung dài
           hơn ảnh gốc, nền vẫn trùm trọn nội dung, không bị tràn ra ngoài. */
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
    }

/* ===== KHỐI GIỚI THIỆU "VỀ CHÚNG TÔI" =====
   Cột chữ phải cao ĐÚNG BẰNG cột ảnh cuộn bên cạnh (500px). Nội dung post2 do
   admin nhập nên dài ngắn tuỳ bài: để tự do thì bài dài kéo cả hàng cao lên, hai
   cột ảnh 500px bị căn giữa lại và trôi lệch khỏi khối chữ. Khoá cứng 500px rồi
   cắt phần thừa, nút "Xem chi tiết" dẫn sang bài đầy đủ.
   Chỉ áp từ lg trở lên — dưới đó các cột xếp chồng, không còn gì để canh bằng. */
@media (min-width: 992px) {
    .intro-content {
        display: flex;
        flex-direction: column;
        height: 660px;
    }

    /* min-height:0 là BẮT BUỘC: flex-item mặc định min-height:auto nên overflow:hidden
       không có tác dụng — hộp cứ phình theo nội dung và chiều cao 500px ở trên vô nghĩa. */
    .intro-content__body {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        /* Chữ tan dần thay vì bị cắt ngang khựng. Dùng mask (không phải lớp phủ màu)
           để không phải đoán màu nền phía sau. */
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
    }
}

/* Trình duyệt không hỗ trợ mask: chấp nhận cắt thẳng, vẫn hơn là để chữ tràn ra
   ngoài khung và đè lên nút. */
@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
    .intro-content__body {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Mobile & tablet (<992px): trước đây KHÔNG cắt nên hiện TOÀN BỘ post2. Cho GIỐNG PC:
   cũng cắt bớt + mờ dần, chỉ hiện phần đầu, phần còn lại bấm "Xem chi tiết".
   Khác PC ở chỗ dùng max-height (không phải height cố định): dưới lg các cột xếp chồng,
   không cần canh bằng cột ảnh, nên bài ngắn thì khối co vừa đủ, bài dài mới cắt. */
@media (max-width: 991.98px) {
    .intro-content {
        display: flex;
        flex-direction: column;
        max-height: 660px;
        /* Dưới lg khối chữ nằm ngay TRÊN 2 cột ảnh; thêm khoảng thở để nút "Xem chi
           tiết" không dính sát mép trên của 2 cột ảnh. */
        margin-bottom: 24px;
    }

        .intro-content__body {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
        }
}

/* Căn giữa bằng text-align trên hộp bọc, không phải auto-margin trên chính nút:
   nút mang class .btn của Bootstrap (display:inline-block), nếu tự đặt display:flex
   thì hai khai báo cùng độ ưu tiên (0,1,0) và kết quả phụ thuộc thứ tự nạp file.
   Hộp bọc thì trung lập — căn giữa được ở cả block (dưới lg) lẫn flex column (lg+). */
.intro-content__cta {
    flex-shrink: 0;
    margin-top: 1.25rem;
    text-align: center;
}

/* Hình dạng (pill, nền gradient, chữ trắng, vệt sáng quét khi hover) đã do
   .btn.rounded-pill.px-4.py-2 + nhóm nút "Cấp 1" lo — ở đây chỉ canh chữ với mũi tên.
   Selector 2 lớp để thắng .btn của Bootstrap bất kể thứ tự nạp file. */
.intro-content .intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* phần này style của container tin tức & sự kiện
   Cùng cách làm với .custom-header-content / .intro-bg-content / .service-bg-content:
   ảnh tmt_test5.png gốc 1920x936 (tỉ lệ 0.4875), luôn hiện TRỌN ảnh, không cắt cạnh
   nào ở mọi bề ngang màn hình. */
.custom-header3-content {
    position: relative;
    z-index: 1;
    /* Nội dung cách mép trên/dưới của nền đúng 10px. Nền (::before) cao 100% theo
       khối này, nên chiều cao khối = nội dung + 10px trên + 10px dưới → nền tự thu
       lại vừa khít nội dung, không còn khoảng trống thừa. */
    padding-top: 40px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* BACKGROUND FULL WIDTH nhưng gắn theo container tin tức & sự kiện*/
    .custom-header3-content::before {
        content: "";
        max-width: 1905px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        /* Nối màu cho phần nền nếu ảnh không phủ hết. */
        background-color: #f1f5fe;
        background-image: url('/Content/Images/tmt_test.png');
        /* cover: ảnh luôn phủ KÍN khung dù nội dung ngắn hay dài — khi nội dung dài
           hơn ảnh gốc, nền vẫn trùm trọn nội dung, không bị tràn ra ngoài. */
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
    }

/* phần này style của container hỗ trợ
   Cùng cách làm với các khối nền khác trong file: ảnh tmt_test2.png gốc 1920x866
   (tỉ lệ 0.451042), luôn hiện TRỌN ảnh, không cắt cạnh nào ở mọi bề ngang màn hình. */
.custom-header2-content {
    position: relative;
    z-index: 1;
    /* Nội dung cách mép trên/dưới của nền đúng 10px. Nền (::before) cao 100% theo
       khối này, nên chiều cao khối = nội dung + 10px trên + 10px dưới → nền tự thu
       lại vừa khít nội dung, không còn khoảng trống thừa. */
    padding-top: 110px;
    padding-bottom: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* BACKGROUND FULL WIDTH nhưng gắn theo container hỗ trợ*/
    .custom-header2-content::before {
        content: "";
        max-width: 1905px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        /* Nối màu cho phần nền nếu ảnh không phủ hết. */
        background-color: #eef2fb;
        background-image: url('/Content/Images/tmt_test2.png');
        /* cover: ảnh luôn phủ KÍN khung dù nội dung ngắn hay dài — khi nội dung dài
           hơn ảnh gốc, nền vẫn trùm trọn nội dung, không bị tràn ra ngoài. */
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
    }

/* Tiêu đề hai dòng dùng chung cho các khối ở trang chủ: dòng trên xanh đen cỡ nhỏ,
   dòng dưới xanh dương cỡ lớn kèm hai hình thoi hai bên. Nền các khối này là ảnh
   sáng nên dùng chữ đậm, không cần text-shadow.
   Có thể bỏ .st-line1 khi chỉ cần một dòng (khối "về chúng tôi"). */
.split-title {
    /* Roboto self-host ở /Content/fonts/roboto.css chỉ có 300/400/500/700 —
       đặt 800 sẽ bị trình duyệt tổng hợp đậm giả, nên dùng đúng 700. */
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
}

    .split-title .st-line1 {
        display: block;
        color: #0f2557;
        font-size: clamp(18px, 2.4vw, 30px);
        letter-spacing: 1.5px;
    }

    .split-title .st-line2 {
        /* inline-flex để hai hình thoi bám sát hai đầu dòng chữ, dài ngắn theo chữ. */
        display: inline-flex;
        align-items: center;
        gap: clamp(10px, 1.4vw, 20px);
        color: #1668e3;
        font-size: clamp(24px, 3.4vw, 42px);
        letter-spacing: 2px;
    }

    /* Chỉ cách dòng khi thật sự có dòng đen phía trên; khối một dòng
       ("về chúng tôi") không dính khoảng thừa. */
    .split-title .st-line1 + .st-line2 {
        margin-top: clamp(6px, 0.8vw, 12px);
    }

        /* Mỗi bên gồm gạch ngang + hình thoi. Bọc trong một flex riêng, KHÔNG xoay
           phần tử bọc: chỉ hình thoi (::after) xoay 45°, nên gạch luôn nằm ngang
           và thẳng hàng tâm với chữ. */
        .split-title .st-diamond {
            flex: none;
            display: inline-flex;
            align-items: center;
            gap: clamp(6px, 0.7vw, 10px);
        }

            /* ::before = gạch ngang, ::after = hình thoi (ô vuông viền mảnh xoay 45°) */
            .split-title .st-diamond::before {
                content: "";
                width: clamp(14px, 1.8vw, 26px);
                height: 2px;
                background: #1668e3;
            }

            .split-title .st-diamond::after {
                content: "";
                width: clamp(7px, 0.8vw, 11px);
                height: clamp(7px, 0.8vw, 11px);
                border: 2px solid #1668e3;
                transform: rotate(45deg);
            }

        /* Bên phải đảo thứ tự để gạch luôn nằm phía ngoài, hình thoi sát chữ. */
        .split-title .st-diamond.is-right {
            flex-direction: row-reverse;
        }

/* phần này style của container "Các Sản Phẩm Game Nổi Bật"
   Dùng lại ảnh tmt_test5.png của khối tin tức (1920x936, tỉ lệ 0.4875) — cùng một
   file nên trình duyệt chỉ tải một lần. Luôn hiện TRỌN ảnh, không cắt cạnh nào. */
.game-bg-content {
    position: relative;
    z-index: 1;
    /* Nội dung cách mép trên/dưới của nền đúng 10px. Nền (::before) cao 100% theo
       khối này, nên chiều cao khối = nội dung + 10px trên + 10px dưới → nền tự thu
       lại vừa khít nội dung, không còn khoảng trống thừa. */
    padding-top: 40px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Dòng thông báo khi chưa có sản phẩm game nào (xem phNoProducts trong
   Default.aspx). Chỉ một dòng chữ nhẹ, không dựng khung/hộp để không tranh
   chỗ với tiêu đề và nút "Tất cả sản phẩm" ngay bên dưới. */
.game-empty {
    margin: 0;
    padding: 26px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.05rem;
    color: #46536B;
}

    .game-empty i {
        color: #1668e3;
    }

    /* BACKGROUND FULL WIDTH nhưng gắn theo container sản phẩm game*/
    .game-bg-content::before {
        content: "";
        max-width: 1905px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        /* Nối màu cho phần nền nếu ảnh không phủ hết. */
        background-color: #eef1fa;
        background-image: url('/Content/Images/tmt_test5.png');
        /* cover: ảnh luôn phủ KÍN khung dù nội dung ngắn hay dài — khi nội dung dài
           hơn ảnh gốc, nền vẫn trùm trọn nội dung, không bị tràn ra ngoài.
           center top: khi nội dung ngắn phải cắt bớt ảnh, luôn cắt từ MÉP DƯỚI lên,
           giữ nguyên phần trên của ảnh cho hiển thị đầy đủ. */
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        z-index: -1;
    }

/* phần này style hình ảnh thành viên công ty trên mobile */
.staff-img {
    width: 140px;
    height: 140px;
}

/* mobile */
@media (max-width:768px) {
    .staff-img {
        width: 110px;
        height: 110px;
    }
}

/* style button panner trên cùng bên trái */
.custom-banner-btn {
    width: 100%;
    max-width: 300px;
    color: white;
    border: none;
}


.custom-banner-btn {
    background: #2F3A5F;
}

.custom-banner-btn-blue {
    background: #4DB2E5;
}

/* đây là style phần nội dung cuộn ngang */
.serviceSwiper {
    padding: 10px 55px;
    overflow: hidden;
}

    .serviceSwiper .swiper-slide {
        height: auto;
    }

.service-prev,
.service-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

.service-prev {
    left: 10px;
}

.service-next {
    right: 10px;
}

/* mobile */
@media(max-width:768px) {

    .serviceSwiper {
        padding: 10px 40px;
    }

    .service-prev,
    .service-next {
        width: 35px;
        height: 35px;
    }
}

.box-content {
    position: relative;
    max-height: 420px;
    overflow: hidden;
    padding: 24px 28px 0;
}

.box-content::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

/* Typography bên trong box */
.box-content p {
    line-height: 1.8;
    color: #334155;
    margin-bottom: 0.85rem;
}

.box-content strong {
    color: #0d47a1;
}

.box-content p:first-child span,
.box-content p:first-child strong {
    font-size: 1.45rem !important;
    background: linear-gradient(90deg, #0d47a1, #4DB2E5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.4;
    display: inline-block;
}

/* Nút bên dưới box */
.webvip-box > div:last-child {
    padding: 16px 28px 22px;
    background: #fff;
}

.webvip-box .btn-secondary {
    background: linear-gradient(90deg, #0d47a1, #4DB2E5) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 10px 30px !important;
    box-shadow: 0 6px 18px rgba(13,71,161,0.28);
    transition: 0.25s !important;
}

.webvip-box .btn-secondary:hover {
    opacity: 0.88 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13,71,161,0.38) !important;
}
.custom-post-content{
    min-height:700px;
}
    .custom-post-bg {
        height: 100%;
        background-image: url('/Content/Images/bg_header.webp');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        z-index: -1;
    }
.imgPost {
    /* max-width:300px;*/
    width: 100%;
}
.imgThumb {
    object-fit: cover;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ddd
}
.imgCover {
    width: 100%;
    aspect-ratio: 16/9;
}
.platforms-details img{
    width:35px;
}

.breadcrumb-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size:14pt;
}

.breadcrumb-item {
    text-decoration: none;
    color: #666;
}

    .breadcrumb-item:hover {
        color: #000;
    }

.breadcrumb-sep {
    color: #999;
}
.border-custom {
    border-left: 1px solid #dee2e6;
}
@media screen and (max-width: 576px) {
    .border-custom {
        border-left: none !important;
        border-top: 1px solid #dee2e6;
    }

}

/* ----- Phần style của tin tức $ sự kiện ----- */
.align-items-stretch {
    align-items: stretch !important;
}

/* ===== TIN TỨC & SỰ KIỆN =====
   Cùng ngôn ngữ với card dịch vụ: nền trắng chuyển xanh rất nhạt, viền mảnh
   #E2E8F0, bóng mềm, nhấn #0369A1. Trước đây khối này bị định nghĩa ở ba nơi
   chồng nhau (nền trắng đặc -> lớp kính --glass-lift -> nút Cấp 2), có chỗ lặp
   nguyên si hai lần; giờ gom hết về đây. */
.news-main-card,
.news-small-item {
    --news-accent: 3, 105, 161; /* #0369A1 */
    background: linear-gradient(168deg, #FFFFFF 0%, #FBFDFF 55%, #F1F7FE 100%);
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px -18px rgba(15,23,42,0.28);
}

.news-main-card {
    border-radius: 20px;
    overflow: hidden;
    padding: 0;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .news-main-card:hover {
        transform: translateY(-6px);
        border-color: rgba(var(--news-accent), 0.45);
        box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 22px 44px -20px rgba(var(--news-accent), 0.45);
    }

.news-small-item {
    border-radius: 16px;
    padding: 12px;
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}

    /* Trượt ngang thay vì nhấc lên: phân biệt phần tử danh sách với thẻ lớn bên trái */
    .news-small-item:hover {
        transform: translateX(5px);
        border-color: rgba(var(--news-accent), 0.45);
        box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 16px 32px -18px rgba(var(--news-accent), 0.45);
    }

.d-flex.flex-column.gap-4 {
    justify-content: space-between;
}

.flex-grow-1 {
    flex: 1 1 auto;
}

/* Thẻ tin chính bị kéo cao bằng cột phải (3 tin nhỏ). Trước đây phần dư dồn hết
   vào <p> tóm tắt vì nó mang flex-grow-1, để lại một mảng trống lớn giữa chữ và
   nút "Xem chi tiết". Nay bỏ flex-grow-1 khỏi phần chữ và cho ẢNH ăn phần dư
   (flex: 1) — thẻ đầy đặn, không còn khoảng hở.
   min-height giữ chỗ trước khi ảnh tải nên không giật layout; max-height chặn
   trên để ảnh không nuốt hết thẻ khi cột phải quá cao.
   object-fit: cover nên co giãn khung chỉ cắt bớt ảnh, KHÔNG làm méo. */
.news-main-card img {
    width: 100%;
    flex: 1 1 auto;
    min-height: 200px;
    max-height: 460px;
    object-fit: cover;
}

/* Tóm tắt tin nhỏ cắt còn 2 dòng thay vì 3: cột phải là thứ quyết định chiều cao
   cả khối, mỗi dòng cắt đi nhân với 3 tin. */
.news-small-item .clamp-3 {
    -webkit-line-clamp: 2;
}

/* Tin chính KHÔNG cắt tiêu đề lẫn tóm tắt — hiện trọn nội dung, theo chủ ý thiết kế.
   Đổi lại, thẻ này tự do cao theo nội dung: một tóm tắt dài bất thường sẽ kéo cao
   cả hàng (cột phải bị stretch theo). Muốn chặn thì thêm -webkit-line-clamp ở đây. */

.news-small-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Cỡ tiêu đề đặt tường minh: để mặc định thì h3 = 1.75rem và h4 = 1.5rem của
   Bootstrap, quá lớn so với khung thẻ và làm tiêu đề nuốt hết phần tóm tắt.
   Tin chính giữ cỡ RIÊNG, lớn hơn tin nhỏ: nó là h3 và là bài nổi bật, thứ bậc
   thị giác phải khớp với thứ bậc thẻ heading. */
.news-main-card h3 {
    font-size: 1.3rem;
    line-height: 1.4;
}

.news-small-item h4 {
    font-size: 1rem;
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .news-small-item .col-4 {
        width: 35%;
    }

    .news-small-item .col-8 {
        width: 65%;
    }

    .news-main-card h3 {
        font-size: 1.15rem;
    }

    /* Trước đây rule này nhắm h5 trong khi markup dùng h4 -> không bao giờ chạy */
    .news-small-item h4 {
        font-size: 0.95rem;
    }
}

/* Viên ngày tháng — cùng công thức với .svc-card-num (nền nhạt + viền cùng tông,
   chữ màu mực để giữ tương phản). Bỏ backdrop-filter của bản cũ: card nền đặc,
   làm mờ nền trắng thì ra đúng nền trắng. */
.news-date {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    padding: 4px 12px;
    border-radius: 30px;
    background: rgba(var(--news-accent), 0.10);
    border: 1px solid rgba(var(--news-accent), 0.30);
    color: #0F172A;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-news-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0369A1;
    font-weight: 700;
    text-decoration: none;
    transition: gap .2s ease, color .2s ease;
}

    .btn-news-link:hover {
        gap: 10px;
        color: #0B3C57;
    }
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* số dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ===== SERVICE CARD =====
   Soft UI: thẻ trắng, viền mảnh, bóng mềm trên nền sáng. Không còn ảnh nền + lớp
   kính như bản cũ — ảnh giờ là hình minh hoạ đứng riêng nên chữ không phải chống
   chọi với nền phía sau, đủ tương phản AA mà không cần lớp phủ nào. */
.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    /* padding-top vốn là 2.5rem để chừa chỗ cho badge số ở góc trên trái. Badge
       đang bị comment trong markup nên hạ về 1.7rem, không thì hở một mảng trống
       lớn phía trên ảnh. BẬT LẠI BADGE thì trả về 2.5rem. */
    padding: 1.7rem 1.5rem 1.7rem;
    border-radius: 20px;
    /* --svc-accent là bộ ba RGB (cùng quy ước với --glass-* ở :root) để một khai báo
       gradient dùng chung cho mọi tông; mỗi dịch vụ chỉ cần đổi đúng biến này.
       Quầng màu đặt ở góc TRÊN PHẢI để không đè lên badge số 01/02/03 bên trái.
       Đáy card dừng ở #F1F7FE, vẫn sáng hơn đáy đế .bg-service (#EFF6FF) nên hai
       lớp không hoà vào nhau; viền và bóng đổ giữ nốt phần tách khối. */
    --svc-accent: 77, 178, 229;
    background:
        radial-gradient(130% 90% at 100% 0%, rgba(var(--svc-accent), 0.13) 0%, transparent 58%),
        linear-gradient(168deg, #FFFFFF 0%, #FBFDFF 50%, #F1F7FE 100%);
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px -18px rgba(15,23,42,0.28);
    color: #0F172A;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

    /* Đậm quầng xanh lên bằng saturate thay vì đổi gradient — trình duyệt không nội
       suy được giữa hai gradient nên chuyển thẳng sẽ nhảy cụp. */
    .svc-card:hover {
        transform: translateY(-6px);
        filter: saturate(1.25);
        border-color: rgba(var(--svc-accent), 0.45);
        box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 22px 44px -20px rgba(var(--svc-accent), 0.55);
        color: #0F172A;
        text-decoration: none;
    }

/* ---- Tông màu theo từng dịch vụ (gắn từ ServiceTheme.For theo slug) ----
   Chỉ đổi đúng một biến, mọi thứ ăn theo: quầng gradient, viền hover, bóng đổ
   hover và badge số. Toàn bộ nằm trong họ xanh dương – lam – ngọc theo ghi chú
   hệ màu ở :root ("không dùng tông tím"). */
.svc-card--sky    { --svc-accent:  77, 178, 229; } /* #4DB2E5 */
.svc-card--indigo { --svc-accent:  59,  98, 217; } /* #3B62D9 */
.svc-card--teal   { --svc-accent:  20, 184, 166; } /* #14B8A6 */
.svc-card--navy   { --svc-accent:  13,  71, 161; } /* #0d47a1 */
.svc-card--cyan   { --svc-accent:   6, 182, 212; } /* #06B6D4 */

/* Số thứ tự ở góc trái trên */
.svc-card-num {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    background: rgba(var(--svc-accent), 0.12);
    border: 1px solid rgba(var(--svc-accent), 0.38);
    /* Chữ dùng màu mực trung tính chứ KHÔNG dùng chính --svc-accent: các tông sáng
       như sky/cyan đặt lên nền nhạt chỉ đạt ~2.3:1, trượt chuẩn tương phản. Nền và
       viền đã đủ mang tông màu rồi. */
    color: #0F172A;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Hình minh hoạ: chiều cao cố định để 3 card luôn thẳng hàng tiêu đề (tránh CLS) */
.svc-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 170px;
    margin-bottom: 1.4rem;
}

    .svc-card-media img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform .25s ease;
    }

.svc-card:hover .svc-card-media img {
    transform: scale(1.05);
}

.svc-card-name {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.35;
}

.svc-card-desc {
    margin: 0 0 1.1rem;
    font-size: 0.86rem;
    color: #475569; /* 7.4:1 trên nền trắng */
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Chip công nghệ — margin-top:auto đẩy cả cụm chip + nút xuống đáy card, nhờ đó
   card có mô tả ngắn vẫn thẳng hàng với card mô tả dài.
   CHỈ ĐƯỢC đặt auto ở MỘT trong hai (đây hoặc .svc-card-btn): để cả hai thì
   flexbox chia đôi khoảng trống, chip trôi ra giữa card và tách rời khỏi nút. */
.svc-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: auto 0 1.3rem;
}

.svc-tag {
    padding: 5px 12px;
    border-radius: 8px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    font-size: 0.74rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

/* margin-top:auto đẩy nút xuống đáy card, nhờ đó card có mô tả ngắn vẫn thẳng
   hàng nút với card mô tả dài. (Trước đây vai trò này do .svc-card-tags giữ, nay
   cụm chip đang bị comment nên chuyển xuống đây.) */
/* Nút kính lỏng.
   KHÔNG dùng backdrop-filter, có lý do cụ thể chứ không phải bỏ sót:
     1. Nút nằm trong slide Swiper, mà blur vỡ/nháy khi Swiper áp transform lúc
        next/prev — đây là lỗi đã từng phải gỡ backdrop-filter khỏi .svc-card::before.
     2. Card nền #fff đặc, làm mờ nền trắng thì ra đúng nền trắng.
   Nên chất kính ở đây dựng bằng lớp chồng: vệt sáng chéo (specular) nằm trên thân
   kính pha xanh, cộng gờ sáng mép trên và đáy tối để tạo cảm giác dày.
   Vệt sáng để trong background thay vì ::before — nếu dùng pseudo phủ inset:0 nó sẽ
   vẽ đè lên chữ và làm chữ bị bạc. */
.svc-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* KHÔNG đặt margin-top:auto ở đây — vai trò đẩy xuống đáy card do
       .svc-card-tags giữ. Đặt cả hai thì khoảng trống bị chia đôi. */
    padding: 8px 18px;
    border-radius: 999px;
    background:
        linear-gradient(118deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.18) 38%, rgba(255,255,255,0) 60%),
        linear-gradient(155deg, rgba(240,248,255,0.95) 0%, rgba(205,229,250,0.82) 45%, rgba(160,201,245,0.72) 100%);
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95), /* gờ sáng mép trên */
        inset 0 -6px 12px -6px rgba(3,105,161,0.3), /* đáy tối -> khối dày */
        0 5px 14px -6px rgba(3,105,161,0.5); /* bóng đổ màu thương hiệu */
    color: #075985; /* 5.2:1 trên vùng kính đậm nhất, vẫn qua AA */
    font-size: 0.8rem;
    font-weight: 700;
}

/* Hover: giữ NGUYÊN gradient, chỉ tăng độ sáng/độ bão hoà bằng filter. Chuyển màu
   trực tiếp giữa hai gradient thì trình duyệt nhảy cụp chứ không nội suy được. */
.svc-card:hover .svc-card-btn {
    transform: translateY(-1px);
    filter: brightness(1.05) saturate(1.2);
    border-color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -6px 12px -6px rgba(3,105,161,0.35),
        0 9px 20px -8px rgba(3,105,161,0.6);
    color: #0B3C57;
}

/* ===== CONTACT CARD ===== */
.contact-card {
    background: rgba(255,255,255,0.97);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Từ lg trở lên ảnh và card nằm cạnh nhau, nhưng hai bên KHÔNG bằng chiều cao:
   card cao cố định theo nội dung form (~579px: header + 6 ô + nút), còn ảnh tỉ lệ 3:2
   nên chỉ cao bằng 2/3 bề ngang cột — đo được 411px ở 992px và 491px ở 1280px, tức hụt
   169px và 89px, để lại một mảng trống ngay dưới ảnh.

   Kéo ẢNH cao bằng card chứ KHÔNG bó card xuống bằng ảnh: form có 6 ô + nút, ép card
   thấp xuống thì .contact-card overflow:hidden sẽ cắt mất ô nhập. Ảnh là ảnh chụp nên
   cover cắt bớt mép trên/dưới không ảnh hưởng nội dung. */
@media (min-width: 992px) {
    .custom-header2-content .col-lg-8 {
        display: flex; /* để ảnh (flex item) tự căng đầy chiều cao cột */
    }

        .custom-header2-content .col-lg-8 .img-mobile {
            width: 100%;
            /* Thắng height:auto của .img-fluid — selector 3 lớp nên đủ ưu tiên. */
            height: 100%;
            object-fit: cover;
        }
}

.contact-card-header {
    background: linear-gradient(135deg, #0d47a1 0%, #4DB2E5 100%);
    padding: 1.5rem 1.6rem 1.2rem;
    text-align: center;
    color: #fff;
}

.contact-card-header i {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.contact-card-header h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.contact-card-header p {
    font-size: 0.78rem;
    margin: 0;
    opacity: 0.8;
}

.contact-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Mặc định co theo nội dung -> gap giữa các ô luôn bằng nhau.
   Chiều cao thừa của card do .cf-group-grow hút hết (xem bên dưới). */
.cf-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ô Nội Dung: nở ra lấp chỗ trống thay vì chia đều cho mọi ô */
.cf-group-grow {
    flex: 1;
    min-height: 0;
}

.cf-group-grow .cf-textarea {
    flex: 1;
}

.cf-row {
    display: flex;
    gap: 0.75rem;
}

.cf-row .cf-group { flex: 1; }

.cf-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cf-group label i {
    color: #4DB2E5;
    font-size: 0.72rem;
}

.cf-input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.cf-input:focus {
    border-color: #4DB2E5;
    box-shadow: 0 0 0 3px rgba(77,178,229,0.15);
    background: #fff;
}

.cf-textarea {
    min-height: 70px;
    resize: none;
}

.cf-error {
    font-size: 0.72rem;
    color: #e74c3c;
    display: block;
}

/* Chưa có lỗi thì phải biến mất hẳn: span rỗng tuy cao 0 nhưng vẫn ăn gap 4px
   của .cf-group, đủ để các ô lệch nhau. */
.cf-error:empty {
    display: none;
}

.cf-input.is-invalid {
    border-color: #e74c3c;
    background: #fff;
}

.cf-formerror {
    font-size: 0.75rem;
    color: #e74c3c;
    text-align: center;
    display: block;
}

.cf-formerror:empty {
    display: none;
}

/* Bẫy bot: ẩn khỏi mắt người nhưng vẫn nằm trong DOM để bot tự điền vào. */
.cf-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cf-submit {
    width: 100%;
    background: linear-gradient(90deg, #0d47a1, #4DB2E5);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(13,71,161,0.3);
    transition: 0.25s;
    margin-top: 0.4rem;
}

.cf-submit:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13,71,161,0.4);
}

.cf-success {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    color: #16a34a;
    margin-top: 0.4rem;
}

/* ============================================================================
   LIQUID GLASS — TRANG CHỦ
   Đặt cuối file để ghi đè các khai báo phía trên (cùng độ ưu tiên, đứng sau thắng).

   Nguyên tắc: kính chỉ có nghĩa khi phía sau nó CÓ THỨ GÌ ĐÓ để làm mờ.
   Trang chủ vốn nền trắng phẳng, nên lớp ambient trên body tạo các quầng màu
   thương hiệu (#0d47a1 xanh, #a21f69 tía — đúng gradient của .section-title)
   để mọi tấm kính có nền mà bắt sáng.
   ============================================================================ */

/* Bảng màu: TRẮNG — XANH DƯƠNG — ĐEN. Không dùng tông tím. */
:root {
    --glass-blue: 13, 71, 161;      /* #0d47a1 — xanh dương đậm */
    --glass-ink: 15, 23, 42;        /* #0F172A — đen xanh, thay cho tông tím cũ */
    --glass-sky: 77, 178, 229;      /* #4DB2E5 — xanh sáng, màu nhấn */
    --glass-fill: rgba(255, 255, 255, 0.62);
    --glass-fill-strong: rgba(255, 255, 255, 0.78);
    --glass-edge: rgba(255, 255, 255, 0.75);
    --glass-blur: blur(18px) saturate(165%);
    /* Gờ sáng mép trên + bóng đổ mềm: hai thứ tạo cảm giác tấm kính nổi lên */
    --glass-lift: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 40px -18px rgba(13,71,161,0.35);
    --glass-lift-hover: inset 0 1px 0 rgba(255,255,255,1), 0 26px 54px -18px rgba(13,71,161,0.45);
}

/* ----- Nền ambient -----
   Đặt thẳng lên body thay vì một lớp ::before position:fixed. Lý do: Content/Site.css
   khai báo backdrop-filter trên body, điều đó biến body thành containing block cho mọi
   con position:fixed — lớp phủ sẽ neo theo body chứ không theo viewport và cư xử khó
   lường. background-attachment: fixed cho đúng hiệu ứng "quầng sáng đứng yên khi cuộn"
   mà không cần thêm lớp nào. */
body {
    background-color: #f7f9fd;
    background-image:
        radial-gradient(60rem 40rem at 12% 8%, rgba(13,71,161,0.14), transparent 60%),
        radial-gradient(48rem 36rem at 88% 22%, rgba(15,23,42,0.08), transparent 62%),
        radial-gradient(52rem 40rem at 50% 92%, rgba(77,178,229,0.15), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ============================ CARD GAME ============================ */
/* Các override "chất kính" của card game đã BỎ HẲN, không phải sửa nhẹ.
   Chúng là nguyên nhân làm ảnh game trông nhòe:
     - .card-content có backdrop-filter: blur(7px) phủ lên gần nửa trái tấm ảnh;
     - .game-icon là viên kính mờ nên logo game bị đục;
     - .play-btn/.view-btn cũng blur nốt.
   Toàn bộ style card game giờ gom về một chỗ duy nhất ở ĐẦU file (mục
   "phần style của phần card game") để không còn hai nơi đá nhau. Đừng thêm
   backdrop-filter lại vào đây. */

/* ============================ CARD DỊCH VỤ ============================ */
/* Card dịch vụ không còn dùng chất kính (ảnh nền + lớp ::before mờ) — xem khối
   "SERVICE CARD" ở trên: giờ là thẻ trắng đặc, viền mảnh, bóng mềm. Các override
   kính cũ ở đây đã bỏ vì chúng ghi đè viền/bóng của thiết kế mới. */

/* Card đang hover nhấc lên; không nâng z-index thì card kế bên (vẽ sau)
   sẽ đè lên mép và bóng của nó, trông như hình bị cắt chồng. */
.serviceSwiper .swiper-slide {
    position: relative;
    z-index: 0;
}

    .serviceSwiper .swiper-slide:hover {
        z-index: 2;
    }

/* .serviceSwiper buộc phải overflow:hidden (nếu không, các slide kế sẽ lòi ra
   hai bên). Vì vậy phần card nhấc lên 8px cùng bóng đổ 40px sẽ bị KHUNG CẮT MẤT
   nếu không chừa chỗ. Nới đệm trên/dưới đủ cho cả cú nhấc lẫn cái bóng.

   QUAN TRỌNG — phải viết .swiper.serviceSwiper chứ không phải .serviceSwiper:
   swiper-bundle.min.css được nạp Ở CUỐI TRANG, tức là SAU file này, và nó reset
   ".swiper { padding: 0 }". Hai selector một-class có cùng độ ưu tiên nên cái nạp
   sau thắng — padding viết kiểu .serviceSwiper bị xóa sạch, kể cả padding 10px 55px
   vốn có từ trước. Ghép hai class lại để độ ưu tiên cao hơn. */
.swiper.serviceSwiper {
    /* Chỉ đệm dọc. Đệm ngang 55px (viết trong code cũ nhưng bị Swiper xóa nên chưa
       bao giờ chạy) sẽ bóp các slide vào trong và chừa hai khoảng trống hai bên —
       không cần, vì nút prev/next định vị absolute theo .bg-service chứ không cần
       swiper nhường chỗ. */
    /* Vừa đủ cho cú nhấc 8px và phần bóng còn nhìn thấy được — thêm nữa là thừa,
       khối dịch vụ sẽ trông rỗng ruột. */
    padding: 14px 0 20px;
    overflow: hidden;
}

/* ============================ TIN TỨC ============================ */
/* Các override kính của khối tin tức đã bỏ — toàn bộ style gom về khối
   "TIN TỨC & SỰ KIỆN" ở phần trên file. Giữ lại tiêu đề này để không ai đi tìm
   nhầm chỗ. Nút "Xem tất cả" (.btn-all-news) nằm ở mục hệ nút bên dưới. */

/* ============================ WEBVIP BOX ============================ */
/* Khối này nằm trên ảnh nền tmt_test3.png của .custom-header-content, nên kính ở
   đây làm mờ một ảnh THẬT — đúng chỗ để dùng backdrop-filter.
   Nhưng hai lớp con đang bịt kín tấm kính, phải mở chúng ra thì mới thấy:
     1. .webvip-box > div:last-child có background trắng ĐẶC (khối chứa nút);
     2. .box-content::after là dải gradient fade sang trắng ĐỤC 100% ở đáy. */
.webvip-box {
    background: linear-gradient(150deg, rgba(255,255,255,0.8), rgba(240,246,255,0.66));
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-lift);
    position: relative;
}

    /* 1. Khối chứa nút: bỏ nền trắng để cả hộp là một tấm kính liền mạch.
          Bỏ luôn padding (nút bên trong đã có margin y-3 tự chừa khoảng cách). */
    .webvip-box > div:last-child {
        background: transparent;
        padding: 0;
    }

/* 2. Dải fade cắt nội dung dài.
      Cách cũ: phủ một gradient MÀU lên trên chữ. Vấn đề là màu đó không bao giờ
      khớp tuyệt đối với nền kính (vốn là gradient trắng → xanh nhạt, lại còn trong
      suốt), nên đáy hộp luôn lộ một mảng màu khác.
      Cách này: bỏ lớp phủ, dùng mask để chính CHỮ tan dần thành trong suốt.
      Không có màu nào được vẽ thêm, nên không thể lệch màu. */
.box-content::after {
    display: none;
}

.box-content {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
}

    /* Chữ căn đều hai bên. hyphens: auto để chỗ trống giữa các từ không bị giãn
       quá rộng ở những dòng chỉ có vài từ dài — lỗi kinh điển của text-align: justify. */
    .box-content p,
    .intro-content p {
        text-align: justify;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

/* Trình duyệt không hỗ trợ mask: trả lại lớp phủ gradient, chấp nhận lệch màu
   một chút còn hơn để chữ bị cắt ngang đột ngột. */
@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
    .box-content::after {
        display: block;
        background: linear-gradient(to bottom, rgba(250,252,255,0) 0%, rgba(250,252,255,0.95) 100%);
    }
}

    /* Vệt phản chiếu chéo — chỉ dùng ở khối lớn nhất, nơi mắt dừng lâu nhất */
    .webvip-box::after {
        content: "";
        position: absolute;
        top: -60%;
        left: -10%;
        width: 55%;
        height: 180%;
        background: linear-gradient(115deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%);
        transform: rotate(10deg);
        pointer-events: none;
    }

/* ---- Trình duyệt không hỗ trợ backdrop-filter: đổ nền đặc để chữ vẫn đọc được ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Card tin tức đã bỏ khỏi danh sách này: chúng không còn dùng backdrop-filter,
       để lại thì nền phẳng 0.96 sẽ đè mất gradient ở đúng những trình duyệt cũ. */
    .webvip-box {
        background: rgba(255,255,255,0.96);
    }
    /* .card-content đã bỏ mask (card game không còn dùng kính) nên không cần
       hoàn tác gì ở đây nữa. */
}

@media (prefers-reduced-motion: reduce) {
    .game-card,
    .news-main-card,
    .news-small-item,
    .svc-card {
        transition: none;
    }

        .game-card:hover,
        .news-main-card:hover,
        .news-small-item:hover,
        .svc-card:hover {
            transform: none;
        }
}

/* ============================================================================
   HỆ NÚT — TRANG CHỦ
   Trước đây mỗi nút một công thức: form liên hệ và WebVIP dùng gradient xanh,
   banner dùng nền phẳng, mỗi nơi một kiểu bo góc và bóng đổ. Giờ chỉ còn hai cấp:

   Cấp 1 (đặc)  — hành động chính: Gửi Liên Hệ, Xem chi tiết ở WebVIP, nút banner.
   Cấp 2 (kính) — hành động phụ: Xem tất cả tin, Xem chi tiết ở card dịch vụ,
                  nút play/view trên card game, mũi tên điều hướng swiper.

   Cả hai dùng chung gờ sáng mép trên + bóng đổ màu thương hiệu, nên khác nhau về
   sức nặng chứ không khác nhau về ngôn ngữ.
   ============================================================================ */

/* ---------- Cấp 1: nút đặc ---------- */
.cf-submit,
.webvip-box .btn-secondary,
.custom-banner-btn,
.intro-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 12px;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.3px;
    background: linear-gradient(100deg, rgba(13,71,161,0.96), rgba(77,178,229,0.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 14px 30px -14px rgba(13,71,161,0.65) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

    /* Vệt sáng quét ngang khi rê chuột — dấu hiệu chung của mọi nút cấp 1 */
    .cf-submit::after,
    .webvip-box .btn-secondary::after,
    .custom-banner-btn::after,
    .intro-cta::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 45%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
        transform: skewX(-20deg);
        transition: left .55s ease;
        pointer-events: none;
    }

    .cf-submit:hover,
    .webvip-box .btn-secondary:hover,
    .custom-banner-btn:hover,
    .intro-cta:hover {
        opacity: 1 !important;
        transform: translateY(-2px);
        filter: saturate(1.1) brightness(1.05);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 20px 42px -14px rgba(13,71,161,0.7) !important;
    }

        .cf-submit:hover::after,
        .webvip-box .btn-secondary:hover::after,
        .custom-banner-btn:hover::after,
        .intro-cta:hover::after {
            left: 120%;
        }

    .cf-submit:active,
    .webvip-box .btn-secondary:active,
    .custom-banner-btn:active,
    .intro-cta:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 6px rgba(0,0,0,0.25) !important;
    }

    .cf-submit:focus-visible,
    .webvip-box .btn-secondary:focus-visible,
    .custom-banner-btn:focus-visible,
    .intro-cta:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(77,178,229,0.45) !important;
    }

/* Nút banner thứ hai giữ sắc xanh sáng để phân biệt với nút bên cạnh,
   nhưng vẫn cùng hình dạng và cùng hiệu ứng. */
.custom-banner-btn-blue {
    background: linear-gradient(100deg, rgba(77,178,229,0.96), rgba(47,58,95,0.96)) !important;
}

/* ---------- Cấp 2: nút kính ----------
   "Xem tất cả" ở khối tin tức: cùng công thức kính lỏng với .svc-card-btn (vệt
   sáng chéo + thân kính pha xanh + gờ sáng mép trên + đáy tối), chỉ to hơn một
   nấc vì đây là hành động kết khối chứ không nằm trong thẻ.
   Không dùng backdrop-filter — nền phía sau là nền trang phẳng, blur ra đúng nó. */
.btn-all-news {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 26px;
    border-radius: 999px;
    background:
        linear-gradient(118deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.18) 38%, rgba(255,255,255,0) 60%),
        linear-gradient(155deg, rgba(240,248,255,0.95) 0%, rgba(205,229,250,0.82) 45%, rgba(160,201,245,0.72) 100%);
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -6px 12px -6px rgba(3,105,161,0.3),
        0 5px 14px -6px rgba(3,105,161,0.5);
    color: #075985;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, filter .25s ease, transform .2s ease;
}

    .btn-all-news:hover {
        gap: 11px;
        transform: translateY(-2px);
        filter: brightness(1.05) saturate(1.2);
        border-color: #fff;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            inset 0 -6px 12px -6px rgba(3,105,161,0.35),
            0 9px 20px -8px rgba(3,105,161,0.6);
        color: #0B3C57;
    }

/* Nút "Xem chi tiết" trên card dịch vụ: viên kính lỏng, hover sáng lên và nhấc nhẹ. */
.svc-card-btn {
    transition: gap .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, filter .25s ease, transform .2s ease;
}

.svc-card:hover .svc-card-btn {
    gap: 12px;
}

/* Nút "Tất cả sản phẩm" dưới khối game. Chỉ lo HÌNH DÁNG ở đây; màu lấy từ khối
   dùng chung ngay bên dưới. */
.btn-all-products {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    padding: 14px 36px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .25s ease, opacity .2s ease;
}

    .btn-all-products:hover {
        transform: translateY(-2px);
    }

/* ---------- Ba nút phụ dùng chung bảng màu với nút chính trên banner ----------
   "Xem chi tiết" (card dịch vụ), "Tất cả sản phẩm" (game) và "Xem tất cả" (tin tức)
   dùng ĐÚNG màu của .hero-btn--primary: cùng gradient, chữ trắng, cùng bóng đổ.
   CHỈ đổi màu — hình dáng, cỡ chữ và hiệu ứng hover riêng của từng nút giữ nguyên.

   Khối này PHẢI đứng sau các định nghĩa kính ở trên (.svc-card-btn, .btn-all-news):
   cùng độ ưu tiên nên rule nào viết sau thì thắng. */
.svc-card-btn,
.btn-all-products,
.btn-all-news {
    background: linear-gradient(90deg, #0d47a1, #4DB2E5);
    border: none;
    color: #fff;
    box-shadow: 0 8px 20px rgba(13,71,161,0.28);
}

/* Hover: bỏ filter brightness/saturate của bản kính cũ — trên nền gradient đặc nó
   chỉ làm màu bợt đi. Dùng đúng cách của nút banner: mờ nhẹ + bóng đổ dày hơn. */
.svc-card:hover .svc-card-btn,
.btn-all-products:hover,
.btn-all-news:hover {
    filter: none;
    opacity: .9;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 26px rgba(13,71,161,0.38);
}

    .btn-all-news:focus-visible,
    .btn-all-products:focus-visible,
    .svc-card:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(3,105,161,0.55);
    }

/* Card game giờ là một link phủ kín thẻ. Viền focus phải vẽ trên chính thẻ,
   không phải trên thẻ <a> rỗng (nó trong suốt, không thấy gì). */
.game-card:focus-within {
    outline: 3px solid #0369a1;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cf-submit,
    .webvip-box .btn-secondary,
    .custom-banner-btn,
    .intro-cta,
    .btn-all-news,
    .btn-all-products,
    .svc-card-btn {
        transition: none !important;
    }

        .cf-submit::after,
        .webvip-box .btn-secondary::after,
        .custom-banner-btn::after,
        .intro-cta::after {
            display: none;
        }

        .cf-submit:hover,
        .webvip-box .btn-secondary:hover,
        .custom-banner-btn:hover,
        .intro-cta:hover,
        .btn-all-news:hover,
        .btn-all-products:hover,
        .svc-card:hover .svc-card-btn {
            transform: none;
        }
}

/* ============================================================================
   KHỐI DỊCH VỤ — nền
   Khối này là cái "đế tối" để các card kính trắng nổi lên trên, nên nó phải đậm
   và tĩnh. Bản cũ có ba lớp chồng nhau: gradient 400% chạy animation 8s, một lớp
   glow và một lớp phủ xanh 0.55 — ba lớp triệt tiêu lẫn nhau, cuối cùng chỉ còn
   một mảng xanh xám phẳng mà vẫn tốn một animation chạy vô tận.

   Giờ: một nền tĩnh dựng từ đúng ba màu thương hiệu (#0d47a1, #a21f69, #4DB2E5)
   trên đế xanh mực, cộng một vệt sáng ở mép trên. Không animation nền.
   ============================================================================ */
/* Đế SÁNG: card giờ là thẻ trắng đặc, đặt trên đế tối thì viền và bóng mềm của
   chúng biến mất hoàn toàn. Đế sáng rất nhạt vừa đủ tách khối dịch vụ khỏi phần
   trang xung quanh mà không cạnh tranh với card. */
.bg-service {
    background: linear-gradient(180deg, #F8FAFC, #EFF6FF);
    background-size: auto;
    animation: none;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    /* Swiper bên trong đã tự chừa đệm dọc cho cú hover, nên khung ngoài chỉ cần
       mỏng theo chiều dọc; đệm ngang giữ nguyên để card không dính sát mép. */
    padding: 12px 24px;
    box-shadow: none;
}

    /* Đế sáng không còn là tấm kính -> bỏ cả gờ sáng lẫn lớp phủ */
    .bg-service::after,
    .bg-service::before {
        background: none;
    }

/* Mũi tên điều hướng trên đế sáng: nền trắng đặc, mũi tên xanh, viền rõ */
.service-prev,
.service-next {
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #0369A1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 6px 18px -8px rgba(15,23,42,0.35);
    transition: background .2s ease, transform .18s ease, border-color .2s ease;
}

    .service-prev:focus-visible,
    .service-next:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(3,105,161,0.55);
    }

    /* Hai nút được căn giữa dọc bằng transform: translateY(-50%). Nếu hover chỉ đặt
       scale() thì phép translate bị GHI ĐÈ, nút tụt xuống 50% chiều cao của chính nó.
       Phải giữ lại translateY trong cùng một khai báo transform. */
    .service-prev:hover,
    .service-next:hover {
        background: #EFF6FF;
        border-color: #BFD9F2;
        transform: translateY(-50%) scale(1.06);
    }

/* ============================================================================
   REDESIGN CARD DỊCH VỤ — bám theo ảnh mẫu (ĐANG CẬP NHẬT, chỉ đổi giao diện)
   Ảnh mẫu: card TRẮNG nổi thẳng trên nền trang (bỏ "đế" sáng bao ngoài), mỗi card
   chỉ có ảnh minh hoạ + tên + link "Xem chi tiết"; mũi tên là chevron xanh TRƠN sát
   hai mép, không còn nút tròn nền trắng.
   Giữ nguyên chức năng (Swiper, link, repeater) — chỉ can thiệp phần nhìn. Đặt ở
   CUỐI file để thắng mọi rule dịch vụ phía trên nhờ thứ tự nạp (cùng độ ưu tiên).
   ============================================================================ */

/* 1. Bỏ "đế" bao ngoài: nền/viền/bóng -> trong suốt để card nổi thẳng trên nền trang.
      Lề ngang 68px (rộng hơn bản chevron trơn cũ 46px): nút tròn 46px đặt ở left/right
      10px → mép trong nút ở 56px, còn card bắt đầu ở 68px → HAI NÚT TÁCH HẲN KHỎI CARD
      (hở ~12px), không còn dính/đè lên card. */
.bg-service {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 12px 68px;
}

    .bg-service::after,
    .bg-service::before {
        display: none;
    }

/* 2. Card: trắng, KHÔNG bóng đổ (theo yêu cầu chỉ xóa shadow, GIỮ NGUYÊN background).
      Giữ nền trắng + viền mảnh để card vẫn tách khỏi nền phần dịch vụ.
      Cao thêm 10px so với bản trước: cộng 5px vào đệm trên và 5px vào đệm dưới. */
.svc-card {
    background: #fff;
    border: 1px solid #EEF2F7;
    box-shadow: none;
    padding-top: calc(1.7rem + 5px);
    padding-bottom: calc(1.7rem + 5px);
}

    .svc-card:hover {
        filter: none;
        border-color: #E2E8F0;
        box-shadow: none;
    }

/* 3. Ảnh mẫu chỉ có ảnh + tên + link -> ẩn mô tả và chip công nghệ. */
.svc-card-desc,
.svc-card-tags {
    display: none;
}

/* 4. Tên dịch vụ: xanh navy đậm, căn giữa (như ảnh mẫu). */
.svc-card-name {
    color: #16307A;
    margin-bottom: 1.1rem;
}

/* 5. "Xem chi tiết": VIÊN PILL GRADIENT giống nút "Về chúng tôi" (.intro-cta) — cùng
      dải màu xanh→cyan, chữ trắng, gờ sáng mép trên + bóng đổ + vệt sáng quét khi hover.
      Chỉ NHỎ HƠN: giữ đúng cỡ gốc của nút dịch vụ (padding 8px 18px, chữ 0.8rem, bo pill).
      margin-top:auto đẩy nút xuống đáy để 3 card thẳng hàng dù tên dài ngắn khác nhau.
      Áp dụng chung nên cả card dịch vụ ở trang chủ LẪN "Dịch vụ khác" ở trang chi tiết
      đều đổi theo. */
.svc-card-btn {
    margin-top: auto;
    position: relative;
    overflow: hidden;
    /* Sửa lỗi "vệt dọc ở cuối nút": overflow:hidden + border-radius + con có transform
       (vệt sáng ::after dùng skewX), càng rõ khi nút nằm trong swiper-slide (translate3d),
       làm cạnh bo hở một đường anti-alias. translateZ(0) ép nút thành LAYER riêng nên
       clip bo góc được raster sạch một lần, hết vệt — mà vẫn giữ nguyên bóng đổ ngoài
       (khác clip-path: clip-path sẽ cắt mất bóng). */
    transform: translateZ(0);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: linear-gradient(100deg, rgba(13,71,161,0.96), rgba(77,178,229,0.96));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 22px -12px rgba(13,71,161,0.65);
}

    /* Vệt sáng quét ngang khi hover — dấu hiệu chung với nút "Về chúng tôi". */
    .svc-card-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 45%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
        transform: skewX(-20deg);
        transition: left .55s ease;
        pointer-events: none;
    }

    /* Bỏ gạch chân của bản link chữ cũ. */
    .svc-card-btn-label {
        text-decoration: none;
    }

.svc-card:hover .svc-card-btn {
    filter: none;
    opacity: 1;
    color: #fff;
    gap: 10px;
    /* Giữ translateZ(0) để nút vẫn ở layer riêng khi hover -> không tái hiện vệt dọc. */
    transform: translateY(-2px) translateZ(0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 16px 30px -12px rgba(13,71,161,0.7);
}

    .svc-card:hover .svc-card-btn::after {
        left: 120%;
    }

/* 6. Mũi tên điều hướng: NÚT TRÒN NỀN TRẮNG, chevron xanh, bóng đổ nhẹ (theo ảnh mẫu). */
.service-prev,
.service-next {
    width: 46px;
    height: 46px;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 5px 16px rgba(15,23,42,.18);
    color: #1D6FD0;
    font-size: 1.25rem;
}

    .service-prev:hover,
    .service-next:hover {
        background: #fff;
        border: none;
        color: #0d47a1;
        box-shadow: 0 8px 22px rgba(15,23,42,.24);
        transform: translateY(-50%) scale(1.08);
    }