/* ===================================================================== NAWARUCO — COMPONENT LIBRARY Nhúng SAU tokens.css. Mọi giá trị màu/khoảng cách/typography đều lấy từ token — không hard-code số hay mã màu mới trong file này. Xem markup mẫu từng thành phần trong components.html QUY ƯỚC KHOẢNG CÁCH (áp dụng cho mọi "box thông tin" — card, alert, panel showcase...): 20px (--gap-box) khoảng cách GIỮA các box thông tin và giữa các module (card-grid gap, hai cột nội dung, box xếp chồng dọc). Chốt 2026-09-07, thay cho mốc 32px ghi trước đó. 24px (--sp-5) padding BÊN TRONG một box (=75% của 32px) 16px (--sp-4) khoảng cách giữa các NHÓM thành phần con trong box (icon+tiêu đề+mô tả, tiêu đề+ngày+đoạn văn) (=50%) 8px (--sp-2) khoảng cách giữa các phần tử ghép sát nhau trong cùng một dòng (badge+chấm trạng thái, icon+nhãn ngắn) (=25%) ===================================================================== */ /* ============ BUTTONS ============ */ /* Chiều cao chuẩn 40px cho mọi nút (chốt 2026-09-08). Dùng min-height chứ không height cố định: nhãn dài xuống hai dòng thì nút cao thêm chứ không cắt chữ. */ .btn{font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm); border-radius:var(--radius-md); min-height:40px; padding:8px 20px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s var(--ease), box-shadow .12s var(--ease); text-decoration:none; line-height:1.2;} .btn:active{transform:translateY(1px);} .btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--c-primary-700); box-shadow:var(--shadow-md);} /* Nền dùng bậc 700, không dùng #00AB38 của logo: chữ trắng trên #00AB38 chỉ đạt 3.05:1, dưới chuẩn 4.5:1 cho chữ thường. Màu logo nguyên bản vẫn dùng cho vệt sóng và các mảng đồ hoạ, nơi không có chữ đặt lên. */ .btn-accent{background:var(--c-accent-700); color:#fff;} .btn-accent:hover{background:var(--c-accent-800);} .btn-secondary{background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-strong);} .btn-secondary:hover{border-color:var(--brand); color:var(--brand);} .btn-ghost{background:transparent; color:var(--brand); border-color:transparent; padding:10px 12px;} .btn-ghost:hover{background:var(--bg-tint);} .btn-sm{min-height:32px; padding:6px 14px; font-size:var(--fs-xs);} .btn-lg{min-height:48px; padding:12px 26px; font-size:var(--fs-md); border-radius:var(--radius-md);} .btn:disabled{opacity:.45; cursor:not-allowed;} /* ============ FORM ELEMENTS ============ */ .field{display:flex; flex-direction:column; gap:6px; max-width:340px;} .field label{font-size:var(--fs-sm); font-weight:600; color:var(--text-primary);} .field .hint{font-size:var(--fs-xs); color:var(--text-secondary);} /* Cùng chiều cao 40px với nút — ô nhập và nút hay đứng cạnh nhau ở hàng tìm kiếm */ .input,.select{min-height:40px;} .input,.select,.textarea{ font-family:var(--font-body); font-size:var(--fs-base); color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--border-input); border-radius:var(--radius-sm); padding:10px 12px; width:100%; transition:border-color .12s, box-shadow .12s; } .input:focus,.select:focus,.textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--c-primary-100); outline:none;} .select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2351697A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;} .textarea{resize:vertical; min-height:88px;} .input.error,.select.error{border-color:var(--c-danger);} .field .error-text{font-size:var(--fs-xs); color:var(--c-danger);} .checkbox-row,.radio-row{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm);} .checkbox-row input,.radio-row input{width:16px; height:16px; accent-color:var(--brand);} .input-unit{position:relative;} .input-unit .input{padding-right:52px;} .input-unit .unit{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-numeric); font-variant-numeric:tabular-nums;} /* ============ BADGES / TAGS — trạng thái vận hành ============ */ /* align-self:flex-start = thuộc tính Hug của Figma. Badge là inline-flex nên tự co theo nội dung, nhưng khi đặt trong một flex column (thẻ tin, dòng thông báo) thì align-self:stretch mặc định kéo nó rộng hết hàng. Khai báo ở đây một lần cho mọi chỗ; ngoài flex/grid thuộc tính này không có tác dụng gì. */ .badge{display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:600; padding:4px 10px; border-radius:var(--radius-pill);} .badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;} .badge-success{background:var(--c-success-bg); color:var(--c-success);} .badge-warning{background:var(--c-warning-bg); color:var(--c-warning);} .badge-danger{background:var(--c-danger-bg); color:var(--c-danger);} .badge-info{background:var(--c-info-bg); color:var(--c-info);} .badge-neutral{background:var(--bg-sunken); color:var(--text-secondary); border:1px solid var(--border-default);} /* ============ ALERT / BANNER — thông báo cấp nước ============ */ .alert{display:flex; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); border-radius:var(--radius-md); border:1px solid; align-items:flex-start;} .alert svg{flex:none; width:20px; height:20px; margin-top:2px;} .alert strong{display:block; margin-bottom:2px; font-size:var(--fs-sm);} .alert p{font-size:var(--fs-base); color:var(--text-secondary); margin:0;} .alert-warning{background:var(--c-warning-bg); border-color:color-mix(in srgb, var(--c-warning) 30%, transparent); color:var(--c-warning);} .alert-danger{background:var(--c-danger-bg); border-color:color-mix(in srgb, var(--c-danger) 30%, transparent); color:var(--c-danger);} .alert-info{background:var(--c-info-bg); border-color:color-mix(in srgb, var(--c-info) 30%, transparent); color:var(--c-info);} /* ============ CARDS ============ */ .card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap-box);} .card{background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .16s var(--ease), transform .16s var(--ease);} .card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);} /* Thẻ truy cập nhanh (tra cứu hoá đơn, thanh toán, đăng ký...) */ .card-quick{padding:var(--sp-5); text-align:left; display:flex; flex-direction:column; gap:var(--sp-4); text-decoration:none; color:inherit; height:100%;} /* Chỉ còn icon, không có khung nền phía sau (chốt 2026-09-08). Bỏ khung thì icon 24px trông hụt so với tiêu đề thẻ, nên phóng lên 36px để giữ đúng trọng lượng thị giác cũ của khối 44px. */ .card-quick .icon{width:36px; height:36px; color:var(--brand); display:flex; align-items:center; justify-content:center;} .card-quick .icon svg{width:100%; height:100%;} /* Component không tự quyết cấp tiêu đề (h2/h3/h4): mỗi trang chọn đúng cấp kế tiếp trong outline thật của trang đó, component chỉ lo hình thức. Phát hiện 2026-09-09: khi kiểu khoá cứng vào một thẻ (vd ".card-quick h4"), trang nào đặt component ngay sau

(không qua h2/h3) sẽ nhảy cấp; trang khác đặt nó dưới h2/h3 lại đúng — cùng một component, hai ngữ cảnh khác nhau, nên style phải theo TẤT CẢ cấp có thể xảy ra. */ .card-quick h2,.card-quick h3,.card-quick h4{font-size:var(--fs-base);} .card-quick p{color:var(--text-secondary); font-size:var(--fs-base); margin:0;} .card-quick .go{margin-top:auto; font-size:var(--fs-xs); font-weight:700; color:var(--brand); display:flex; align-items:center; gap:4px;} /* Thẻ tin tức */ .card-news{display:flex; flex-direction:column;} .card-news .thumb{height:130px; background:linear-gradient(135deg, var(--c-primary-600), var(--c-accent-600)); position:relative;} .card-news .thumb svg{position:absolute; inset:0; margin:auto; width:36px; height:36px; opacity:.55;} /* padding 16px giữa khối thông tin và box bao quanh; các phần bên trong (chip loại tin, ngày, tiêu đề, mô tả) cách nhau 12px. */ .card-news .body{padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3);} .card-news .date{font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-numeric); font-variant-numeric:tabular-nums;} .card-news h3,.card-news h4{font-size:var(--fs-base); line-height:1.4;} .card-news h3 a,.card-news h4 a{color:inherit; text-decoration:none;} .card-news h3 a:hover,.card-news h4 a:hover{color:var(--brand);} .card-news p{font-size:var(--fs-base); color:var(--text-secondary); margin:0;} /* Thẻ dịch vụ (lắp đặt, sửa chữa...) */ .card-service{padding:var(--sp-5); display:flex; gap:var(--sp-4);} /* Màu nền của số phải tự đạt 3:1 chứ không dựa vào -webkit-text-stroke: viền chữ là thuộc tính ngoài chuẩn, tắt là số biến mất. --c-primary-100 trước đây chỉ 1.30:1 trên nền trắng. */ .card-service .num{font-family:var(--font-numeric); font-variant-numeric:tabular-nums; font-size:var(--fs-lg); color:var(--c-primary-500); font-weight:700; -webkit-text-stroke:1px var(--brand); flex:none;} .card-service h2,.card-service h3,.card-service h4{font-size:var(--fs-base); margin-bottom:4px;} .card-service p{font-size:var(--fs-base); color:var(--text-secondary); margin:0;} /* ============ STATS — số liệu vận hành ============ */ .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--border-default); border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden;} .stat{background:var(--bg-surface); padding:var(--sp-5); text-align:center;} .stat .num{font-family:var(--font-numeric); font-variant-numeric:tabular-nums; font-size:var(--fs-2xl); font-weight:600; color:var(--brand-strong); } .stat .lbl{font-size:var(--fs-xs); color:var(--text-secondary); margin-top:4px; text-transform:uppercase; letter-spacing:.05em;} /* ============ TABLE — biểu giá / lịch sử hoá đơn ============ */ table.tariff{width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:var(--fs-base); background:var(--bg-surface);} table.tariff th{text-align:left; background:var(--bg-tint); color:var(--brand-strong); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; padding:var(--sp-3) var(--sp-4); font-weight:700;} table.tariff td{padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border-default);} table.tariff td.amount{font-family:var(--font-numeric); font-variant-numeric:tabular-nums; text-align:right; } table.tariff th.amount{text-align:right;} table.tariff tr:hover td{background:var(--bg-sunken);} /* ============ TABS ============ */ /* Cuộn ngang khi nhiều tab: 5 tab lọc chuyên mục làm tràn trang ở 375px. Các tab là