/* Design System V2 — DARK-ONLY (AD-24). Không light mode, không toggle theme: app không có, web cũng không.
   Token lấy từ core/designsystem/theme/Color.kt để web và app không lệch tông. */
:root {
  --bg-base: #0E0E13;
  --bg-deepest: #0B0B0F;
  --surface-1: #16161C;
  --surface-2: #1E1E25;
  --surface-3: #26262E;

  --accent: #F97316;        /* orange-bright — accent CHỐT */
  --orange-deep: #EA580C;
  --blue-bright: #3B82F6;
  --blue-deep: #2563EB;     /* nửa còn lại của gradient nhận diện */

  --text-1: #FFFFFF;
  --text-2: #A1A1AA;
  --text-3: #71717A;
  --border: #1B1B22;

  --kho: 1080px;
  --kho-hep: 720px;
}

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
img { max-width: 100%; display: block; }

/* ── Landing ───────────────────────────────────────────────────────────── */

.kho { max-width: var(--kho); margin: 0 auto; padding: 0 24px; }
.kho-hep { max-width: var(--kho-hep); margin: 0 auto; padding: 0 24px 72px; }

.hero {
  padding: 96px 0 72px;
  /* Gradient nhận diện blue→orange. Giữ ở nền, không nhét vào chữ dài — contrast. */
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(37, 99, 235, 0.30), transparent 65%),
    radial-gradient(760px 380px at 88% 8%, rgba(249, 115, 22, 0.22), transparent 62%);
}

.dau-trang {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 22px 0;
}

.logo {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-1); text-decoration: none;
}
.logo span {
  background: linear-gradient(92deg, var(--blue-bright), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.dieu-huong { display: flex; gap: 26px; font-size: 15px; flex-wrap: wrap; }
/* `nowrap` là thứ giữ header khỏi vỡ: không có nó, màn hẹp bẻ "Quyền riêng tư" thành hai dòng và
   cả hàng nav trông như bị nhồi. Thà cho cả cụm xuống dòng dưới logo còn hơn bẻ từng mục. */
.dieu-huong a { color: var(--text-2); text-decoration: none; white-space: nowrap; }
.dieu-huong a:hover { color: var(--text-1); }

.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.12; letter-spacing: -0.025em;
  margin: 40px 0 0; max-width: 15ch;
}
.hero .phu {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--text-2); max-width: 56ch; margin: 22px 0 0;
}

.nhan-trang-thai {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-2);
}
.nhan-trang-thai::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.20);
}

.nhom-nut { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.nut {
  display: inline-block; padding: 13px 24px; border-radius: 12px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
}
.nut-chinh {
  background: linear-gradient(92deg, var(--orange-deep), var(--accent));
  color: #fff;
}
.nut-phu { background: var(--surface-2); border-color: var(--border); color: var(--text-1); }

/* ── Khung máy + screenshot ────────────────────────────────────────────── */

.day-may {
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
  padding: 64px 0 8px;
}

/* `.may` chỉ là cột chứa máy + chú thích — KHÔNG mang bezel, nếu không chú thích sẽ nằm lọt
   trong thân điện thoại. Bezel nằm ở `.man`. */
.may { width: 236px; flex: 0 0 auto; }

/* Bezel dựng bằng CSS: không nhúng ảnh khung máy của hãng nào. */
.may .man {
  position: relative;
  /* Khớp ĐÚNG tỉ lệ ảnh chụp (720×1612 của OPPO CPH2591). Đặt 9/19.5 cho "giống điện thoại" thì
     object-fit:cover cắt mất mép trên — tức mất luôn rest timer và mức tạ ở ảnh ghi hiệp. */
  aspect-ratio: 720 / 1612;
  border-radius: 34px; padding: 9px; overflow: hidden;
  background: linear-gradient(160deg, #34343E, #17171D);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex; align-items: center; justify-content: center;
}
.may .man img { border-radius: 26px; }
.may .man img { width: 100%; height: 100%; object-fit: cover; }
.may .man .cho-anh {
  color: var(--text-3); font-size: 12px; text-align: center; padding: 0 18px;
}
/* KHÔNG vẽ notch giả: ảnh chụp đã mang status bar thật của máy, thêm một thanh đen lên trên chỉ
   tạo hai lớp chồng nhau. (Có notch CSS ở bản đầu, bỏ sau khi xem trên máy thật.) */
.may .chu-thich {
  text-align: center; font-size: 13px; color: var(--text-2); margin-top: 14px;
}

/* ── Khối nội dung ─────────────────────────────────────────────────────── */

.khoi { padding: 84px 0; border-top: 1px solid var(--border); }
.khoi h2 {
  font-size: clamp(25px, 3.4vw, 34px); letter-spacing: -0.02em;
  margin: 0 0 14px; max-width: 22ch;
}
.khoi .mo-ta { color: var(--text-2); max-width: 62ch; margin: 0 0 40px; }

.luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }

.the {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
}
.the h3 { margin: 0 0 9px; font-size: 17px; letter-spacing: -0.01em; }
.the p { margin: 0; color: var(--text-2); font-size: 15px; }
.the .so {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--accent); margin-bottom: 12px;
}

/* Khối "ai vận hành" — cố ý KHÔNG trình bày như trang công ty. Xem ghi chú trong index.html. */
.van-hanh {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 18px; padding: 34px;
  max-width: 66ch;
}
.van-hanh p { color: var(--text-2); }
.van-hanh p:first-child { margin-top: 0; }
.van-hanh strong { color: var(--text-1); }

/* ── Trang văn bản (privacy) ───────────────────────────────────────────── */

.trang-van-ban { background: var(--bg-deepest); }

.thanh-tren {
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--kho-hep); margin: 0 auto; padding: 22px 24px;
  font-size: 15px;
}
.thanh-tren .ve-goc { color: var(--text-2); text-decoration: none; }
.thanh-tren .ve-goc:hover { color: var(--text-1); }
.thanh-tren .doi-ngon-ngu {
  color: var(--text-2); text-decoration: none;
  border: 1px solid var(--border); border-radius: 9px; padding: 5px 13px;
}
.thanh-tren .doi-ngon-ngu:hover { color: var(--text-1); border-color: var(--text-3); }

.nhan-app { color: var(--accent); font-size: 14px; font-weight: 600; margin: 26px 0 6px; }
.trang-van-ban h1 { font-size: clamp(29px, 4.4vw, 40px); letter-spacing: -0.022em; margin: 0 0 10px; }
.cap-nhat { color: var(--text-3); font-size: 14px; margin: 0 0 34px; }
.dan-nhap { font-size: 17px; color: var(--text-2); margin: 0 0 12px; }

.muc { padding: 26px 0; border-top: 1px solid var(--border); }
.muc h2 { font-size: 19px; letter-spacing: -0.01em; margin: 0 0 10px; }
.muc p { margin: 0; color: var(--text-2); }
.muc.lien-he p { color: var(--text-1); }

.ghi-chu-nguon {
  margin-top: 34px; padding: 15px 18px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text-3); font-size: 13px;
}

/* ── Chân trang ────────────────────────────────────────────────────────── */

.chan-trang {
  border-top: 1px solid var(--border);
  padding: 34px 24px 56px; text-align: center;
  color: var(--text-3); font-size: 14px;
}
.chan-trang p { margin: 7px 0; }
.chan-trang a { color: var(--text-2); }
.chan-trang .lien-ket { display: flex; gap: 22px; justify-content: center; margin-bottom: 14px; }

@media (max-width: 640px) {
  .hero { padding: 60px 0 48px; }
  .khoi { padding: 60px 0; }
  .may { width: min(240px, 72vw); }
  .dau-trang { gap: 10px; }
  .dieu-huong { gap: 16px; font-size: 14px; width: 100%; }
}