/**
 * Giao diện eSIM — dùng chung cho MỌI theme.
 *
 * Quy tắc bắt buộc (đã trả giá 3 vòng sửa ở thanh tìm kiếm modules/Voyage):
 *  · CHỈ dùng class tiền tố `.es-`, không mượn class của theme (`.row`, `.form-control`,
 *    `.btn-primary`, `.g-field-search`…). Mỗi theme style một kiểu, nhiều rule kèm
 *    !important, nên cùng markup sẽ ra 6 giao diện khác nhau và đều lỗi.
 *  · Màu bám biến của theme: `--primary-color` (theme nào cũng khai) và `--primary-color-2`.
 *  · Không dùng !important. Cần tới nó nghĩa là đang giẫm lên class của theme.
 *  · Bố cục bằng grid + gap, không margin rời từng phần tử.
 */

.es-wrap {
    --es-primary: var(--primary-color, #0b7285);
    --es-primary-2: var(--primary-color-2, var(--primary-color, #0f9b8e));
    /**
     * Màu CHỮ đặt trên nền `--es-primary`. Theme có màu chủ đạo SÁNG (VNE vàng #FEC529) chỉ
     * cần khai đè một dòng `--es-on-primary: #1a1400` trong `:root` là mọi nút, thẻ giá và
     * ô phân trang đang chọn đọc được ngay — không phải đụng vào CSS của module.
     */
    --es-on-primary: var(--primary-contrast, #fff);
    --es-ink: #0c1a1d;
    --es-muted: #5c6e72;
    --es-line: #dfe8e9;
    --es-surface: #fff;
    --es-ground: #f5f8f8;
    --es-ok: #2c6e49;
    --es-warn: #a85b0b;
    --es-danger: #b42318;
    --es-radius: 12px;

    color: var(--es-ink);
    font-size: 15px;
    line-height: 1.6;
}
.es-wrap *, .es-wrap *::before, .es-wrap *::after { box-sizing: border-box; }
.es-wrap a { color: inherit; text-decoration: none; }

.es-container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.es-stack { display: flex; flex-direction: column; gap: 28px; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.es-hero {
    background: linear-gradient(135deg, var(--es-primary) 0%, var(--es-primary-2) 100%);
    color: #fff;
    padding: 44px 0 38px;
}
.es-hero h1 { color: #fff; font-size: clamp(24px, 3.4vw, 36px); margin: 0 0 8px; line-height: 1.2; }
.es-hero p { margin: 0; opacity: .9; font-size: 15px; }
.es-hero-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.es-hero-form input[type="search"], .es-hero-form input[type="text"] {
    flex: 1 1 260px; min-width: 0;
    border: none; border-radius: 9px; padding: 13px 15px;
    font-size: 15px; font-family: inherit; color: var(--es-ink);
}
.es-hero-form button {
    border: none; border-radius: 9px; padding: 13px 26px;
    background: #fff; color: var(--es-primary);
    font-weight: 600; font-size: 15px; font-family: inherit; cursor: pointer;
}
.es-hero-form button:hover { opacity: .92; }

/**
 * Ô "Bạn đi đâu?" — gõ thẳng trong ô, gợi ý rơi xuống ngay dưới.
 *
 * Không dùng select2: ở chế độ một-lựa-chọn nó đặt ô tìm kiếm BÊN TRONG bảng thả xuống, tức bấm
 * vào ô chính thì con trỏ nhảy xuống một ô khác — với ô tìm kiếm chính của trang thì đó là một
 * nhịp thừa và trông như hai ô lồng nhau. Bộ này tự viết, vanilla, xem `country-suggest.js`.
 *
 * `.es-sug-nguon` là thẻ <select> gốc sau khi JS tiếp quản: PHẢI giữ trong form (nó mang `name`
 * và giá trị gửi lên) nhưng không được chiếm chỗ. `display:none` là đủ — trình duyệt vẫn gửi.
 */
.es-hero-form select { flex: 1 1 260px; min-width: 0; border: none; border-radius: 9px;
    padding: 13px 15px; font-size: 15px; font-family: inherit; color: var(--es-ink); background: #fff; }
.es-hero-form select.es-sug-nguon { display: none; }

.es-sug { position: relative; flex: 1 1 260px; min-width: 0; }
.es-sug-input {
    width: 100%; box-sizing: border-box; border: none; border-radius: 9px;
    padding: 13px 15px; font-size: 15px; font-family: inherit; color: var(--es-ink); background: #fff;
}
.es-sug-input::placeholder { color: #8b8f96; }
.es-sug-input:focus { outline: 2px solid rgba(255,255,255,.65); outline-offset: 1px; }

/* z-index cao vì bảng gợi ý phải phủ lên dải chip vùng ngay bên dưới. */
.es-sug-list {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
    margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow: auto;
    background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(12,26,29,.22);
}
.es-sug-item {
    padding: 9px 12px; border-radius: 7px; font-size: 14.5px; color: var(--es-ink); cursor: pointer;
}
.es-sug-item:hover, .es-sug-item.is-on { background: var(--es-primary); color: var(--es-on-primary); }

.es-hero-note { margin-top: 10px; font-size: 13.5px; color: #fff; opacity: .95; }
.es-hero-note a { color: #fff; text-decoration: underline; margin-left: 6px; }

.es-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.es-chip {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    background: rgba(255,255,255,.16); color: #fff; font-size: 13.5px;
    border: 1px solid rgba(255,255,255,.25);
}
.es-chip:hover { background: rgba(255,255,255,.28); color: #fff; }
.es-chip.is-on { background: #fff; color: var(--es-primary); border-color: #fff; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   LUỒNG CHỌN (17/09/2026): chọn điểm đến → chọn Thời gian · Dung lượng · Tính năng.
   Thay cho bố cục hai cột + thanh lọc bên trái cũ.
   ═══════════════════════════════════════════════════════════════════════ */

.es-hero-sm { padding: 32px 0 28px; }

/* `hidden` phải thắng `display:flex/grid` của chính class đó — không thì JS ẩn mà vẫn hiện. */
.es-wrap .es-pane[hidden], .es-wrap .es-dest[hidden], .es-wrap .es-grid-dest[hidden],
.es-wrap .es-empty[hidden] { display: none; }

/* ── Bước 1: chọn điểm đến ─────────────────────────────────────────────── */
.es-browse { padding: 24px 0 56px; }
.es-browse-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--es-ground); border-radius: var(--es-radius); padding: 12px; margin-bottom: 20px;
}
.es-tabs {
    display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px;
    background: var(--es-surface); border: 1px solid var(--es-line);
}
.es-wrap .es-tab {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--es-muted); white-space: nowrap;
}
.es-wrap .es-tab:hover { color: var(--es-primary); }
.es-wrap .es-tab.is-on { background: var(--es-primary); color: var(--es-on-primary); }

.es-find { position: relative; flex: 1 1 260px; max-width: 360px; margin: 0; }
.es-find-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--es-muted); pointer-events: none; }
.es-find-input {
    width: 100%; min-height: 44px; padding: 0 14px 0 40px;
    border: 1px solid var(--es-line); border-radius: 10px; background: var(--es-surface);
    font-size: 15px; font-family: inherit; color: var(--es-ink);
}
.es-find-input:focus { outline: 2px solid var(--es-primary); outline-offset: -1px; border-color: var(--es-primary); }
@media (max-width: 599.98px) {
    .es-tabs { width: 100%; }
    .es-wrap .es-tab { flex: 1 1 0; justify-content: center; padding: 0 8px; font-size: 14px; }
    .es-find { max-width: none; }
}

/* `auto-fill` theo BỀ RỘNG CỘT THẬT, không theo viewport — theme Vietago bóp cột nội dung còn
   ~920px ở cửa sổ 1366px (bài học S3-03), chia cột theo `@media` là thẻ bị ép hẹp. */
.es-grid-dest { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 479.98px) { .es-grid-dest { grid-template-columns: 1fr 1fr; gap: 8px; } }

.es-wrap .es-dest {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px;
    background: var(--es-surface); border: 1px solid var(--es-line); border-radius: var(--es-radius);
    transition: border-color .15s, box-shadow .15s;
}
.es-wrap .es-dest:hover { border-color: var(--es-primary); box-shadow: 0 6px 18px -14px rgba(0,0,0,.4); }
.es-wrap .es-dest:focus-visible { outline: 2px solid var(--es-primary); outline-offset: 2px; }
.es-dest .es-flag { width: 36px; height: 36px; }
.es-flag.is-region { color: var(--es-primary); border: 1px solid var(--es-line); }
.es-dest-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.es-dest-name small { display: block; font-size: 12px; font-weight: 400; color: var(--es-muted); }
.es-dest-go { flex: none; color: var(--es-muted); }
.es-wrap .es-dest:hover .es-dest-go { color: var(--es-primary); }

/* ── Bước 2: thanh sản phẩm + ba menu thả ──────────────────────────────── */
.es-kq-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--es-ground); border-radius: var(--es-radius); padding: 12px 16px; margin: 24px 0 20px;
}
.es-kq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.es-wrap .es-back {
    display: inline-flex; align-items: center; gap: 4px; min-height: 36px;
    font-size: 14px; font-weight: 600; color: var(--es-primary); align-self: center;
}
.es-kq-title { font-size: 19px; line-height: 1.3; margin: 0; }
.es-kq-count { font-size: 13px; color: var(--es-muted); }

.es-dds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.es-dd { position: relative; }
.es-dd > summary {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
    list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
    background: var(--es-surface); border: 1px solid var(--es-line); border-radius: 9px;
    font-size: 14px; color: var(--es-ink);
}
.es-dd > summary::-webkit-details-marker { display: none; }
.es-dd > summary:hover, .es-dd[open] > summary { border-color: var(--es-primary); }
.es-dd > summary:focus-visible { outline: 2px solid var(--es-primary); outline-offset: 2px; }
.es-dd > summary b { font-weight: 600; }
.es-dd.is-on > summary { border-color: var(--es-primary); box-shadow: inset 0 0 0 1px var(--es-primary); }
.es-dd-ic { display: inline-flex; color: var(--es-primary); }
.es-dd-caret {
    width: 7px; height: 7px; margin: -3px 0 0 2px;
    border-right: 2px solid var(--es-muted); border-bottom: 2px solid var(--es-muted); transform: rotate(45deg);
}
.es-dd[open] .es-dd-caret { margin-top: 3px; transform: rotate(-135deg); }

.es-dd-menu {
    position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); min-width: 100%;
    margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow: auto;
    background: var(--es-surface); border: 1px solid var(--es-line); border-radius: 10px;
    box-shadow: 0 12px 32px -12px rgba(12,26,29,.35);
}
/* A1-11 — vùng bấm ≥ 32px trên điện thoại. */
.es-wrap .es-dd-menu a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 36px; padding: 0 10px; border-radius: 7px; font-size: 14px; white-space: nowrap;
}
.es-wrap .es-dd-menu a:hover { background: var(--es-ground); color: var(--es-primary); }
.es-wrap .es-dd-menu a.is-on { color: var(--es-primary); font-weight: 600; }
.es-wrap .es-dd-menu a.is-on::after {
    content: ""; width: 5px; height: 10px; margin-top: -3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.es-wrap .es-dd-clear {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px;
    font-size: 13.5px; color: var(--es-muted); text-decoration: underline;
}
.es-wrap .es-dd-clear:hover { color: var(--es-primary); }
.es-kq-note { margin: -8px 0 16px; }
.es-kq-note a { color: var(--es-primary); text-decoration: underline; margin-left: 6px; }

@media (max-width: 599.98px) {
    .es-kq-bar { padding: 12px; }
    /* 2×2: bốn menu mỗi cái một hàng là đẩy danh sách gói xuống dưới nếp gấp. Bỏ icon ở màn hẹp để
       "Dung lượng: Tất cả" vừa nửa bề ngang 390px mà không phải xuống dòng. */
    .es-dds { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .es-dd > summary { width: 100%; gap: 6px; padding: 0 10px; font-size: 13.5px; }
    .es-dd > summary > span:not(.es-dd-ic):not(.es-dd-caret) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .es-dd-ic { display: none; }
    .es-wrap .es-dd-clear { grid-column: 1 / -1; justify-content: center; }
    /* Menu neo `right:0` ở ô cột trái thì tràn ra ngoài mép trái màn hẹp — ô lẻ neo trái. */
    .es-dd:nth-child(odd) .es-dd-menu { left: 0; right: auto; }
}

/* ── Lưới quốc gia ───────────────────────────────────────────────────── */
.es-grid-country { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .es-grid-country { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .es-grid-country { grid-template-columns: repeat(4, 1fr); } }

.es-country {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--es-surface); border: 1px solid var(--es-line);
    border-radius: var(--es-radius); padding: 16px;
    transition: border-color .15s, transform .15s;
}
.es-country:hover { border-color: var(--es-primary); transform: translateY(-2px); }
.es-country b { font-size: 15px; }
.es-country small { color: var(--es-muted); font-size: 12.5px; }
.es-country .es-from { color: var(--es-primary); font-weight: 700; font-size: 15px; margin-top: 4px; }

/**
 * ── Ô cờ ─────────────────────────────────────────────────────────────
 *
 * Hai lớp chồng nhau trong cùng một ô: lá cờ, và bên dưới là mã nước dạng chữ. Ảnh tải được
 * thì che kín chữ; ảnh hỏng thì `onerror` ẩn thẻ `img` và chữ lộ ra. Nhờ vậy nguồn ảnh của
 * bên thứ ba chết cũng không để lại ô vỡ — thứ trông tệ hơn hẳn so với không có ảnh.
 *
 * ⚠️⚠️ Ô phải VUÔNG và BO TRÒN, không phải hình chữ nhật kiểu lá cờ.
 *
 * Đo thật nguồn ảnh (`p.qrsim.net/img/flags/*.png`, 08/09/2026): mọi tệp đều **vuông tỉ lệ
 * 1:1** — 184×184 px với phần lớn nước, tới 767×767 và 1024×1024 với Mexico/Panama/Mỹ — và cờ
 * được vẽ dưới dạng huy hiệu TRÒN. Bản đầu đặt ô 34×24 (tỉ lệ 1,42) kèm `object-fit: cover`,
 * tức ép ảnh vuông vào khung chữ nhật ⇒ **cắt mất mép trên và dưới của hình tròn**, nhìn ra
 * đúng như ảnh bị vỡ. Độ phân giải chưa bao giờ là vấn đề: ảnh gốc lớn hơn khung hiển thị
 * 7–40 lần, thừa nét cho cả màn hình mật độ cao.
 *
 * Ô vuông + `object-fit: cover` với ảnh vuông thì không cắt gì cả, nên đây cũng là lựa chọn
 * an toàn cho nguồn ảnh khác tỉ lệ (BLC-01 trả ảnh minh hoạ của Airalo, không phải cờ).
 *
 * Kích thước cố định (không để ảnh tự quyết) nên thẻ không nhảy layout lúc ảnh về muộn.
 */
.es-flag {
    position: relative; flex: none; overflow: hidden;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--es-ground);
    display: inline-flex; align-items: center; justify-content: center;
}
.es-flag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Viền chỉ vẽ khi KHÔNG có ảnh: cờ tròn của hãng đã có nét viền riêng, thêm một vòng nữa là
   thành hai đường tròn lồng nhau. `is-off` do `onerror` gắn vào. */
.es-flag.is-off { border: 1px solid var(--es-line); }
.es-flag i {
    font-style: normal; font-size: 10px; font-weight: 700;
    letter-spacing: .02em; color: var(--es-muted); line-height: 1;
}
.es-country .es-flag { margin-bottom: 6px; }
.es-pkg-head .es-flag { width: 32px; height: 32px; margin-top: 1px; }

/* ── Thẻ gói ─────────────────────────────────────────────────────────── */
.es-grid-pkg { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding-bottom: 8px; }

.es-pkg {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--es-surface); border: 1px solid var(--es-line);
    border-radius: var(--es-radius); padding: 18px;
    transition: border-color .15s, box-shadow .15s;
}
.es-pkg:hover { border-color: var(--es-primary); box-shadow: 0 6px 22px -14px rgba(0,0,0,.35); }
.es-pkg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.es-pkg-top .es-flag { width: 32px; height: 32px; }
.es-loai {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--es-muted); border: 1px solid var(--es-line); background: var(--es-surface);
}
.es-loai.is-day { color: var(--es-primary); border-color: var(--es-primary); }
.es-pkg-name { font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.es-cover {
    font-size: 12.5px; line-height: 1.45; color: var(--es-ink);
    background: var(--es-ground); border-radius: 8px; padding: 8px 10px;
}
.es-cover.is-multi { color: var(--es-primary); }
.es-wrap .es-pkg-cta { margin-top: auto; width: 100%; padding: 11px 18px; font-size: 15px; }

.es-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.es-spec {
    font-size: 12.5px; padding: 3px 9px; border-radius: 6px;
    background: var(--es-ground); border: 1px solid var(--es-line); color: var(--es-muted);
}
.es-spec.is-key { color: var(--es-ink); font-weight: 600; }
.es-spec.is-unl { color: var(--es-ok); border-color: var(--es-ok); background: transparent; }

.es-pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--es-line); }
.es-price { font-size: 19px; font-weight: 700; color: var(--es-primary); }
.es-price small { display: block; font-size: 11.5px; color: var(--es-muted); font-weight: 400; }
/**
 * ⚠️ PHẢI viết `.es-wrap .es-btn`, KHÔNG được viết `.es-btn` trần.
 *
 * Ngay đầu file có `.es-wrap a { color: inherit }` — đặc hiệu (0,1,1). Một selector `.es-btn`
 * trần chỉ (0,1,0) nên THUA, và mọi nút dựng bằng thẻ `<a>` (nút "Xem gói" ở thẻ gói, nút
 * "Đặt mua" ở trang quốc gia…) lấy màu chữ của thân trang — chữ đen trên nền xanh đậm, gần
 * như không đọc được. Lỗi này im lặng vì nút dựng bằng `<button>` thì vẫn trắng, nên nhìn
 * lướt tưởng chỉ vài nút bị.
 *
 * Màu chữ chốt bằng `--es-on-primary` thay vì `#fff` cứng: theme nào đặt `--primary-color`
 * sáng (VNE vàng #FEC529) thì chữ trắng trên nền vàng cũng không đọc được — theme đó chỉ cần
 * khai `--es-on-primary: #1a1400` là xong, không phải sửa CSS của module.
 */
/* ⚠️ S3-03 — `white-space: nowrap`.
   Theme Vietago có khung 3/9 (menu trái cố định) nên cột nội dung chỉ còn 922px ở cửa sổ 1366px,
   chân thẻ gói rộng 170px, và nút "Xem gói" bị bẻ thành hai dòng cao 63px trong khi 5 theme còn
   lại cao 40px. Lưới thẻ chia cột theo VIEWPORT chứ không theo bề rộng cột thật, nên module
   không biết mình đang bị bóp — giữ nhãn một dòng là cách chắc chắn đúng ở mọi khung. */
.es-wrap .es-btn {
    border: none; border-radius: 8px; padding: 9px 18px;
    background: var(--es-primary); color: var(--es-on-primary); font-weight: 600; font-size: 14px;
    font-family: inherit; cursor: pointer; display: inline-block; text-align: center;
    white-space: nowrap;
}
.es-wrap .es-btn:hover { color: var(--es-on-primary); opacity: .92; }
.es-wrap .es-btn.is-ghost { background: transparent; color: var(--es-primary); border: 1px solid var(--es-primary); }
.es-wrap .es-btn.is-ghost:hover { color: var(--es-primary); }
.es-wrap .es-btn[disabled] { opacity: .55; cursor: not-allowed; }
.es-more { font-size: 12.5px; color: var(--es-muted); }

/* ── Trang chi tiết ──────────────────────────────────────────────────── */
.es-detail { display: grid; gap: 24px; grid-template-columns: 1fr; padding: 28px 0 56px; }

/* ⚠️⚠️ A1-12 — TRÊN ĐIỆN THOẠI, KHỐI MUA LÊN TRƯỚC.
   Đo thật ở 390px: nút +/- nằm ở y~1540px và nút "Mua ngay" ở y~2280px — khách phải cuộn qua 4 ô
   thông tin, bảng nhà mạng và thẻ "Máy của bạn có dùng được không?" mới thấy GIÁ. Màn hình đầu
   của một trang bán hàng mà không có giá lẫn nút mua.
   Thuộc tính order chỉ đảo thứ tự HIỂN THỊ, giữ nguyên thứ tự DOM (quan trọng cho trình đọc màn
   hình và cho thứ tự tab). Từ 920px trở lên có hai cột nên thứ tự tự nhiên đã đúng. */
.es-detail > .es-buy { order: -1; }
@media (min-width: 920px) {
    .es-detail { grid-template-columns: 1fr 330px; }
    .es-detail > .es-buy { order: 0; }
}

.es-card {
    background: var(--es-surface); border: 1px solid var(--es-line);
    border-radius: var(--es-radius); padding: 20px;
}
.es-card + .es-card { margin-top: 16px; }
.es-card h2 { font-size: 17px; margin: 0 0 12px; }
.es-card h3 { font-size: 15px; margin: 0 0 10px; }

.es-buy { position: sticky; top: 18px; align-self: start; }
.es-buy .es-price { font-size: 26px; }
.es-buy .es-btn { width: 100%; text-align: center; padding: 13px; font-size: 15px; margin-top: 12px; }

.es-kv { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .es-kv { grid-template-columns: repeat(2, 1fr); } }
.es-kv > div { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; background: var(--es-ground); border-radius: 9px; }
.es-kv b { font-size: 14px; }
.es-kv small { color: var(--es-muted); font-size: 12px; }

.es-note {
    border-left: 3px solid var(--es-warn); background: #fdf6ec;
    border-radius: 0 9px 9px 0; padding: 12px 15px; font-size: 13.5px; line-height: 1.55;
}
.es-note.is-info { border-left-color: var(--es-primary); background: var(--es-ground); }

/* Bảng vùng phủ — cuộn ngang trong khung riêng, không để thân trang trượt */
.es-cov-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--es-line); border-radius: 9px; }
.es-cov { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.es-cov th, .es-cov td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--es-line); }
.es-cov th { background: var(--es-ground); position: sticky; top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--es-muted); }
.es-cov tr:last-child td { border-bottom: none; }
.es-cov-search { width: 100%; border: 1px solid var(--es-line); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit; margin-bottom: 10px; }

/* ── Trạng thái rỗng ─────────────────────────────────────────────────── */
.es-empty { text-align: center; padding: 56px 20px; color: var(--es-muted); background: var(--es-surface); border: 1px dashed var(--es-line); border-radius: var(--es-radius); }
.es-empty b { display: block; color: var(--es-ink); font-size: 16px; margin-bottom: 6px; }

/* A1-11: breadcrumb 16px là quá nhỏ để bấm trên điện thoại. Nới chiều cao của chính các link
   (không nới cả dải) để không đẩy nội dung trang xuống. */
.es-crumb { font-size: 13px; color: var(--es-muted); padding: 16px 0 0; }
.es-crumb a { display: inline-block; padding: 8px 2px; }
.es-crumb a:hover { color: var(--es-primary); }

.es-head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.es-head-row h2 { font-size: 19px; margin: 0; }
.es-sort { border: 1px solid var(--es-line); border-radius: 8px; padding: 8px 11px; font-size: 13.5px; font-family: inherit; background: var(--es-surface); color: var(--es-ink); }

/**
 * ── Phân trang ───────────────────────────────────────────────────────
 *
 * Markup do `EsimConnect::frontend.partials.pager` sinh, KHÔNG dùng bộ class Bootstrap của
 * theme. Lý do: nhiều theme cho `.page-link` một ô tròn bề rộng cố định nhưng để `padding`
 * và `line-height` lệch nhau, nên CON SỐ nằm trồi ra khỏi hình tròn (thấy rõ ở trang 2 trở đi
 * vì ô "‹" một ký tự và ô số rộng khác nhau).
 *
 * Cách chắc chắn không lệch ở bất kỳ theme nào: ô là hình VUÔNG cố định (`width` = `height`),
 * nội dung căn giữa bằng flex, và `line-height: 1` để không thừa nửa dòng ở dưới.
 */
.es-pager { margin-top: 26px; }
.es-pg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.es-wrap .es-pg-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; line-height: 1;
    border: 1px solid var(--es-line); border-radius: 50%;
    background: var(--es-surface); color: var(--es-ink);
    font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
    text-decoration: none; transition: border-color .15s, color .15s;
}
.es-wrap a.es-pg-i:hover { border-color: var(--es-primary); color: var(--es-primary); }
.es-wrap .es-pg-i.is-now { background: var(--es-primary); border-color: var(--es-primary); color: var(--es-on-primary); }
.es-wrap .es-pg-i.is-off { opacity: .4; cursor: default; }
.es-pg-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--es-muted); }

/* ═══════════════════════════════════════════════════════════════════════
   PHA 2 — MUA · THANH TOÁN · NHẬN eSIM
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Form mua ────────────────────────────────────────────────────────── */
.es-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.es-field { display: flex; flex-direction: column; gap: 5px; }
.es-field > label { font-size: 12.5px; font-weight: 600; color: var(--es-muted); }
/* Dấu bắt buộc: đỏ để nhận ra ngay, nhưng KHÔNG dùng màu làm nghĩa duy nhất — ô nào bắt buộc
   thì thẻ input cũng mang `required`, nên trình đọc màn hình vẫn biết mà không cần thấy dấu. */
.es-req { color: var(--es-danger); font-style: normal; font-weight: 700; }
.es-req-note { font-size: 12px; color: var(--es-muted); margin: 0; }
.es-field .es-hint { font-size: 12px; color: var(--es-muted); }
.es-input {
    width: 100%; border: 1px solid var(--es-line); border-radius: 9px;
    padding: 10px 12px; font-size: 14.5px; font-family: inherit;
    background: var(--es-surface); color: var(--es-ink);
}
.es-input:focus { outline: 2px solid var(--es-primary); outline-offset: -1px; border-color: var(--es-primary); }
.es-input.is-bad { border-color: var(--es-danger); }

.es-qty { display: flex; align-items: center; border: 1px solid var(--es-line); border-radius: 9px; overflow: hidden; width: max-content; }
.es-qty button {
    width: 40px; height: 40px; border: 0; background: var(--es-ground);
    font-size: 18px; line-height: 1; cursor: pointer; color: var(--es-ink); font-family: inherit;
}
.es-qty button:disabled { opacity: .4; cursor: not-allowed; }
.es-qty input {
    width: 56px; height: 40px; border: 0; text-align: center; font-size: 15px;
    font-family: inherit; background: var(--es-surface); color: var(--es-ink);
    -moz-appearance: textfield; appearance: textfield;
}
.es-qty input::-webkit-outer-spin-button, .es-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.es-users { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--es-ground); border-radius: 10px; }
.es-users > b { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--es-muted); }

/* ── Thanh tiến trình ────────────────────────────────────────────────── */
.es-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 22px; }
.es-steps span {
    display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--es-muted);
    background: var(--es-surface); border: 1px solid var(--es-line); border-radius: 999px; padding: 7px 14px;
}
.es-steps span i {
    width: 20px; height: 20px; border-radius: 50%; background: var(--es-line); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-style: normal; font-weight: 700;
}
.es-steps span.is-on { color: var(--es-ink); border-color: var(--es-primary); font-weight: 600; }
.es-steps span.is-on i, .es-steps span.is-done i { background: var(--es-primary); }
.es-steps span.is-done { color: var(--es-ink); }

/* ── Cổng thanh toán ─────────────────────────────────────────────────── */
.es-gw { display: flex; flex-direction: column; gap: 8px; }
.es-gw label {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
    border: 1px solid var(--es-line); border-radius: 10px; background: var(--es-surface); font-size: 14.5px;
}
.es-gw label.is-on { border-color: var(--es-primary); background: var(--es-ground); }
.es-gw input { accent-color: var(--es-primary); }
.es-gw-info { padding: 0 4px 6px; font-size: 13px; color: var(--es-muted); }
/* Trang thanh toán: mỗi cổng là MỘT thẻ gồm nhãn + mô tả (số dư ví, tài khoản ngân hàng…).
   Mô tả chỉ hiện ở thẻ đang chọn và thụt thẳng hàng với tên cổng. `.es-gw label` vẫn dùng
   nguyên cho trang nạp thêm, nên ở đây phải gỡ viền của nhãn bên trong thẻ. */
.es-gw-opt { border: 1px solid var(--es-line); border-radius: 10px; background: var(--es-surface); }
.es-gw-opt.is-on { border-color: var(--es-primary); background: var(--es-ground); }
.es-gw .es-gw-opt > label { border: 0; background: transparent; }
.es-gw-opt .es-gw-info { display: none; padding: 0 14px 12px 44px; }
.es-gw-opt.is-on .es-gw-info { display: block; }
/* Ô đồng ý điều khoản là partial DÙNG CHUNG của Booking (`.bc-terms`). Nó nằm trong form `.es-gw`
   nên phải gỡ kiểu thẻ (viền, nền, đệm) mà `.es-gw label` áp cho mọi nhãn. */
.es-gw .bc-terms { margin: 12px 2px 0; font-size: 14px; line-height: 1.5; }
.es-gw .bc-terms label { border: 0; background: transparent; padding: 0; font-size: 14px; }
.es-gw .bc-terms a { color: var(--es-primary); text-decoration: underline; }

.es-sum { display: flex; flex-direction: column; gap: 8px; }
/* ⚠️ B1-12: `flex-wrap` + `white-space: nowrap` cho giá trị.
 * Bản cũ để một hàng flex không wrap, nên ở bề ngang 390px một nhãn dài ("Dung lượng gói")
 * cạnh một giá trị dài ("1.024 MB · hết hạn 12/09/2026") ép hai bên dính vào nhau rồi cắt chữ.
 * Cho phép xuống dòng và neo giá trị về bên phải là đọc được ở mọi bề ngang. */
.es-sum > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }
.es-sum > div > span:last-child { margin-left: auto; text-align: right; }
.es-sum > div.is-total { border-top: 1px solid var(--es-line); padding-top: 10px; font-size: 17px; font-weight: 700; }
.es-sum > div.is-total span:last-child { color: var(--es-primary); }

/* ── Chờ giao hàng ───────────────────────────────────────────────────── */
.es-wait { text-align: center; padding: 40px 20px; }
.es-spin {
    width: 40px; height: 40px; margin: 0 auto 16px; border-radius: 50%;
    border: 3px solid var(--es-line); border-top-color: var(--es-primary);
    animation: es-spin 900ms linear infinite;
}
@keyframes es-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .es-spin { animation-duration: 2.4s; } }

/* ── Thẻ eSIM đã giao ────────────────────────────────────────────────── */
.es-sim { border: 1px solid var(--es-line); border-radius: var(--es-radius); background: var(--es-surface); padding: 18px; }
.es-sim + .es-sim { margin-top: 14px; }
.es-sim-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.es-sim-head b { font-size: 15.5px; }
.es-sim-body { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .es-sim-body { grid-template-columns: 220px 1fr; } }

.es-qr { padding: 10px; background: #fff; border: 1px solid var(--es-line); border-radius: 10px; line-height: 0; }
.es-qr svg, .es-qr img { width: 100%; height: auto; display: block; }
.es-qr-cap { font-size: 12px; color: var(--es-muted); text-align: center; margin-top: 8px; line-height: 1.5; }

.es-lpa { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.es-lpa label { font-size: 12px; font-weight: 600; color: var(--es-muted); text-transform: uppercase; letter-spacing: .04em; }
.es-lpa-row { display: flex; gap: 6px; }
.es-lpa code {
    flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; padding: 9px 11px;
    background: var(--es-ground); border: 1px solid var(--es-line); border-radius: 8px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--es-ink);
}
.es-copy {
    flex: 0 0 auto; border: 1px solid var(--es-line); background: var(--es-surface); border-radius: 8px;
    padding: 0 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--es-ink);
}
.es-copy:hover { border-color: var(--es-primary); color: var(--es-primary); }

.es-install { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.es-install .es-btn { padding: 10px 16px; font-size: 14px; }

/* ── Nhãn trạng thái ─────────────────────────────────────────────────── */
.es-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.es-badge.is-ok { color: var(--es-ok); border-color: var(--es-ok); background: rgba(44,110,73,.07); }
.es-badge.is-wait { color: var(--es-warn); border-color: var(--es-warn); background: rgba(168,91,11,.07); }
.es-badge.is-bad { color: var(--es-danger); border-color: var(--es-danger); background: rgba(180,35,24,.07); }
.es-badge.is-off { color: var(--es-muted); border-color: var(--es-line); background: var(--es-ground); }

/* ── Thông báo ───────────────────────────────────────────────────────── */
.es-alert { border-radius: 10px; padding: 13px 15px; font-size: 14px; border: 1px solid; margin-bottom: 16px; }
.es-alert.is-ok { color: #1c4b33; border-color: rgba(44,110,73,.35); background: rgba(44,110,73,.08); }
.es-alert.is-warn { color: #7a4208; border-color: rgba(168,91,11,.35); background: rgba(168,91,11,.08); }
.es-alert.is-bad { color: #8a1b12; border-color: rgba(180,35,24,.35); background: rgba(180,35,24,.08); }
.es-alert b { display: block; margin-bottom: 3px; }

/* ── Hai cột trang thanh toán / hoàn tất ─────────────────────────────── */
.es-two { display: grid; gap: 22px; grid-template-columns: 1fr; padding: 24px 0 56px; }
@media (min-width: 920px) { .es-two { grid-template-columns: 1fr 340px; } }
.es-side { position: sticky; top: 18px; align-self: start; }

/* ── Danh sách eSIM của tôi ──────────────────────────────────────────── */
.es-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .es-list { grid-template-columns: repeat(2, 1fr); } }
.es-list-item {
    display: flex; flex-direction: column; gap: 6px; padding: 15px 16px;
    border: 1px solid var(--es-line); border-radius: var(--es-radius); background: var(--es-surface);
}
.es-list-item:hover { border-color: var(--es-primary); }
.es-list-item b { font-size: 15px; }
.es-list-item small { color: var(--es-muted); font-size: 12.5px; }

/* ── Thanh dung lượng ────────────────────────────────────────────────── */
.es-bar { height: 8px; border-radius: 999px; background: var(--es-line); overflow: hidden; }
.es-bar > i { display: block; height: 100%; background: var(--es-primary); transition: width .3s ease; }

/* ── Hậu mãi: hàng nút hành động (nạp thêm · huỷ) ─────────────────────── */
.es-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.es-acts form { margin: 0; }

/* Nút việc-không-hoàn-tác. Cố ý là kiểu VIỀN chứ không phải nền đỏ đặc: nút đỏ đặc hút mắt
   hơn cả nút chính, mà huỷ eSIM là việc hiếm và không hoàn tác được — không nên là thứ dễ
   bấm nhất trên trang. Màu chỉ đủ để phân biệt với nút lành tính bên cạnh. */
.es-btn.es-danger { color: var(--es-danger); border-color: var(--es-danger); background: transparent; }
.es-btn.es-danger:hover { color: #fff; background: var(--es-danger); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   CẢNH BÁO THIẾT BỊ + TRANG "ĐIỆN THOẠI CỦA TÔI CÓ HỖ TRỢ eSIM KHÔNG?" (17/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* Cả dải là một link: vùng bấm lớn, trên điện thoại chạm đâu cũng được. */
.es-wrap .es-warn-dev {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; margin: 0 0 16px;
    background: var(--es-surface); border: 1px solid var(--es-primary); border-radius: var(--es-radius);
    color: var(--es-ink); font-size: 14.5px; line-height: 1.4;
    transition: box-shadow .15s;
}
.es-wrap .es-warn-dev:hover { box-shadow: 0 6px 18px -14px rgba(0,0,0,.45); color: var(--es-ink); }
.es-wrap .es-warn-dev:focus-visible { outline: 2px solid var(--es-primary); outline-offset: 2px; }
.es-warn-dev-ic { flex: none; display: inline-flex; color: var(--es-primary); }
.es-warn-dev-txt { flex: 1 1 auto; min-width: 0; }
.es-warn-dev-txt b { color: var(--es-danger); font-weight: 600; }
.es-warn-dev-go { flex: none; color: var(--es-primary); }
/* Trên trang sản phẩm dải này đứng ngay trên thanh lọc — thanh lọc bỏ khoảng cách trên của nó. */
.es-container > .es-warn-dev:first-child { margin-top: 24px; }
.es-warn-dev + .es-kq-bar { margin-top: 0; }

.es-wrap .es-more-link { display: inline-flex; align-items: center; min-height: 36px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--es-primary); }

/* ── Trang kiểm tra điện thoại ── */
.es-dev-page { max-width: 900px; padding-top: 20px; padding-bottom: 56px; }
.es-dev-notice { margin: 12px 0 24px; font-size: 14.5px; line-height: 1.55; }
.es-dev-notice b { font-size: 15.5px; margin-bottom: 4px; }
.es-dev-head { text-align: center; margin-bottom: 20px; }
.es-dev-head h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; margin: 0 0 8px; }
.es-dev-head p { margin: 0; color: var(--es-muted); font-size: 14.5px; }

.es-dev-check { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 28px; }
.es-dev-step {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px;
    background: var(--es-ground); border-radius: var(--es-radius); font-size: 14px; line-height: 1.5;
}
.es-dev-step > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.es-dev-step code { font-size: 14px; font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--es-surface); color: var(--es-ink); }
.es-dev-num {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; background: var(--es-primary); color: var(--es-on-primary);
    font-weight: 700; font-size: 14px;
}

.es-dev-list h2 { font-size: 19px; margin: 0 0 12px; }
.es-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.es-wrap .es-brand {
    min-height: 40px; padding: 0 16px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--es-line); background: var(--es-surface); color: var(--es-ink);
    font-family: inherit; font-size: 14px; font-weight: 600;
}
.es-wrap .es-brand:hover { border-color: var(--es-primary); color: var(--es-primary); }
.es-wrap .es-brand.is-on { background: var(--es-primary); border-color: var(--es-primary); color: var(--es-on-primary); }
.es-wrap .es-brand:focus-visible { outline: 2px solid var(--es-primary); outline-offset: 2px; }

.es-brand-pane { background: var(--es-ground); border-radius: var(--es-radius); padding: 16px 18px; margin-bottom: 12px; }
.es-wrap .es-brand-pane[hidden] { display: none; }
.es-brand-title { font-size: 16px; margin: 0 0 8px; }
/* Có tab rồi thì tên hãng đã nằm trên nút đang chọn — in lại trong khung là lặp. */
.es-dev-list.is-tabs .es-brand-title { display: none; }
.es-dev-group + .es-dev-group { margin-top: 14px; }
.es-dev-group h4 { font-size: 15px; margin: 0 0 6px; }
.es-dev-group ul { margin: 0; padding-left: 20px; display: grid; gap: 4px 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); font-size: 14px; line-height: 1.5; }
.es-dev-note { margin: 12px 0 0; font-size: 13px; color: var(--es-warn); }
.es-dev-disclaimer { margin: 4px 0 0; font-size: 13px; color: var(--es-muted); }
.es-dev-cta { text-align: center; margin-top: 24px; }
.es-dev-cta .es-btn { padding: 12px 24px; font-size: 15px; }