/* ==========================================================================
   VNTP — font + design token, trích trực tiếp từ file Figma "web_VNTP"
   Nạp SAU home.css/media.css nên các biến ở đây ghi đè token của theme cũ.
   ========================================================================== */

/* --- SVN-Poppins: dùng cho heading ------------------------------------ */
@font-face {
    font-family: "SVN-Poppins";
    src: url("../fonts/vntp/SVN-PoppinsLight.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "SVN-Poppins";
    src: url("../fonts/vntp/SVN-Poppins.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "SVN-Poppins";
    src: url("../fonts/vntp/SVN-PoppinsMedium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "SVN-Poppins";
    src: url("../fonts/vntp/SVN-PoppinsSemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "SVN-Poppins";
    src: url("../fonts/vntp/SVN-PoppinsBold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* --- SF Pro Display: dùng cho body ------------------------------------ */
@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/vntp/SFProDisplay-Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/vntp/SFProDisplay-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/vntp/SFProDisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/vntp/SFProDisplay-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/vntp/SFProDisplay-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* --- Token ------------------------------------------------------------
   Tên biến --primary-color/--font-family giữ nguyên theo theme lõi để
   component cũ (pagination, button, breadcrumb…) tự đổi màu theo.        */
:root {
    --font-family: "SVN-Poppins", sans-serif;
    /* heading */
    --font-secondary: "SF Pro Display", sans-serif;
    /* body */

    --primary-color: #ff4f0d;
    /* cam chủ đạo */
    --secondary-color: #fe2101;
    /* đỏ nhấn */
    --primary-dark: #f94601;

    /* Thiết kế dùng gradient cho MỌI mảng cam (nút, icon, chữ lớn), không tô phẳng.
       2 điểm dừng lấy từ Figma: #FF4F0D 0% -> #FE2101 100%.
       Figma ghi 174deg nhưng CSS phải để 180deg: CSS kéo dài đường gradient sao cho
       phủ kín hộp, nên với nút thấp mà rộng (239x46) thì 174deg tiêu tốn phần dải
       theo chiều ngang, xuống tới đáy mới đi được ~82% -> không ra hết màu cuối.
       Lệch 6 độ không nhìn thấy, còn sai màu đáy thì thấy rõ. */
    --grad-primary: linear-gradient(180deg, #ff4f0d 0%, #fe2101 100%);
    --primary-light: #fc5f03;

    --ink: #1f1f1f;
    /* chữ đậm */
    --muted: #5a5a5a;
    /* chữ phụ */
    --surface: #f5f5f5;
    /* nền xám */
    --blush: #fff2f2;
    /* nền hồng nhạt */
    --blush-2: #fef4f1;
    --line: #e7e7e7;

    --container: 1232px;
    /* Nền của thẻ/khung nổi trên nền trang. Tách thành biến vì chế độ tối phải đổi
       đồng loạt: trước đây mỗi khối ghi cứng #fff nên bật tối là thẻ vẫn trắng trong
       khi chữ đã chuyển sang sáng — trắng trên trắng, mất chữ. */
    --card: #fff;
    --header-h: 80px;
    /* khớp td-h-[80px] của .vntp-header — sửa một chỗ phải sửa cả hai */
    /* trừ 2x16 padding còn đúng 1200 nội dung, mép trái x=83 ở khổ 1366 */
    --radius-lg: 20px;
    --radius-md: 15px;
    --radius-sm: 10px;
}

/* Theme cũ đặt body nền tối + chữ trắng (home.css), VNTP là nền sáng */
body {
    /* Body dùng SF Pro Display, heading dùng SVN-Poppins — đúng như file Figma.
       Đã thử cho body dùng chung SVN-Poppins (15/08/2026) rồi trả lại: không vỡ layout
       nhưng chữ dày và rộng hơn nên nhìn lệch so với bản thiết kế. */
    font-family: var(--font-secondary);
    color: var(--ink);
    background-color: #fff;
    font-size: 15px;
    line-height: 1.6;
    max-width: 1366px;
    margin: 0px auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
    font-family: var(--font-family);
    color: var(--ink);
}

/* Khung nội dung chuẩn — mọi section dùng chung, tự co ở màn nhỏ */
.vntp-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 16px;
}

/* ==========================================================================
   Hiệu ứng theo yêu cầu KH (bảng DTLT VNTP, mục 1 & 2)
   ========================================================================== */

/* --- Màn hình chờ logo: 3s, chỉ lần đầu mỗi phiên --------------------- */
.vntp-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.vntp-loading.is-done {
    opacity: 0;
    visibility: hidden;
}

/* Chặn cuộn trang trong lúc màn chờ hiển thị */
.vntp-loading-open,
.vntp-loading-open body {
    overflow: hidden;
}

.vntp-loading__logo {
    position: relative;
    width: 240px;
    max-width: 60vw;
    overflow: hidden;
    animation: vntp-logo-in 0.8s ease both;
}

.vntp-loading__logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Vệt sáng quét ngang logo — hiệu ứng "tráng gương" khách yêu cầu.
   Dùng chung cho 3 nơi: logo màn chờ, logo header, logo footer.
   Logo màn chờ tự quét ngay; header/footer chờ class .is-shining do JS gắn khi
   logo lọt vào tầm nhìn (xem trangGuong() trong assets/js/vntp.js) — gắn cứng vào
   CSS thì header quét xong trong lúc màn chờ còn che, người dùng không thấy gì. */
.vntp-shine {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.vntp-loading__logo::after,
.vntp-shine.is-shining::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: vntp-shine 1.6s ease-in-out 0.5s 2;
}

/* Người dùng bật "giảm chuyển động" thì bỏ hẳn vệt quét, giống cách màn chờ tự tắt */
@media (prefers-reduced-motion: reduce) {

    .vntp-loading__logo::after,
    .vntp-shine.is-shining::after {
        animation: none;
        display: none;
    }
}

.vntp-loading__bar {
    position: absolute;
    bottom: calc(50% - 90px);
    width: 200px;
    height: 3px;
    border-radius: 3px;
    background: var(--blush);
    overflow: hidden;
}

.vntp-loading__bar span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform-origin: left;
    animation: vntp-bar 1.5s linear forwards;
}

@keyframes vntp-logo-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes vntp-shine {
    to {
        transform: translateX(120%);
    }
}

@keyframes vntp-bar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* --- Hiện dần khi cuộn tới -------------------------------------------- */
/* Chỉ ẩn khi thẻ <html> có lớp .co-js — lớp này do đoạn script đầu <head> gắn vào.
   Không có JS (chặn script, lỗi mạng, vntp.js hỏng) thì lớp không tồn tại, luật ẩn
   không áp, nội dung hiện bình thường. Trước đây ẩn vô điều kiện: JS chết là cả bài
   viết biến mất mà không ai biết vì sao. */
.co-js .vntp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.co-js .vntp-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Trễ dần cho các phần tử cùng hàng, tạo cảm giác nối tiếp */
.vntp-reveal[data-delay="1"] {
    transition-delay: 0.12s;
}

.vntp-reveal[data-delay="2"] {
    transition-delay: 0.24s;
}

.vntp-reveal[data-delay="3"] {
    transition-delay: 0.36s;
}

.vntp-reveal[data-delay="4"] {
    transition-delay: 0.48s;
}

.vntp-reveal[data-delay="5"] {
    transition-delay: 0.6s;
}

/* --- Nút "Nhận tư vấn" nhấp nháy -------------------------------------- */
.vntp-blink {
    animation: vntp-blink 2s ease-in-out infinite;
}

@keyframes vntp-blink {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 79, 13, 0.55);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(255, 79, 13, 0);
    }
}

/* --- Xoay icon khi rê vào (6 mục ưu điểm) ----------------------------- */
.vntp-adv-card .vntp-adv-icon {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.vntp-adv-card:hover .vntp-adv-icon {
    transform: rotateY(180deg);
}

/* --- Popup tư vấn ------------------------------------------------------ */
.vntp-popup {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 15, 20, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vntp-popup.is-open {
    opacity: 1;
    visibility: visible;
}

.vntp-popup__box {
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--card);
    border-radius: var(--radius-md);
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s ease;
}

.vntp-popup.is-open .vntp-popup__box {
    transform: none;
}

/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion: reduce) {

    .vntp-reveal,
    .vntp-blink,
    .vntp-loading__logo::after,
    .vntp-adv-card .vntp-adv-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- Mảng cam gradient ------------------------------------------------
   Dùng thay cho td-bg-primary ở nút và icon. Vì là background-image nên
   hover không đổi được bằng background-color -> làm tối bằng filter.      */
.vntp-grad {
    background-image: var(--grad-primary);
    transition: filter 0.2s ease;
}

.vntp-grad:hover {
    filter: brightness(0.93);
}

/* Chữ gradient: chỉ dùng cho tiêu đề lớn, cỡ nhỏ thì 2 điểm dừng gần như
   không phân biệt được mà lại mất khả năng bôi đen chọn chữ. */
.vntp-grad-text {
    background-image: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Dấu phụ CHỒNG của tiếng Việt (Ẫ, Ố, Ữ) vươn cao hơn chữ hoa thường. Với
       background-clip:text, nền chỉ được tô TRONG hộp của phần tử — phần dấu vượt
       lên trên hộp dòng không có nền để lộ ra nên bị cắt phẳng ngang.
       Chữ thường (dùng color) không dính vì glyph vẫn vẽ tràn ra ngoài hộp được.
       1.05 quá chật cho tiêu đề 65px; 1.35 cho dấu chồng thoải mái, cũng trùng
       ngưỡng --td-lh-tight của bộ token admin ("sàn cho chữ hoa có dấu").
       Đặt ở đây chứ không dùng lớp tiện ích: lỗi thuộc về chính background-clip
       của lớp này, nên mọi chỗ dùng .vntp-grad-text đều phải có sẵn khoảng thở. */
    line-height: 1.35;
}

/* ── Bảng giá hosting ─────────────────────────────────────────────────────── */

/* Tab nhóm hosting. Trạng thái chọn phải là nền gradient chứ không chỉ đổi màu
   chữ: cùng một hàng nút nằm trên nền trắng, chỉ đổi màu chữ thì ở cỡ 15px
   người dùng phải so sánh hai sắc cam mới biết đang ở tab nào. */
.vntp-tab-btn {
    cursor: pointer;
    white-space: nowrap;
}

.vntp-tab-btn:hover {
    background-color: var(--blush-2);
}

.vntp-tab-btn.is-active,
.vntp-tab-btn.is-active:hover {
    background-image: var(--grad-primary);
    color: #fff;
}

/* Accordion hỏi đáp dựng bằng <details>. Bỏ mũi tên mặc định của trình duyệt
   (khác nhau giữa Safari/Chrome/Firefox) và tự vẽ mũi tên xoay. */
.vntp-faq>summary {
    list-style: none;
}

.vntp-faq>summary::-webkit-details-marker {
    display: none;
}

.vntp-faq[open]>summary {
    color: var(--primary-color);
}

.vntp-faq[open] .vntp-faq-icon {
    transform: rotate(180deg);
}

.vntp-faq-body>*:last-child {
    margin-bottom: 0;
}

.vntp-faq-body ul,
.vntp-faq-body ol {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.vntp-faq-body li {
    list-style: disc;
    margin-bottom: 0.25rem;
}

/* ── Hero trang chủ ───────────────────────────────────────────────────────── */

/* Kéo hero lên nằm dưới header dính rồi đệm lại đúng bấy nhiêu: nền hero chạy
   lên sau header, còn nội dung và mọi khối phía dưới giữ nguyên vị trí cũ.

   PHẢI dùng margin-top âm, KHÔNG dùng top âm. top âm với position:relative chỉ dời
   phần tử về mặt thị giác mà vẫn giữ nguyên chỗ nó chiếm trong dòng chảy; cộng thêm
   padding-top bù thì hộp phình ra 80px nữa, đẩy khối kế tiếp xuống — đo được đúng
   80px hở giữa đáy hero và đỉnh .vntp-eco. margin âm thì thu lại chỗ thật, nên
   margin -80 + padding +80 triệt tiêu nhau: nội dung đứng yên, không sinh khe.

   Trước đây viết inline trên thẻ <section>. Đưa vào đây để số 80 chỉ còn một
   nguồn (--header-h) thay vì rải rác trong markup.

   position:relative khai lại ở đây cho class tự đứng được, không lệ thuộc vào
   việc thẻ có còn giữ lớp td-relative hay không. */
.vntp-hero {
    position: relative;
    margin-top: calc(var(--header-h) * -1);
    padding-top: var(--header-h);
}

.vntp-eco {
    background: url(../images/vntp/eco-bg.png) bottom right no-repeat;
}

.vntp-adv {
    background: url(../images/vntp/adv-bg.png) bottom right no-repeat;
    background-size: cover;
}


.vntp-connect {
    background: url(../images/vntp/connect-bg.png) bottom right no-repeat;
    background-size: cover;
}

/* ── Banner CTA (đầu footer) ──────────────────────────────────────────────── */

/* Toà nhà VNTP trước đây là thẻ <img> nằm ở cột thứ 3, nay là ẢNH NỀN. Đổi như vậy
   thì mất hai thứ mà <img> tự lo, phải bù lại bằng CSS:

   1. Không còn phần tử nào chiếm chỗ -> nội dung tràn sang phải và đè lên toà nhà.
      Bù bằng cột thứ 3 để trống trong lưới (xem vntp-cta.blade.php).
   2. Không còn kích thước nội tại -> phải tự khai. KHÔNG dùng cover: ảnh tỉ lệ 4,76
      còn panel chỉ ~3,8 nên cover sẽ phóng to rồi cắt mất hai bên toà nhà.
      auto 100% giữ đúng tỉ lệ và cho toà nhà cao bằng panel, đúng như thiết kế.

   Đường dẫn tương đối từ assets/css/ nên không cần helper assets() như lúc viết inline. */
.vntp-cta-panel {
    background-image: url(../images/vntp/office-bg.png);
    background-repeat: no-repeat;
    /* Giữ kích thước gốc của ảnh. KHÔNG dùng cover (phóng rồi cắt mất hai bên toà nhà)
	   và cũng KHÔNG dùng `auto 100%`: panel thực tế cao ~439px trong khi ảnh vẽ cho khổ
	   273px, ép cao bằng panel là phóng 1,6 lần và toà nhà tràn ra ngoài.
	   Để nguyên cỡ gốc thì phần toà nhà rộng ~452px trên panel 1200px = 37,7%, khớp
	   tỉ lệ ~34% của bản thiết kế.
	   origin: border-box để ảnh chạm mép phải thật; mặc định padding-box sẽ thụt vào 40px. */
    background-position: right;
    background-size: auto 100%;
    background-color: rgba(231, 31, 2, .5);
    background-origin: border-box;
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    min-height: 275px;
}

/* Dưới lg lưới xếp 1 cột: toà nhà sẽ nằm ngay sau chữ và thẻ trắng, vừa khó đọc vừa
   tải thêm 240KB không để làm gì. Tắt hẳn ảnh nền ở khổ nhỏ. */
@media (max-width: 1023.98px) {
    .vntp-cta-panel {
        background-image: none;
        min-height: 0;
        padding: 1.5rem;
    }
}

/* ==========================================================================
   Menu mobile — panel phủ toàn màn hình
   Viết CSS thuần thay vì lớp Tailwind: file layout.css chỉ build những biến thể
   đang được dùng, thêm lớp mới mà quên build lại là style nằm im không hiểu vì sao.
   ========================================================================== */
.vntp-mmenu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(20, 20, 20, .35);
}

.vntp-mmenu.is-open {
    display: block;
}

/* Khoá cuộn nền khi menu mở, tránh cuộn xuyên qua panel */
body.vntp-mmenu-open {
    overflow: hidden;
}

.vntp-mmenu__panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(100%, 460px);
    background: var(--card);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: vntp-mmenu-vao .22s ease-out;
}

@keyframes vntp-mmenu-vao {
    from {
        transform: translateX(4%);
        opacity: .6;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vntp-mmenu__panel {
        animation: none;
    }
}

.vntp-mmenu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.vntp-mmenu__logo img {
    height: 46px;
    width: auto;
    display: block;
}

.vntp-mmenu__close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
}

.vntp-mmenu__close svg {
    width: 26px;
    height: 26px;
}

.vntp-mmenu__cta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem;
    padding: .5rem .5rem .5rem 1rem;
    background: var(--blush);
    border-radius: var(--radius-md);
}

.vntp-mmenu__tel {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.vntp-mmenu__tel svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--primary-color);
}

.vntp-mmenu__btn {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--grad-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.vntp-mmenu__list {
    padding: 0 1.25rem 2rem;
}

.vntp-mmenu__item+.vntp-mmenu__item {
    border-top: 1px solid var(--line);
}

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

.vntp-mmenu__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: .875rem 0;
    color: var(--ink);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
}

.vntp-mmenu__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--blush);
    color: var(--primary-color);
}

.vntp-mmenu__icon svg {
    width: 24px;
    height: 24px;
}

.vntp-mmenu__toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    transition: transform .2s ease;
}

.vntp-mmenu__toggle svg {
    width: 22px;
    height: 22px;
}

.vntp-mmenu__item.is-open .vntp-mmenu__toggle {
    transform: rotate(180deg);
}

/* Danh mục con: ẩn mặc định, bung tại chỗ khi bấm mũi tên */
.vntp-mmenu__sub {
    display: none;
    padding: 0 0 .75rem 60px;
}

.vntp-mmenu__item.is-open .vntp-mmenu__sub {
    display: block;
}

.vntp-mmenu__sublink {
    display: block;
    padding: .5rem 0;
    color: var(--muted);
    text-decoration: none;
    font-size: 15px;
}

.vntp-mmenu__sublink:hover {
    color: var(--primary-color);
}

/* Tên mục dùng làm nút mở (mục không có trang riêng): trả <button> về đúng dáng của
   <a> bên cạnh, nếu không nó thừa hưởng nền xám và chữ căn giữa mặc định của trình duyệt. */
.vntp-mmenu__mo {
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

/* Nhãn nhóm trong danh sách con — chỉ để phân cụm, không bấm được */
.vntp-mmenu__subnhom {
    display: block;
    margin-top: .75rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.vntp-mmenu__subnhom:first-child {
    margin-top: 0;
}

/* Icon trong menu chính (desktop). Cỡ và màu để trong CSS thuần thay vì lớp Tailwind
   vì các biến thể td-w-[18px] chưa được build ra layout.css.
   currentColor: icon đổi màu cùng chữ khi rê chuột, không phải khai riêng trạng thái hover. */
.vntp-nav-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    color: currentColor;
    opacity: .85;
}

.vntp-nav-icon svg {
    width: 100%;
    height: 100%;
}

.vntp-nav-link:hover .vntp-nav-icon {
    opacity: 1;
}

/* Khổ 1024–1280px: header đã kín chỗ vì có cả hotline lẫn nút "Nhận tư vấn",
   thêm 6 icon nữa dễ đẩy menu tràn. Thu nhỏ khoảng cách và icon ở dải này. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .vntp-nav {
        gap: 1rem;
    }

    .vntp-nav-icon {
        width: 16px;
        height: 16px;
        margin-right: 0;
    }

    .vntp-nav-link {
        font-size: 15px;
    }
}

/* Bảng giá tên miền — trang /ten-mien */
.vntp-bang-gia {
    border-collapse: collapse;
    min-width: 720px;
    /* dưới mức này 5 cột bị bóp méo, để khung cha cuộn ngang */
}

.vntp-bang-gia th,
.vntp-bang-gia td {
    padding: 14px 16px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}

.vntp-bang-gia th {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.vntp-bang-gia td {
    font-size: 15px;
    color: var(--muted);
}

.vntp-bang-gia th.td-text-left,
.vntp-bang-gia td.td-text-left {
    text-align: left;
}

.vntp-bang-gia tbody tr:last-child th,
.vntp-bang-gia tbody tr:last-child td {
    border-bottom: 0;
}

.vntp-bang-gia tbody tr:hover {
    background: var(--blush-2);
}

/* Nội dung bài giới thiệu do khách nhập trong CKEditor */
.vntp-noi-dung p {
    margin-bottom: 1rem;
}

.vntp-noi-dung p:last-child {
    margin-bottom: 0;
}

/* Nền đầu trang trong (trang tên miền, trang kết quả...).
   Viết CSS thuần thay vì lớp Tailwind: layout.css chỉ build những biến thể có sẵn trong
   mã, nên muốn tự chọn mã màu thì phải khai ở đây. Hồng đậm ở trên, nhạt về trắng ở dưới
   để nối liền mạch với section bảng giá (section đó bắt đầu bằng trắng). */
.vntp-dau-trang {
    background: linear-gradient(180deg, #FDE4DC 0%, #FFF1EC 45%, #fff 100%);
}

/* ==========================================================================
   Trang kết quả tra cứu tên miền — cột lọc đuôi + danh sách thẻ kết quả
   Viết CSS thuần chứ không dùng lớp td-: layout.css là file build sẵn, chỉ chứa những
   biến thể Tailwind đang xuất hiện trong mã lúc build. Khối này cần nhiều giá trị màu và
   kích thước riêng nên khai thẳng ở đây, sửa được ngay mà không phải chạy lại tailwindcss.
   ========================================================================== */
.vntp-kq {
    background: linear-gradient(180deg, #fff 0%, #FFF6F2 100%);
    padding: 32px 0 48px;
}

.vntp-kq__luoi {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.vntp-kq__bao {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--blush);
    font-size: 14px;
    color: var(--ink);
}

.vntp-kq__chan {
    margin: 28px 0 0;
    font-size: 14px;
    color: var(--muted);
    text-align: center;
}

.vntp-kq__chan a {
    color: var(--primary-color);
    text-decoration: none;
}

/* ── Cột lọc ─────────────────────────────────────────────────────────────── */
.vntp-loc__nhom {
    margin-bottom: 28px;
}

/* Tiêu đề nhóm: chữ hoa, gạch chân hết bề ngang cột như bản thiết kế */
.vntp-loc__tieude {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink);
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
}

.vntp-loc__luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.vntp-loc__o {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}

/* accent-color đủ để ô tích mang màu thương hiệu mà vẫn giữ ô gốc của trình duyệt —
   ô tự vẽ lại bằng CSS hay mất tiêu điểm bàn phím và trạng thái cho trình đọc màn hình. */
.vntp-loc__o input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* ── Thẻ kết quả ─────────────────────────────────────────────────────────── */
.vntp-dm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding: 16px 20px;
    border-left: 5px solid var(--line);
    border-radius: 6px;
    background: #F7F9FA;
    transition: border-color 0.2s ease;
}

.vntp-dm[hidden] {
    display: none;
}

.vntp-dm__tt {
    min-width: 0;
}

.vntp-dm__ten {
    margin: 0 0 4px;
    font-family: var(--font-family);
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    word-break: break-all;
}

.vntp-dm__gia,
.vntp-dm__loi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

.vntp-dm__gia strong {
    color: #D32F2F;
    font-weight: 700;
}

.vntp-dm__duytri {
    font-size: 13px;
    color: var(--muted);
}

.vntp-dm__loi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #D32F2F;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    color: #D32F2F;
}

.vntp-dm__nut {
    flex: 0 0 auto;
}

.vntp-dm__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, background-color 0.2s ease;
}

/* Nút đăng ký dùng gradient cam thương hiệu, giống mọi CTA khác của trang. Viền trái và
   tên miền vẫn xanh lá để báo "còn trống" — trạng thái và hành động tách màu, khách vẫn
   quét được thẻ nào mua được mà nút không lẫn với nhãn trạng thái. */
.vntp-dm__btn--dk {
    background-image: var(--grad-primary);
    color: #fff;
}

.vntp-dm__btn--dk:hover {
    filter: brightness(0.93);
}

.vntp-dm__btn--xem {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

.vntp-dm__btn--xem:hover {
    background: var(--surface);
}

/* Trạng thái: chờ kiểm tra (mặc định), còn trống, đã có chủ.
   Nút và dòng chữ do JS bật/tắt bằng thuộc tính hidden. */
.vntp-dm.is-cho {
    border-left-color: #C9D2D8;
    opacity: 0.75;
}

.vntp-dm.is-trong {
    border-left-color: #21A65A;
}

.vntp-dm.is-trong .vntp-dm__ten {
    color: #1E8E4E;
}

.vntp-dm.is-het {
    border-left-color: #E03131;
}

/* ── Popup thông tin WHOIS ───────────────────────────────────────────────────
   Dùng chung khung .vntp-popup / .vntp-popup__box với popup tư vấn, chỉ nới rộng hộp và
   khai phần bảng. Bảng dựng bằng grid 2 cột chứ không phải <table>: ở khổ điện thoại cần
   xếp nhãn trên, giá trị dưới — <table> không xuống dòng kiểu đó được nếu không đổi
   display, mà đổi display của table thì mất luôn canh cột.                            */
.vntp-whois {
    max-width: 820px;
}

.vntp-whois__dau {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}

.vntp-whois__tieude {
    margin: 0;
    font-family: var(--font-family);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    word-break: break-all;
}

.vntp-whois__x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vntp-whois__x:hover {
    background: var(--surface);
    color: var(--primary-color);
}

.vntp-whois__than {
    padding: 8px 24px;
}

.vntp-whois__dong {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
}

.vntp-whois__dong:last-child {
    border-bottom: 0;
}

.vntp-whois__nhan {
    font-weight: 600;
    color: var(--ink);
}

/* pre-line: máy chủ tên miền in mỗi cái một dòng, giá trị gửi về ngăn bằng ký tự xuống dòng */
.vntp-whois__gt {
    white-space: pre-line;
    color: var(--ink);
    word-break: break-word;
}

/* Bản whois thô — hiện khi không tách được nhãn nào, để nhân viên còn đọc được */
.vntp-whois__tho {
    max-height: 50vh;
    overflow: auto;
    margin: 14px 0;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.vntp-whois__bao {
    margin: 20px 0;
    font-size: 15px;
    color: var(--muted);
}

.vntp-whois__chan {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px 20px;
}

.vntp-whois__nut {
    height: 42px;
    padding: 0 26px;
    border: 0;
    border-radius: 6px;
    /* Xám thép chứ không phải cam thương hiệu: đây là nút đóng, không phải hành động chính
       của popup — để cam thì nó tranh chú ý với nút Đăng ký ngoài danh sách. */
    background: #5A6A78;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.vntp-whois__nut:hover {
    filter: brightness(1.1);
}

@media (max-width: 575.98px) {
    .vntp-whois__dong {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

@media (max-width: 1023.98px) {
    .vntp-kq__luoi {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .vntp-loc__luoi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {

    /* Khổ điện thoại: thẻ xếp dọc, nút kéo hết bề ngang cho dễ chạm */
    .vntp-dm {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .vntp-dm__nut,
    .vntp-dm__btn {
        width: 100%;
    }

    .vntp-loc__luoi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Mega-menu "Dịch vụ" — panel rộng dưới thanh menu, mỗi cột một danh mục cấp 1
   Viết CSS thuần: panel cần rộng hơn mục menu chứa nó và căn giữa theo màn hình,
   những giá trị đó không có sẵn trong layout.css.
   ========================================================================== */
.vntp-nav-item {
    position: static;
    /* để panel căn theo header, không bó trong bề rộng của mục menu */
}

.vntp-mega {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(6px);
    width: min(1160px, calc(100vw - 32px));
    padding: 24px;
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .13);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 60;
}

/* Mở bằng rê chuột (desktop) hoặc bằng class .is-open do JS gắn (bấm/cảm ứng) */
.td-group:hover>.vntp-mega,
.vntp-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.vntp-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Vạch ngăn giữa các cột, bỏ ở cột cuối */
.vntp-mega__cot+.vntp-mega__cot {
    border-left: 1px solid var(--line);
    padding-left: 24px;
}

.vntp-mega__dau {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}

.vntp-mega__dau strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.vntp-mega__dau:hover strong {
    color: var(--primary-color);
}

.vntp-mega__dau-mota {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.vntp-mega__dau-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--blush);
    color: var(--primary-color);
}

.vntp-mega__dau-icon svg {
    width: 20px;
    height: 20px;
}

.vntp-mega__bai {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vntp-mega__muc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s ease;
}

.vntp-mega__muc:hover {
    background: var(--blush-2);
}

.vntp-mega__anh {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--blush);
    color: var(--primary-color);
}

.vntp-mega__anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vntp-mega__anh svg {
    width: 20px;
    height: 20px;
}

.vntp-mega__chu strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.vntp-mega__muc:hover .vntp-mega__chu strong {
    color: var(--primary-color);
}

.vntp-mega__chu span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
    /* Gói gọn 2 dòng: mô tả dài làm các cột lệch cao thấy rõ */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vntp-mega__trong {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

/* Panel chỉ dành cho desktop — dưới lg đã có menu mobile riêng */
@media (max-width: 1023.98px) {
    .vntp-mega {
        display: none;
    }
}

/* ==========================================================================
   Thẻ "Hệ sinh thái / Dịch vụ" ở trang chủ — khung trắng hiện khi rê chuột
   ========================================================================== */
.vntp-eco-card {
    position: relative;
}

/* Thẻ cao hơn ở khổ desktop: khung trắng cao khoảng 240px, thẻ phải đủ cao để
   phần ảnh 3D còn nhìn thấy khi khung trượt lên, nếu không hover là mất hẳn ảnh. */
@media (min-width: 1024px) {
    .vntp-eco-card {
        min-height: 560px;
    }
}

/* Lớp phủ để bấm cả thẻ. z-index thấp hơn khung trắng nên không chặn link bên trong. */
.vntp-eco-phu {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Ảnh giữ nguyên kích thước, neo SÁT DƯỚI tiêu đề (xem td-items-start trong blade)
   thay vì neo đáy thẻ. Khung trắng trượt lên chỉ che phần dưới ảnh, phần trên và tiêu
   đề vẫn thấy — trước đây ảnh nằm đáy nên bị che sạch. */

.vntp-eco-panel {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 5;
    padding: 14px;
    background: var(--card);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -8px 26px rgba(0, 0, 0, .12);
    transform: translateY(100%);
    transition: transform .3s ease;
}

.vntp-eco-card:hover .vntp-eco-panel,
.vntp-eco-card:focus-within .vntp-eco-panel {
    transform: translateY(0);
}

.vntp-eco-panel__nhan {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.vntp-eco-panel__ds {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

/* Mỗi mục là một ô riêng có viền — đúng ý "đóng khung các bài viết" */
.vntp-eco-panel__o {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.vntp-eco-panel__o:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(255, 79, 13, .16);
}

.vntp-eco-panel__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grad-primary);
    color: #fff;
}

.vntp-eco-panel__icon svg {
    width: 17px;
    height: 17px;
}

.vntp-eco-panel__ten {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    /* Chốt 2 dòng: tiêu đề dài hơn sẽ đẩy khung cao lên và che mất ảnh */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vntp-eco-panel__mui {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--primary-color);
}

.vntp-eco-panel__nut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    border-radius: 60px;
    background: var(--grad-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.vntp-eco-panel__nut svg {
    width: 18px;
    height: 18px;
}

/* Máy không có hover (điện thoại, tablet): khung nằm sẵn trong thẻ, không trượt.
   Nếu vẫn để dạng trượt thì trên các máy này không có cách nào mở ra. */
@media (hover: none) {
    .vntp-eco-panel {
        position: static;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        margin-top: 12px;
    }

    /* Lớp phủ bấm-cả-thẻ gây khó chọn từng mục trên cảm ứng -> tắt, dùng link trong khung */
    .vntp-eco-phu {
        display: none;
    }
}

/* ==========================================================================
   Nhúng widget mạng xã hội (khối "Kết nối cùng VNTP")
   ========================================================================== */
/* Ảnh chụp nằm dưới, iframe phủ lên. Iframe bị chặn thì trong suốt -> thấy ảnh. */
.vntp-nhung {
    position: relative;
}

.vntp-nhung__duphong {
    display: block;
}

.vntp-nhung__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
}

/* Thẻ blockquote của TikTok: ẩn tới khi script thay thành iframe thật
   (JS gắn .is-ready). Không ẩn thì khách thấy đoạn chữ thô của blockquote. */
.vntp-tt-embed {
    display: none;
    margin: 0;
}

.vntp-tt-embed.is-ready {
    display: block;
}

.vntp-tt-embed iframe {
    width: 100% !important;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Thanh hotline chân trang — dính đáy màn hình, chạy theo trang khi cuộn
   ========================================================================== */
.vntp-hotline-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--grad-primary);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
}

/* Chừa chỗ để thanh không che mất phần cuối trang. Đặt trên <body> chứ không
   dùng margin ở footer: nhiều trang ngắn hơn màn hình, footer không chạm đáy. */
body {
    padding-bottom: var(--vntp-hotline-h, 0px);
}

/* Các số nằm SÁT nhau rồi căn giữa thanh (yêu cầu khách). Trước đây chia 6 cột đều
   nhau: mỗi cột 200px mà chữ chỉ chiếm ~144px, dư ~56px trống trong từng ô nên nhìn
   như các số bị đẩy xa nhau. Flex thì mỗi mục vừa đúng bề rộng chữ.
   Bỏ luôn con số 6 cứng: số hotline do khách nhập trong admin, thêm/bớt một số là
   lưới cũ lệch ngay. */
.vntp-hotline-bar__ds {
    display: flex;
    justify-content: center;
}

.vntp-hotline-bar__muc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #fff;
    text-decoration: none;
}

.vntp-hotline-bar__muc+.vntp-hotline-bar__muc {
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.vntp-hotline-bar__muc svg {
    flex: 0 0 auto;
}

.vntp-hotline-bar__ten {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    /* tên in đậm */
    line-height: 1.2;
}

.vntp-hotline-bar__so {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

/* Desktop: một dải xếp 6 cột, dải thứ hai chỉ để chạy hiệu ứng nên ẩn đi. */
.vntp-hotline-bar__ds+.vntp-hotline-bar__ds {
    display: none;
}

/* Điện thoại: 6 số nhét vừa một màn hình thì chữ nhỏ tới mức không đọc nổi, còn xếp
   3 cột 2 hàng thì thanh cao gấp đôi và ăn mất phần cuối trang. Cho chạy ngang, mỗi
   lúc hiện 2 số.

   Chạy bằng animation chứ KHÔNG mở lại overflow-x: auto. Thanh này dính đáy màn hình
   nên luôn nằm dưới ngón tay: cho kéo tay thì người dùng vuốt trang là trúng nó và
   tưởng cả trang xê dịch ngang — đúng lỗi đã phải bỏ cuộn ngang lần trước. overflow
   ẩn nên không còn gì kéo được, hiệu ứng tự chạy.

   Vòng lặp liền mạch nhờ hai dải giống hệt: trượt hết đúng một dải (-50% bề rộng
   khung) rồi nhảy về 0, khung lúc đó trông y như lúc bắt đầu. */
@media (max-width: 1023.98px) {
    .vntp-hotline-bar {
        overflow: hidden;
    }

    .vntp-hotline-bar__khung {
        display: flex;
        width: max-content;
        padding-inline: 0;
        max-width: none;
        margin-inline: 0;
        animation: vntp-hotline-chay 18s linear infinite;
        /* Chặn dưới 2 màn hình = 2 dải, phòng khi khách chỉ khai 2-3 số: dải ngắn hơn
           màn hình thì lúc chạy sẽ hở một mảng trống trôi qua. Đủ số thì bề rộng thật
           đã vượt mức này nên chặn dưới không đụng tới. */
        min-width: 200%;
    }

    .vntp-hotline-bar__ds {
        display: flex;
        /* Chỉ dàn đều khi bị chặn dưới kéo rộng ra; đủ số thì các mục vẫn sát nhau */
        flex: 1 0 auto;
        justify-content: space-around;
    }

    .vntp-hotline-bar__ds+.vntp-hotline-bar__ds {
        display: flex;
    }

    /* Rộng vừa đúng chữ để các số sát lại (yêu cầu khách). Trước đây ép 50vw cho luôn
       thấy đúng 2 số một lúc, đổi lại mỗi số phải mang theo ~50px trống bên phải. */
    .vntp-hotline-bar__muc {
        width: auto;
        gap: 6px;
        padding: 6px 12px;
    }

    .vntp-hotline-bar__ten {
        font-size: 11px;
    }

    .vntp-hotline-bar__so {
        font-size: 12px;
    }

    /* Dừng khi đang chạm vào thanh, để bấm gọi không bị số trôi khỏi ngón tay */
    .vntp-hotline-bar:active .vntp-hotline-bar__khung {
        animation-play-state: paused;
    }
}

@keyframes vntp-hotline-chay {
    from {
        transform: translateX(0);
    }

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

/* Người bật "giảm chuyển động" trong hệ điều hành: đứng yên, lùi về lưới 2 cột để
   vẫn đọc được hết số. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
    .vntp-hotline-bar__khung {
        display: block;
        width: auto;
        /* Gỡ chặn dưới 200% của bản chạy ngang: đứng yên mà rộng gấp đôi màn hình thì
           nửa sau bị overflow:hidden của thanh cắt mất, chỉ còn thấy 1 số. */
        min-width: 0;
        animation: none;
    }

    .vntp-hotline-bar__ds {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vntp-hotline-bar__ds+.vntp-hotline-bar__ds {
        display: none;
    }

    .vntp-hotline-bar__muc {
        width: auto;
    }
}

/* Bản đồ trang Liên hệ. Mã nhúng khách dán từ Google Maps thường kèm sẵn
   width/height nhỏ; ép lại ở đây để bản đồ luôn rộng hết khung và đủ cao,
   không phụ thuộc vào con số trong đoạn mã dán vào. */
.vntp-map iframe,
.vntp-map object,
.vntp-map embed {
    display: block;
    width: 100% !important;
    height: 420px !important;
    border: 0;
}

@media (min-width: 1024px) {

    .vntp-map iframe,
    .vntp-map object,
    .vntp-map embed {
        height: 520px !important;
    }
}

/* Biến thể tràn hết bề ngang: dùng ở trang Liên hệ.
   Bản đồ đặt ngoài .vntp-container nên đã rộng bằng body; display:block để bỏ
   khoảng trắng vài px mà trình duyệt chèn dưới iframe inline. */
.vntp-map--full {
    display: block;
    line-height: 0;
}

/* Nút nổi góc dưới bên phải bản đồ. Bản đồ tràn viền nên không còn chỗ đặt chữ
   bên dưới; nút nổi vừa gọn vừa luôn nằm trong tầm mắt. */
.vntp-map__nut {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: background-color .2s, color .2s;
}

.vntp-map__nut svg {
    color: var(--primary-color);
    transition: color .2s;
}

.vntp-map__nut:hover {
    background: var(--primary-color);
    color: #fff;
}

.vntp-map__nut:hover svg {
    color: #fff;
}

/* Màn nhỏ: bản đồ hẹp, nút full ngang cho dễ bấm bằng ngón tay */
@media (max-width: 575px) {
    .vntp-map__nut {
        right: 12px;
        bottom: 12px;
        left: 12px;
        justify-content: center;
    }
}

/* ==========================================================================
   Chế độ tối — bật bằng thuộc tính data-theme="dark" trên thẻ <html>
   Tailwind của dự án map ink/muted/surface/blush/line sang biến CSS (xem
   tailwind.config.js), nên chỉ cần đổi giá trị biến là phần lớn giao diện theo.
   Ba nhóm phải đè riêng vì ghi cứng màu: nền trắng, gradient hồng, và nền body.
   ========================================================================== */
[data-theme="dark"] {
    --card: #171C26;
    --ink: #ECEDEF;
    --muted: #A3AAB8;
    --surface: #131720;
    --blush: #241B1B;
    --blush-2: #1E1718;
    --line: #2B313D;
}

[data-theme="dark"] body {
    background: #0E1117;
    color: var(--ink);
}

/* 39 chỗ dùng td-bg-white (thẻ, khung, ô) — đổi sang nền thẻ tối */
[data-theme="dark"] .td-bg-white {
    background-color: #171C26 !important;
}

/* Các section nền gradient hồng/xám nhạt: tắt gradient, dùng nền tối phẳng */
[data-theme="dark"] [class*="td-bg-[linear-gradient"],
[data-theme="dark"] .vntp-dau-trang {
    background-image: none !important;
    background-color: #0E1117 !important;
}

/* Viền trắng mờ và chữ trắng/85 trong các khối vốn đã tối thì giữ nguyên,
   nhưng khung viền sáng trên nền tối cần dịu lại */
[data-theme="dark"] .td-border-line {
    border-color: var(--line) !important;
}

/* Dải đường dẫn (breadcrumb) do style.css của lõi vẽ, ghi cứng nền #ddd và chữ #333.
   Nền xám đó không nằm trong bảng màu VNTP, và ở chế độ tối nó thành một vệt sáng
   nằm chắn ngang trang. Buộc theo token của giao diện để hợp cả hai chế độ. */
.breadCrumbs {
    background: var(--surface) !important;
}

.breadCrumbs ol li,
.breadCrumbs ol li a {
    color: var(--muted) !important;
}

.breadCrumbs ol li a:hover {
    color: var(--primary-color) !important;
}

/* Ô nhập liệu ở chế độ tối. Bootstrap đặt .form-control nền trắng chữ #212529, còn các
   ô dựng bằng Tailwind thì mặc định cũng trắng — để nguyên thì giữa trang tối nổi lên
   mấy ô trắng chói, và khách gõ vào ô tra cứu tên miền là chữ sáng trên nền trắng.
   Gom một luật cho mọi loại ô thay vì sửa từng chỗ. */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #10141C !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--muted) !important;
    opacity: 1;
}

/* Nút chuyển sáng/tối trên thanh menu */
.vntp-nut-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.vntp-nut-theme:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.vntp-nut-theme svg {
    width: 20px;
    height: 20px;
}

/* Hiện đúng một icon theo chế độ đang bật */
.vntp-nut-theme__toi {
    display: none;
}

[data-theme="dark"] .vntp-nut-theme__sang {
    display: none;
}

[data-theme="dark"] .vntp-nut-theme__toi {
    display: block;
}

/* ==========================================================================
   Trang danh sách bài viết — bố cục blog (mẫu mdigi.vn/blog)
   ========================================================================== */
/* Hàng thẻ danh mục 1 cấp ở đầu trang — carousel Embla (components.embla_slide),
   khai config ở templates/news/news.blade.php.

   Bề rộng từng thẻ do embla/style.css tính từ --slide__count nên ở ĐÂY không đặt
   width/flex/gap cho thẻ nữa: đặt thêm chỉ đá nhau với phép tính của thư viện. */
.vntp-blog-dm {
    /* .embla có overflow:hidden, mà overflow cắt ở mép hộp padding -> chừa đệm dọc để
       cú nhấc 2px và bóng đổ lúc rê chuột không bị cắt cụt. Bóng là 0 8px 22px nên
       cần 30px phía dưới; lấy 26px đệm + 14px lề, tổng khoảng cách xuống khối dưới
       vẫn đúng 40px như trước. */
    padding: 8px 0 26px;
    margin-bottom: 14px;
}

/* Ít chuyên mục hơn số ô hiển thị (vd chuyên mục cấp 1 chỉ có 3 chuyên mục con) thì
   gom vào giữa cho cân, thay vì dồn hết sang trái để hở một mảng trống bên phải.
   Khi đủ thẻ để kéo thì nội dung đã rộng hơn khung nên khai báo này tự vô hiệu. */
.vntp-blog-dm .embla__container {
    justify-content: center;
}

.vntp-blog-dm__the {
    /* Phải là border-box: bề rộng embla gán cho .embla__slide đã là bề rộng NHÌN THẤY,
       để content-box thì 32px padding + 2px viền cộng thêm ra ngoài, tổng các thẻ vượt
       khung và thẻ cuối bị hụt. */
    box-sizing: border-box;
    /* Thẻ <a>: không đặt màu là ăn xanh mặc định của trình duyệt */
    color: var(--ink);
    text-decoration: none;
    display: block;
    padding: 18px 16px;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vntp-blog-dm__the:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 22px rgba(255, 79, 13, .12);
    transform: translateY(-2px);
}

.vntp-blog-dm__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 14px;
    background: var(--blush);
    color: var(--primary-color);
}

.vntp-blog-dm__icon svg {
    width: 26px;
    height: 26px;
}

/* Icon khách tự tải lên: co vừa ô 52px, giữ nguyên tỉ lệ file gốc (contain chứ không
   cover — icon bị xén mất rìa là hỏng hình, khác với ảnh bài viết). */
.vntp-blog-dm__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.vntp-blog-dm__the strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.vntp-blog-dm__phu {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--muted);
}

/* Điện thoại: thẻ NHỎ LẠI cho vừa gần 3 thẻ một màn hình (yêu cầu khách: "1 icon nằm
   trong 1 khung to quá"). Bề ngang thẻ là việc của Embla (--slide__count 3 khai ở
   news.blade.php), ở đây chỉ thu nhỏ ruột thẻ.

   Bỏ dòng "Khám phá ngay": thẻ chỉ còn ~110px, nhét thêm dòng chữ phụ là chữ tên
   chuyên mục phải nhỏ tới mức khó đọc. */
@media (max-width: 767.98px) {
    .vntp-blog-dm {
        margin-bottom: 18px;
    }

    .vntp-blog-dm__the {
        padding: 10px 8px;
    }

    .vntp-blog-dm__icon {
        width: 36px;
        height: 36px;
        margin-bottom: 6px;
        border-radius: 10px;
    }

    .vntp-blog-dm__icon svg {
        width: 20px;
        height: 20px;
    }

    .vntp-blog-dm__icon img {
        width: 22px;
        height: 22px;
    }

    .vntp-blog-dm__the strong {
        font-size: 12.5px;
        line-height: 1.3;
    }

    .vntp-blog-dm__phu {
        display: none;
    }
}

/* Hai cột: danh sách bài | xem nhiều nhất */
.vntp-blog {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (min-width: 1024px) {
    .vntp-blog {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

/* Cột phụ trôi theo bài khi cuộn — dùng chung cho trang danh sách Blog và trang chi
   tiết bài viết. Mốc dính lấy đúng của mục lục bài viết (--header-h + 12px) nên mọi
   khối dính đều thẳng hàng dưới header.

   Lưới cha PHẢI có align-items: start (cả hai trang đều đã có): thiếu nó thì ô lưới
   cao bằng cả hàng, sticky không còn khoảng nào để trôi.

   Cao hơn màn hình thì tự cuộn trong khối, không cắt mất mục cuối. Đặt overflow ở
   chính phần tử dính là an toàn — chỉ tổ tiên có overflow mới vô hiệu hoá sticky. */
.vntp-cot-phu {
    position: sticky;
    top: calc(var(--header-h) + 12px);
    z-index: 20;
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto;
}

/* Điện thoại: một cột nên cột phụ nằm dưới nội dung chính, dính lại chỉ tổ che
   phần đang đọc. */
@media (max-width: 1023.98px) {
    .vntp-cot-phu {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

/* Tiêu đề khối có vạch dọc bên trái như mẫu */
.vntp-blog__tieude {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink);
}

.vntp-blog__tieude::before {
    content: "";
    width: 4px;
    height: 26px;
    border-radius: 3px;
    background: var(--primary-color);
}

.vntp-blog__ds {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Mỗi bài: ảnh bên trái, nội dung bên phải */
.vntp-blog__bai {
    display: flex;
    gap: 16px;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.vntp-blog__bai:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

/* Ô ảnh 16:9 — khớp đúng kích thước khai trong admin (640x360) nên ảnh nhập
   đúng khuôn không bị object-fit: cover xén mất rìa. Dùng aspect-ratio thay cho
   height cố định: đổi bề rộng ở breakpoint nào thì chiều cao tự theo, không còn
   chỗ thứ hai phải nhớ sửa cho khớp tỉ lệ. */
.vntp-blog__anh {
    flex: 0 0 auto;
    width: 200px;
    aspect-ratio: 16 / 9;
    /* Thẻ bài là flex nên con mặc định BỊ KÉO CAO bằng thẻ (align-items mặc định là
       stretch). aspect-ratio chỉ tính chiều cao khi height còn 'auto', mà stretch thì
       thắng: bài tiêu đề dài -> thẻ cao -> ô ảnh cao theo, mỗi bài một cỡ. Neo lên đầu
       để ô ảnh luôn đúng 16:9 theo bề rộng, không phụ thuộc nội dung bên cạnh. */
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--blush);
    color: var(--primary-color);
}

.vntp-blog__anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vntp-blog__anh svg {
    width: 34px;
    height: 34px;
}

.vntp-blog__noidung {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tiêu đề gọn ĐÚNG MỘT DÒNG, dài hơn thì cắt bằng "..." (yêu cầu khách, cả PC lẫn
   điện thoại). Cắt ở h3 chứ không ở thẻ <a> bên trong: text-overflow chỉ vẽ dấu "..."
   trên khối, còn <a> là inline nên đặt ở đó không ăn.
   Nhờ vậy mọi thẻ bài cao bằng nhau, ô ảnh 16:9 bên trái cũng hết so le. */
.vntp-blog__noidung h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vntp-blog__noidung h3 a {
    color: var(--ink);
    text-decoration: none;
}

.vntp-blog__noidung h3 a:hover {
    color: var(--primary-color);
}

/* Tóm tắt gọn 2 dòng để các thẻ không cao thấp lệch nhau */
.vntp-blog__noidung p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vntp-blog__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: var(--muted);
}

.vntp-blog__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.vntp-blog__meta svg {
    width: 14px;
    height: 14px;
}

.vntp-blog__dm {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-color);
    /* Nhãn này là thẻ <a> dẫn tới chuyên mục; bỏ gạch chân để trông vẫn như nhãn */
    text-decoration: none;
}

.vntp-blog__dm:hover {
    text-decoration: underline;
}

/* Cột phải */
.vntp-blog__hop {
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.vntp-blog__hop-dau {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--grad-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.vntp-blog__hop-dau svg {
    width: 20px;
    height: 20px;
}

.vntp-blog__hop-than {
    padding: 8px;
}

.vntp-blog__hop-muc {
    /* Thẻ <a>: không đặt màu là ăn xanh mặc định của trình duyệt */
    color: var(--ink);
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s ease;
}

.vntp-blog__hop-muc:hover {
    background: var(--blush-2);
}

.vntp-blog__hop-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--blush);
    color: var(--primary-color);
}

.vntp-blog__hop-icon svg {
    width: 20px;
    height: 20px;
}

.vntp-blog__hop-muc strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.vntp-blog__hop-muc:hover strong {
    color: var(--primary-color);
}

/* Điện thoại: ảnh nhỏ lại cho vừa hàng ngang */
@media (max-width: 639.98px) {
    .vntp-blog__anh {
        width: 116px;
    }

    .vntp-blog__noidung h3 {
        font-size: 15px;
    }

    .vntp-blog__noidung p {
        display: none;
    }
}

/* ==========================================================================
   Điều chỉnh theo phản hồi khách (bản 19/08)
   ========================================================================== */

/* II.6 — Khoảng trống giữa các phần còn rộng.
   Các section trang chủ dùng td-py-16 (64px trên + dưới). Trên điện thoại màn hình
   ngắn, 128px trống giữa hai phần khiến khách phải cuộn dài mới thấy nội dung tiếp
   theo. Bóp lại còn 36px cho mobile, giữ nguyên 64px từ lg để bản desktop đã duyệt
   không đổi.

   CHỈ liệt kê những khối THẬT SỰ có td-py-16. Quét một lượt cho mọi section rồi đặt
   padding cả trên lẫn dưới là sai ở hai chỗ đã gặp:

   - .vntp-hero: padding-top của nó (xem .vntp-hero ở trên) KHÔNG phải khoảng cách
     trang trí mà là phần BÙ cho top: calc(--header-h * -1). Hạ xuống 36px là hụt 44px
     bù, đầu hero chui xuống dưới header dính và nhãn "VNTP - Kết nối công nghệ" bị che
     mất 8px. Hero cũng vốn không có padding dưới (khoảng cách nằm ở td-py-9 bên trong),
     thêm 36px vào là giãn ra chứ không thu lại.
   - .vntp-eco: chỉ có td-pb-16, cố ý không có padding trên để hero chảy thẳng xuống.
     Đặt padding-top là thêm 36px chưa từng có. */
@media (max-width: 1023.98px) {

    .vntp-adv,
    .vntp-connect,
    .vntp-page {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .vntp-eco {
        padding-bottom: 36px;
    }
}

/* Nhãn nhỏ trên tiêu đề hero ("• VNTP - Kết nối công nghệ, dẫn lối thành công").

   Chuỗi slogan do khách tự sửa trong Cài đặt nên dài ngắn tuỳ ý. Nhãn là inline-flex có
   flex-wrap: nội dung dài hơn cột thì nó rớt xuống 2-3 hàng, viên pill mảnh của thiết kế
   phình thành khối cao 70-90px. Không phải tràn khung — nhãn vẫn nằm trong cột, chỉ cao.

   Chốt: dưới lg giữ đúng MỘT hàng, phần chữ thừa cắt bằng dấu ba chấm.

   min-width: 0 ở dòng slogan là BẮT BUỘC, không phải cho đẹp: mục flex mặc định
   min-width: auto nên không co được xuống dưới bề rộng min-content, mà text-overflow chỉ
   chạy khi mục thật sự bị co. Thiếu dòng này là nhãn vẫn tràn và dấu ba chấm không bao
   giờ xuất hiện.

   Chấm tròn và chữ VNTP khoá flex-shrink: 0 — chúng là phần nhận diện, phải luôn đọc
   được nguyên vẹn; chỗ nào thiếu thì cắt vào slogan.

   Cỡ chữ và khoảng cách trên mobile (đo phần trăm slogan đọc được trước khi bị cắt):
     cỡ chữ   320px   360px   375px   390px   414px
       13px    70%     83%     88%     93%    100%
       12px    77%     91%     97%    100%    100%
       11px    85%    100%    100%    100%    100%
   Chọn 12px: đọc trọn câu từ 390px trở lên (phần lớn máy đang dùng), 375px chỉ hụt một
   chữ; 11px thì trọn câu sớm hơn nhưng chữ hoa cỡ đó đọc mệt. Cỡ 12px khai ngay ở class
   td-text-[12px] trong blade chứ không ghi ở đây — class đó chỉ ăn dưới 768px, còn md
   16px và lg 20px giữ nguyên, khỏi phải thêm một @media nữa.
   Khoảng cách bóp lại cho cân với cỡ chữ nhỏ: padding 20 -> 12px, gap 10 -> 7px, cao
   35 -> 33px. Từ lg trở lên KHÔNG đụng tới: desktop đã duyệt giữ nguyên 20px/18px,
   cao 43px, padding 20px. */
@media (max-width: 1023.98px) {
    .vntp-hero-nhan {
        flex-wrap: nowrap;
        max-width: 100%;
    }

    .vntp-hero-nhan>span:first-child,
    .vntp-hero-nhan>strong {
        flex-shrink: 0;
    }

    .vntp-hero-nhan>span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Khoảng cách chỉ bóp ở khổ ĐIỆN THOẠI. Khổ md (768-1023px) chữ đã lên 16px và cột rộng
   gấp đôi, thừa chỗ cho cả câu — bóp padding ở đó chỉ làm viên pill trông chật so với
   cỡ chữ, nên giữ nguyên 20px/10px của thiết kế. */
@media (max-width: 767.98px) {
    .vntp-hero-nhan {
        gap: 7px;
        padding-inline: 12px;
        padding-block: 6px;
    }
}

/* II.8 — Khung nhập tên miền trên mobile bị nhỏ.
   Cao 44px và chữ 15px là hụt so với ngón tay. Nâng lên 52px/16px — 16px còn tránh
   được việc iPhone tự phóng to trang khi bấm vào ô nhập (Safari phóng khi chữ < 16px). */
@media (max-width: 639.98px) {

    #vntp-domain-input,
    .vntp-o-tra-cuu input[type="text"] {
        /* flex: 0 0 auto là phần BẮT BUỘC, không phải cho đẹp.
           Ô này mang lớp td-flex-1 (= flex: 1 1 0%). Ở khổ mobile form đổi sang xếp DỌC,
           trục chính thành trục đứng, nên flex-basis: 0% thay thế luôn thuộc tính height:
           ô sập xuống còn đúng chiều cao dòng chữ (đo được 21px). Desktop xếp ngang nên
           height vẫn ăn — vì vậy lỗi chỉ thấy trên điện thoại.
           Trả flex-basis về auto thì height mới có tác dụng trở lại. */
        flex: 0 0 auto;
        height: 52px;
        min-height: 52px;
        font-size: 16px;
    }

    .vntp-domain {
        padding: 18px 16px;
    }
}

/* II.9 — Khối "Vì sao doanh nghiệp lựa chọn VNTP?" cho nhỏ lại chỗ 6 mục.
   Thu gọn thẻ, chữ và số thứ tự; giữ nguyên từ lg trở lên. */
@media (max-width: 1023.98px) {
    .vntp-adv-card {
        padding: 16px;
    }

    .vntp-adv-card h3 {
        font-size: 16px;
        line-height: 1.35;
        margin-bottom: 4px;
    }

    .vntp-adv-card p {
        font-size: 13px;
        line-height: 1.45;
    }

    /* Số thứ tự 30px chiếm gần hết chiều cao thẻ sau khi thu nhỏ */
    .vntp-adv-card .td-text-\[30px\] {
        font-size: 22px;
    }
}

/* Mã nhúng TikTok khách tự dán: ép vừa khung, mã dán vào thường kèm width cố định */
.vntp-tt-nhung iframe,
.vntp-tt-nhung blockquote {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    border: 0;
}

/* ==========================================================================
   II.4 — Mục lục tự động: thu sẵn + dính theo bài (sticky)
   ========================================================================== */

/* Dính dưới header thay vì dựng một nút nổi position: fixed ở góc màn hình.
   Sticky giữ luôn CHÍNH khối mục lục trong tầm mắt nên không phải chép danh sách
   ra một bản thứ hai — hai bản là hai chỗ có thể lệch nhau.
   z-index thấp hơn header (z-50) để khi cuộn thanh này chui xuống dưới header. */
.vntp-toc {
    position: sticky;
    top: calc(var(--header-h) + 12px);
    z-index: 20;
}

.vntp-toc__nut {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    background: none;
    border: 0;
    font-family: var(--font-heading, inherit);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.vntp-toc__so {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
}

.vntp-toc__mui {
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.vntp-toc--dong .vntp-toc__mui {
    transform: rotate(-90deg);
}

/* Bài vài chục mục thì danh sách cao hơn cả màn hình; khối đang dính trên cùng nên
   phần vượt quá sẽ nằm ngoài tầm nhìn và không cuộn tới được. Chặn chiều cao rồi cho
   tự cuộn bên trong. */
.vntp-toc-list {
    padding: 0 18px 16px;
    max-height: calc(100vh - var(--header-h) - 110px);
    overflow-y: auto;
}

/* Thu sẵn: ẩn danh sách chứ không dùng max-height 0 — danh sách dài vài chục mục thì
   đặt max-height cố định sẽ hoặc cắt mất mục, hoặc để lại khoảng trống thừa. */
.vntp-toc--dong .vntp-toc-list {
    display: none;
}

.vntp-toc-list a {
    display: block;
    padding: 5px 0;
    color: var(--muted);
    text-decoration: none;
}

.vntp-toc-list a:hover {
    color: var(--primary-color);
}

/* ==========================================================================
   I.3 — Thẻ gói hosting, dựng theo ảnh đặc tả khách gửi
   ========================================================================== */

.vntp-goi {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 22px 22px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vntp-goi:hover {
    border-color: var(--primary-color);
    box-shadow: 0 12px 34px rgba(255, 79, 13, .14);
    transform: translateY(-3px);
}

/* Gói được tích "Nổi bật" trong admin: viền cam + nhãn Phổ biến */
.vntp-goi--noibat {
    border: 2px solid var(--primary-color);
}

.vntp-goi__nhan {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.vntp-goi__dau {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.vntp-goi__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--blush);
    color: var(--primary-color);
}

.vntp-goi__ten {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.vntp-goi__phuhop {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.vntp-goi__ts {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.vntp-goi__ts li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    color: var(--ink);
    /* Gạch đứt như ảnh mẫu, nhạt hơn viền thường để không rối mắt */
    border-bottom: 1px dashed var(--line);
}

.vntp-goi__ts li:last-child {
    border-bottom: 0;
}

.vntp-goi__ts svg {
    flex: 0 0 auto;
    color: var(--primary-color);
}

.vntp-goi__vat {
    margin: 10px 0 12px;
    font-size: 13px;
    color: var(--primary-color);
    text-align: center;
}

.vntp-goi__gia {
    padding: 6px 14px;
    border-radius: 10px;
    background: var(--blush);
}

.vntp-goi__dong {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.vntp-goi__dong:last-child {
    border-bottom: 0;
}

.vntp-goi__ky {
    font-size: 13.5px;
    color: var(--ink);
}

.vntp-goi__giam {
    /* inline-block + nowrap: để inline thường thì "Giảm" và "20%" bị tách hai dòng
       khi cột trái hẹp, đọc ra thành hai mẩu rời rạc */
    display: inline-block;
    margin-left: 6px;
    font-style: normal;
    font-size: 12.5px;
    color: var(--primary-color);
    white-space: nowrap;
}

.vntp-goi__tien {
    text-align: right;
    white-space: nowrap;
}

.vntp-goi__tien strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
}

.vntp-goi__phu {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
}

.vntp-goi__phu del {
    margin-right: 6px;
}

/* margin-top:auto đẩy nút xuống đáy thẻ, nhờ vậy các thẻ trong hàng cao bằng nhau
   dù số dòng thông số khác nhau */
.vntp-goi__nut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 13px 20px;
    border-radius: 10px;
    background: linear-gradient(90deg, #FF4F0D 0%, #FE2101 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.vntp-goi__nut:hover {
    filter: brightness(1.06);
}

@media (max-width: 575px) {
    .vntp-goi {
        padding: 22px 16px 18px;
    }

    .vntp-goi__ten {
        font-size: 19px;
    }
}

/* ==========================================================================
   I.2 — Trang đích từng dịch vụ (news/dich-vu-chi-tiet)
   ========================================================================== */

.vntp-dv-khoi {
    padding: 56px 0;
}

/* Hai khối liền nhau mà ĐỀU nền trong suốt thì gộp khoảng đệm giữa lại, khỏi hở gấp đôi.
   Khối CÓ nền riêng (hồng/xám) luôn phải giữ đủ đệm trên: bỏ đi thì tiêu đề dính sát mép
   mảng màu — đo được 0px giữa mép khối và tiêu đề ở bảng giá trước khi sửa.
   Viết bằng :not() thay vì "xoá hết rồi bù lại" vì cách bù chỉ chạy cho khối ĐỨNG SAU khối
   có nền, không chạy cho chính khối có nền. */
.vntp-dv-khoi:not(.td-bg-blush):not(.td-bg-surface)+.vntp-dv-khoi:not(.td-bg-blush):not(.td-bg-surface) {
    padding-top: 0;
}

/* --- Danh sách 2 cột: vấn đề / giải pháp --- */
.vntp-dv-luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
}

.vntp-dv-muc {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vntp-dv-muc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--card);
    color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

/* Khối "vấn đề" dùng sắc cảnh báo để đối lập với khối giải pháp ngay dưới */
.vntp-dv-muc__icon--canh {
    background: var(--primary-color);
    color: #fff;
}

.vntp-dv-muc__icon svg {
    width: 20px;
    height: 20px;
}

.vntp-dv-muc__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.vntp-dv-muc strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.vntp-dv-muc span span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

/* --- Thẻ lợi ích --- */
.vntp-dv-the {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.vntp-dv-the__o {
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vntp-dv-the__o:hover {
    border-color: var(--primary-color);
    box-shadow: 0 12px 30px rgba(255, 79, 13, .12);
    transform: translateY(-3px);
}

.vntp-dv-the__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--blush);
    color: var(--primary-color);
}

.vntp-dv-the__icon svg {
    width: 26px;
    height: 26px;
}

.vntp-dv-the__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.vntp-dv-the__o h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.vntp-dv-the__o p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

/* --- Quy trình đánh số --- */
.vntp-dv-buoc {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: buoc;
}

.vntp-dv-buoc li {
    position: relative;
    padding: 22px 18px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--card);
}

.vntp-dv-buoc__so {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--font-heading, inherit);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
    opacity: .35;
}

.vntp-dv-buoc strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.vntp-dv-buoc span:not(.vntp-dv-buoc__so) {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

@media (max-width: 1023.98px) {
    .vntp-dv-khoi {
        padding: 34px 0;
    }



    .vntp-dv-the,
    .vntp-dv-buoc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639.98px) {

    .vntp-dv-luoi,
    .vntp-dv-the,
    .vntp-dv-buoc {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Bảng giá trên trang dịch vụ.
   Dùng lại .vntp-goi của thẻ gói hosting (viền, nhãn "Phổ biến", nút) để hai trang cùng
   một ngôn ngữ thị giác; chỉ thêm phần đầu thẻ và danh sách tính năng ✓/✗. --- */
.vntp-dv-gia {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.vntp-dv-gia__dau {
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.vntp-dv-gia__dau h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
}

.vntp-dv-gia__dau p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.vntp-dv-gia__ds {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.vntp-dv-gia__ds li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
    border-bottom: 1px dashed var(--line);
}

.vntp-dv-gia__ds li:last-child {
    border-bottom: 0;
}

.vntp-dv-gia__ds svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--primary-color);
}

/* Tính năng gói KHÔNG có: làm mờ cả dòng thay vì chỉ đổi icon, để mắt lướt qua là biết
   ngay gói này thiếu gì mà không phải đọc từng dấu */
.vntp-dv-gia__ds li.la-khong {
    color: var(--muted);
}

.vntp-dv-gia__ds li.la-khong svg {
    color: var(--muted);
    opacity: .7;
}

@media (max-width: 1023.98px) {
    .vntp-dv-gia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639.98px) {
    .vntp-dv-gia {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Ảnh minh hoạ của một khối trên trang dịch vụ */
.vntp-dv-anh {
    margin: 34px 0 0;
    text-align: center;
}

/* Ảnh đứng một mình (infographic quy trình): tiêu đề khối đã có khoảng đệm dưới rồi */
.vntp-dv-anh--lien {
    margin-top: 6px;
}

.vntp-dv-anh img {
    display: block;
    width: 100%;
    max-width: 980px;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
}

@media (max-width: 1023.98px) {
    .vntp-dv-anh {
        margin-top: 24px;
    }
}

/* ==========================================================================
   Trang dịch vụ — bố cục bám theo trang mẫu khách gửi
   ========================================================================== */

/* Tiêu đề khối căn TRÁI, không vạch dưới (khác .tieu-de-khoi vốn căn giữa) */
.vntp-dv-dau {
    max-width: 720px;
    margin-bottom: 26px;
}

.vntp-dv-dau h2 {
    margin: 0 0 8px;
    font-family: var(--font-heading, inherit);
    font-size: clamp(22px, 3.4vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.vntp-dv-dau p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.vntp-dv-dau--nho h2 {
    font-size: clamp(20px, 2.6vw, 26px);
}

/* --- Danh sách một cột (khối Vấn đề) --- */
.vntp-dv-doc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vntp-dv-dong {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 9px 0;
}

.vntp-dv-dong__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: var(--primary-color);
}

.vntp-dv-dong__icon svg {
    width: 22px;
    height: 22px;
}

.vntp-dv-dong__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Khối Giải pháp: icon có vòng nền để tách khỏi nền trắng */
.vntp-dv-dong__icon--vien {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blush);
}

.vntp-dv-dong__icon--vien svg {
    width: 17px;
    height: 17px;
}

.vntp-dv-dong__chu strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
}

.vntp-dv-dong__chu span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

/* --- Ba cột, ảnh ở giữa (khối Giải pháp) --- */
.vntp-dv-giua {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px 34px;
}

.vntp-dv-giua--khong-anh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vntp-dv-giua__cot {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vntp-dv-giua__anh img {
    display: block;
    width: 100%;
    height: auto;
}

/* Cột phải: icon nhảy sang bên phải để hai cột đối xứng qua ảnh giữa */
@media (min-width: 1024px) {
    .vntp-dv-dong--phai {
        flex-direction: row-reverse;
        text-align: right;
    }
}

/* --- Lợi ích: ảnh trái, danh sách đánh số phải --- */
.vntp-dv-loiich {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 34px;
}

.vntp-dv-loiich--khong-anh {
    grid-template-columns: minmax(0, 1fr);
}

.vntp-dv-loiich__anh img {
    display: block;
    width: 100%;
    height: auto;
}

.vntp-dv-ich {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vntp-dv-ich li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vntp-dv-ich__chu {
    flex: 1 1 auto;
}

.vntp-dv-ich__chu strong {
    display: block;
    margin-bottom: 3px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--primary-color);
}

.vntp-dv-ich__chu span {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

/* Icon là thứ duy nhất ở lề trái (đã bỏ vòng số), rộng bằng .vntp-dv-dong__icon của
   khối Vấn đề / Giải pháp để ba khối cùng một lề.
   KHÔNG bọc nền hồng: khối này nền xám (--surface), mà hồng nhạt đặt trên xám thì gần
   như trùng màu — thành mảng lờ mờ làm icon nhìn còn nhạt hơn lúc để trần. */
.vntp-dv-ich__anh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: var(--primary-color);
}

.vntp-dv-ich__anh img,
.vntp-dv-ich__anh svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Khi không có ảnh lớn: danh sách trải hai cột cho khỏi hẫng nửa trang */
.vntp-dv-loiich--khong-anh .vntp-dv-ich {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 30px;
}

@media (max-width: 1023.98px) {

    .vntp-dv-giua,
    .vntp-dv-loiich,
    .vntp-dv-loiich--khong-anh .vntp-dv-ich {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Ảnh giữa xuống dưới danh sách khi xếp dọc, khỏi chen ngang mạch đọc */
    .vntp-dv-giua__anh {
        order: 3;
    }

    .vntp-dv-loiich__anh {
        max-width: 460px;
        margin: 0 auto;
    }
}

/* Khối "Vấn đề": danh sách bên trái, ảnh minh hoạ bên phải.
   Trước đây ảnh nằm dưới danh sách nên nửa phải trang trống trơn (đo được 821/1232px bỏ
   không) còn ảnh thì rớt xuống đáy, canh giữa — lệch trục với danh sách canh trái.
   Xếp cạnh nhau lấp được khoảng trống và giữ cả khối trên một hàng mắt. */
.vntp-dv-vande {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 30px 40px;
}

.vntp-dv-vande--khong-anh {
    grid-template-columns: minmax(0, 1fr);
}

.vntp-dv-vande__anh img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1023.98px) {
    .vntp-dv-vande {
        grid-template-columns: minmax(0, 1fr);
    }

    .vntp-dv-vande__anh {
        max-width: 520px;
        margin: 0 auto;
    }
}

/* ===== Neo trong trang (nút "Xem báo giá" ở đầu trang dịch vụ) ===== */

/* Trượt mượt thay vì nhảy phịch một cái. Tôn trọng người tắt hiệu ứng trong hệ điều hành. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Header dính trên cùng cao 80px. Không chừa chỗ thì trình duyệt đưa mép khối lên đúng
   y=0, tức là header đè lên tiêu đề khối và khách tưởng bấm hụt. Cộng thêm 16px cho
   mảng màu của khối lộ ra một chút, nhìn mới ra là đã tới nơi. */
.vntp-dv-khoi[id] {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ==========================================================================
   Mục lục trang tĩnh (.meta-toc) — dính theo bài khi cuộn
   ========================================================================== */

/* Cùng cách làm với mục lục bài viết (.vntp-toc ở trên). Trước đây có đoạn JS gắn
   class .fiedx cho khối này khi cuộn quá 300px, nhưng .fiedx không có quy tắc CSS
   nào trong dự án — bộ nghe sự kiện chạy mỗi lần cuộn mà không đổi được gì. Đã gỡ.
   Khác bản skeleton ở mỗi con số: header của VNTP dính trên cùng cao 80px. */
:root {
    --toc-dinh-tren: calc(var(--header-h) + 12px);
}

.meta-toc {
    position: sticky;
    top: var(--toc-dinh-tren);
    z-index: 20;
    margin-bottom: 20px;
}

/* Nền và màu chữ khai lại: khối <style> viết thẳng trong static.blade.php đang đặt
   background #191919 kèm chữ #333 — nền tối trên chữ tối, gần như không đọc được. */
.meta-toc .box-readmore {
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    /* overflow đặt ở CON: tổ tiên có overflow khác visible sẽ vô hiệu hoá sticky */
    max-height: calc(100vh - var(--toc-dinh-tren) - 20px);
    overflow-y: auto;
}

.meta-toc .box-readmore ul li a {
    color: var(--ink);
}

.meta-toc .box-readmore ul li a:hover {
    color: var(--primary-color);
}

/* ==========================================================================
   Chân trang — lưới 3 cột
   ========================================================================== */

/* Viết CSS thuần thay vì lớp Tailwind: biến thể col-span cần dùng chưa được build
   ra assets/css/tailwind/layout.css (layout.css chỉ sinh những lớp đang thực sự
   xuất hiện trong mã), đặt vào là lớp nằm im không có tác dụng gì.

   Khổ nhỏ 2 cột theo yêu cầu khách. Khối giới thiệu chiếm trọn hàng đầu vì có logo
   và hai con dấu chứng nhận nằm ngang — nhét vào nửa bề ngang thì con dấu bị bóp. */
.vntp-footer-luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Đệm và khe đều thu lại ở khổ nhỏ. Trước đây đệm 32px mỗi bên cộng khe 24px ăn
       mất 88px của máy 390px, hai cột chỉ còn 151px nên tên dịch vụ vỡ dòng liên tục.
       Đệm khai ở đây chứ không dùng lớp td-p-8 nữa: cần đổi theo khổ màn hình mà biến
       thể lg:td-p-8 chưa được build ra layout.css. */
    gap: 20px 16px;
    padding: 24px 20px;
}

/* Khổ nhỏ xếp 2 cột x 2 hàng:
       hàng 1  Giới thiệu | Liên hệ nhanh   (hai khối ngắn, đi cặp với nhau)
       hàng 2  Dịch vụ    | Chính sách      (hai danh sách dài)

   Phải khai vị trí tường minh vì Liên hệ nhanh nằm CUỐI trong mã (để desktop có nó ở
   cột thứ tư) nhưng lại cần hiện ở hàng đầu khi xuống khổ nhỏ. Đổi thứ tự trong mã thì
   desktop sai; dùng grid-row/grid-column thì mã giữ nguyên, chỉ đổi cách bày.
   Hai ô Dịch vụ và Chính sách không cần khai gì: lưới tự xếp chúng vào hai ô còn trống
   của hàng 2, đúng thứ tự trong mã. */
.vntp-footer-luoi> :first-child {
    grid-column: 1;
    grid-row: 1;
}

.vntp-footer-o--lienhe {
    grid-column: 2;
    grid-row: 1;
}

/* Hàng con dấu chứng nhận phải cho xuống dòng: hai con dấu cộng lại 226px trong khi
   cột giới thiệu ở khổ nhỏ chỉ rộng 167px — để nowrap thì con dấu thứ hai thò hẳn
   sang cột bên cạnh. Ở desktop cột rộng 260px nên chúng vẫn nằm cùng một hàng. */
.vntp-footer-dau {
    flex-wrap: wrap;
}


/* Desktop: bốn cột đều nhau — Giới thiệu | Dịch vụ | Chính sách | Liên hệ nhanh. */
@media (min-width: 1024px) {
    .vntp-footer-luoi {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px;
        padding: 32px;
    }

    /* Bốn cột đứng riêng theo đúng thứ tự trong mã: xoá vị trí đã khai cho khổ nhỏ. */
    .vntp-footer-luoi> :first-child,
    .vntp-footer-o--lienhe {
        grid-column: auto;
        grid-row: auto;
    }

    /* Kẻ dọc ngăn cột theo thiết kế; chỉ bật từ lg vì dưới đó lưới xếp 2 cột hẹp,
       thêm vạch nữa là rối. */
    .vntp-footer-cot {
        padding-left: 32px;
        border-left: 1px solid rgba(255, 255, 255, .1);
    }
}

/* ==========================================================================
   Nhịp dọc giữa các khối ở khổ nhỏ
   ========================================================================== */

/* Desktop đệm 64px trên/dưới mỗi khối; trên máy 390px thì hai khối liền nhau chừa
   128px trống, gần bằng 1/6 chiều cao màn hình chỉ để nhìn nền. Thu còn 28px.

   Bám vào thẻ <section> chứ không ghi đè thẳng lớp tiện ích: td-py-8 còn được dùng
   cho thẻ <p> báo "Nhóm này chưa có gói nào", ghi đè trần sẽ bóp luôn cả chỗ đó.
   section.td-py-16 có độ ưu tiên (0,1,1), thắng .td-py-16 (0,1,0) của layout.css. */
@media (max-width: 767.98px) {

    section.td-py-16,
    section.td-py-12,
    section.td-py-10,
    section.td-py-8 {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    section.td-pb-16 {
        padding-bottom: 28px;
    }

    /* Đầu trang các trang con: đệm nằm ở .vntp-container bên trong, không ở <section> */
    .vntp-dau-trang .vntp-container {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    /* Khối trang dịch vụ khai đệm bằng CSS thuần chứ không qua lớp tiện ích.
       Luật gộp đệm giữa hai khối trong suốt liền nhau có độ ưu tiên cao hơn hẳn
       nên vẫn chạy đè lên luật này, không cần khai lại. */
    .vntp-dv-khoi {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}