/*
Template Css: Chứng chỉ SSL
 */

/* Landing "Chứng chỉ SSL Plan + Automate". Port từ mockup Tailwind (Gemini Canvas) sang CSS viết tay.
   Hai phần:
     1. .bk-ss…  — element có dữ liệu ([bk_ss_bang_gia] thẻ gói / bảng biểu phí, hộp thoại đăng ký).
     2. .ss-…    — trang dựng bằng element gốc Flatsome (section > row > col > chữ gõ thẳng),
                   bố cục mẫu: template_assets/html/chung-chi-ssl-ux-builder.txt.
   Bẫy của theme đã tính (xem ghi chú landing An toàn thông tin):
     - assets/css/main.css: `.page-template table thead tr:nth-child(1) th {…!important}` (0,2,4)
       -> rule bảng đi ≥3 class + !important; theme tô sọc tr chẵn -> tr trong suốt !important.
     - assets/css/responsive.css: `.row {max-width:1230px !important}`.
     - Flatsome tô sẵn button/input/label/h1-h6/th (uppercase, width:100%) -> reset trong scope. */

@font-face {
    src: url("../fonts/Inter/Inter-Regular.ttf");
    font-family: "InterBK";
    font-weight: 400;
    font-display: swap;
}

@font-face {
    src: url("../fonts/Inter/Inter-SemiBold.ttf");
    font-family: "InterBK";
    font-weight: 600;
    font-display: swap;
}

@font-face {
    src: url("../fonts/Inter/Inter-Bold.ttf");
    font-family: "InterBK";
    font-weight: 700 900;
    font-display: swap;
}

:root {
    --ss-xanh: #16a34a;
    --ss-xanh-dam: #15803d;
    --ss-xanh-sau: #166534;
    --ss-xanh-toi: #064e3b;
    --ss-xanh-nhat: #f0fdf4;
    --ss-xanh-nhat-2: #dcfce7;
    --ss-xanh-vien: #bbf7d0;
    --ss-cam: #c2410c;
    --ss-cam-sang: #ea580c;
    --ss-cam-nhat: #fff7ed;
    --ss-cam-vien: #fed7aa;
    --ss-vang: #fbbf24;
    --ss-do: #dc2626;
    --ss-do-nhat: #fef2f2;
    --ss-chu: #1e293b;
    --ss-chu-dam: #0f172a;
    --ss-chu-vua: #475569;
    --ss-chu-mo: #64748b;
    --ss-chu-nhat: #94a3b8;
    --ss-vien: #e2e8f0;
    --ss-vien-nhat: #f1f5f9;
    --ss-nen: #f8fafc;

    --ss-r-lon: 24px;
    --ss-r-vua: 16px;
    --ss-r-nho: 12px;
    --ss-bong-1: 0 1px 2px rgba(15, 23, 42, .05);
    --ss-bong-2: 0 4px 6px -1px rgba(15, 23, 42, .06), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --ss-bong-3: 0 20px 25px -5px rgba(15, 23, 42, .08), 0 8px 10px -6px rgba(15, 23, 42, .06);
    --ss-bong-4: 0 25px 50px -12px rgba(15, 23, 42, .3);
    --ss-bong-xanh: 0 12px 24px -10px rgba(22, 163, 74, .6);
    --ss-ease: cubic-bezier(.22, 1, .36, 1);

    --ss-font: "InterBK", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ss-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

    /* Icon mask (màu theo background-color) */
    --ss-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'/%3E%3C/svg%3E");
    --ss-i-xuong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    --ss-i-khoa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 10V7a5 5 0 0110 0v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h6V7a3 3 0 00-6 0v3z'/%3E%3C/svg%3E");
    --ss-i-khien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm-1.2 13.6l5.6-5.6-1.4-1.4-4.2 4.2-2-2-1.4 1.4 3.4 3.4z'/%3E%3C/svg%3E");
    --ss-i-set: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
    --ss-i-xoay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 01-15.5 6.2M3 12a9 9 0 0115.5-6.2'/%3E%3Cpath d='M21 4v5h-5M3 20v-5h5'/%3E%3C/svg%3E");
    --ss-i-chia-khoa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2a8 8 0 00-7.7 10.2L2 16.5V22h5.5v-2.5H10V17h2.5l1.3-1.3A8 8 0 1014 2zm2 4a2 2 0 110 4 2 2 0 010-4z'/%3E%3C/svg%3E");
    --ss-i-canh-bao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z'/%3E%3C/svg%3E");
    --ss-i-dien-thoai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E");
    --ss-i-the: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 3h8.6a2 2 0 011.4.6l7.8 7.8a2 2 0 010 2.8l-6.6 6.6a2 2 0 01-2.8 0L3.6 13A2 2 0 013 11.6V3zm4.5 6a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'/%3E%3C/svg%3E");
    --ss-i-mui-ten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
    --ss-i-dung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    --ss-i-dua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l2-6 11-11a2.8 2.8 0 014 4L8 19l-6 2zM16.5 2l1.5 3 3 1.5-3 1.5-1.5 3-1.5-3-3-1.5 3-1.5z'/%3E%3C/svg%3E");
}

/* =====================================================================
   1. ELEMENT CÓ DỮ LIỆU (.bk-ss)
   ===================================================================== */

.bk-ss {
    font-family: var(--ss-font);
    color: var(--ss-chu);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

.bk-ss h2,
.bk-ss h3 {
    font-family: inherit;
    color: var(--ss-chu-dam);
    width: auto;
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.25;
    text-transform: none;
    text-wrap: balance;
}

.bk-ss p,
.bk-ss ul,
.bk-ss li {
    margin: 0;
}

.bk-ss ul {
    list-style: none;
    padding: 0;
}

.bk-ss a {
    text-decoration: none;
}

/* Flatsome tô sẵn button (nền, viền, uppercase, margin-right) -> trả về trung tính */
.bk-ss button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border: 0;
    background: none;
    color: inherit;
    text-align: inherit;
    text-transform: none;
    letter-spacing: inherit;
    box-shadow: none;
    border-radius: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    line-height: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.bk-ss a:focus-visible,
.bk-ss button:focus-visible,
.bk-ss input:focus-visible {
    outline: 3px solid rgba(22, 163, 74, .45);
    outline-offset: 2px;
}

.bk-ss__icon {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
}

/* ---------- Nút ---------- */

.bk-ss .bk-ss__nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--ss-r-nho);
    background: var(--ss-xanh);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: var(--ss-bong-xanh);
    transition: background-color .2s, transform .2s;
}

.bk-ss .bk-ss__nut:hover {
    background: var(--ss-xanh-dam);
    color: #fff;
    transform: translateY(-1px);
}

.bk-ss .bk-ss__nut:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

.bk-ss .bk-ss__nut--rong {
    width: 100%;
}

/* ---------- Thẻ gói (hien="the") ---------- */

.bk-ss--the {
    display: grid;
    grid-template-columns: repeat(var(--ss-so-goi, 4), minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.bk-ss .bk-ss__goi {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    border: 1px solid var(--ss-vien);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--ss-bong-1);
    transition: border-color .25s var(--ss-ease), box-shadow .25s var(--ss-ease), transform .25s var(--ss-ease);
}

.bk-ss .bk-ss__goi:hover {
    border-color: var(--ss-xanh-vien);
    box-shadow: var(--ss-bong-3);
    transform: translateY(-4px);
}

.bk-ss .bk-ss__goi.la-noi-bat {
    border: 2px solid var(--ss-cam);
    box-shadow: 0 18px 34px -22px rgba(194, 65, 12, .55);
}

.bk-ss .bk-ss__goi.la-noi-bat:hover {
    border-color: var(--ss-cam);
}

.bk-ss .bk-ss__goi-giam {
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 4px 11px;
    border-radius: 7px;
    background: var(--ss-xanh-nhat-2);
    color: var(--ss-xanh-sau);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.bk-ss .la-noi-bat .bk-ss__goi-giam {
    background: var(--ss-cam);
    color: #fff;
}

.bk-ss .bk-ss__goi-hang {
    font-family: var(--ss-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ss-chu-mo);
}

.bk-ss .bk-ss__goi-ten {
    margin-top: 6px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    min-height: 2.7em;
}

/* Cả thẻ bấm được: nút / liên kết trong tên gói phủ toàn thẻ */
.bk-ss .bk-ss__goi-mo {
    color: inherit;
    text-align: left;
}

.bk-ss .bk-ss__goi-mo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.bk-ss .bk-ss__goi-mo:focus-visible {
    outline: none;
}

.bk-ss .bk-ss__goi:has(.bk-ss__goi-mo:focus-visible) {
    outline: 3px solid rgba(22, 163, 74, .45);
    outline-offset: 3px;
}

.bk-ss .bk-ss__goi-gia {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
}

.bk-ss .bk-ss__goi-gia s {
    font-size: 14.5px;
    color: var(--ss-chu-nhat);
    font-variant-numeric: tabular-nums;
}

.bk-ss .bk-ss__goi-gia strong {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ss-chu-dam);
    font-variant-numeric: tabular-nums;
}

.bk-ss .bk-ss__goi-gia strong small {
    margin-left: 2px;
    font-size: 15px;
    font-weight: 700;
}

.bk-ss .bk-ss__goi-gia span {
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ss-xanh-dam);
}

.bk-ss .la-noi-bat .bk-ss__goi-gia strong,
.bk-ss .la-noi-bat .bk-ss__goi-gia span {
    color: var(--ss-cam);
}

.bk-ss .bk-ss__goi-tn {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--ss-vien-nhat);
}

.bk-ss .bk-ss__goi-tn li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ss-chu-vua);
}

.bk-ss .bk-ss__goi-tn li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ss-xanh);
}

.bk-ss .bk-ss__goi-phu-hop {
    margin-top: auto;
    padding-top: 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ss-chu-mo);
}

.bk-ss .bk-ss__goi-tn + .bk-ss__goi-phu-hop {
    margin-top: 22px;
    border-top: 1px solid var(--ss-vien-nhat);
}

/* ---------- Bảng chi tiết biểu phí (hien="bang") ---------- */

.bk-ss--bieu-phi .bk-ss__cuon {
    overflow-x: auto;
    border: 1px solid var(--ss-vien);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ss-bong-2);
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang {
    width: 100%;
    min-width: 900px;
    margin: 0;
    border: 0 !important;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang tbody,
.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang tr {
    border: 0 !important;
    background: transparent !important;
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang th,
.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang td {
    padding: 18px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ss-vien-nhat) !important;
    background: transparent;
    font-size: 15px;
    line-height: 1.4;
    text-align: left !important;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--ss-chu);
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang tbody tr:last-child > * {
    border-bottom: 0 !important;
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang thead th {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    background: var(--ss-xanh-nhat) !important;
    border-bottom: 1px solid var(--ss-xanh-vien) !important;
    font-family: var(--ss-mono);
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ss-xanh-sau) !important;
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang .bk-ss__c-so {
    text-align: right !important;
    white-space: nowrap;
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang .bk-ss__c-giua {
    text-align: center !important;
}

.bk-ss--bieu-phi .bk-ss__bang tbody tr:hover > * {
    background: var(--ss-nen);
}

.bk-ss .bk-ss__ten-nut {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ss-chu-dam);
    transition: color .2s;
}

.bk-ss .bk-ss__ten-nut:hover {
    color: var(--ss-xanh-dam);
}

.bk-ss .bk-ss__ten-nut .bk-ss__icon {
    color: var(--ss-xanh);
}

.bk-ss--bieu-phi .bk-ss__bang s {
    color: var(--ss-chu-nhat);
}

.bk-ss .bk-ss__giam {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: 999px;
    background: var(--ss-xanh-nhat-2);
    color: var(--ss-xanh-sau);
    font-size: 13px;
    font-weight: 700;
}

.bk-ss .la-noi-bat .bk-ss__giam {
    border-color: var(--ss-cam-vien);
    background: var(--ss-cam-nhat);
    color: var(--ss-cam);
}

/* Cùng tiền tố với rule ô chung (0,3,1) mới thắng màu chữ */
.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang td.bk-ss__c-gia {
    font-weight: 800;
    color: var(--ss-chu-dam);
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang .la-noi-bat td.bk-ss__c-gia {
    color: var(--ss-cam);
}

.bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang td.bk-ss__c-tk {
    font-weight: 700;
    color: var(--ss-xanh-dam);
}

.bk-ss .bk-ss__ghi-chu {
    position: relative;
    margin-top: 14px;
    padding-left: 22px;
    font-size: 13px;
    color: var(--ss-chu-mo);
}

.bk-ss .bk-ss__ghi-chu::before {
    content: "i";
    position: absolute;
    left: 0;
    top: .2em;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ss-xanh);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
    line-height: 15px;
    text-align: center;
}

/* ---------- Hộp thoại đăng ký ---------- */

/* Gốc chung in ở wp_footer, chỉ chứa 2 dialog (ẩn tới khi mở) — không chiếm chỗ. */
.bk-ss--chung {
    background: none;
}

/* Element "SSL: Cài đặt chung" chỉ hiện trong UX Builder. */
.bk-ss__cai-dat-uxb {
    padding: 14px 18px;
    background: #fffbeb;
    border: 1px dashed #f59e0b;
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.bk-ss__hop-thoai {
    position: relative;
    width: calc(100% - 32px);
    max-width: 460px;
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 28px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: 20px;
    background: #fff;
    color: var(--ss-chu);
    box-shadow: var(--ss-bong-4);
    overflow: auto;
    overscroll-behavior: contain;
}

.bk-ss__hop-thoai::backdrop {
    background: rgba(2, 6, 23, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.bk-ss__hop-thoai[open] {
    animation: bk-ss-hien .22s var(--ss-ease);
}

@keyframes bk-ss-hien {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: none; }
}

.bk-ss .bk-ss__ht-dong {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ss-vien-nhat);
    color: var(--ss-chu-mo);
    transition: background-color .2s, color .2s;
}

.bk-ss .bk-ss__ht-dong:hover {
    background: var(--ss-vien);
    color: var(--ss-chu-dam);
}

.bk-ss .bk-ss__ht-dong .bk-ss__icon {
    width: 16px;
    height: 16px;
}

.bk-ss .bk-ss__ht-dau {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    padding-right: 36px;
}

.bk-ss .bk-ss__ht-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--ss-xanh-nhat-2);
    color: var(--ss-xanh-dam);
}

.bk-ss .bk-ss__ht-icon .bk-ss__icon {
    width: 22px;
    height: 22px;
}

.bk-ss .bk-ss__ht-dau h2 {
    font-size: 19px;
    font-weight: 800;
}

.bk-ss .bk-ss__ht-dau p {
    margin-top: 2px;
    font-size: 13px;
    color: var(--ss-chu-mo);
}

.bk-ss .bk-ss__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.bk-ss .bk-ss__ht-goi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: var(--ss-r-nho);
    background: var(--ss-xanh-nhat);
}

.bk-ss .bk-ss__ht-goi[hidden] {
    display: none;
}

.bk-ss .bk-ss__ht-goi span {
    display: block;
    font-family: var(--ss-mono);
    font-size: 11px;
    color: var(--ss-chu-mo);
}

.bk-ss .bk-ss__ht-goi strong {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ss-chu-dam);
}

.bk-ss .bk-ss__ht-gia {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bk-ss .bk-ss__ht-gia s {
    display: block;
    font-size: 12px;
    color: var(--ss-chu-nhat);
}

.bk-ss .bk-ss__ht-gia strong {
    color: var(--ss-xanh-dam);
}

.bk-ss .bk-ss__truong {
    min-width: 0;
}

.bk-ss .bk-ss__truong label {
    display: block;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #334155;
    text-transform: none;
}

.bk-ss .bk-ss__truong label span {
    color: var(--ss-do);
}

.bk-ss .bk-ss__o-nhap {
    display: block;
    width: 100%;
    max-width: none;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ss-chu);
    background-color: var(--ss-nen);
    border: 1px solid #cbd5e1;
    border-radius: var(--ss-r-nho);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.bk-ss .bk-ss__o-nhap--mono {
    font-family: var(--ss-mono);
    font-size: 14px;
}

.bk-ss .bk-ss__o-nhap::placeholder {
    color: var(--ss-chu-nhat);
    opacity: 1;
}

.bk-ss .bk-ss__o-nhap:focus {
    outline: none;
    border-color: var(--ss-xanh);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
    color: var(--ss-chu);
}

/* Ô bẫy bot: người thật không thấy, không tab tới được */
.bk-ss__bay {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bk-ss .bk-ss__form .bk-ss__nut {
    margin-top: 4px;
    min-height: 50px;
    letter-spacing: .02em;
}

.bk-ss .bk-ss__trang-thai {
    padding: 9px 12px;
    border: 1px solid #fecaca;
    border-radius: var(--ss-r-nho);
    background: var(--ss-do-nhat);
    color: var(--ss-do);
    font-size: 13px;
    font-weight: 600;
}

.bk-ss .bk-ss__cam-ket {
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--ss-chu-mo);
}

.bk-ss .bk-ss__cam-ket a {
    font-weight: 700;
    color: var(--ss-xanh-dam);
}

.bk-ss__hop-thoai--ok {
    max-width: 400px;
}

.bk-ss .bk-ss__ok {
    padding: 8px 4px 0;
    text-align: center;
}

.bk-ss .bk-ss__ok-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--ss-xanh-nhat-2);
    color: var(--ss-xanh);
}

.bk-ss .bk-ss__ok-icon .bk-ss__icon {
    width: 32px;
    height: 32px;
}

.bk-ss .bk-ss__ok h2 {
    font-size: 21px;
    font-weight: 800;
}

.bk-ss .bk-ss__ok > p {
    margin: 10px 0 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ss-chu-vua);
}

.bk-ss .bk-ss__ok .bk-ss__cam-ket {
    margin: -6px 0 18px;
}

/* =====================================================================
   2. TRANG DỰNG BẰNG ELEMENT GỐC FLATSOME: [section class="ss-…"] > [row] > [col] > chữ
   (bố cục mẫu: template_assets/html/chung-chi-ssl-ux-builder.txt). Chữ nằm thẳng dưới .col-inner.
   ===================================================================== */

.ss-thanh,
.ss-hero,
.ss-khoi,
.ss-cta {
    font-family: var(--ss-font);
    color: var(--ss-chu);
    -webkit-font-smoothing: antialiased;
}

/* Col Flatsome có padding-bottom 30px -> khoảng cách do padding của section lo. */
.ss-thanh .col,
.ss-hero .col,
.ss-khoi .col,
.ss-cta .col {
    padding-bottom: 0;
}

.ss-thanh .col-inner > *,
.ss-hero .col-inner > *,
.ss-khoi .col-inner > *,
.ss-cta .col-inner > * {
    margin-top: 0;
    margin-bottom: 0;
}

.ss-hero ul,
.ss-khoi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ss-hero ul li,
.ss-khoi ul li {
    margin: 0;
}

.ss-hero h1, .ss-hero h2, .ss-hero h3,
.ss-khoi h2, .ss-khoi h3,
.ss-cta h2 {
    font-family: inherit;
    text-transform: none;
    text-wrap: balance;
}

.ss-hero strong,
.ss-khoi strong {
    font-weight: 700;
}

.ss-hero a:focus-visible,
.ss-khoi a:focus-visible,
.ss-cta a:focus-visible,
.ss-thanh a:focus-visible {
    outline: 3px solid rgba(22, 163, 74, .45);
    outline-offset: 2px;
}

/* ---------- Đầu khối (col "ss-dau"): nhãn viên thuốc mono + h2 + mô tả ---------- */

.ss-khoi .col.ss-dau .col-inner {
    max-width: 780px;
    margin: 0 auto 44px;
    text-align: center;
}

.ss-khoi .col.ss-dau.ss-dau--trai .col-inner {
    max-width: none;
    margin: 0 0 32px;
    text-align: left;
}

.ss-khoi .ss-dau .col-inner > p:first-child,
.ss-vi-sao-chu .col-inner > p:first-child {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: 999px;
    background: var(--ss-xanh-nhat);
    color: var(--ss-xanh-dam);
    font-family: var(--ss-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* Đầu khối căn trái (biểu phí): nhãn trần, không viên thuốc — như mockup */
.ss-khoi .ss-dau.ss-dau--trai .col-inner > p:first-child {
    padding: 0;
    border: 0;
    background: none;
}

.ss-khoi .ss-dau .col-inner > h2,
.ss-vi-sao-chu .col-inner > h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.025em;
    color: var(--ss-chu-dam);
}

.ss-khoi .ss-dau .col-inner > p:first-child + h2,
.ss-vi-sao-chu .col-inner > p:first-child + h2 {
    margin-top: 12px;
}

.ss-khoi .ss-dau.ss-dau--trai .col-inner > p:first-child + h2 {
    margin-top: 4px;
}

.ss-khoi .ss-dau .col-inner > h2 + p {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ss-chu-mo);
    text-wrap: pretty;
}

/* ---------- 0. Thanh ưu đãi (section "ss-thanh") ---------- */

.section.ss-thanh {
    background: var(--ss-xanh-toi) !important;
    color: #fff;
    font-size: 13.5px;
}

.ss-thanh .row {
    max-width: 1230px !important;
}

.ss-thanh .col-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
}

.ss-thanh .col-inner > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

/* "Ưu đãi ra mắt" = nhãn cam có tia sét */
.ss-thanh .col-inner > p:first-child strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--ss-vang);
    color: #422006;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ss-thanh .col-inner > p:first-child strong::before {
    content: "";
    width: 11px;
    height: 11px;
    background-color: currentColor;
    -webkit-mask: var(--ss-i-set) center / contain no-repeat;
    mask: var(--ss-i-set) center / contain no-repeat;
}

.ss-thanh .col-inner > p:first-child b {
    color: var(--ss-vang);
    font-weight: 800;
}

.ss-thanh .col-inner > p:last-child {
    color: rgba(255, 255, 255, .7);
}

.ss-thanh .col-inner > p:last-child a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-weight: 700;
}

.ss-thanh .col-inner > p:last-child a::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: var(--ss-vang);
    -webkit-mask: var(--ss-i-dien-thoai) center / contain no-repeat;
    mask: var(--ss-i-dien-thoai) center / contain no-repeat;
}

.ss-thanh .col-inner > p:last-child a:hover {
    color: var(--ss-vang);
}

/* ---------- 1. Hero (section "ss-hero") ---------- */

.section.ss-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(640px 360px at 82% 38%, rgba(22, 163, 74, .1), transparent 70%),
        linear-gradient(rgba(22, 163, 74, .06) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(22, 163, 74, .06) 1px, transparent 1px) 0 0 / 32px 32px,
        #fff !important;
}

/* Lưới mờ dần về cuối section (băng ưu đãi nằm trên nền trắng như mockup) */
.section.ss-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 260px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%);
    pointer-events: none;
}

.section.ss-hero > .section-content {
    position: relative;
    z-index: 2;
}

/* Nhãn "BKNS • Sản phẩm mới  DIGICERT ACME" */
.ss-hero-chu .col-inner > p:first-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: 999px;
    background: var(--ss-xanh-nhat);
    color: var(--ss-xanh-sau);
    font-size: 13.5px;
    font-weight: 700;
}

.ss-hero-chu .col-inner > p:first-child::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
}

.ss-hero-chu .col-inner > p:first-child strong {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ss-xanh-nhat-2);
    color: var(--ss-xanh-sau);
    font-family: var(--ss-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ss-hero-chu .col-inner > h1 {
    margin-top: 22px;
    font-size: clamp(38px, 5.2vw, 60px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--ss-chu-dam);
}

.ss-hero-chu .col-inner > h1 strong {
    display: block;
    font-weight: 900;
    color: var(--ss-xanh-dam);
}

.ss-hero-chu .col-inner > h2 {
    margin-top: 16px;
    font-size: clamp(19px, 2.1vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: var(--ss-chu-vua);
}

.ss-hero-chu .col-inner > h2 + p {
    margin-top: 18px;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ss-chu-vua);
    text-wrap: pretty;
}

.ss-hero-chu .col-inner > h2 + p strong {
    color: var(--ss-chu-dam);
}

/* 4 điểm nổi bật = chip viền xanh, icon theo vị trí */
.ss-hero-chu .col-inner > ul:first-of-type {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.ss-hero-chu .col-inner > ul:first-of-type li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: 8px;
    background: rgba(240, 253, 244, .8);
    color: var(--ss-xanh-sau);
    font-size: 13.5px;
    font-weight: 600;
}

.ss-hero-chu .col-inner > ul:first-of-type li::before {
    content: "";
    width: 13px;
    height: 13px;
    background-color: var(--ss-xanh);
    -webkit-mask: var(--ss-i, var(--ss-i-khien)) center / contain no-repeat;
    mask: var(--ss-i, var(--ss-i-khien)) center / contain no-repeat;
}

.ss-hero-chu .col-inner > ul:first-of-type li:nth-child(2) { --ss-i: var(--ss-i-xoay); }
.ss-hero-chu .col-inner > ul:first-of-type li:nth-child(3) { --ss-i: var(--ss-i-set); }
.ss-hero-chu .col-inner > ul:first-of-type li:nth-child(4) { --ss-i: var(--ss-i-chia-khoa); }

/* Dòng nút: liên kết đầu = nút xanh đặc, liên kết sau = nút viền có dấu cảnh báo */
.ss-hero-chu .col-inner > ul + p {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.ss-hero-chu .col-inner > ul + p a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: var(--ss-r-nho);
    font-size: 16px;
    font-weight: 700;
    transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.ss-hero-chu .col-inner > ul + p a:first-child {
    background: var(--ss-xanh);
    color: #fff;
    box-shadow: var(--ss-bong-xanh);
}

.ss-hero-chu .col-inner > ul + p a:first-child::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--ss-i-mui-ten) center / contain no-repeat;
    mask: var(--ss-i-mui-ten) center / contain no-repeat;
}

.ss-hero-chu .col-inner > ul + p a:first-child:hover {
    background: var(--ss-xanh-dam);
    transform: translateY(-2px);
}

.ss-hero-chu .col-inner > ul + p a + a {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--ss-chu);
    font-weight: 600;
}

.ss-hero-chu .col-inner > ul + p a + a::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: #f59e0b;
    -webkit-mask: var(--ss-i-canh-bao) center / contain no-repeat;
    mask: var(--ss-i-canh-bao) center / contain no-repeat;
}

.ss-hero-chu .col-inner > ul + p a + a:hover {
    border-color: var(--ss-xanh-vien);
    background: var(--ss-xanh-nhat);
}

/* 3 cam kết có dấu tích nhỏ */
.ss-hero-chu .col-inner > ul:last-of-type:not(:first-of-type) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 26px;
}

.ss-hero-chu .col-inner > ul:last-of-type:not(:first-of-type) li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--ss-chu-vua);
}

.ss-hero-chu .col-inner > ul:last-of-type:not(:first-of-type) li::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: var(--ss-xanh);
    -webkit-mask: var(--ss-i-tick) center / contain no-repeat;
    mask: var(--ss-i-tick) center / contain no-repeat;
}

/* ---------- Thẻ "SSL Security Inspector" (col "ss-hero-the") — điểm nhấn của trang ---------- */

.ss-hero-the .col-inner {
    padding: 26px;
    border: 2px solid #86efac;
    border-radius: var(--ss-r-lon);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 30px 60px -30px rgba(22, 101, 52, .35), 0 0 0 6px rgba(220, 252, 231, .6);
}

/* Dòng đầu: tên công cụ (mono) + nhãn TLS 1.3 */
.ss-hero-the .col-inner > p:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ss-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ss-chu);
}

.ss-hero-the .col-inner > p:first-child::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--ss-xanh);
    -webkit-mask: var(--ss-i-khien) center / contain no-repeat;
    mask: var(--ss-i-khien) center / contain no-repeat;
}

.ss-hero-the .col-inner > p:first-child strong {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--ss-xanh-nhat-2);
    color: var(--ss-xanh-sau);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Thanh địa chỉ trình duyệt */
.ss-hero-the .col-inner > p:nth-of-type(2) {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 10px 12px;
    border: 1px solid var(--ss-vien);
    border-radius: var(--ss-r-nho);
    background: var(--ss-nen);
    font-family: var(--ss-mono);
    font-size: 13.5px;
    color: var(--ss-xanh-dam);
}

.ss-hero-the .col-inner > p:nth-of-type(2)::before {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    border-radius: 8px;
    background: var(--ss-xanh) center / 14px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M7 10V7a5 5 0 0110 0v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h6V7a3 3 0 00-6 0v3z'/%3E%3C/svg%3E");
}

.ss-hero-the .col-inner > p:nth-of-type(2) strong {
    font-weight: 500;
    color: var(--ss-chu);
}

.ss-hero-the .col-inner > p:nth-of-type(2) em {
    margin-left: auto;
    padding: 2px 9px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: 6px;
    background: var(--ss-xanh-nhat-2);
    color: var(--ss-xanh-sau);
    font-family: var(--ss-font);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Bảng thông số */
.ss-hero-the .col-inner > ul {
    margin-top: 16px;
    padding: 6px 16px;
    border: 1px solid var(--ss-vien);
    border-radius: var(--ss-r-nho);
    background: rgba(248, 250, 252, .7);
}

.ss-hero-the .col-inner > ul li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--ss-chu-mo);
}

.ss-hero-the .col-inner > ul li + li {
    border-top: 1px dashed var(--ss-vien);
}

.ss-hero-the .col-inner > ul li strong {
    font-family: var(--ss-mono);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    color: var(--ss-chu-dam);
}

/* Cơ chế gia hạn: icon xoay xanh; Trạng thái: chấm tích xanh, chữ đậm xanh */
.ss-hero-the .col-inner > ul li:nth-last-child(2) strong,
.ss-hero-the .col-inner > ul li:last-child strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ss-xanh-dam);
}

.ss-hero-the .col-inner > ul li:nth-last-child(2) strong::before,
.ss-hero-the .col-inner > ul li:last-child strong::before {
    content: "";
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: var(--ss-i-xoay) center / contain no-repeat;
    mask: var(--ss-i-xoay) center / contain no-repeat;
}

.ss-hero-the .col-inner > ul li:last-child strong {
    font-family: var(--ss-font);
    font-size: 14px;
    font-weight: 800;
}

.ss-hero-the .col-inner > ul li:last-child strong::before {
    width: 15px;
    height: 15px;
    -webkit-mask-image: var(--ss-i-tick);
    mask-image: var(--ss-i-tick);
}

/* Hộp "An tâm kinh doanh": icon khiên bên trái, chữ chạy liền */
.ss-hero-the .col-inner > p:last-child:not(:first-child) {
    position: relative;
    min-height: 62px;
    margin-top: 16px;
    padding: 13px 14px 13px 62px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: var(--ss-r-nho);
    background: var(--ss-xanh-nhat);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ss-xanh-sau);
}

.ss-hero-the .col-inner > p:last-child:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 10px;
    background: var(--ss-xanh) center / 17px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm-1.2 13.6l5.6-5.6-1.4-1.4-4.2 4.2-2-2-1.4 1.4 3.4 3.4z'/%3E%3C/svg%3E");
}

/* ---------- Băng ưu đãi (row "ss-uu-dai" trong hero) ---------- */

.ss-hero .row.ss-uu-dai {
    max-width: 1200px !important;
    margin-top: 56px;
    padding: 22px 12px;
    border: 1px solid var(--ss-cam-vien);
    border-radius: 20px;
    background: linear-gradient(100deg, #fff7ed 0%, #fffbf5 100%);
    box-shadow: 0 16px 30px -24px rgba(194, 65, 12, .5);
}

.ss-hero .ss-uu-dai-chu .col-inner {
    position: relative;
    padding-left: 70px;
}

.ss-hero .ss-uu-dai-chu .col-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    border-radius: 14px;
    background: var(--ss-cam) center / 22px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M3 3h8.6a2 2 0 011.4.6l7.8 7.8a2 2 0 010 2.8l-6.6 6.6a2 2 0 01-2.8 0L3.6 13A2 2 0 013 11.6V3zm4.5 6a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'/%3E%3C/svg%3E");
    box-shadow: 0 10px 20px -8px rgba(194, 65, 12, .6);
}

.ss-hero .ss-uu-dai-chu .col-inner > p:first-child {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--ss-cam);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ss-hero .ss-uu-dai-chu .col-inner > h3 {
    margin-top: 6px;
    font-size: clamp(20px, 2.3vw, 26px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--ss-chu-dam);
}

.ss-hero .ss-uu-dai-chu .col-inner > h3 strong {
    font-weight: 900;
    color: var(--ss-cam-sang);
}

.ss-hero .ss-uu-dai-chu .col-inner > h3 + p {
    margin-top: 4px;
    font-size: 14.5px;
    color: var(--ss-chu-vua);
}

.ss-hero .ss-uu-dai-nut .col-inner {
    text-align: right;
}

.ss-hero .ss-uu-dai-nut a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: var(--ss-r-nho);
    background: var(--ss-cam);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 22px -12px rgba(194, 65, 12, .8);
    transition: background-color .2s, transform .2s;
}

.ss-hero .ss-uu-dai-nut a:hover {
    background: #9a3412;
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- 2. Vì sao cần Automate (col "ss-vi-sao-chu") ---------- */

.ss-vi-sao-chu .col-inner > h2 + p,
.ss-vi-sao-chu .col-inner > h2 + p + p {
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ss-chu-vua);
}

.ss-vi-sao-chu .col-inner > p strong {
    color: var(--ss-chu-dam);
}

.ss-vi-sao-chu .col-inner > p em {
    font-family: var(--ss-mono);
    font-style: normal;
    font-weight: 700;
    color: var(--ss-do);
}

/* Đoạn cuối = hộp xanh "Với gói Plan + Automate" */
.ss-vi-sao-chu .col-inner > p:last-child:not(:nth-child(-n+3)) {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: var(--ss-r-vua);
    background: var(--ss-xanh-nhat);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ss-xanh-sau);
}

.ss-vi-sao-chu .col-inner > p:last-child:not(:nth-child(-n+3)) strong {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    color: var(--ss-xanh-sau);
}

.ss-vi-sao-chu .col-inner > p:last-child:not(:nth-child(-n+3)) strong::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: #ca8a04;
    -webkit-mask: var(--ss-i-dua) center / contain no-repeat;
    mask: var(--ss-i-dua) center / contain no-repeat;
}

/* ---------- Lộ trình 398 → 47 ngày (col "ss-lo-trinh": <table> gõ tay, JS loTrinh() gắn màu + độ dài) ---------- */

.ss-lo-trinh .col-inner {
    padding: 26px 28px 18px;
    border: 1px solid var(--ss-vien);
    border-radius: var(--ss-r-lon);
    background: #fff;
    box-shadow: var(--ss-bong-3);
}

.ss-lo-trinh .col-inner > p:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ss-vien-nhat);
    font-size: 16px;
    font-weight: 700;
    color: var(--ss-chu-dam);
}

.ss-lo-trinh .col-inner > p:first-child::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--ss-xanh);
    -webkit-mask: var(--ss-i-xoay) center / contain no-repeat;
    mask: var(--ss-i-xoay) center / contain no-repeat;
}

.ss-lo-trinh .col-inner > p:first-child strong {
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid var(--ss-xanh-vien);
    border-radius: 6px;
    background: var(--ss-xanh-nhat);
    color: var(--ss-xanh-dam);
    font-family: var(--ss-mono);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ss-lo-trinh .col-inner table,
.ss-lo-trinh .col-inner table tbody {
    display: block;
    width: 100%;
    margin: 6px 0 0;
    border: 0 !important;
}

.ss-lo-trinh .col-inner table tr {
    --ss-mau: #cbd5e1;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: center;
    margin: 6px -14px 0;
    padding: 14px 14px 16px;
    border: 1px solid transparent !important;
    border-radius: var(--ss-r-vua);
    background: transparent !important;
}

.ss-lo-trinh .col-inner table td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    line-height: 1.45;
}

/* Ô 1: số ngày to */
.ss-lo-trinh .col-inner table td:nth-child(1) {
    grid-row: 1 / span 3;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-mau);
    white-space: nowrap;
}

.ss-lo-trinh .col-inner table td:nth-child(1) b {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

/* Ô 2: mốc thời gian (+ nhãn "Hiện tại") */
.ss-lo-trinh .col-inner table td:nth-child(2) {
    grid-column: 2;
    font-size: 15px;
    font-weight: 700;
    color: var(--ss-chu-dam);
}

.ss-lo-trinh .col-inner table td:nth-child(2) strong {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--ss-xanh);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* Ô 3: số lần/năm */
.ss-lo-trinh .col-inner table td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--ss-mau);
    white-space: nowrap;
}

/* Ô 4: mô tả */
.ss-lo-trinh .col-inner table td:nth-child(4) {
    grid-column: 2 / span 2;
    grid-row: 2;
    margin-top: 2px;
    font-size: 13px;
    color: var(--ss-chu-mo);
}

.ss-lo-trinh .col-inner table td:nth-child(4) strong {
    color: var(--ss-chu-dam);
}

/* Thanh độ dài: ::before = rãnh xám, ::after = phần tô (--ss-dai do JS tính theo số ngày) — 2 lớp chung một ô lưới
   để phần tô chạy dài ra được khi cuộn tới (xem khối CHUYỂN ĐỘNG). */
.ss-lo-trinh .col-inner table tr::before,
.ss-lo-trinh .col-inner table tr::after {
    content: "";
    grid-column: 2 / span 2;
    grid-row: 3;
    height: 7px;
    margin-top: 10px;
    border-radius: 99px;
}

.ss-lo-trinh .col-inner table tr::before {
    background: var(--ss-vien-nhat);
}

.ss-lo-trinh .col-inner table tr::after {
    justify-self: start;
    width: var(--ss-dai, 100%);
    background: var(--ss-mau);
    transform-origin: left center;
}

.ss-lo-trinh .col-inner table tr.ss-lt-xam { --ss-mau: #94a3b8; }
.ss-lo-trinh .col-inner table tr.ss-lt-xanh { --ss-mau: var(--ss-xanh); }
.ss-lo-trinh .col-inner table tr.ss-lt-cam { --ss-mau: #f59e0b; }
.ss-lo-trinh .col-inner table tr.ss-lt-do { --ss-mau: var(--ss-do); }

.ss-lo-trinh .col-inner table tr.ss-lt-xam td:nth-child(1) { color: #94a3b8; }
.ss-lo-trinh .col-inner table tr.ss-lt-xam td:nth-child(3) { color: var(--ss-chu-nhat); font-weight: 500; }
.ss-lo-trinh .col-inner table tr.ss-lt-xanh td:nth-child(1) { color: var(--ss-xanh-dam); }
.ss-lo-trinh .col-inner table tr.ss-lt-cam td:nth-child(1) { color: #d97706; }
.ss-lo-trinh .col-inner table tr.ss-lt-cam td:nth-child(3) { color: #d97706; }
.ss-lo-trinh .col-inner table tr.ss-lt-do td:nth-child(3) { color: var(--ss-do); }

/* Dòng đang áp dụng (ô mốc có <strong>) */
.ss-lo-trinh .col-inner table tr.ss-lt-hien-tai {
    border-color: var(--ss-xanh-vien) !important;
    background: var(--ss-xanh-nhat) !important;
}

.ss-lo-trinh .col-inner table tr.ss-lt-hien-tai td:nth-child(3) {
    color: var(--ss-xanh-dam);
}

/* ---------- 3. Lợi ích: 6 thẻ (row "ss-the-6"), ô icon theo vị trí col ---------- */

.ss-khoi .row.ss-the-6 > .col {
    padding-bottom: 22px;
}

.ss-the-6 .col-inner {
    height: 100%;
    padding: 26px 24px;
    border: 1px solid var(--ss-vien);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--ss-bong-1);
    transition: border-color .25s var(--ss-ease), box-shadow .25s var(--ss-ease), transform .25s var(--ss-ease);
}

.ss-the-6 .col-inner:hover {
    border-color: var(--ss-xanh-vien);
    box-shadow: var(--ss-bong-3);
    transform: translateY(-4px);
}

.ss-the-6 .col-inner::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--ss-xanh-nhat-2) center / 22px no-repeat;
    background-image: var(--ss-bt);
}

.ss-the-6 > .col:nth-child(6n+1) { --ss-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 109-9 9.7 9.7 0 00-6.7 2.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ss-the-6 > .col:nth-child(6n+2) { --ss-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2315803d'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm0 2.2L6 6.4V11c0 3.9 2.5 7.4 6 8.9V4.2z'/%3E%3C/svg%3E"); }
.ss-the-6 > .col:nth-child(6n+3) { --ss-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 6-7'/%3E%3C/svg%3E"); }
.ss-the-6 > .col:nth-child(6n+4) { --ss-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14L7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E"); }
.ss-the-6 > .col:nth-child(6n+5) { --ss-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2315803d'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.ss-the-6 > .col:nth-child(6n+6) { --ss-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 20a3 3 0 01-3 2h-3'/%3E%3C/svg%3E"); }

.ss-the-6 .col-inner > h3 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ss-chu-dam);
}

.ss-the-6 .col-inner > h3 + p {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ss-chu-vua);
}

/* ---------- 4. FAQ (Accordion Flatsome "ss-faq-ds"): 2 cột, đánh số 01–06 ---------- */

.ss-faq-ds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--ss-faq-hang, 3), auto);
    gap: 16px 24px;
    align-items: start;
    counter-reset: ss-faq;
}

.ss-faq-ds .accordion-item {
    counter-increment: ss-faq;
    border: 1px solid var(--ss-vien);
    border-radius: var(--ss-r-vua);
    overflow: hidden;
    background: var(--ss-nen);
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.ss-faq-ds .accordion-item:has(.accordion-title.active) {
    border-color: var(--ss-xanh-vien);
    background: #fff;
    box-shadow: var(--ss-bong-2);
}

.ss-faq-ds .accordion-item .accordion-title {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ss-chu-dam);
    text-transform: none;
    text-wrap: pretty;
    transition: color .2s;
}

.ss-faq-ds .accordion-item .accordion-title::before {
    content: counter(ss-faq, decimal-leading-zero);
    order: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ss-xanh-nhat-2);
    color: var(--ss-xanh-dam);
    font-family: var(--ss-mono);
    font-size: 12px;
    font-weight: 700;
}

.ss-faq-ds .accordion-item .accordion-title > span {
    order: 2;
    flex: 1 1 auto;
}

.ss-faq-ds .accordion-item .accordion-title:hover,
.ss-faq-ds .accordion-item .accordion-title.active {
    color: var(--ss-xanh-sau);
}

.ss-faq-ds .accordion-item .accordion-title .toggle {
    order: 3;
    position: static;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    opacity: 1;
    color: var(--ss-chu-mo);
    background: none;
    border: 0;
    transition: transform .2s;
}

.ss-faq-ds .accordion-item .accordion-title.active .toggle {
    transform: rotate(180deg);
}

.ss-faq-ds .accordion-item .accordion-title .toggle i {
    display: none;
}

.ss-faq-ds .accordion-item .accordion-title .toggle::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 2px;
    background-color: currentColor;
    -webkit-mask: var(--ss-i-xuong) center / contain no-repeat;
    mask: var(--ss-i-xuong) center / contain no-repeat;
}

.ss-faq-ds .accordion-item .accordion-inner {
    padding: 0 20px 20px 64px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ss-chu-vua);
}

.ss-faq-ds .accordion-inner p {
    margin: 0;
}

.ss-faq-ds .accordion-inner p + p {
    margin-top: .8em;
}

.ss-faq-ds .accordion-inner strong {
    color: var(--ss-chu-dam);
}

/* ---------- 5. Kêu gọi cuối trang (section "ss-cta": col "ss-cta-chu" = hộp xanh đậm) ---------- */

.section.ss-cta {
    padding-bottom: 80px !important;
}

.ss-cta-chu .col-inner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: center;
    padding: 48px 48px;
    border-radius: 28px;
    background:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(115deg, #065f46 0%, #047857 45%, #14532d 100%);
    color: #fff;
    box-shadow: 0 30px 60px -30px rgba(6, 78, 59, .7);
}

.ss-cta-chu .col-inner > * {
    grid-column: 1;
    position: relative;
}

.ss-cta-chu .col-inner > p:first-child {
    justify-self: start;
    padding: 4px 13px;
    border: 1px solid rgba(134, 239, 172, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #86efac;
    font-size: 13px;
    font-weight: 600;
}

.ss-cta-chu .col-inner > h2 {
    margin-top: 12px;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: #fff;
}

.ss-cta-chu .col-inner > h2 + p {
    margin-top: 12px;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(236, 253, 245, .9);
}

.ss-cta-chu .col-inner > h2 + p strong {
    color: #fff;
}

/* Dòng nút: cột phải, giữa theo chiều dọc */
.ss-cta-chu .col-inner > p:last-child:not(:first-child) {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ss-cta-chu .col-inner > p:last-child:not(:first-child) a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: var(--ss-r-nho);
    font-size: 15.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s, transform .2s;
}

.ss-cta-chu .col-inner > p:last-child a:first-child {
    background: var(--ss-vang);
    color: #1c1917;
    box-shadow: 0 12px 24px -12px rgba(251, 191, 36, .7);
}

.ss-cta-chu .col-inner > p:last-child a:first-child:hover {
    background: #f59e0b;
    transform: translateY(-2px);
}

.ss-cta-chu .col-inner > p:last-child a + a {
    border: 1px solid rgba(134, 239, 172, .3);
    background: rgba(2, 44, 34, .55);
    color: #fff;
}

.ss-cta-chu .col-inner > p:last-child a + a::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--ss-vang);
    -webkit-mask: var(--ss-i-dien-thoai) center / contain no-repeat;
    mask: var(--ss-i-dien-thoai) center / contain no-repeat;
}

.ss-cta-chu .col-inner > p:last-child a + a:hover {
    background: rgba(2, 44, 34, .8);
}

/* ---------- Hiện dần khi cuộn (JS hienDan() gắn .ss-cho rồi .ss-hien) ---------- */

body .ss-cho.ss-cho {
    opacity: 0;
    translate: 0 16px;
    transition: opacity .7s var(--ss-ease) var(--ss-tre, 0ms), translate .7s var(--ss-ease) var(--ss-tre, 0ms),
    box-shadow .25s var(--ss-ease), border-color .25s var(--ss-ease), transform .25s var(--ss-ease);
}

body .ss-cho.ss-hien {
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: no-preference) {
    .ss-hero-chu .col-inner > p:first-child::before {
        animation: ss-nhip 2s ease-out infinite;
    }
}

@keyframes ss-nhip {
    70%,
    100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
}

/* =====================================================================
   NÚT "ĐĂNG KÝ NGAY" (20/10/2026, theo ảnh Sơn gửi): chân thẻ gói = nút + dòng "Phù hợp" căn giữa;
   bảng biểu phí thêm cột "Hành động" nút nhỏ. Gói nổi bật nút cam, còn lại xanh. Có link giỏ hàng thì
   nút là <a>, không thì mở hộp thoại đăng ký kèm tên + giá gói.
   ===================================================================== */

.bk-ss .bk-ss__goi-tn {
    margin-bottom: 22px;
}

.bk-ss .bk-ss__goi-chan {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--ss-vien-nhat);
    text-align: center;
}

.bk-ss .bk-ss__goi-chan .bk-ss__goi-phu-hop {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 13.5px;
    line-height: 1.55;
}

.bk-ss .bk-ss__nut-dk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--ss-xanh);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 8px 16px -10px rgba(21, 128, 61, .8);
    transition: background-color .2s, transform .2s, box-shadow .2s;
}

.bk-ss .bk-ss__nut-dk:hover {
    background: var(--ss-xanh-dam);
    color: #fff;
    transform: translateY(-1px);
}

.bk-ss .bk-ss__nut-dk .bk-ss__icon {
    width: 16px;
    height: 16px;
}

.bk-ss .bk-ss__nut-dk--cam {
    background: var(--ss-cam);
    box-shadow: 0 8px 16px -10px rgba(194, 65, 12, .85);
}

.bk-ss .bk-ss__nut-dk--cam:hover {
    background: #9a3412;
}

/* Nút nhỏ trong bảng */
.bk-ss .bk-ss__nut-dk--nho {
    display: inline-flex;
    width: auto;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13.5px;
    white-space: nowrap;
    gap: 7px;
}

.bk-ss .bk-ss__nut-dk--nho .bk-ss__icon {
    width: 14px;
    height: 14px;
}

/* =====================================================================
   CHUYỂN ĐỘNG (20/10/2026) — cùng nếp landing ATTT / Vibe Hosting: chỉ chạy khi KHÔNG bật giảm chuyển động;
   keyframe dùng `translate` / `scale` / `rotate` riêng (không phải transform) để không đè transform của hover
   và của hiện-dần-khi-cuộn. Thẻ "SSL Security Inspector" để đứng yên (chỉ chấm trạng thái nhịp nhẹ) —
   bài học trang ATTT: thẻ hero trôi/quét bị bỏ. Điểm nhấn chuyển động: thanh lộ trình chạy dài ra + giá đếm lên.
   ===================================================================== */

@property --ss-sang {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 120%;
}

@media (prefers-reduced-motion: no-preference) {

    /* --- Hero: chữ hiện lần lượt khi tải trang --- */
    .ss-hero-chu .col-inner > * {
        animation: ss-len .8s var(--ss-ease) both;
    }

    .ss-hero-chu .col-inner > :nth-child(2) { animation-delay: .08s; }
    .ss-hero-chu .col-inner > :nth-child(3) { animation-delay: .16s; }
    .ss-hero-chu .col-inner > :nth-child(4) { animation-delay: .24s; }
    .ss-hero-chu .col-inner > :nth-child(5) { animation-delay: .32s; }
    .ss-hero-chu .col-inner > :nth-child(6) { animation-delay: .4s; }
    .ss-hero-chu .col-inner > :nth-child(n+7) { animation-delay: .48s; }

    /* Chữ "Plan + Automate" quét vệt sáng một lần sau khi hiện */
    .ss-hero-chu .col-inner > h1 strong {
        background: linear-gradient(100deg, var(--ss-xanh-dam) 0 40%, #4ade80 50%, var(--ss-xanh-dam) 60% 100%) 0 0 / 250% 100% no-repeat;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: ss-quet-chu 1.6s .7s var(--ss-ease) both;
    }

    /* Nền hero: quầng xanh trôi chậm */
    .section.ss-hero::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: -10%;
        right: -8%;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(74, 222, 128, .16), transparent 65%);
        pointer-events: none;
        animation: ss-troi 14s ease-in-out infinite alternate;
    }

    /* Thẻ Inspector: đứng yên; ô khóa + chấm trạng thái nhịp nhẹ */
    .ss-hero-the .col-inner > p:nth-of-type(2)::before {
        animation: ss-vong-xanh 2.6s ease-out infinite;
    }

    .ss-hero-the .col-inner > ul li:last-child strong::before {
        border-radius: 50%;
        animation: ss-vong-xanh 2.6s 1.3s ease-out infinite;
    }

    /* Thanh ưu đãi: tia sét chớp */
    .ss-thanh .col-inner > p:first-child strong::before {
        animation: ss-chop 3s ease-in-out infinite;
    }

    /* Nút chính (hero, băng ưu đãi, CTA): vệt sáng lướt qua định kỳ */
    .ss-hero-chu .col-inner > ul + p a:first-child,
    .ss-hero .ss-uu-dai-nut a,
    .ss-cta-chu .col-inner > p:last-child a:first-child {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .ss-hero .ss-uu-dai-nut a::after,
    .ss-cta-chu .col-inner > p:last-child a:first-child::after,
    .ss-hero-chu .col-inner > ul + p a:first-child::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        background: linear-gradient(105deg, transparent calc(var(--ss-sang) - 20%), rgba(255, 255, 255, .38) var(--ss-sang), transparent calc(var(--ss-sang) + 20%));
        pointer-events: none;
        animation: ss-loe 4.5s ease-in-out infinite;
    }

    .ss-hero .ss-uu-dai-nut a::after { animation-delay: 1.5s; }
    .ss-cta-chu .col-inner > p:last-child a:first-child::after { animation-delay: 3s; }

    /* Băng ưu đãi: thẻ giá lắc nhẹ định kỳ */
    .ss-hero .ss-uu-dai-chu .col-inner::before {
        transform-origin: 50% 20%;
        animation: ss-lac 5s ease-in-out infinite;
    }

    /* Thẻ gói nổi bật: nhãn "-50%" có vệt sáng + viền cam thở nhẹ */
    .bk-ss .la-noi-bat .bk-ss__goi-giam {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .bk-ss .la-noi-bat .bk-ss__goi-giam::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        background: linear-gradient(105deg, transparent calc(var(--ss-sang) - 25%), rgba(255, 255, 255, .45) var(--ss-sang), transparent calc(var(--ss-sang) + 25%));
        animation: ss-loe 3.2s ease-in-out infinite;
    }

    .bk-ss .bk-ss__goi.la-noi-bat {
        animation: ss-tho-cam 3.2s ease-in-out infinite;
    }

    .bk-ss .bk-ss__goi.la-noi-bat:hover {
        animation-play-state: paused;
    }

    /* Lộ trình: thanh chạy dài ra lần lượt khi cuộn tới (JS gắn .ss-chay lên bảng) */
    .ss-lo-trinh .col-inner table tr::after {
        scale: 0 1;
        transition: scale 1.1s var(--ss-ease);
    }

    .ss-lo-trinh .col-inner table.ss-chay tr::after {
        scale: 1 1;
    }

    .ss-lo-trinh .col-inner table tr:nth-child(2)::after { transition-delay: .18s; }
    .ss-lo-trinh .col-inner table tr:nth-child(3)::after { transition-delay: .36s; }
    .ss-lo-trinh .col-inner table tr:nth-child(4)::after { transition-delay: .54s; }

    .ss-lo-trinh .col-inner table tr.ss-lt-hien-tai td:nth-child(2) strong {
        animation: ss-vong-xanh 2.4s ease-out infinite;
    }

    /* Dòng 47 ngày: số đỏ nhịp nhẹ — mốc bắt buộc tự động hóa */
    .ss-lo-trinh .col-inner table tr.ss-lt-do td:nth-child(1) b {
        display: inline-block;
        animation: ss-nhay-so 2.8s ease-in-out infinite;
    }

    /* Thẻ lợi ích: vạch xanh chạy trên đỉnh + ô icon nghiêng khi rê chuột */
    .ss-the-6 .col-inner {
        position: relative;
        overflow: hidden;
    }

    .ss-the-6 .col-inner::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--ss-xanh), #4ade80);
        scale: 0 1;
        transform-origin: left center;
        transition: scale .45s var(--ss-ease);
    }

    .ss-the-6 .col-inner:hover::after {
        scale: 1 1;
    }

    .ss-the-6 .col-inner::before {
        transition: scale .35s var(--ss-ease), rotate .35s var(--ss-ease), background-color .35s;
    }

    .ss-the-6 .col-inner:hover::before {
        scale: 1.08;
        rotate: -6deg;
        background-color: #bbf7d0;
    }

    /* FAQ: số thứ tự đổi màu khi mở */
    .ss-faq-ds .accordion-item .accordion-title::before {
        transition: background-color .25s, color .25s, scale .25s var(--ss-ease);
    }

    .ss-faq-ds .accordion-item .accordion-title.active::before {
        background: var(--ss-xanh);
        color: #fff;
        scale: 1.06;
    }

    /* CTA: quầng sáng trôi chậm trong hộp xanh */
    .ss-cta-chu .col-inner::before {
        content: "";
        position: absolute;
        top: -60%;
        left: -10%;
        width: 60%;
        height: 220%;
        background: radial-gradient(closest-side, rgba(134, 239, 172, .22), transparent);
        pointer-events: none;
        animation: ss-troi-cta 12s ease-in-out infinite alternate;
    }
}

@keyframes ss-len {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: none; }
}

@keyframes ss-quet-chu {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@keyframes ss-troi {
    from { translate: 0 0; }
    to { translate: -120px 80px; }
}

@keyframes ss-troi-cta {
    from { translate: 0 0; }
    to { translate: 140% 10%; }
}

@keyframes ss-vong-xanh {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    70%,
    100% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
}

@keyframes ss-chop {
    0%, 88%, 100% { opacity: 1; }
    91% { opacity: .2; }
    94% { opacity: 1; }
    97% { opacity: .35; }
}

@keyframes ss-loe {
    0% { --ss-sang: -30%; }
    45%,
    100% { --ss-sang: 130%; }
}

@keyframes ss-lac {
    0%, 82%, 100% { rotate: 0deg; }
    86% { rotate: -12deg; }
    90% { rotate: 10deg; }
    94% { rotate: -6deg; }
    97% { rotate: 3deg; }
}

@keyframes ss-tho-cam {
    0%, 100% { box-shadow: 0 18px 34px -22px rgba(194, 65, 12, .55), 0 0 0 0 rgba(234, 88, 12, 0); }
    50% { box-shadow: 0 18px 34px -22px rgba(194, 65, 12, .55), 0 0 0 6px rgba(234, 88, 12, .12); }
}

@keyframes ss-nhay-so {
    0%, 100% { scale: 1; }
    50% { scale: 1.08; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .bk-ss--the {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 849px) {
    .ss-hero-the .col-inner {
        margin-top: 36px;
    }

    .ss-hero .row.ss-uu-dai {
        margin: 40px 15px 0;
        width: auto;
    }

    .ss-hero .ss-uu-dai-nut .col-inner {
        margin-top: 16px;
        text-align: left;
    }

    .ss-lo-trinh .col-inner {
        margin-top: 32px;
    }

    .ss-faq-ds {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        grid-template-rows: none;
    }

    .ss-cta-chu .col-inner {
        grid-template-columns: minmax(0, 1fr);
        padding: 36px 26px;
    }

    .ss-cta-chu .col-inner > p:last-child:not(:first-child) {
        grid-column: 1;
        grid-row: auto;
        margin-top: 24px;
    }
}

@media (max-width: 640px) {
    .bk-ss--the {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Bảng biểu phí -> mỗi gói một thẻ, ô số có nhãn cột (data-cot) */
    .bk-ss--bieu-phi .bk-ss__cuon {
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang {
        display: block;
        min-width: 0;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang thead {
        display: none;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang tr {
        display: block;
        padding: 6px 16px !important;
        border: 1px solid var(--ss-vien) !important;
        border-radius: var(--ss-r-vua);
        background: #fff !important;
        box-shadow: var(--ss-bong-1);
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang tr.la-noi-bat {
        border-color: var(--ss-cam-vien) !important;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang th,
    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0 !important;
        font-size: 14.5px;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang th {
        padding-top: 12px !important;
        border-bottom: 1px solid var(--ss-vien-nhat) !important;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang td::before {
        content: attr(data-cot);
        font-size: 13px;
        font-weight: 500;
        color: var(--ss-chu-mo);
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang tbody tr:last-child > *,
    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang td {
        border-bottom: 0 !important;
    }

    .bk-ss--bieu-phi .bk-ss__bang tbody tr:hover > * {
        background: transparent;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang td.bk-ss__c-nut {
        padding-top: 4px !important;
        padding-bottom: 12px !important;
    }

    .bk-ss--bieu-phi .bk-ss__cuon .bk-ss__bang td.bk-ss__c-nut::before {
        display: none;
    }

    .bk-ss--bieu-phi .bk-ss__bang .bk-ss__nut-dk--nho {
        display: flex;
        width: 100%;
        min-height: 40px;
    }

    .bk-ss .bk-ss__goi-ten {
        min-height: 0;
    }

    .ss-thanh .col-inner {
        justify-content: center;
        text-align: center;
    }

    .ss-thanh .col-inner > p {
        justify-content: center;
    }

    .ss-thanh .col-inner > p:last-child {
        display: none; /* hotline đã có ở CTA cuối trang + footer; giữ thanh gọn 1–2 dòng */
    }

    .ss-hero-chu .col-inner > ul + p a {
        flex: 1 1 100%;
        justify-content: center;
    }

    .ss-hero-the .col-inner {
        padding: 20px 18px;
    }

    .ss-hero-the .col-inner > ul li {
        flex-direction: column;
        gap: 2px;
    }

    .ss-hero-the .col-inner > ul li strong {
        text-align: left;
    }

    .ss-hero .ss-uu-dai-chu .col-inner {
        padding-left: 0;
    }

    .ss-hero .ss-uu-dai-chu .col-inner::before {
        position: static;
        margin: 0 0 12px;
    }

    .ss-lo-trinh .col-inner {
        padding: 20px 18px 12px;
    }

    .ss-lo-trinh .col-inner > p:first-child {
        display: block;
        padding-left: 28px;
        text-indent: -28px;
    }

    .ss-lo-trinh .col-inner > p:first-child::before {
        display: inline-block;
        margin-right: 10px;
        vertical-align: -3px;
    }

    .ss-lo-trinh .col-inner > p:first-child strong {
        display: table;
        margin: 8px 0 0;
        text-indent: 0;
    }

    .ss-lo-trinh .col-inner table tr {
        grid-template-columns: 78px minmax(0, 1fr) auto;
        margin-left: -8px;
        margin-right: -8px;
        padding: 12px 8px 14px;
    }

    .ss-lo-trinh .col-inner table td:nth-child(1) b {
        font-size: 26px;
    }

    .ss-faq-ds .accordion-item .accordion-inner {
        padding-left: 20px;
    }

    .ss-cta-chu .col-inner > p:last-child:not(:first-child) a {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-ss .bk-ss__goi,
    .ss-the-6 .col-inner {
        transition: none;
    }

    .bk-ss .bk-ss__goi:hover,
    .ss-the-6 .col-inner:hover {
        transform: none;
    }
}