/* ============================================================================= * tram-brand.css — Nhan dien dung chung he Tram / iCan / Cong du lieu * Mot nguon su that duy nhat cho mau, phong, bo goc, do do, chuyen dong. * Cach dung: nap tep nay trong cua moi trang, roi dung cac bien --* va * cac lop thanh phan ben duoi, thay cho viec khai mau rai rac trong tung trang. * ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap'); :root { /* Nen dat va set */ --sand:#F4ECE2; --sand-2:#EDE2D0; --sand-3:#E2D5BE; /* Muc chu */ --ink:#2B2117; --ink-2:#5C5345; --ink-3:#7A6E5E; --ink-4:#9B8F7D; /* Mau thuong hieu */ --clay:#C75B39; --clay-d:#A94824; --amber:#E08A1E; --leaf:#3E7C5A; --blue:#2E78B0; --red:#8B1E1E; --line:#E2D5BE; --line-2:#D6C7AC; --white:#ffffff; --brown:#8A6D3B; /* sac nau dat, dung cho sat lo */ --mute:#a99c89; /* chu phu rat nhat, dung o trang quan tri */ /* Thang mau WBGT dung chung cho ca app, web, cong du lieu va quan tri. Cung mot muc nguy co luon cung mot mau tren moi mat. */ --wbgt-safe:#3E7C5A; /* < 28 An toan */ --wbgt-caution:#E08A1E; /* < 30 Chu y */ --wbgt-rest:#C75B39; /* < 32 Nghi nhieu */ --wbgt-danger:#8B1E1E; /* < 33 Nguy hiem */ --wbgt-stop:#7a1717; /* >=33 Ngung viec */ /* Mau loai diem tien ich dung chung (place types) */ --pt-water:#2E78B0; --pt-shade:#3E7C5A; --pt-medical:#8B1E1E; --pt-toilet:#7A6E5E; --pt-food:#C75B39; --pt-service:#5C5345; /* Bo goc va do do */ --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px; --sh-1:0 1px 3px rgba(43,33,23,.06); --sh-2:0 6px 20px rgba(43,33,23,.10); --sh-3:0 12px 34px rgba(43,33,23,.16); /* Chuyen dong */ --ease:cubic-bezier(.2,.75,.2,1); --dur:.45s; /* Phong */ --font-body:'Be Vietnam Pro', system-ui, -apple-system, sans-serif; --font-head:'Fraunces', Georgia, serif; } /* ---- Nen tang ---- */ body{ font-family:var(--font-body); color:var(--ink); background:var(--sand); } h1,h2,h3{ font-family:var(--font-head); font-weight:700; letter-spacing:-0.01em; line-height:1.15; margin:0; } /* ---- Thanh phan dung chung ---- */ .tb-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); } .tb-pill{ display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700; color:#fff; } .tb-chip{ display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; } .tb-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:var(--r-md); border:none; background:var(--clay); color:#fff; font-weight:700; font-family:var(--font-body); cursor:pointer; transition:transform .12s var(--ease), background .12s ease; } .tb-btn:hover{ background:var(--clay-d); } .tb-btn:active{ transform:scale(.97); } .tb-btn-ghost{ background:transparent; color:var(--clay); border:1.5px solid var(--line-2); } /* ---- Header thuong hieu chuan ---- */ .tb-brand{ display:flex; align-items:center; gap:11px; } .tb-brand img{ width:38px; height:38px; border-radius:10px; } .tb-brand .nm{ font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--clay); line-height:1; } .tb-brand .sub{ font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); margin-top:2px; } /* ---- Chuyen dong dung chung (khop voi app va web) ---- */ @keyframes tbRise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} } .tb-rise{ animation:tbRise var(--dur) var(--ease) both; } .tb-rise-2{ animation-delay:.06s } .tb-rise-3{ animation-delay:.12s } .tb-rise-4{ animation-delay:.18s } @media (prefers-reduced-motion: reduce){ .tb-rise,.tb-rise-2,.tb-rise-3,.tb-rise-4{ animation:none; } }