/* =========================================================================
 * Trang ĐĂNG KÝ ĐẠI LÝ / CTV — bộ 11 khối Page Builder (pro/AgentPartner/Blocks/Landing).
 *
 * Dùng chung MỌI theme nên file này TỰ CHỨA:
 *  - mọi class có tiền tố .aglp- , không mượn .container/.row/.btn/.form-control của theme
 *    (mỗi theme style một kiểu, mượn là mỗi theme vỡ một kiểu).
 *  - đơn vị px, không rem: vài theme đặt font-size gốc của html khác 16px.
 *  - thẻ h2/h3/p/ul/button/input được đặt lại margin, cỡ chữ, màu trong phạm vi .aglp.
 *  - ảnh phủ khung dùng background-image, KHÔNG dùng <img>: Vietago ép
 *    `.page-template-content img { height:auto }` nên img object-fit bị co lại.
 *  - lưới dùng auto-fit + flex-wrap theo bề rộng thực của khối, không theo bề rộng màn hình
 *    (Vietago có sidebar trái nên cùng một màn hình mà khối hẹp hơn hẳn theme khác).
 *  - KHÔNG đặt margin-bottom cho ul/li: main.css của theme có `ul, li { margin-bottom:0 !important }`
 *    — khoảng cách dưới danh sách phải dùng padding-bottom (danh sách quyền lợi gói Đại lý
 *    từng dính sát đường kẻ vì chuyện này).
 *  - KHÔNG dùng thẻ h4: vietago.css ép `h4 { font-size:18px !important }`.
 * ========================================================================= */

.aglp {
    --aglp-blue: #1d5cff;
    --aglp-blue-dark: #1449d6;
    --aglp-indigo: #5b3df5;
    --aglp-grad: linear-gradient(90deg, #1d5cff 0%, #5b3df5 100%);
    --aglp-ink: #0f172a;
    --aglp-text: #334155;
    --aglp-muted: #64748b;
    --aglp-soft: #94a3b8;
    --aglp-line: #e2e8f0;
    --aglp-bg: #f8fafc;
    --aglp-green: #10b981;
    --aglp-green-dark: #059669;
    --aglp-yellow: #ffc107;

    color: var(--aglp-text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

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

/* Reset bọc :where() để độ ưu tiên chỉ còn bằng MỘT class: đủ thắng rule thẻ trần của theme
   (p, figure, ul…), nhưng thua mọi rule class khai phía dưới file này. Viết `.aglp p` thường là
   (0,1,1) — mạnh hơn `.aglp-testi { padding }` nên thẻ cảm nhận mất padding, danh sách quyền lợi
   mất margin và đè lên đường kẻ (đã dính). */
.aglp :where(h2, h3, h4, p, ul, ol, figure) {
    margin: 0;
    padding: 0;
}

.aglp :where(ul, ol) {
    list-style: none;
}

.aglp :where(h2, h3, h4) {
    color: var(--aglp-ink);
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.aglp a {
    text-decoration: none;
}

.aglp [hidden] {
    display: none !important;
}

.aglp-svg {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* ------------------------------ Khung chung ------------------------------ */

.aglp[id] {
    scroll-margin-top: 90px;
}

.aglp-sec {
    padding: 80px 0;
    background: #fff;
}

.aglp-sec--soft {
    background: var(--aglp-bg);
}

.aglp-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

.aglp-head {
    max-width: 800px;
    margin: 0 auto 48px;
    text-align: center;
}

.aglp .aglp-h2 {
    margin: 14px 0 12px;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    white-space: pre-line;
}

.aglp .aglp-lead {
    color: var(--aglp-muted);
    font-size: 18px;
    line-height: 1.6;
    white-space: pre-line;
}

.aglp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.4;
}

.aglp-pill .aglp-svg {
    width: 15px;
    height: 15px;
}

.aglp-pill--green {
    background: #d1fae5;
    color: #065f46;
}

.aglp-pill--amber {
    background: #fef3c7;
    color: #92400e;
}

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

.aglp .aglp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.aglp .aglp-btn:hover {
    transform: translateY(-1px);
}

.aglp .aglp-btn--primary,
.aglp .aglp-btn--primary:hover,
.aglp .aglp-btn--primary:focus {
    background: var(--aglp-blue);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(29, 92, 255, .7);
}

.aglp .aglp-btn--primary:hover {
    background: var(--aglp-blue-dark);
}

.aglp .aglp-btn--grad,
.aglp .aglp-btn--grad:hover,
.aglp .aglp-btn--grad:focus {
    background: var(--aglp-grad);
    color: #fff;
    box-shadow: 0 12px 28px -12px rgba(76, 64, 245, .8);
}

.aglp .aglp-btn--ghost,
.aglp .aglp-btn--ghost:hover,
.aglp .aglp-btn--ghost:focus {
    background: #fff;
    border-color: var(--aglp-line);
    color: var(--aglp-ink);
}

.aglp .aglp-btn--outline-blue,
.aglp .aglp-btn--outline-blue:hover {
    background: #fff;
    border-color: #bfdbfe;
    color: var(--aglp-blue-dark);
}

.aglp .aglp-btn--soft,
.aglp .aglp-btn--soft:hover {
    background: #f1f5f9;
    color: var(--aglp-ink);
}

.aglp .aglp-btn--dark,
.aglp .aglp-btn--dark:hover {
    background: var(--aglp-ink);
    color: #fff;
}

.aglp .aglp-btn--yellow,
.aglp .aglp-btn--yellow:hover {
    background: var(--aglp-yellow);
    color: var(--aglp-ink);
}

.aglp .aglp-btn--block {
    display: flex;
    width: 100%;
}

.aglp .aglp-btn--sm {
    min-height: 40px;
    padding: 9px 18px;
    font-size: 14px;
    border-radius: 10px;
}

/* ------------------------------ Danh sách tích ------------------------------ */

.aglp-checks {
    display: grid;
    gap: 10px;
}

.aglp-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.aglp-checks .aglp-svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--aglp-green);
}

.aglp-checks--blue .aglp-svg {
    color: var(--aglp-blue);
}

/* ------------------------------- Ô icon màu ------------------------------- */

.aglp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 1px solid var(--aglp-line);
    border-radius: 12px;
    background: #fff;
    color: var(--aglp-ic, var(--aglp-blue));
}

.aglp-ico .aglp-svg {
    width: 22px;
    height: 22px;
}

.aglp-ico--tint {
    border-color: transparent;
    background: var(--aglp-ic-bg, #eff6ff);
}

.aglp-c-blue   { --aglp-ic: #1d5cff; --aglp-ic-bg: #eff6ff; }
.aglp-c-indigo { --aglp-ic: #4f46e5; --aglp-ic-bg: #eef2ff; }
.aglp-c-purple { --aglp-ic: #7c3aed; --aglp-ic-bg: #f5f3ff; }
.aglp-c-green  { --aglp-ic: #059669; --aglp-ic-bg: #ecfdf5; }
.aglp-c-orange { --aglp-ic: #ea580c; --aglp-ic-bg: #fff7ed; }
.aglp-c-amber  { --aglp-ic: #d97706; --aglp-ic-bg: #fffbeb; }
.aglp-c-sky    { --aglp-ic: #0284c7; --aglp-ic-bg: #f0f9ff; }
.aglp-c-red    { --aglp-ic: #dc2626; --aglp-ic-bg: #fef2f2; }

/* =========================================================================
 * 1. HERO
 * ========================================================================= */

.aglp-hero {
    padding: 64px 0 56px;
    background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
}

.aglp-hero__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
}

.aglp-hero__main {
    flex: 1 1 520px;
    min-width: 0;
}

.aglp-hero__side {
    flex: 1 1 340px;
    /* Thiếu min-width:0 thì dòng hoạt động (nowrap) đẩy khung rộng theo chữ, tràn ngang ở 390px. */
    min-width: 0;
    max-width: 400px;
    margin: 0 auto;
}

.aglp-hero__badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    font-size: 14px;
    line-height: 1.4;
}

.aglp-hero__badge strong {
    color: #1e40af;
    font-weight: 700;
}

.aglp-hero__badge span {
    color: #3b82f6;
}

.aglp-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aglp-green);
}

.aglp-hero__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #93c5fd;
}

.aglp .aglp-hero__title {
    margin: 24px 0 20px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--aglp-ink);
}

.aglp-hero__title span {
    display: block;
}

.aglp-hero__title .aglp-hero__hl {
    background: var(--aglp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.aglp .aglp-hero__desc {
    max-width: 580px;
    color: var(--aglp-muted);
    font-size: 18px;
    line-height: 1.7;
}

.aglp-hero__desc p {
    margin: 0;
}

.aglp-hero__desc strong,
.aglp-hero__desc b {
    color: var(--aglp-ink);
    font-weight: 700;
}

.aglp-hero__checks {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 24px;
    margin-top: 24px;
    padding-bottom: 32px;
    font-size: 14px;
    color: var(--aglp-text);
}

.aglp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.aglp-hero__actions .aglp-btn {
    min-height: 54px;
    padding: 14px 28px;
    font-size: 16px;
}

.aglp-hero__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    color: var(--aglp-muted);
    font-size: 14px;
}

.aglp-hero__hint > .aglp-svg {
    color: #f59e0b;
}

.aglp .aglp-hero__hint a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--aglp-blue);
    font-weight: 700;
}

.aglp-hero__hint a .aglp-svg {
    width: 15px;
    height: 15px;
}

/* ---- Thẻ minh hoạ cổng đại lý ---- */

.aglp-mock {
    position: relative;
    padding: 22px;
    border: 1px solid var(--aglp-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 60px -30px rgba(76, 64, 245, .35), 0 8px 24px -12px rgba(15, 23, 42, .12);
    font-size: 13px;
}

.aglp-mock__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--aglp-line);
}

.aglp-mock__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #dbeafe;
    color: #1e40af;
    font-weight: 800;
}

.aglp-mock__who {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.aglp-mock__who strong {
    display: block;
    color: var(--aglp-ink);
    font-weight: 600;
}

.aglp-mock__status {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: var(--aglp-green-dark);
    font-size: 12px;
}

.aglp-mock__status::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--aglp-green);
}

.aglp-mock__tag {
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: var(--aglp-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
}

.aglp-mock__box {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--aglp-line);
    border-radius: 14px;
    background: var(--aglp-bg);
}

.aglp-mock__route {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    color: var(--aglp-ink);
    font-weight: 600;
}

.aglp-mock__route > span {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.aglp-mock__route .aglp-svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--aglp-blue);
}

.aglp-mock__chip {
    padding: 3px 8px;
    border-radius: 6px;
    background: #d1fae5;
    color: var(--aglp-green-dark);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.aglp-mock__prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.aglp-mock__price {
    padding: 8px 10px;
    border: 1px solid var(--aglp-line);
    border-radius: 10px;
    background: #fff;
}

.aglp-mock__price small {
    display: block;
    color: var(--aglp-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.aglp-mock__price strong {
    color: var(--aglp-ink);
    font-size: 14px;
}

.aglp-mock__profit {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(90deg, #10b981, #0d9488);
    color: #fff;
}

.aglp-mock__profit small {
    display: block;
    font-size: 12px;
    opacity: .95;
}

.aglp-mock__profit strong {
    font-size: 16px;
    font-weight: 800;
}

.aglp-mock__group {
    text-align: right;
}

.aglp-mock__group span {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .2);
    font-size: 10px;
    font-weight: 700;
}

.aglp-mock__group strong {
    display: block;
    color: #fde68a;
    font-size: 13px;
}

.aglp-mock__hotel {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    background: #f8faff;
}

.aglp-mock__hotel-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.aglp-mock__hotel-row + .aglp-mock__hotel-row {
    margin-top: 4px;
}

.aglp-mock__hotel strong {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--aglp-ink);
    font-weight: 600;
}

.aglp-mock__hotel strong .aglp-svg {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--aglp-indigo);
}

.aglp-mock__hotel em {
    color: var(--aglp-indigo);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.aglp-mock__hotel-row span {
    color: var(--aglp-muted);
    font-size: 12px;
}

.aglp-mock__hotel-row b {
    color: var(--aglp-green-dark);
    font-size: 12px;
    white-space: nowrap;
}

.aglp-mock__feed {
    display: grid;
    /* minmax(0,1fr): ô lưới mặc định không co nhỏ hơn chữ nowrap → tràn ở màn 320px. */
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 14px;
}

.aglp-mock__feed li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--aglp-bg);
    color: var(--aglp-text);
    font-size: 12px;
}

.aglp-mock__feed li .aglp-svg {
    width: 15px;
    height: 15px;
    color: #f59e0b;
}

.aglp-mock__feed li.is-green {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
}

.aglp-mock__feed li.is-green .aglp-svg {
    color: var(--aglp-green-dark);
}

.aglp-mock__feed p {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aglp-mock__feed b {
    color: var(--aglp-ink);
}

.aglp-mock__feed time {
    flex: 0 0 auto;
    color: var(--aglp-soft);
    font-size: 11px;
}

.aglp-mock__feed li.is-green time {
    color: var(--aglp-green-dark);
}

.aglp .aglp-mock__cta {
    margin-top: 14px;
    min-height: 40px;
    font-size: 13px;
}

.aglp-mock__float {
    position: absolute;
    left: -28px;
    bottom: -26px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--aglp-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 32px -16px rgba(15, 23, 42, .3);
}

.aglp-mock__float .aglp-ico {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #fef3c7;
    color: #b45309;
}

.aglp-mock__float .aglp-ico .aglp-svg {
    width: 18px;
    height: 18px;
}

.aglp-mock__float strong {
    display: block;
    color: var(--aglp-ink);
    font-size: 13px;
    line-height: 1.3;
}

.aglp-mock__float small {
    color: var(--aglp-muted);
    font-size: 11px;
}

/* ---- Dải số liệu ---- */

.aglp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px 16px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--aglp-line);
    text-align: center;
}

.aglp-stat__value {
    display: block;
    background: var(--aglp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}

.aglp-stat__label {
    display: block;
    color: var(--aglp-ink);
    font-size: 15px;
    font-weight: 600;
}

.aglp-stat__sub {
    display: block;
    color: var(--aglp-muted);
    font-size: 13px;
}

/* =========================================================================
 * 2. LỢI THẾ
 * ========================================================================= */

.aglp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.aglp-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

.aglp-bcard {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--aglp-line);
    border-radius: 20px;
    background: var(--aglp-bg);
    transition: box-shadow .2s ease, transform .2s ease;
}

.aglp-bcard:hover {
    box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .25);
    transform: translateY(-2px);
}

.aglp-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.aglp-tag {
    padding: 4px 12px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.5;
    text-align: right;
}

.aglp .aglp-bcard h3 {
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
}

.aglp-bcard__desc {
    color: var(--aglp-muted);
    font-size: 15px;
    line-height: 1.65;
}

.aglp-bcard__note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--aglp-line);
    color: var(--aglp-muted);
    font-size: 13px;
    line-height: 1.6;
}

.aglp .aglp-bcard__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--aglp-ink);
    font-size: 13px;
    font-weight: 700;
}

.aglp .aglp-bcard__link .aglp-svg {
    width: 15px;
    height: 15px;
}

.aglp .aglp-bcard__link.is-accent {
    color: var(--aglp-blue);
}

/* =========================================================================
 * 3. DẢI KÊU GỌI HÀNH ĐỘNG
 * ========================================================================= */

.aglp-cta {
    padding: 40px 0;
}

.aglp-cta__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 40px;
    padding: 44px 40px;
    border-radius: 24px;
    background: linear-gradient(90deg, #1e3a8a 0%, #372a88 55%, #111827 100%);
    box-shadow: 0 24px 48px -24px rgba(30, 58, 138, .6);
}

.aglp-cta__text {
    flex: 1 1 460px;
    min-width: 0;
}

.aglp-cta__eyebrow {
    color: var(--aglp-yellow);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.aglp .aglp-cta__title {
    margin: 8px 0 10px;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
    white-space: pre-line;
}

.aglp-cta__desc {
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.65;
    white-space: pre-line;
}

.aglp-cta__action {
    flex: 0 0 auto;
    text-align: center;
}

.aglp-cta__note {
    margin-top: 10px;
    color: #94a3b8;
    font-size: 12px;
}

/* =========================================================================
 * 4. SẢN PHẨM THEO TAB
 * ========================================================================= */

.aglp-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}

.aglp .aglp-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 18px 8px 8px;
    border: 1px solid var(--aglp-line);
    border-radius: 14px;
    background: #fff;
    color: var(--aglp-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
}

.aglp-tab__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    color: var(--aglp-blue);
}

.aglp .aglp-tab.is-active {
    border-color: var(--aglp-blue);
    background: var(--aglp-blue);
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(29, 92, 255, .8);
}

.aglp-tab.is-active .aglp-tab__ico {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.aglp-panel {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--aglp-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .35);
}

.aglp-panel__main {
    flex: 1 1 520px;
    min-width: 0;
    padding: 44px 40px;
}

.aglp-panel__tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.aglp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.aglp-chip .aglp-svg {
    width: 13px;
    height: 13px;
}

.aglp-chip--green {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.aglp .aglp-panel__heading {
    margin: 16px 0 10px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
}

.aglp-panel__sub {
    color: var(--aglp-muted);
    font-size: 16px;
}

.aglp-panel__list-title {
    margin: 24px 0 12px;
    color: var(--aglp-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.aglp-panel__main .aglp-checks {
    font-size: 15px;
}

.aglp-panel__partners {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--aglp-line);
}

.aglp-panel__partners small {
    display: block;
    margin-bottom: 10px;
    color: var(--aglp-muted);
    font-size: 12px;
    font-weight: 600;
}

.aglp-panel__partners ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aglp-panel__partners li {
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: var(--aglp-text);
    font-size: 12px;
    font-weight: 600;
}

.aglp-panel__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 30px;
}

.aglp-panel__action small {
    flex: 1 1 200px;
    color: var(--aglp-muted);
    font-size: 13px;
    line-height: 1.5;
}

.aglp-panel__side {
    position: relative;
    display: flex;
    flex: 1 1 380px;
    flex-direction: column;
    min-width: 0;
    padding: 44px 40px;
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    background-size: cover;
    background-position: center;
    color: #cbd5e1;
}

.aglp-panel__side::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(30, 41, 59, .93) 0%, rgba(15, 23, 42, .96) 100%);
}

.aglp-panel__side > * {
    position: relative;
}

.aglp-panel__side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aglp-panel__eyebrow {
    color: #60a5fa;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aglp-panel__live {
    padding: 2px 8px;
    border: 1px solid rgba(52, 211, 153, .45);
    border-radius: 4px;
    background: rgba(16, 185, 129, .12);
    color: #6ee7b7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.aglp .aglp-panel__side-title {
    margin: 18px 0 12px;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.aglp-panel__side-desc {
    font-size: 14px;
    line-height: 1.65;
}

.aglp-panel__status {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
}

.aglp-panel__status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.aglp-panel__status-row strong {
    color: #e2e8f0;
    font-weight: 600;
}

.aglp-panel__online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #34d399;
    font-weight: 700;
}

.aglp-panel__online::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
}

.aglp-panel__metrics {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.aglp-panel__metrics small {
    display: block;
    color: #94a3b8;
    font-size: 12px;
}

.aglp-panel__metrics strong {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.aglp-panel__metrics > div:first-child strong {
    color: #fcd34d;
}

.aglp-panel__metrics > div:last-child {
    text-align: right;
}

.aglp-panel__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
    line-height: 1.55;
}

.aglp-panel__side-spacer {
    flex: 1 1 auto;
    min-height: 32px;
}

.aglp-panel__note .aglp-ico {
    width: 32px;
    height: 32px;
    border-color: rgba(255, 255, 255, .15);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #34d399;
}

.aglp-panel__note .aglp-ico .aglp-svg {
    width: 16px;
    height: 16px;
}

/* =========================================================================
 * 5. GÓI HỢP TÁC
 * ========================================================================= */

.aglp-plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    align-items: stretch;
    gap: 40px 28px;
    padding-top: 20px;
}

.aglp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 30px 30px;
    border: 1px solid var(--aglp-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 36px -28px rgba(15, 23, 42, .35);
}

.aglp-plan.is-featured {
    border: 2px solid var(--aglp-blue);
    box-shadow: 0 28px 56px -30px rgba(29, 92, 255, .55);
}

.aglp-plan__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 80%;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--aglp-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 20px -10px rgba(76, 64, 245, .8);
}

.aglp-plan:not(.is-featured) .aglp-plan__ribbon {
    left: auto;
    right: 24px;
    max-width: 62%;
    background: linear-gradient(90deg, #1d4ed8, #7c3aed);
    transform: translateY(-50%);
}

.aglp-plan__ribbon .aglp-svg {
    width: 14px;
    height: 14px;
}

.aglp .aglp-plan h3 {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
}

.aglp-plan__sub {
    margin-top: 6px;
    color: var(--aglp-muted);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-line;
}

.aglp-plan__spec {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--aglp-line);
    border-radius: 16px;
    background: var(--aglp-bg);
}

.aglp-plan__spec-row {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.aglp-plan__spec-row span {
    color: var(--aglp-muted);
}

.aglp-plan__spec-row strong {
    padding: 4px 8px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 700;
}

.aglp-plan__spec-row + .aglp-plan__spec-row strong {
    background: #eff6ff;
    color: #1d4ed8;
}

.aglp-plan__fit {
    margin-top: 20px;
    color: var(--aglp-muted);
    font-size: 13px;
    line-height: 1.55;
}

.aglp-plan__fit b {
    color: var(--aglp-ink);
}

.aglp-plan__benefits-title {
    margin: 22px 0 12px;
    color: var(--aglp-soft);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.aglp-plan__benefits {
    display: grid;
    gap: 12px;
    padding-bottom: 26px;
}

.aglp-plan__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--aglp-text);
    font-size: 14px;
    line-height: 1.5;
}

.aglp-plan__benefits li .aglp-svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    padding: 2px;
    border-radius: 50%;
    background: #dbeafe;
    color: var(--aglp-blue);
    stroke-width: 3;
}

.aglp-plan__foot {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--aglp-line);
}

.aglp-plans__more {
    margin-top: 40px;
    text-align: center;
}

.aglp .aglp-plans__toggle {
    min-height: 44px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.aglp-plans__toggle .aglp-svg {
    transition: transform .2s ease;
}

.aglp-plans.is-compare-open .aglp-plans__toggle .aglp-svg {
    transform: rotate(180deg);
}

.aglp-compare {
    display: none;
    margin-top: 24px;
    overflow-x: auto;
    border: 1px solid var(--aglp-line);
    border-radius: 16px;
    background: #fff;
}

.aglp-plans.is-compare-open .aglp-compare {
    display: block;
}

.aglp .aglp-compare table {
    width: 100%;
    min-width: 640px;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.aglp .aglp-compare th,
.aglp .aglp-compare td {
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--aglp-line);
    text-align: left;
    vertical-align: top;
}

.aglp .aglp-compare thead th {
    background: var(--aglp-bg);
    color: var(--aglp-ink);
    font-weight: 700;
}

.aglp .aglp-compare tbody th {
    color: var(--aglp-muted);
    font-weight: 600;
}

.aglp .aglp-compare tr:last-child td,
.aglp .aglp-compare tr:last-child th {
    border-bottom: 0;
}

/* =========================================================================
 * 6. CÁC BƯỚC
 * ========================================================================= */

.aglp-step {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--aglp-line);
    border-radius: 20px;
    background: var(--aglp-bg);
}

.aglp-step__num {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--aglp-soft);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.aglp-step__num strong {
    color: var(--aglp-ink);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.aglp-step__time {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px 10px;
    border: 1px solid var(--aglp-line);
    border-radius: 6px;
    background: #fff;
    color: var(--aglp-text);
    font-size: 12px;
    font-weight: 600;
}

.aglp-step__time .aglp-svg {
    width: 13px;
    height: 13px;
    color: var(--aglp-blue);
}

.aglp .aglp-step h3 {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}

.aglp-step__desc {
    color: var(--aglp-muted);
    font-size: 14px;
    line-height: 1.7;
}

.aglp-step__receive {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--aglp-line);
}

.aglp-step__receive small {
    display: block;
    margin-bottom: 8px;
    color: var(--aglp-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.aglp-step__receive .aglp-checks {
    gap: 8px;
    color: var(--aglp-ink);
    font-size: 13px;
    font-weight: 500;
}

.aglp-step__receive .aglp-checks .aglp-svg {
    width: 15px;
    height: 15px;
}

.aglp .aglp-step__btn {
    margin-top: 20px;
    align-self: flex-start;
}

.aglp-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: 48px;
    padding: 24px 32px;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #f0f7ff;
}

.aglp-help strong {
    display: block;
    color: var(--aglp-ink);
    font-size: 17px;
    font-weight: 700;
}

.aglp-help span {
    color: var(--aglp-muted);
    font-size: 14px;
}

/* =========================================================================
 * 7. KHO TÀI NGUYÊN
 * ========================================================================= */

.aglp-res {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--aglp-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px -24px rgba(15, 23, 42, .35);
}

.aglp-res .aglp-ico {
    border-color: transparent;
    background: var(--aglp-ic-bg, #eff6ff);
}

.aglp-res__tag {
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--aglp-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
}

.aglp .aglp-res h3 {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}

.aglp-res__desc {
    color: var(--aglp-muted);
    font-size: 14px;
    line-height: 1.7;
}

.aglp-res__foot {
    margin-top: auto;
    padding-top: 16px;
    font-size: 12px;
}

.aglp-res__foot > div {
    padding-top: 14px;
    border-top: 1px solid var(--aglp-line);
}

.aglp-res__desc + .aglp-res__foot {
    padding-top: 24px;
}

.aglp-res__foot strong {
    margin-right: 4px;
    color: var(--aglp-blue);
    font-weight: 700;
}

.aglp-res__foot span {
    color: var(--aglp-soft);
}

/* =========================================================================
 * 8. CÔNG CỤ BÁO GIÁ
 * ========================================================================= */

.aglp-quote {
    padding: 56px 0;
}

.aglp-quote__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px 56px;
    padding: 48px;
    border: 1px solid #bfdbfe;
    border-radius: 28px;
    background: linear-gradient(135deg, #f8fbff 0%, #f1f5f9 100%);
    box-shadow: 0 30px 60px -44px rgba(15, 23, 42, .5);
}

.aglp-quote__main {
    flex: 1 1 460px;
    min-width: 0;
}

.aglp .aglp-quote__main .aglp-h2 {
    margin-top: 16px;
    font-size: 34px;
}

.aglp-quote__desc {
    color: var(--aglp-muted);
    font-size: 16px;
    line-height: 1.75;
    white-space: pre-line;
}

.aglp-quote__checks {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 24px;
    margin-top: 22px;
    padding-bottom: 28px;
    color: var(--aglp-text);
    font-size: 14px;
    font-weight: 600;
}

.aglp-quote__btns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.aglp-quote__btns .aglp-btn--primary .aglp-svg {
    color: #fde68a;
}

.aglp-quote__side {
    flex: 1 1 320px;
    max-width: 380px;
    margin: 0 auto;
}

.aglp-qmock {
    padding: 20px;
    border: 1px solid var(--aglp-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .35);
}

.aglp-qmock__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--aglp-line);
}

.aglp-qmock__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 8px;
    background-color: var(--aglp-blue);
    background-size: cover;
    background-position: center;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.aglp-qmock__who {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.aglp-qmock__who strong {
    display: block;
    color: var(--aglp-ink);
    font-size: 14px;
}

.aglp-qmock__who small {
    color: var(--aglp-soft);
    font-size: 11px;
}

.aglp-qmock__badge {
    padding: 3px 8px;
    border-radius: 4px;
    background: #d1fae5;
    color: #047857;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.aglp-qmock__product {
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    background: var(--aglp-bg);
}

.aglp-qmock__product strong {
    display: block;
    color: var(--aglp-ink);
    font-size: 14px;
}

.aglp-qmock__product small {
    display: block;
    margin-top: 2px;
    color: var(--aglp-muted);
    font-size: 12px;
}

.aglp-qmock__price {
    margin-top: 6px;
    color: var(--aglp-blue);
    font-size: 16px;
    font-weight: 800;
    text-align: right;
}

.aglp-qmock__note {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    color: var(--aglp-muted);
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
}

.aglp-qmock__note .aglp-svg {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: #d97706;
}

.aglp-qmock__note b {
    color: var(--aglp-text);
}

/* =========================================================================
 * 9. CẢM NHẬN
 * ========================================================================= */

.aglp-testi {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--aglp-line);
    border-radius: 24px;
    background: var(--aglp-bg);
}

.aglp-testi__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.aglp-testi__stars {
    display: flex;
    gap: 3px;
    color: #f59e0b;
}

.aglp-testi__stars .aglp-svg {
    width: 17px;
    height: 17px;
}

.aglp-testi__quote-ico {
    color: #bfdbfe;
}

.aglp-testi__quote-ico .aglp-svg {
    width: 28px;
    height: 28px;
}

.aglp-testi blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--aglp-text);
    font-size: 15px;
    font-style: italic;
    line-height: 1.8;
    white-space: pre-line;
}

.aglp-testi__metrics {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid var(--aglp-line);
    border-radius: 14px;
    background: #fff;
}

.aglp-testi__metrics small {
    display: block;
    color: var(--aglp-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
    text-transform: uppercase;
}

.aglp-testi__metrics strong {
    display: block;
    margin-top: 4px;
    color: var(--aglp-green-dark);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.aglp-testi__metrics > div:last-child {
    text-align: right;
}

.aglp-testi__metrics > div:last-child strong {
    color: var(--aglp-ink);
    font-size: 14px;
}

.aglp-testi__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 22px;
}

.aglp-testi__metrics + .aglp-testi__author,
.aglp-testi blockquote + .aglp-testi__author {
    margin-top: 22px;
    border-top: 1px solid var(--aglp-line);
}

.aglp-testi__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: #dbeafe;
    background-size: cover;
    background-position: center;
    color: #1e40af;
    font-size: 15px;
    font-weight: 800;
}

.aglp-testi__who {
    min-width: 0;
}

.aglp-testi__who strong {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--aglp-ink);
    font-size: 15px;
}

.aglp-testi__who strong .aglp-svg {
    width: 15px;
    height: 15px;
    color: var(--aglp-blue);
}

.aglp-testi__who small {
    display: block;
    overflow: hidden;
    color: var(--aglp-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
 * 10. CÂU HỎI THƯỜNG GẶP
 * ========================================================================= */

.aglp-faq__search {
    position: relative;
    max-width: 576px;
    margin: 0 auto 16px;
}

.aglp-faq__search .aglp-svg {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--aglp-soft);
    transform: translateY(-50%);
}

.aglp .aglp-faq__search input {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px 0 44px;
    border: 1px solid var(--aglp-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    color: var(--aglp-ink);
    font-size: 14px;
    outline: 0;
}

.aglp .aglp-faq__search input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.aglp-faq__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
}

.aglp .aglp-faq__cat {
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid var(--aglp-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: var(--aglp-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.aglp .aglp-faq__cat.is-active {
    border-color: var(--aglp-blue);
    background: var(--aglp-blue);
    color: #fff;
}

.aglp-faq__list {
    display: grid;
    gap: 14px;
    max-width: 960px;
    margin: 0 auto;
}

.aglp-faq__item {
    overflow: hidden;
    border: 1px solid var(--aglp-line);
    border-radius: 16px;
    background: #fff;
}

.aglp .aglp-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 20px 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--aglp-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.aglp-faq__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--aglp-muted);
    transition: transform .2s ease;
}

.aglp-faq__chev .aglp-svg {
    width: 16px;
    height: 16px;
}

.aglp-faq__item.is-open .aglp-faq__chev {
    transform: rotate(180deg);
}

.aglp-faq__a {
    display: none;
    padding: 14px 24px 20px;
    border-top: 1px solid #f1f5f9;
    color: var(--aglp-muted);
    font-size: 15px;
    line-height: 1.75;
}

.aglp-faq__item.is-open .aglp-faq__a {
    display: block;
}

.aglp-faq__a p {
    margin: 0 0 8px;
}

.aglp-faq__a p:last-child {
    margin-bottom: 0;
}

.aglp-faq__empty {
    padding: 24px;
    color: var(--aglp-muted);
    text-align: center;
}

.aglp-faq__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 960px;
    margin: 32px auto 0;
    padding: 20px 24px;
    border: 1px solid var(--aglp-line);
    border-radius: 16px;
    background: #fff;
}

.aglp-faq__help-text {
    display: flex;
    align-items: center;
    gap: 14px;
}

.aglp-faq__help-text .aglp-ico {
    border-radius: 50%;
}

.aglp-faq__help-text strong {
    display: block;
    color: var(--aglp-ink);
    font-size: 15px;
}

.aglp-faq__help-text span {
    color: var(--aglp-muted);
    font-size: 13px;
}

.aglp-faq__help-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.aglp-faq__help-btns .aglp-btn--ghost .aglp-svg {
    color: var(--aglp-green-dark);
}

/* =========================================================================
 * 11. FORM ĐĂNG KÝ
 * ========================================================================= */

.aglp-signup {
    padding: 80px 0;
    scroll-margin-top: 90px;
}

.aglp-signup__card {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--aglp-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 40px 80px -48px rgba(15, 23, 42, .55);
}

.aglp-signup__side {
    display: flex;
    flex: 1 1 340px;
    flex-direction: column;
    min-width: 0;
    padding: 48px 44px;
    background:
        radial-gradient(circle at 20% 80%, rgba(91, 61, 245, .35), transparent 55%),
        linear-gradient(160deg, #1e3a8a 0%, #312e81 55%, #0b0b1a 100%);
    color: #cbd5e1;
}

.aglp-signup__badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid rgba(251, 191, 36, .5);
    border-radius: 999px;
    background: rgba(251, 191, 36, .15);
    color: #fcd34d;
    font-size: 13px;
    font-weight: 700;
}

.aglp-signup__badge .aglp-svg {
    width: 14px;
    height: 14px;
}

.aglp .aglp-signup__side h2 {
    margin: 22px 0 16px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    white-space: pre-line;
}

.aglp-signup__side-desc {
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
}

.aglp-signup__side .aglp-checks {
    gap: 14px;
    margin-top: 26px;
    font-size: 15px;
}

.aglp-signup__side .aglp-checks .aglp-svg {
    color: #34d399;
}

.aglp-signup__side .aglp-checks p {
    margin: 0;
}

.aglp-signup__side .aglp-checks strong,
.aglp-signup__side .aglp-checks b {
    color: #fff;
}

.aglp-signup__notes {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 28px;
    font-size: 13px;
}

.aglp-signup__notes > div:first-child {
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.aglp-signup__notes > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aglp-signup__notes .aglp-svg {
    width: 15px;
    height: 15px;
    color: #fbbf24;
}

.aglp-signup__notes > div + div .aglp-svg {
    color: #34d399;
}

.aglp-signup__main {
    flex: 1 1 520px;
    min-width: 0;
    padding: 48px;
}

.aglp .aglp-signup__main h2 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
}

.aglp-signup__main-desc {
    margin-top: 4px;
    color: var(--aglp-muted);
    font-size: 14px;
}

.aglp-signup__form {
    margin: 22px 0 0;
}

.aglp .aglp-label {
    display: block;
    margin: 0 0 8px;
    color: var(--aglp-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.aglp-label--upper {
    color: var(--aglp-text);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.aglp-label em {
    color: #ef4444;
    font-style: normal;
}

.aglp-models {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.aglp-pick {
    position: relative;
    display: block;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--aglp-line);
    border-radius: 12px;
    background: var(--aglp-bg);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.aglp .aglp-pick input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.aglp-pick strong {
    display: block;
    color: var(--aglp-ink);
    font-size: 14px;
    line-height: 1.35;
}

.aglp-pick small {
    display: block;
    margin-top: 3px;
    color: var(--aglp-muted);
    font-size: 12px;
    line-height: 1.4;
}

.aglp-pick.is-checked {
    border: 2px solid var(--aglp-blue);
    padding: 11px 13px;
    background: #eff6ff;
}

.aglp-pick:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}

/* Các nút đăng ký theo mô hình (khi form để lại thông tin đang tắt) */
/* Phải đủ 2 class: `.aglp .aglp-label` (margin 0 0 8px) khai phía trên sẽ đè rule 1 class. */
.aglp .aglp-choices__label {
    margin-top: 24px;
}

.aglp-choices {
    display: grid;
    gap: 12px;
}

.aglp .aglp-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 18px 20px;
    border: 1px solid var(--aglp-line);
    border-radius: 16px;
    background: var(--aglp-bg);
    color: var(--aglp-ink);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.aglp .aglp-choice:hover,
.aglp .aglp-choice:focus {
    border-color: var(--aglp-blue);
    background: #eff6ff;
    color: var(--aglp-ink);
    box-shadow: 0 12px 24px -18px rgba(29, 92, 255, .6);
}

.aglp-choice__text {
    flex: 1 1 220px;
    min-width: 0;
}

.aglp-choice__text strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}

.aglp-choice__text small {
    display: block;
    margin-top: 3px;
    color: var(--aglp-muted);
    font-size: 13px;
    line-height: 1.45;
}

.aglp-choice__btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--aglp-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.aglp-choice__btn .aglp-svg {
    width: 16px;
    height: 16px;
}

.aglp-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 16px;
    margin-bottom: 18px;
}

.aglp-field {
    min-width: 0;
}

.aglp .aglp-input {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--aglp-line);
    border-radius: 10px;
    background: var(--aglp-bg);
    box-shadow: none;
    color: var(--aglp-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    outline: 0;
}

.aglp select.aglp-input {
    padding-right: 36px;
    appearance: auto;
    -webkit-appearance: menulist;
}

.aglp .aglp-input:focus {
    border-color: #93c5fd;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.aglp .aglp-input.is-invalid {
    border-color: #f87171;
}

.aglp-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.aglp .aglp-service {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--aglp-line);
    border-radius: 8px;
    background: var(--aglp-bg);
    color: var(--aglp-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}

/* Vài theme ẩn ô tích gốc để vẽ ô giả bằng .checkmark — ở đây phải hiện lại ô thật. */
.aglp .aglp-service input[type="checkbox"] {
    position: static;
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
    opacity: 1;
    visibility: visible;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: var(--aglp-blue);
}

.aglp-service span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aglp .aglp-service.is-checked {
    border-color: var(--aglp-blue);
    background: #eff6ff;
    color: #1e3a8a;
}

.aglp-err {
    display: block;
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
    line-height: 1.4;
}

.aglp-err:empty {
    display: none;
}

.aglp-signup__form .bc-privacy-consent {
    color: var(--aglp-muted);
}

.aglp-signup__form .bc-privacy-consent input[type="checkbox"] {
    position: static !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: var(--aglp-blue);
}

.aglp .aglp-signup__submit {
    min-height: 56px;
    border-radius: 14px;
    font-size: 16px;
}

.aglp-signup__submit[disabled] {
    opacity: .7;
    cursor: wait;
}

.aglp-signup__msg {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 14px;
}

.aglp-signup__msg:empty {
    display: none;
}

.aglp-signup__done {
    padding: 56px 12px;
    text-align: center;
}

.aglp-signup__done .aglp-ico {
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: #d1fae5;
    color: var(--aglp-green-dark);
}

.aglp-signup__done .aglp-ico .aglp-svg {
    width: 32px;
    height: 32px;
}

.aglp .aglp-signup__done h3 {
    margin: 18px 0 8px;
    font-size: 22px;
    font-weight: 800;
}

.aglp-signup__done p {
    color: var(--aglp-muted);
    white-space: pre-line;
}

/* =========================================================================
 * LƯỚI THEO BỀ RỘNG KHỐI (container query)
 *
 * Đo bề rộng thật của khối chứ không đo màn hình: Vietago có sidebar trái nên cùng màn 1440px
 * mà khối chỉ còn ~980px, lưới auto-fit ra 3+1 lẻ loi. Trình duyệt chưa hỗ trợ (Safari < 16)
 * thì giữ auto-fit khai ở trên.
 * ========================================================================= */

@supports (container-type: inline-size) {
    .aglp-wrap {
        container: aglp / inline-size;
    }

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

    .aglp-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    @container aglp (max-width: 959px) {
        .aglp-grid--4 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @container aglp (max-width: 899px) {
        .aglp-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 24px;
        }

        /* Đúng 3 thẻ (cảm nhận, gói hợp tác): 2 cột là thừa một thẻ lẻ — xếp một cột. */
        .aglp-grid--3,
        .aglp-plans__grid {
            grid-template-columns: minmax(0, 1fr);
            max-width: 620px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    @container aglp (max-width: 559px) {
        .aglp-grid,
        .aglp-grid--4 {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}

/* =========================================================================
 * MÀN HẸP
 * ========================================================================= */

@media (max-width: 991.98px) {
    .aglp .aglp-hero__title {
        font-size: 42px;
    }

    .aglp-mock__float {
        left: 12px;
    }
}

@media (max-width: 767.98px) {
    .aglp-sec {
        padding: 56px 0;
    }

    .aglp-head {
        margin-bottom: 32px;
    }

    .aglp .aglp-h2,
    .aglp .aglp-quote__main .aglp-h2 {
        font-size: 28px;
    }

    .aglp .aglp-lead {
        font-size: 16px;
    }

    .aglp-hero {
        padding: 40px 0;
    }

    .aglp .aglp-hero__title {
        font-size: 34px;
    }

    .aglp .aglp-hero__desc {
        font-size: 16px;
    }

    .aglp-hero__actions .aglp-btn {
        width: 100%;
    }

    .aglp-mock__float {
        position: static;
        margin-top: 12px;
    }

    .aglp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 40px;
    }

    .aglp-stat__value {
        font-size: 26px;
    }

    .aglp-bcard,
    .aglp-plan,
    .aglp-testi {
        padding: 22px;
    }

    .aglp-cta__box {
        padding: 30px 22px;
    }

    .aglp-cta__action,
    .aglp-cta__action .aglp-btn {
        width: 100%;
    }

    .aglp-panel__main,
    .aglp-panel__side {
        padding: 28px 22px;
    }

    .aglp .aglp-panel__heading {
        font-size: 26px;
    }

    .aglp-quote__box {
        padding: 28px 22px;
    }

    .aglp-quote__btns .aglp-btn {
        width: 100%;
    }

    .aglp-help {
        padding: 20px;
    }

    .aglp .aglp-faq__q {
        padding: 16px 18px;
        font-size: 15px;
    }

    .aglp-faq__a {
        padding: 12px 18px 16px;
    }

    .aglp-signup {
        padding: 48px 0;
    }

    .aglp-signup__side,
    .aglp-signup__main {
        padding: 30px 20px;
    }

    .aglp .aglp-signup__side h2 {
        font-size: 26px;
    }
}