/* ============================================================
DWork Design System — dwork-ui.css
Nguồn: Figma "Style guideline" (bản gốc độc lập, các app là clone)
Token: màu + typography + Google Sans + Material Symbols (weight 300)
============================================================ */
/* ---------- Font chữ: Google Sans ---------- */
@font-face {
font-family: "google-sans";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("./fonts/GoogleSans-Regular.woff2") format("woff2"),
local("Google Sans"), local("GoogleSans-Regular");
}
@font-face {
font-family: "google-sans";
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("./fonts/GoogleSans-Medium.woff2") format("woff2"),
local("Google Sans Medium"), local("GoogleSans-Medium");
}
@font-face {
font-family: "google-sans";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("./fonts/GoogleSans-Bold.woff2") format("woff2"),
local("Google Sans Bold"), local("GoogleSans-Bold");
}
/* ---------- Icon: Material Symbols Outlined, weight 300 ---------- */
/* Nạp CDN trong :
*/
.icon,
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
/* weight 300 (KHÔNG dùng mặc định 400 của Google) */
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.icon--fill { font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24; }
.icon--20 { font-size: 20px; }
.icon--24 { font-size: 24px; }
.icon--18 { font-size: 18px; }
/* ============================================================
TOKENS
============================================================ */
:root {
/* --- Light Green (chủ đạo / primary) --- */
--lgreen-main: #9BCE39;
--lgreen-light: #AFD861;
--lgreen-dark: #8CBA33;
--lgreen-b15: #84AF31;
--lgreen-b20: #7CA52E;
--lgreen-b25: #749A2B;
--lgreen-selected: #C3E288; /* option.selected (F40) */
--lgreen-hover: #D7EBB0; /* option.hover (F60) */
--lgreen-disabled: #EBF5D7; /* (F80) */
/* --- Dark Green (đậm / secondary, nền header) --- */
--dgreen-main: #043C39;
--dgreen-light: #366361;
--dgreen-dark: #043633;
--dgreen-selected: #688A88;
--dgreen-hover: #9BB1B0;
--dgreen-disabled: #CDD8D7;
/* --- Blue (info / link) --- */
--blue-main: #1062E5;
--blue-light: #4081EA;
--blue-dark: #0E58CF;
/* --- Yellow (cảnh báo / warning) --- */
--yellow-main: #FBBC05;
--yellow-light: #FCC937;
--yellow-dark: #E2AA05;
--yellow-bg: #FEF2CD;
/* --- Red (lỗi / nguy hiểm / danger) --- */
--red-main: #EA4335;
--red-light: #EE695D;
--red-dark: #D33C30;
--red-bg: #FBD9D7;
/* --- Gray scale (Main 0.1 → 1.0) --- */
--gray-1: #EAEAEC;
--gray-2: #D5D5D8;
--gray-3: #C1BFC5;
--gray-4: #ACACAC;
--gray-5: #97959E;
--gray-6: #82808B;
--gray-7: #6D6B77;
--gray-8: #595564;
--gray-9: #454545;
--gray-10: #303030; /* text chính */
/* --- Surface / nền --- */
--divider: #E6E6E8;
--track-bg: #F1F0F2;
--chat-bg: #F3F2F5;
--body-bg: #F8F7FA;
--grey-light: #FAFAFA;
--white: #FFFFFF;
/* --- Semantic --- */
--color-primary: var(--lgreen-main);
--color-primary-hover: var(--lgreen-dark);
--text-primary: var(--gray-10);
--text-secondary: var(--gray-7);
--text-muted: var(--gray-5);
--text-on-primary: var(--white);
/* --- Typography (font: Google Sans) --- */
--font-sans: "google-sans", "Google Sans", Roboto, system-ui, sans-serif;
--fs-h1: 48px; --lh-h1: 61px;
--fs-h2: 40px; --lh-h2: 51px;
--fs-h3: 32px; --lh-h3: 41px;
--fs-h4: 24px; --lh-h4: 31px;
--fs-xl: 20px; --lh-xl: 25px; /* Large / Subtitle / Body 1 */
--fs-md: 16px; --lh-md: 20px; /* Body 2 / Label — thân chính */
--fs-sm: 13px; --lh-sm: 17px; /* Caption */
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
/* --- Bo góc / shadow / spacing --- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(48,48,48,.08), 0 1px 3px rgba(48,48,48,.06);
--shadow-md: 0 4px 12px rgba(48,48,48,.10);
}
/* ============================================================
BASE
============================================================ */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-md);
line-height: var(--lh-md);
color: var(--text-primary);
background: var(--body-bg);
-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0; font-weight: var(--fw-medium); color: var(--text-primary); }
h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h4 { font-size: var(--fs-xl); line-height: var(--lh-xl); }
a { color: var(--blue-main); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ============================================================
COMPONENTS — nút, ô nhập, badge, bảng, card
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-medium);
line-height: 1; padding: 10px 18px; border-radius: var(--radius-sm);
border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn--primary { background: var(--lgreen-main); color: var(--dgreen-main); }
.btn--primary:hover { background: var(--lgreen-dark); }
.btn--primary:disabled { background: var(--lgreen-disabled); color: var(--gray-5); cursor: not-allowed; }
.btn--secondary { background: var(--white); color: var(--gray-10); border-color: var(--gray-2); }
.btn--secondary:hover { background: var(--grey-light); border-color: var(--gray-3); }
.btn--danger { background: var(--red-main); color: var(--white); }
.btn--danger:hover { background: var(--red-dark); }
.btn--ghost { background: transparent; color: var(--gray-7); }
.btn--ghost:hover { background: var(--track-bg); }
.btn .icon { font-size: 20px; }
.input {
width: 100%; font-family: var(--font-sans); font-size: var(--fs-md);
color: var(--text-primary); background: var(--white);
padding: 10px 12px; border: 1px solid var(--gray-2); border-radius: var(--radius-sm);
outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--lgreen-main); box-shadow: 0 0 0 3px var(--lgreen-disabled); }
.input::placeholder { color: var(--text-muted); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }
.badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1;
padding: 4px 10px; border-radius: var(--radius-pill);
}
.badge--green { background: var(--lgreen-disabled); color: var(--lgreen-b25); }
.badge--blue { background: #DCE9FC; color: var(--blue-dark); }
.badge--yellow { background: var(--yellow-bg); color: var(--yellow-dark); }
.badge--red { background: var(--red-bg); color: var(--red-dark); }
.badge--gray { background: var(--gray-1); color: var(--gray-7); }
.card {
background: var(--white); border: 1px solid var(--divider);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px;
}
.table { width: 100%; border-collapse: collapse; background: var(--white); }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.table th { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); background: var(--grey-light); }
.table tbody tr:hover { background: var(--lgreen-disabled); }
/* ============================================================
COMPONENTS — mở rộng (bám Figma Style guideline)
============================================================ */
/* ---------- Button: pill + biến thể + trạng thái ---------- */
.btn--pill { border-radius: var(--radius-pill); }
.btn--lg { padding: 13px 26px; font-size: var(--fs-xl); }
.btn--sm { padding: 7px 14px; font-size: var(--fs-sm); }
.btn--block { width: 100%; justify-content: center; }
/* green (mặc định primary) */
.btn--primary:active { background: var(--lgreen-b20); }
/* blue */
.btn--blue { background: var(--blue-main); color: #fff; }
.btn--blue:hover { background: var(--blue-dark); }
.btn--blue:active { background: #0c49ac; }
.btn--blue:disabled { background: #CFE0FA; color: #fff; cursor: not-allowed; }
/* outline green / blue / gray */
.btn--outline { background: transparent; border-color: var(--lgreen-main); color: var(--lgreen-b25); }
.btn--outline:hover { background: var(--lgreen-disabled); }
.btn--outline-blue { background: transparent; border-color: var(--blue-main); color: var(--blue-main); }
.btn--outline-blue:hover { background: #DCE9FC; }
/* icon-only */
.btn--icon { padding: 9px; border-radius: var(--radius-pill); }
.btn--icon.btn--secondary { line-height: 0; }
/* ---------- Field / Input / Select ---------- */
.field > label .req { color: var(--red-main); margin-left: 2px; }
.field .helper { font-size: var(--fs-sm); color: var(--text-muted); }
.field.is-error .input { border-color: var(--red-main); }
.field.is-error .input:focus { box-shadow: 0 0 0 3px var(--red-bg); }
.field.is-error .helper { color: var(--red-dark); }
.input:disabled, .input[disabled] { background: var(--track-bg); color: var(--text-muted); cursor: not-allowed; }
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > .icon { position: absolute; left: 12px; color: var(--text-muted); font-size: 20px; pointer-events: none; }
.input-icon > .input { padding-left: 40px; }
.input-icon.trail > .icon { left: auto; right: 12px; }
.input-icon.trail > .input { padding-left: 12px; padding-right: 40px; }
select.input { appearance: none; background-image:
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center; padding-right: 38px; }
/* ---------- Radio (mặc định xanh lá) ---------- */
.radio, .check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-md); color: var(--text-primary); }
.radio > input, .check > input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio .box { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gray-4); flex: none;
display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s; }
.radio > input:checked + .box { border-color: var(--lgreen-main); }
.radio > input:checked + .box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lgreen-main); }
.radio.blue > input:checked + .box { border-color: var(--blue-main); }
.radio.blue > input:checked + .box::after { background: var(--blue-main); }
.radio > input:disabled + .box { border-color: var(--gray-2); }
.radio > input:disabled ~ * { color: var(--text-muted); }
/* ---------- Checkbox ---------- */
.check .box { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--gray-4); flex: none;
display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.check .box .icon { font-size: 16px; color: #fff; opacity: 0; }
.check > input:checked + .box { background: var(--lgreen-main); border-color: var(--lgreen-main); }
.check > input:checked + .box .icon { opacity: 1; }
.check.blue > input:checked + .box { background: var(--blue-main); border-color: var(--blue-main); }
.check > input:disabled + .box { background: var(--track-bg); border-color: var(--gray-2); }
/* ---------- Toggle ---------- */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle > input { position: absolute; opacity: 0; }
.toggle .track { width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--gray-3); position: relative; transition: background .15s; flex: none; }
.toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .15s; }
.toggle > input:checked + .track { background: var(--lgreen-main); }
.toggle > input:checked + .track::after { left: 20px; }
.toggle.blue > input:checked + .track { background: var(--blue-main); }
.toggle > input:disabled + .track { opacity: .5; }
/* ---------- Chip / Selected item ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gray-2);
border-radius: var(--radius-sm); padding: 5px 8px 5px 6px; font-size: var(--fs-sm); }
.chip .thumb { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; background: var(--gray-1); }
.chip .x { cursor: pointer; color: var(--text-muted); display: inline-flex; }
.chip .x .icon { font-size: 16px; }
/* ---------- Avatar ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--lgreen-disabled);
display: inline-flex; align-items: center; justify-content: center; color: var(--lgreen-b25); font-weight: 700; }
.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.avatar--md { width: 40px; height: 40px; font-size: 16px; }
.avatar--lg { width: 56px; height: 56px; font-size: 22px; }
/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--divider); }
.tabs .tab { padding: 10px 18px; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-secondary);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.tabs .tab:hover { color: var(--text-primary); }
.tabs .tab.active { color: var(--blue-main); border-bottom-color: var(--blue-main); }
.tabs--green .tab.active { color: var(--lgreen-b25); border-bottom-color: var(--lgreen-main); }
.tabs .tab .x { color: var(--text-muted); display: inline-flex; }
.tabs .tab .x .icon { font-size: 16px; }
/* ---------- Pagination ---------- */
.pager { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: var(--fs-md); }
.pager button { border: none; background: transparent; cursor: pointer; color: var(--gray-7); border-radius: var(--radius-sm);
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.pager button:hover { background: var(--track-bg); }
.pager button:disabled { color: var(--gray-3); cursor: not-allowed; background: none; }
.pager .info { padding: 0 12px; }
/* ---------- OTP code input ---------- */
.otp { display: inline-flex; gap: 12px; }
.otp input { width: 46px; height: 54px; text-align: center; font-size: 22px; font-weight: var(--fw-medium);
border: none; border-bottom: 2px solid var(--gray-3); background: transparent; color: var(--text-primary); outline: none; }
.otp input:focus { border-bottom-color: var(--lgreen-main); }
.otp.boxed input { border: 1.5px solid var(--gray-2); border-radius: var(--radius-sm); }
.otp.boxed input:focus { border-color: var(--lgreen-main); box-shadow: 0 0 0 3px var(--lgreen-disabled); }
.otp.is-error input { border-color: var(--red-main); border-bottom-color: var(--red-main); }
/* ---------- Alert / note ---------- */
.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--fs-md); align-items: flex-start; }
.alert .icon { font-size: 20px; flex: none; }
.alert--info { background: #DCE9FC; color: var(--blue-dark); }
.alert--warn { background: var(--yellow-bg); color: var(--yellow-dark); }
.alert--error { background: var(--red-bg); color: var(--red-dark); }
.alert--ok { background: var(--lgreen-disabled); color: var(--lgreen-b25); }