/* =====================================================================
   PHẦN CÔNG KHAI (S7) — mặt tiền bán hàng.

   Tách khỏi app.css có chủ đích: app.css là giao diện KHU QUẢN TRỊ, còn đây là trang cho khách lạ. Trộn chung
   một file thì mỗi lần sửa màu cho khách lại phải dò xem có đụng trang admin không.

   ⭐ Tông màu theo `data-theme` giống app.css: bảng sáng mặc định, bảng tối trong [data-theme="dark"] .pub.
   Ở đây chỉ đảo bộ biến trong phạm vi .pub nên mọi lớp dùng lại được
   (.card, .stack, .muted…) tự đổi theo. ⚠️ Không gán màu cứng ở bất kỳ đâu — một chỗ gán cứng là một chỗ kẹt
   ở một tông, và đó chính là thứ tạo ra giao diện nửa sáng nửa tối.
   ===================================================================== */

.pub {
    --bg: #ffffff;
    --panel: #f7f9fc;
    --surface: #ffffff;
    --line: #e3e8f0;
    --text: #16202f;
    --muted: #5c6880;
    --accent: #1657c8;
    --accent-hover: #1149a8;
    --accent-fg: #ffffff;
    --accent-soft: #eaf1fd;
    --lead-text: #2b3648;
    --input-bg: #ffffff;
    --input-line: #cfd8e6;
    --hero-top: #f2f6fd;
    --code-bg: #eef2f8;
    --code-fg: #13233d;
    --ok: #0f8a5f;
    --warn: #a86a00;
    --danger: #c62828;
    --card-shadow: 0 6px 22px rgba(20, 40, 90, .07);
    --feat-shadow: 0 4px 16px rgba(20, 40, 90, .05);

    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .pub {
    --bg: #0f1115;
    --panel: #151920;
    --surface: #171b23;
    --line: #262c38;
    --text: #e6e8ec;
    --muted: #98a1b3;
    --accent: #5b9dff;
    --accent-hover: #7bb0ff;
    --accent-fg: #06101f;
    --accent-soft: #17233a;
    --lead-text: #c9d1de;
    --input-bg: #0d1016;
    --input-line: #303748;
    --hero-top: #141b28;
    --code-bg: #1b2130;
    --code-fg: #cbd3e1;
    --ok: #3ecf8e;
    --warn: #ffb020;
    --danger: #ff6b6b;
    --card-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    --feat-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}

.pub main { flex: 1; }
.pub a { color: var(--accent); }
.pub code { color: var(--code-fg); background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
.pub h1, .pub h2, .pub h3, .pub h4 { color: var(--text); }

.pub input, .pub select, .pub textarea {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--input-line);
}

.pub input:focus, .pub select:focus, .pub textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-color: var(--accent);
}

.pub button {
    background: var(--accent);
    color: var(--accent-fg);
    border: 1px solid var(--accent);
    font-weight: 600;
    padding: 9px 16px;
}

.pub button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pub button:disabled { opacity: .45; }
.pub button.linkbtn { background: none; border: 0; color: var(--accent); font-weight: 400; padding: 4px 0; }

.pub .card {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--card-shadow);
}

/* Một mép trái/phải duy nhất cho mọi dải nội dung suốt trang. */
.pub-in { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */

.pub-head {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.pub-head-in { display: flex; align-items: center; gap: 20px; height: 62px; }

.brand { font-size: 18px; font-weight: 700; color: var(--text) !important; letter-spacing: -.2px; }
.brand span { color: var(--accent); font-weight: 600; }

.pub-nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.pub-nav a { color: var(--muted); font-size: 14px; }
.pub-nav a:hover { color: var(--accent); }

.btn-sm { padding: 7px 14px !important; font-size: 14px; }

/* ---------- Hero ---------- */

.hero { background: linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.hero .pub-in { padding-top: 56px; padding-bottom: 52px; text-align: center; }
.hero h1 { font-size: 38px; line-height: 1.2; margin-bottom: 14px; }

.lead { font-size: 18px; max-width: 730px; margin: 0 auto 6px; color: var(--lead-text); }

.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 12px; }

.btn-primary, .btn-ghost {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
}

.btn-primary { background: var(--accent); color: var(--accent-fg) !important; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border: 1px solid var(--input-line); color: var(--text) !important; background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent) !important; }

/* ---------- Dải nội dung ---------- */

.landing section { padding: 52px 0; }
.landing section h2 { font-size: 26px; margin: 0 0 10px; }
.landing p { max-width: 830px; }
.section-sub { margin-top: -2px; margin-bottom: 22px; }

/* ---------- Lưới thẻ tính năng ---------- */

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

.feat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: var(--feat-shadow);
}

.feat h3 { font-size: 18px; margin: 8px 0 10px; }
.feat p { font-size: 14.5px; color: var(--lead-text); margin: 0 0 10px; max-width: none; }
.feat ul { margin: 10px 0 0; padding-left: 18px; }
.feat li { font-size: 13.5px; color: var(--muted); margin: 4px 0; }

.feat-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 3px 10px;
}

/* ---------- Bốn bước ---------- */

.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.step { border-top: 3px solid var(--accent); padding-top: 14px; }
.step h4 { margin: 8px 0 6px; font-size: 15px; }
.step p { font-size: 13.5px; max-width: none; }

.step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 13px;
    font-weight: 700;
}

/* ---------- Ba cột "vì sao" ---------- */

.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.why { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.why h4 { margin: 0 0 8px; font-size: 15.5px; }
.why p { max-width: none; }

/* ---------- Dải kêu gọi ----------
   Dải này giữ nền xanh đậm ở CẢ HAI tông — nó là điểm nhấn cuối trang, đảo màu theo tông sẽ mất vai trò đó.
   Vì nền luôn tối nên chữ bên trong cố định màu sáng, không lấy theo biến. */

.cta-band {
    background: linear-gradient(135deg, #123a86 0%, #1657c8 100%);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    color: #fff;
}

.cta-band h2 { color: #fff !important; }
.cta-band .muted { color: #cfe0ff; }
.cta-band .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff !important; }
.cta-band .btn-ghost:hover { border-color: #fff; color: #fff !important; }
.cta-band .btn-primary { background: #fff; color: #123a86 !important; }
.cta-band .btn-primary:hover { background: #eaf1fd; }

/* ---------- Footer ---------- */

.pub-foot { background: var(--panel); border-top: 1px solid var(--line); padding: 40px 0 18px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.foot-grid h4 { margin: 0 0 10px; font-size: 14px; }
.foot-grid a, .foot-grid span { display: block; font-size: 13.5px; margin: 5px 0; }
.foot-grid p { max-width: none; }
.foot-end { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 14px; }

@media (max-width: 760px) {
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .hero h1 { font-size: 29px; }
    .pub-nav { display: none; }
}
/* =====================================================================
   Trang mua và trang đơn hàng
   ===================================================================== */

.public-wrap { max-width: 660px; margin: 44px auto; padding: 0 20px; }

.buy-card { min-width: 0; width: 100%; padding: 22px 24px; border-radius: 12px; }
.buy-card .card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.buy-card .card-head h2 { margin: 0; font-size: 19px; }
.buy-card .stack { gap: 4px; max-width: none; }
.buy-card label { margin-top: 10px; }
.buy-card input:not([type]), .buy-card input[type=text] { width: 100%; min-width: 0; }
.buy-card textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* Một dòng chọn: chức năng bên trái, thời hạn + giá bên phải; xuống hàng khi hẹp. */
.buy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.buy-row .check { flex: 1 1 200px; }
.buy-row select { flex: 0 1 250px; min-width: 0; }

.buy-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.buy-total-final { border-top: 1px solid var(--line); padding-top: 10px; font-size: 18px; }
.buy-actions { margin-top: 10px; }

/* QR phải nằm trên nền TRẮNG — mã bị đảo màu thì nhiều app ngân hàng không quét được. */
.qr {
    display: block;
    width: 250px;
    max-width: 100%;
    margin: 16px auto;
    background: var(--surface);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.steps { margin: 14px 0; }
.steps ol, .steps ul { margin: 6px 0; padding-left: 20px; }
.steps li { margin: 4px 0; }

details summary { cursor: pointer; color: var(--accent); margin: 10px 0; }

/* Bảng đơn hàng trong khu /me — kế thừa màu từ bộ biến, không gán cứng. */
.me-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.me-table th, .me-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.me-table th { color: var(--muted); font-weight: 600; }
.me-table td a { color: var(--accent); }

/* Thẻ dùng thử dùng chung khuôn với thẻ mua. */
.trial-card { border-radius: 12px; }
.video-link a { font-weight: 600; }
.video-link a { font-weight: 600; }

/* Nút đổi tông. Dùng thuộc tính onclick thuần (không phải @onclick của Blazor) vì trang chủ render tĩnh —
   handler C# sẽ không chạy ở đó, còn onclick HTML thì chạy ở mọi chế độ render. */
.theme-btn {
    background: none !important;
    border: 1px solid var(--input-line) !important;
    color: var(--muted) !important;
    border-radius: 999px;
    padding: 6px !important;
    line-height: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.theme-btn:hover { color: var(--accent) !important; border-color: var(--accent) !important; }

/* Chọn icon bằng CSS theo data-theme — không chờ JavaScript nên không có nhịp hiện sai icon.
   ⭐ Icon hiện THỨ SẼ NHẬN ĐƯỢC, không phải trạng thái đang có: đang tối thì hiện mặt trời (bấm ra sáng).
   Đây là quy ước của NÚT BẤM — nút phải nói nó làm gì, chứ không mô tả hiện trạng. */
.ico-sun { display: none; }
.ico-moon { display: inline; }
[data-theme="dark"] .ico-sun { display: inline; }
[data-theme="dark"] .ico-moon { display: none; }