@charset "UTF-8";
/* ==========================================================================
   Design tokens — Người Đồng Hành (NDH)
   ==========================================================================

   Hệ hai màu: vàng hổ phách #F9AF39 và xám #606060.

   Xám giữ phần khung — chữ, nền tối, đường kẻ. Vàng chỉ làm điểm nhấn: nút,
   số liệu, nhãn chuyên mục. Vàng có sức nặng chính vì nó xuất hiện ít; rải
   vàng khắp nơi là mất hết tác dụng.

   Vàng #F9AF39 trên nền trắng chỉ đạt 1,87:1 nên KHÔNG BAO GIỜ dùng làm màu
   chữ. Nó chỉ xuất hiện ở nền nút (chữ tối đè lên), mảng trang trí và hình
   khối lớn. Cần chữ màu vàng thì dùng sắc đồng --c-warm-600 (7,12:1).

   Mọi giá trị dùng cho CHỮ hoặc NỀN CÓ CHỮ đều đã kiểm đạt WCAG AA
   (>= 4.5:1). Tỷ lệ ghi ngay cạnh từng dòng để lần sau sửa còn biết mốc.

   Các sắc -500 trở lên sáng hơn CHỈ dùng để trang trí (nét vẽ, mảng nền,
   viền) trừ khi ghi rõ tỷ lệ đạt chuẩn.
   -------------------------------------------------------------------------- */

:root {
	/* --- Chủ đạo: xám than cho mảng tối, sắc đồng cho chữ --------------- */
	--c-brand-900: #121212;  /* chữ trắng: 18.90:1 */
	--c-brand-800: #1F1F1F;  /* chữ trắng: 16.40:1 */
	--c-brand-700: #7C4E04;  /* chữ trắng: 7.12:1 · chữ màu trên trắng: 7.12:1 */
	--c-brand-600: #996005;  /* chữ trắng: 5.21:1 · chữ màu trên trắng: 5.21:1 */
	--c-brand-500: #9B6107;  /* 5.11:1 trên trắng, 4.62:1 trên nền kem — vừa làm chữ vừa làm nền cho chữ trắng */
	--c-brand-300: #F7C26E;  /* trang trí */
	--c-brand-200: #FADEB3;  /* trang trí */
	--c-brand-100: #FBEDD5;  /* nền nhạt */
	--c-brand-50:  #FDF7ED;  /* nền rất nhạt */

	/* --- Hành động ------------------------------------------------------ */
	--c-act-800:   #5E3B03;  /* chữ trắng: 9.99:1 */
	--c-act-700:   #7C4E04;  /* chữ trắng: 7.12:1 — dùng cho nút chính */
	--c-act-500:   #F9AF39;  /* CHỈ trang trí — không đặt chữ trắng lên */
	--c-act-50:    #FDF7ED;

	/* --- Nhấn: vàng hổ phách -------------------------------------------- */
	--c-warm-700:  #5E3B03;  /* chữ trắng: 9.99:1 */
	--c-warm-600:  #7C4E04;  /* chữ trắng: 7.12:1 — dùng khi cần CHỮ màu vàng */
	--c-warm-400:  #F9AF39;  /* nền sáng, đặt CHỮ TỐI lên — --c-ink: 9.10:1 */
	--c-warm-300:  #F7C26E;
	--c-warm-100:  #FBEDD5;
	--c-warm-50:   #FDF7ED;

	/* --- Trung tính (xám thuần, dẫn xuất từ #606060) -------------------- */
	--c-ink:       #1A1A1A;  /* tiêu đề — 17.40:1 */
	--c-text:      #303030;  /* nội dung — 13.20:1 trên trắng */
	--c-muted:     #606060;  /* chữ phụ — 6.29:1 trên trắng, 5.92:1 trên --c-soft */
	--c-line:      #DEDEDE;
	--c-line-soft: #EEEEEE;
	--c-soft:      #F8F8F8;
	--c-cream:     #FDF7ED;  /* nền ấm cho khối biên tập */
	--c-white:     #FFFFFF;

	/*
	 * --- Nền tối cho MẢNG LỚN (hero, footer, khối kêu gọi) ---------------
	 *
	 * Mảng lớn phải ít rực, điểm nhấn nhỏ mới được rực. Cùng một độ chói thì
	 * cam bão hoà nặng mắt hơn xanh ngọc rất nhiều — lấy sắc đồng --c-brand-700
	 * phủ kín một khối cao 700px thì nhìn chói và bẩn. Ba sắc dưới đây là xám
	 * than ngả ấm, độ rực 4–8%, đủ để không lạnh lẽo mà không đè lên nội dung.
	 * Màu vàng vẫn xuất hiện trong khối đó, nhưng ở nút và số liệu.
	 */
	--c-night-900: #1A1A1A;  /* chữ trắng: 17.40:1 — độ rực 0% */
	--c-night-800: #2C2722;  /* chữ trắng: 14.68:1 — độ rực 4% */
	--c-night-700: #3D362D;  /* chữ trắng: 10.72:1 — độ rực 6% */
	--c-night-600: #4A4035;  /* chữ trắng:  8.42:1 — độ rực 8% */
	--c-night-line: rgba(255, 255, 255, .14);

	/* --- Tín hiệu -------------------------------------------------------- */
	--c-danger:    #B3261E;  /* chữ trắng: 6.06:1 */

	/*
	 * --- Thị trường (quy ước bảng điện VN) ------------------------------
	 *
	 * Khối này GIỮ NGUYÊN khi đổi bộ màu thương hiệu. Xanh tăng, đỏ giảm,
	 * vàng tham chiếu, tím trần, xanh dương sàn — đây là quy ước đọc số của
	 * nhà đầu tư Việt Nam, không phải màu nhận diện. Đổi sang vàng/xám là
	 * phá mất thông tin trên bảng giá.
	 */
	--c-up:        #0B7A3E;  /* tăng — 5.43:1 */
	--c-down:      #C62828;  /* giảm — 5.62:1 */
	--c-ref:       #9A6700;  /* tham chiếu — 4.87:1 */
	--c-ceil:      #8E24AA;  /* trần — 7.04:1 */
	--c-floor:     #026AA7;  /* sàn — 5.70:1 */
	--c-up-50:     #E7F6EC;
	--c-down-50:   #FDECEC;
	--c-ref-50:    #FDF9EE;  /* sáng hơn để --c-ref đặt lên đạt 4.63:1 */

	/*
	 * --- Năm mảng nội dung ----------------------------------------------
	 *
	 * Trước đây mỗi mảng một sắc riêng (lục, lam, tím, hồng, cam) nên nhìn
	 * màu là biết đang ở mảng nào. Hệ hai màu không còn chỗ cho năm sắc, nên
	 * chúng được rải trên trục vàng -> xám. Gọn hơn, nhưng mất một tầng chỉ
	 * dẫn: nếu cần phân biệt mảng thì phải dựa vào nhãn chữ và icon.
	 */
	--c-pillar-fin:   #7C4E04;  /* Tài chính cá nhân — 7.12:1 */
	--c-pillar-stock: #996005;  /* Chứng khoán — 5.21:1 */
	--c-pillar-bank:  #424242;  /* Ngân hàng — 10.05:1 */
	--c-pillar-re:    #9B6107;  /* Bất động sản — 5.11:1 trên trắng, 4.62:1 trên nền kem */
	--c-pillar-ins:   #606060;  /* Bảo hiểm — 6.29:1 */
}