/* Hai trang công cụ miễn phí (/cong-cu/tinh-lai/, /cong-cu/doi-soat/) theo chuẩn trang chủ — 03/11/2026.
   Trang vẫn là trang tĩnh + JS morphdom; build_theme.py (cong_cu_moi) thay khối mở đầu, nhãn mục, hộp chốt
   và chèn tệp này SAU site.css + <style> nội tuyến của trang.
   LƯU Ý: functions.php nạp MỌI css/trang-*.css cho các trang mẫu mới khác → mọi quy tắc ở đây phải nằm
   dưới #app-lai / #app-ds, không được chạm :root, body hay thẻ trần. */

/* biến màu của công cụ: luôn bản sáng (nền trắng, kể cả máy để chế độ tối), viền theo trang chủ */
#app-lai, #app-ds {
	--bg: #FFFFFF; --card: #FFFFFF; --soft: #F7F5F1; --line: #E6E2DC;
	--ink: #211F1C; --sub: #4A4744; --mute: #6B6660;
	--amber: #E49B27; --amberInk: #9A610B; --wash: #FFF8EC; --tint: #F5DCB3;
	--ok: #2E7D5B; --bad: #C0392B; --panel: #211F1C; --panelInk: #FFFFFF; --panelSub: #C9C4BD;
	--gxHead: #FFF8EC; --gxLine: #E6E2DC; --gxLine2: #EFEBE5;
	--gold: #A9752A; --goldInk: #6F4B15; --goldWash: #F3E4C4;
	color-scheme: light;
	background: #FFFFFF !important;
	color: var(--ink);
	font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
	overflow-x: clip;
}

/* ---- khối mở đầu ---- */
#app-lai .cc-khung, #app-ds .cc-khung { margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); }
#app-lai .cc-dau, #app-ds .cc-dau { padding: clamp(20px, 3vw, 32px) 0 clamp(14px, 2vw, 20px); background: #fff; }
#app-lai .cc-h1, #app-ds .cc-h1 { font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.14; letter-spacing: -.035em; color: #211F1C; margin: 14px 0 10px; text-wrap: balance; }
#app-lai .cc-mo-ta, #app-ds .cc-mo-ta { font-size: 16.5px; line-height: 1.65; margin: 0; max-width: 760px; }

/* ---- thẻ, ô, nút của công cụ: bo 10px (thẻ) / 8px (ô, nút), viền #E6E2DC ---- */
#app-lai [style*="border-radius: 2px"], #app-ds [style*="border-radius: 2px"],
#app-lai [style*="border-radius: 0;"], #app-ds [style*="border-radius: 0;"] { border-radius: 10px !important; }
#app-lai input[style*="border-radius"], #app-ds input[style*="border-radius"],
#app-lai button[style*="border-radius"], #app-ds button[style*="border-radius"],
#app-lai label[style*="border-radius"], #app-ds label[style*="border-radius"],
#app-lai a[style*="border-radius"], #app-ds a[style*="border-radius"],
#app-lai select[style*="border-radius"], #app-ds select[style*="border-radius"] { border-radius: 8px !important; }
#app-lai .gx-wrap, #app-lai .gx-nganh-drop { border-radius: 10px; }
#app-lai .gx-seg, #app-lai .gx-tool { border-radius: 8px; }
#app-lai .gx-chip { border-radius: 999px; }
#app-lai .gx-wrap { box-shadow: none; }
/* ô bảng tính giữ góc vuông (nằm trong lưới) */
#app-lai .gx-tbl [style*="border-radius"] { border-radius: 0 !important; }
#app-lai .gx-tbl .gx-cb { border-radius: 5px !important; }
/* nút chính amber như trang chủ: chữ than chì, góc 8px */
#app-lai button[style*="background: var(--amber)"], #app-ds button[style*="background: var(--amber)"] { font-weight: 600 !important; }

/* nhãn mục (CHÚ THÍCH & NGUỒN PHÍ, GIỚI HẠN CẦN BIẾT) */
#app-lai .m-nhan, #app-ds .m-nhan { font-size: 11.5px; padding: 5px 12px; }

/* ---- hộp chốt cuối trang (.m-cuoi bản gọn) ---- */
#app-lai .cc-cuoi, #app-ds .cc-cuoi { padding: clamp(20px, 3vw, 32px) 0 clamp(28px, 4vw, 44px); background: #fff; }
#app-lai .cc-cuoi .m-cuoi, #app-ds .cc-cuoi .m-cuoi { padding: clamp(22px, 3.6vw, 36px); }
#app-lai .cc-cuoi .m-cuoi::after, #app-ds .cc-cuoi .m-cuoi::after { width: 160px; height: 160px; bottom: -30px; }
#app-lai .cc-cuoi .m-cuoi h2, #app-ds .cc-cuoi .m-cuoi h2 { font-size: clamp(24px, 3.2vw, 36px); margin: 0 0 10px; color: #211F1C; }
#app-lai .cc-cuoi .m-cuoi p, #app-ds .cc-cuoi .m-cuoi p { font-size: 16px; margin: 0 0 18px; }
#app-lai .cc-cuoi__nut, #app-ds .cc-cuoi__nut { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
#app-lai .cc-cuoi a.m-nut, #app-ds .cc-cuoi a.m-nut { color: #fff; }
#app-lai .cc-cuoi a.m-nut--vien, #app-ds .cc-cuoi a.m-nut--vien { color: #211F1C; }
#app-lai .cc-cuoi a.m-nut--vien:hover, #app-ds .cc-cuoi a.m-nut--vien:hover { color: #211F1C; }

@media (max-width: 560px) {
	#app-lai .cc-h1, #app-ds .cc-h1 { font-size: 30px !important; }
	#app-lai .cc-mo-ta, #app-ds .cc-mo-ta { font-size: 15.5px; }
	#app-lai .m-nhan, #app-ds .m-nhan { letter-spacing: .5px; font-size: 11px; }
	#app-lai .cc-cuoi__nut .m-nut, #app-ds .cc-cuoi__nut .m-nut { width: 100%; }
}