trips/sim.html at main · ePlus-DEV/trips · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="vi">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="theme-color" content="#f6f8fc">
  <meta name="description" content="So sánh SIM vật lý Trung Quốc cho hành trình Thượng Hải – Bắc Kinh 19–26/10/2026.">
  <link rel="manifest" href="./manifest.webmanifest">
  <link rel="icon" href="./icon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="./sim.css">
  <link rel="stylesheet" href="./product-ui.css">
  <title>SIM & Internet · Trung Quốc 2026</title>
</head>
<body class="sim-page">
<div class="app">
  <aside class="sidebar">
    <a class="brand" href="./"><span class="brand-mark"><svg><use href="#i-plane"/></svg></span>TravelLog</a>
    <nav class="side-nav">
      <a href="./"><span class="nav-icon"><svg><use href="#i-home"/></svg></span>Tổng quan</a>
      <a href="./#itinerary"><span class="nav-icon"><svg><use href="#i-calendar"/></svg></span>Lịch trình</a>
      <a href="./flights/"><span class="nav-icon"><svg><use href="#i-plane"/></svg></span>Chuyến bay</a>
      <a href="./hotels/"><span class="nav-icon"><svg><use href="#i-pin"/></svg></span>Lưu trú</a>
      <a class="active" href="./sim/"><span class="nav-icon"><svg><use href="#i-sim"/></svg></span>SIM & Internet</a>
      <a href="./#checklist"><span class="nav-icon"><svg><use href="#i-check"/></svg></span>Chuẩn bị</a>
    </nav>
    <div class="sidebar-foot">
      <button class="sidebar-action" data-theme-toggle><span class="nav-icon"><svg><use href="#i-moon"/></svg></span>Đổi giao diện</button>
    </div>
  </aside>

  <div class="main">
    <header class="topbar">
      <div class="crumb"><strong>SIM & Internet</strong><span>Trung Quốc · 19–26/10/2026</span></div>
      <div class="top-actions">
        <button class="icon-btn" data-theme-toggle aria-label="Đổi giao diện"><svg class="ui-icon"><use href="#i-moon"/></svg></button>
      </div>
    </header>

    <header class="mobile-header">
      <a class="brand" href="./"><span class="brand-mark"><svg><use href="#i-plane"/></svg></span>TravelLog</a>
      <div class="right">
        <a class="btn sm" href="./">Tổng quan</a>
        <button class="icon-btn" data-theme-toggle aria-label="Đổi giao diện"><svg class="ui-icon"><use href="#i-moon"/></svg></button>
      </div>
    </header>

    <main class="content">
      <section class="sim-hero">
        <div class="sim-hero-copy">
          <div class="eyebrow"><span></span> Chưa mua · cần chốt trước 19/10</div>
          <h1>SIM vật lý Trung Quốc</h1>
          <p>Shortlist SIM vật lý cho 8 ngày, ưu tiên nhận trước tại Việt Nam và truy cập app quốc tế thuận tiện.</p>
          <div class="hero-actions">
            <a class="btn" href="#options">Xem lựa chọn</a>
          </div>
        </div>
        <aside class="target-card">
          <span>Mục tiêu / SIM</span>
          <strong>≤ 150k</strong>
          <small>8–10 ngày · 8–12GB</small>
          <div class="target-divider"></div>
          <span>Tổng 6 người</span>
          <b>600–900k</b>
        </aside>
      </section>

      <section class="section-head" id="options">
        <div><span>Shortlist</span><h2>SIM vật lý đáng kiểm tra</h2></div>
        <p>Giá là snapshot ngày 06/10/2026 và có thể là giá của biến thể rẻ nhất.</p>
      </section>

      <section class="provider-grid" id="providerGrid" aria-live="polite">
        <div class="card loading-card">Đang tải danh sách SIM…</div>
      </section>

      <section class="card buy-check" id="buy-check">
        <div class="buy-check-head">
          <div><span>Trước khi thanh toán</span><h2>5 điều phải kiểm tra</h2></div>
          <span class="mini-badge">Quan trọng</span>
        </div>
        <div class="check-grid">
          <div><b>01</b><p>Đúng <strong>SIM vật lý</strong>, không phải eSIM.</p></div>
          <div><b>02</b><p>Hiệu lực ít nhất <strong>8–10 ngày</strong>.</p></div>
          <div><b>03</b><p>Dung lượng khoảng <strong>8–12GB</strong> hoặc ≥1GB/ngày.</p></div>
          <div><b>04</b><p>Xác nhận <strong>Google/Facebook</strong> và nếu cần thì cả <strong>TikTok/ChatGPT</strong>.</p></div>
          <div><b>05</b><p>So <strong>giá checkout cuối</strong>; mục tiêu ≤150k/SIM.</p></div>
        </div>
      </section>

      <div class="price-note">
        <strong>* Lưu ý về giá:</strong> 54k / 70k / 95k thường là giá khởi điểm của một biến thể. Khi so sánh phải chọn đúng số ngày, dung lượng và loại SIM rồi mới nhìn tổng thanh toán.
        <span id="lastUpdated"></span>
      </div>
    </main>
  </div>
</div>

<nav class="mobile-bottom">
  <a href="./"><span class="nav-icon"><svg><use href="#i-home"/></svg></span>Tổng quan</a>
  <a href="./flights/"><span class="nav-icon"><svg><use href="#i-plane"/></svg></span>Chuyến bay</a>
  <a href="./hotels/"><span class="nav-icon"><svg><use href="#i-pin"/></svg></span>Lưu trú</a>
  <a class="active" href="./sim/"><span class="nav-icon"><svg><use href="#i-sim"/></svg></span>SIM</a>
</nav>

<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true">
  <symbol id="i-plane" viewBox="0 0 24 24"><path d="M10.5 4h3l2.2 6H20a2 2 0 1 1 0 4h-4.3l-2.2 6h-3l1.2-6H7l-2 2H3l1.2-4L3 8h2l2 2h4.7l-1.2-6Z"/></symbol>
  <symbol id="i-home" viewBox="0 0 24 24"><path d="m3 11 9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1Z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M16 3v4M8 3v4M3 10h18"/></symbol>
  <symbol id="i-note" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2.5"/><path d="M8 8h8M8 12h8M8 16h5"/></symbol>
  <symbol id="i-check" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><path d="m8 12 2.5 2.5L16.5 9"/></symbol>
  <symbol id="i-pin" viewBox="0 0 24 24"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></symbol>
  <symbol id="i-status" viewBox="0 0 24 24"><path d="M4 17h4l2-10 4 13 2-8h4"/><path d="M3 4h18v16H3z"/></symbol>
  <symbol id="i-sim" viewBox="0 0 24 24"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v5h4M10 12h5M10 16h5"/></symbol>
  <symbol id="i-moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z"/></symbol>
</svg>

<script src="./sim.js"></script>
</body>
</html>