/* tong-mau.css — 6 bộ tông màu. Đặt bằng <html data-giao-dien="...">; nạp SAU giao-dien.css.
 * Mỗi bộ khai báo lại: nền tối (--em-*), màu nhấn (--gold-*), chữ trên nút nhấn (--ink)
 * và các bản RGB dùng trong rgba() (--nhan-rgb, --phu-rgb…). Nền luôn tối để chiếu máy chiếu rõ nét.
 */

/* 1. Ngọc lục bảo & Vàng kim (mặc định) */
:root {
  --nhan-rgb: 255, 198, 38;
  --phu-rgb: 1, 20, 16;
  --nen-rgb: 0, 146, 120;
  --em700-rgb: 4, 80, 63;
  --em900-rgb: 2, 42, 34;
  --vang-dam-rgb: 168, 118, 0;
  --phu2-rgb: 95, 211, 182;
  --mat-ban-sang: #0d8a6e;
  --the-sang: #0b7a62;
}

/* 2. Hồng phấn & Vàng hồng — Ngày phụ nữ 8/3, 20/10, tiệc cưới */
[data-giao-dien="hong-phan"] {
  --em-950: #1f0712; --em-900: #2e0b1c; --em-800: #421128; --em-700: #5c1a3a;
  --em-600: #8a2b5a; --em-500: #c2477f; --em-300: #f7a6c8;
  --gold-700: #b8476f; --gold-600: #ec7fa6; --gold-500: #ff9fc2; --gold-300: #ffd0e1; --gold-100: #fff0f5;
  --ink: #3a0d22;
  --nhan-rgb: 255, 159, 194;
  --phu-rgb: 31, 7, 18;
  --nen-rgb: 194, 71, 127;
  --em700-rgb: 92, 26, 58;
  --em900-rgb: 46, 11, 28;
  --vang-dam-rgb: 184, 71, 111;
  --phu2-rgb: 247, 166, 200;
  --mat-ban-sang: #a33a6b;
  --the-sang: #7a2350;
}

/* 3. Đỏ son & Vàng — Tết, Tất niên, Year End */
[data-giao-dien="do-son"] {
  --em-950: #1c0303; --em-900: #2b0505; --em-800: #3f0808; --em-700: #5c0d0d;
  --em-600: #8a1414; --em-500: #c01e1e; --em-300: #ff8a7a;
  --nhan-rgb: 255, 198, 38;
  --phu-rgb: 28, 3, 3;
  --nen-rgb: 192, 30, 30;
  --em700-rgb: 92, 13, 13;
  --em900-rgb: 43, 5, 5;
  --vang-dam-rgb: 168, 118, 0;
  --phu2-rgb: 255, 138, 122;
  --mat-ban-sang: #a01818;
  --the-sang: #7d1010;
}

/* 4. Xanh navy & Vàng champagne — Hội nghị khách hàng, sự kiện doanh nghiệp */
[data-giao-dien="xanh-navy"] {
  --em-950: #050d1f; --em-900: #0a1730; --em-800: #102247; --em-700: #173265;
  --em-600: #1f4590; --em-500: #2f63c4; --em-300: #8fb6ff;
  --gold-700: #9c7a3c; --gold-600: #d9b56a; --gold-500: #f0d08a; --gold-300: #f8e6bd; --gold-100: #fdf6e6;
  --nhan-rgb: 240, 208, 138;
  --phu-rgb: 5, 13, 31;
  --nen-rgb: 47, 99, 196;
  --em700-rgb: 23, 50, 101;
  --em900-rgb: 10, 23, 48;
  --vang-dam-rgb: 156, 122, 60;
  --phu2-rgb: 143, 182, 255;
  --mat-ban-sang: #22498f;
  --the-sang: #1a3a73;
}

/* 5. Tím hoàng gia & Vàng — Gala, tri ân khách hàng VIP */
[data-giao-dien="tim-hoang-gia"] {
  --em-950: #120720; --em-900: #1d0b33; --em-800: #2a1049; --em-700: #3d1868;
  --em-600: #57239a; --em-500: #7a3fd0; --em-300: #c9a8ff;
  --nhan-rgb: 255, 198, 38;
  --phu-rgb: 18, 7, 32;
  --nen-rgb: 122, 63, 208;
  --em700-rgb: 61, 24, 104;
  --em900-rgb: 29, 11, 51;
  --vang-dam-rgb: 168, 118, 0;
  --phu2-rgb: 201, 168, 255;
  --mat-ban-sang: #5a2a9a;
  --the-sang: #46207a;
}

/* 6. Đen & Vàng kim — Year End sang trọng, tiệc Black tie */
[data-giao-dien="den-vang"] {
  --em-950: #050505; --em-900: #0d0d0d; --em-800: #161616; --em-700: #222222;
  --em-600: #333333; --em-500: #4a4a4a; --em-300: #cfcfcf;
  --gold-700: #8f6b1e; --gold-600: #c99a2e; --gold-500: #e9bf4f; --gold-300: #f5dc93; --gold-100: #fcf3d6;
  --nhan-rgb: 233, 191, 79;
  --phu-rgb: 5, 5, 5;
  --nen-rgb: 90, 90, 90;
  --em700-rgb: 34, 34, 34;
  --em900-rgb: 13, 13, 13;
  --vang-dam-rgb: 143, 107, 30;
  --phu2-rgb: 207, 207, 207;
  --mat-ban-sang: #2e2e2e;
  --the-sang: #1f1f1f;
}

/* ===== Ô chọn tông màu (Cấu hình + trình thiết lập) ===== */
.chon-tong-mau { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tm-o {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius-sm); text-align: left;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(var(--nhan-rgb), .22);
}
.tm-o:hover { background: rgba(255, 255, 255, .08); }
.tm-o.chon { box-shadow: inset 0 0 0 2px var(--gold-500); background: rgba(var(--nhan-rgb), .1); }
.tm-mau { display: flex; height: 34px; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.tm-mau span { flex: 1; }
.tm-mau span:last-child { flex: .6; }
.tm-ten { font-size: 15px; font-weight: 600; line-height: 1.25; }
.tm-dip { font-size: 12.5px; color: var(--ivory-70); line-height: 1.35; }