/* ========================================================================== ABC MULTISERVICES — Theme (tham chiếu template ABCM Home) Tím #7B5CFF · Xanh dương #3B82F6 · Xanh ngọc #2DD4BF · Navy #0A1130 / #0E1330 Heading: Space Grotesk · Body: Plus Jakarta Sans · Cach B (CSS variables) Load SAU bootstrap.min.css ========================================================================== */ :root { --bs-primary: #7B5CFF; --bs-primary-rgb: 123, 92, 255; --bs-secondary: #3B82F6; --bs-secondary-rgb: 59, 130, 246; --bs-info: #2DD4BF; --bs-info-rgb: 45, 212, 191; --bs-success: #14B8A6; --bs-success-rgb: 20, 184, 166; --bs-body-bg: #f6f7fb; --bs-body-color: #4a5273; --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --bs-emphasis-color: #0E1330; --bs-heading-color: #0E1330; --bs-link-color: #7B5CFF; --bs-link-color-rgb: 123, 92, 255; --bs-link-hover-color: #6a49f2; --bs-border-radius: .75rem; --bs-border-radius-sm: .5rem; --bs-border-radius-lg: 1rem; --bs-border-radius-xl: 1.5rem; --bs-border-color: #ECEEF6; --abcm-purple: #7B5CFF; --abcm-blue: #3B82F6; --abcm-teal: #2DD4BF; --abcm-ink: #0E1330; --abcm-muted: #5B6486; --abcm-navy: #0A1130; --abcm-sidebar-bg: #0E1330; --abcm-surface: #F7F8FC; --abcm-grad: linear-gradient(135deg, #7B5CFF 0%, #3B82F6 55%, #2DD4BF 100%); --abcm-grad-text: linear-gradient(120deg, #7B5CFF, #3B82F6 45%, #14B8A6); --abcm-shadow-sm: 0 1px 2px rgba(14,19,48,.04), 0 6px 18px rgba(14,19,48,.06); --abcm-shadow: 0 10px 30px rgba(14,19,48,.09); --abcm-shadow-lg: 0 18px 44px rgba(123,92,255,.16); /* Type scale — thang co chu chuan hoa thay cho ~25 co roi rac. BAC TINH (text): xs..lg. BAC CO GIAN theo viewport: xl..5xl — tren mobile ca thang tu co lai theo clamp, KHONG can mot bo @media rieng (dung xay he thong thu hai). Endpoint chon khop gia tri cu tai 1200px nen desktop gan nhu khong doi. Tran giu thu bac 5xl>4xl>3xl>h3>2xl>xl. */ --fs-xs: .75rem; /* 12px */ --fs-sm: .875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: clamp(1.1rem, 1.02rem + .4vw, 1.25rem); /* 17.6->20 lead/h5 — truoc la 1.25rem tinh; cho no co lai tren dien thoai de doan lead bot gay dong tren man 360px */ --fs-2xl: clamp(1.15rem, 0.95rem + 0.95vw, 1.5rem); /* 18.4->24 promo/label title, h4 */ --fs-h3: clamp(1.3rem, 1.12rem + 0.9vw, 1.75rem); /* 20.8->28 h3 — bac chen giua 2xl va 3xl, ton tai vi h3 Bootstrap (1.75rem) khong roi vao bac nao co san */ --fs-3xl: clamp(1.6rem, 1.25rem + 1.65vw, 2.1rem); /* 25.6->33.6 section title, h2 */ --fs-4xl: clamp(1.65rem, 1.2rem + 2.1vw, 2.4rem); /* 26.4->38.4 hero H1, display-6 */ --fs-5xl: clamp(1.9rem, 1.45rem + 2.3vw, 2.6rem); /* 30.4->41.6 display-5 — TRAN HA TU 3rem CO CHU Y: hero trang trong khong duoc to hon hero trang chu (2.4rem) qua xa */ /* Nhip doc + gian chu — token cho gia tri lap nhieu noi (thay literal roi rac). */ --lh-tight: 1.12; /* hero/display */ --lh-base: 1.5; /* body */ --ls-tight: -.02em; /* headings */ } /* text-size-adjust: KHOÁ CỠ CHỮ Ở ĐÚNG CỠ ĐÃ THIẾT KẾ. Safari và Chrome trên điện thoại có một tính năng thừa kế từ thời web chưa responsive: khi xoay ngang, chúng tự PHÓNG cỡ chữ của những khối văn bản dài để "dễ đọc hơn". Kết quả trên một trang vốn đã responsive là chữ mỗi khối một cỡ khác nhau sau khi xoay máy — thang cỡ chữ dựng bằng clamp() ở trên bị vô hiệu đúng lúc cần nó nhất. 100% nghĩa là "không tự ý đổi"; nó KHÔNG chặn người dùng tự phóng to bằng hai ngón tay. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--bs-body-font-family); background-color: var(--bs-body-bg); color: var(--bs-body-color); line-height: var(--lh-base); /* so huu tuong minh, thay vi mac dinh Bootstrap 1.5 */ -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: "Space Grotesk", var(--bs-body-font-family); letter-spacing: var(--ls-tight); color: var(--abcm-ink); } /* Co chu heading ve CUNG thang token. Truoc day size tha cho RFS calc() cua Bootstrap — he fluid THU HAI chay canh thang token, va vi display-5/6 cua no tran toi 3rem/2.5rem nen H1 cac trang trong to hon ca hero trang chu (2.4rem): thu bac bi lat nguoc. Tran cua tung bac khop gia tri Bootstrap tai 1200px (lech <= +-1.6px) nen desktop gan nhu khong doi; duoi 1200px duong cong clamp thay duong cong RFS, gia tri sat nhau. Rieng display-5/6 ha tran CO CHU Y — xem chu thich --fs-5xl. */ h1, .h1 { font-size: var(--fs-4xl); } h2, .h2 { font-size: var(--fs-3xl); } h3, .h3 { font-size: var(--fs-h3); } h4, .h4 { font-size: var(--fs-2xl); } h5, .h5 { font-size: var(--fs-xl); } h6, .h6 { font-size: var(--fs-base); } .display-5 { font-size: var(--fs-5xl); } .display-6 { font-size: var(--fs-4xl); } .lead { font-size: var(--fs-xl); } a { text-decoration: none; } /* Shadows / radius */ .shadow-sm { box-shadow: var(--abcm-shadow-sm) !important; } .shadow { box-shadow: var(--abcm-shadow) !important; } .shadow-lg { box-shadow: var(--abcm-shadow-lg) !important; } .card { border-radius: var(--bs-border-radius-lg); } .rounded-4 { border-radius: var(--bs-border-radius-xl) !important; } /* Buttons */ .btn { font-weight: 600; } .btn-lg { border-radius: .85rem; } .btn-primary { --bs-btn-bg: #7B5CFF; --bs-btn-border-color: #7B5CFF; --bs-btn-hover-bg: #6a49f2; --bs-btn-hover-border-color: #6a49f2; --bs-btn-active-bg: #5b3ce6; --bs-btn-active-border-color: #5b3ce6; --bs-btn-disabled-bg: #7B5CFF; --bs-btn-disabled-border-color: #7B5CFF; box-shadow: 0 10px 26px rgba(123,92,255,.32); } .btn-outline-primary { --bs-btn-color: #7B5CFF; --bs-btn-border-color: #ddd4ff; --bs-btn-hover-bg: #7B5CFF; --bs-btn-hover-border-color: #7B5CFF; --bs-btn-active-bg: #6a49f2; } /* Nút CTA nền tối (Tư vấn miễn phí) — theo template */ .btn-ink { --bs-btn-color: #fff; --bs-btn-bg: #0E1330; --bs-btn-border-color: #0E1330; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7B5CFF; --bs-btn-hover-border-color: #7B5CFF; --bs-btn-active-bg: #6a49f2; --bs-btn-active-border-color: #6a49f2; } .rounded-pill.btn, .btn.rounded-pill { border-radius: 50rem !important; } .text-primary { color: #7B5CFF !important; } .bg-primary { background-color: #7B5CFF !important; } .text-accent { color: var(--abcm-teal) !important; } .bg-accent { background-color: var(--abcm-teal) !important; } .text-info { color: #14B8A6 !important; } .link-primary { color: #7B5CFF !important; } .badge.text-bg-primary { background-color: #7B5CFF !important; } .badge.text-bg-info { background-color: #2DD4BF !important; color: #06342e !important; } /* Gradient helpers */ .abcm-gradient-bg { background: var(--abcm-grad); } .gradient-text { background: var(--abcm-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .abcm-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: var(--fs-xs); /* --abcm-purple-text (5.42:1) chứ không phải #7B5CFF (4.34:1 — rớt WCAG AA cho chữ nhỏ). Biến này được tạo ra CHO ĐÚNG chỗ này (xem :root thứ hai cuối file) mà chưa từng được áp. */ letter-spacing: .12em; text-transform: uppercase; color: var(--abcm-purple-text); } /* ========================================================================== PUBLIC navbar (glass) + hero + footer ========================================================================== */ .abcm-navbar { background-color: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid #ECEEF6; } .abcm-navbar .nav-link { color: #3B4166; font-weight: 500; padding-inline: 1.05rem; border-radius: 50rem; transition: color .15s ease, background-color .15s ease; } .abcm-navbar .nav-link:hover { color: #7B5CFF; } .abcm-navbar .nav-link.active { color: #7B5CFF; background-color: rgba(123,92,255,.09); } .abcm-brand { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.02em; color: var(--abcm-ink); line-height: 1; } .abcm-brand .brand-accent { color: #7B5CFF; } .abcm-brand small { font-weight: 500; letter-spacing: .14em; } .abcm-logo { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #ECEEF6; padding: 5px; box-shadow: 0 6px 16px rgba(14,19,48,.08); } .abcm-logo img { width: 100%; height: 100%; object-fit: contain; } /* HERO — nền trắng + đốm gradient nhẹ (tím trên, ngọc dưới-phải) */ .abcm-hero { position: relative; overflow: hidden; color: var(--bs-body-color); background: radial-gradient(closest-side, rgba(123,92,255,.16), rgba(59,130,246,.06) 55%, transparent) top center / 900px 560px no-repeat, radial-gradient(closest-side, rgba(45,212,191,.14), transparent 70%) bottom -140px right -120px / 560px 560px no-repeat, #ffffff; } .abcm-hero > * { position: relative; z-index: 1; } .abcm-hero .lead { color: #5B6486; } /* Pill badge */ .abcm-pill-badge { display: inline-flex; align-items: center; gap: .5rem; background: #F4F2FF; color: #5B4F9E; border: 1px solid #E6E1FA; border-radius: 50rem; font-weight: 500; font-size: var(--fs-sm); padding: .4rem .95rem; } .abcm-pill-badge .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--abcm-teal); box-shadow: 0 0 10px rgba(45,212,191,.6); } /* Icon tile + biến thể màu */ .abcm-icon-tile { width: 3.25rem; height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .9rem; font-size: 1.5rem; color: #fff; background: var(--abcm-grad); box-shadow: 0 10px 22px rgba(123,92,255,.26); } .abcm-icon-tile.tile-soft { background: rgba(123,92,255,.1); color: #7B5CFF; box-shadow: none; } .abcm-icon-tile.tile-purple { background: linear-gradient(135deg,#7B5CFF,#5B7BFF); box-shadow: 0 10px 22px rgba(123,92,255,.28); } .abcm-icon-tile.tile-teal { background: linear-gradient(135deg,#3B82F6,#2DD4BF); box-shadow: 0 10px 22px rgba(45,212,191,.26); } .abcm-icon-tile.tile-blue { background: linear-gradient(135deg,#2DD4BF,#3B82F6); box-shadow: 0 10px 22px rgba(59,130,246,.26); } /* Section rhythm + hover — nhịp dọc gọn, co giãn theo màn hình (tránh khoảng trống lớn) */ .section-py { padding-top: clamp(2.5rem, 4.5vw, 3.75rem); padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem); } .bg-surface { background-color: var(--abcm-surface) !important; } .abcm-hover-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; will-change: transform; } .abcm-hover-card:hover { transform: translateY(-6px); box-shadow: var(--abcm-shadow-lg) !important; } /* ===== Section header dùng chung (Dịch vụ / Sản phẩm) ===== */ .abcm-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.1rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--bs-border-color); } .abcm-sec-title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--ls-tight); color: var(--abcm-ink); margin: 0 0 .25rem; } .abcm-sec-sub { color: var(--abcm-muted); margin: 0; font-size: var(--fs-base); } /* ===== Card shell dùng chung — đồng bộ với ô bento của hero ===== */ .abcm-card { background: #fff; border: 1px solid var(--bs-border-color); border-radius: 1.25rem; box-shadow: var(--abcm-shadow-sm); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .abcm-card:hover { transform: translateY(-4px); box-shadow: var(--abcm-shadow); border-color: #dfe3f0; } /* ===== Service card (homepage) — ảnh + badge, cùng họ với 3 trụ hero ===== */ .abcm-svc-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .abcm-svc-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--abcm-grad); } .abcm-svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; } .abcm-svc-card:hover .abcm-svc-media img { transform: scale(1.07); } /* Lớp tối nhẹ đáy ảnh cho badge dễ đọc */ .abcm-svc-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,14,40,0) 55%, rgba(10,14,40,.34) 100%); } /* Badge kính mờ khi có ảnh */ .abcm-svc-badge { position: absolute; left: .85rem; bottom: .85rem; z-index: 2; width: 44px; height: 44px; border-radius: .85rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: 0 6px 16px rgba(10,14,40,.25); } /* Icon lớn khi KHÔNG có ảnh (nền gradient) */ .abcm-svc-hero { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; color: rgba(255,255,255,.92); text-shadow: 0 6px 18px rgba(10,14,40,.3); transition: transform .45s ease; } .abcm-svc-card:hover .abcm-svc-hero { transform: scale(1.06); } .abcm-svc-body { padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; } .abcm-svc-title { font-size: var(--fs-base); font-weight: 600; color: var(--abcm-ink); margin-bottom: .3rem; line-height: 1.3; } .abcm-svc-desc { color: var(--abcm-muted); font-size: var(--fs-sm); margin-bottom: 1rem; flex: 1; } .abcm-svc-foot { display: flex; align-items: center; gap: .5rem; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: var(--fs-sm); } .abcm-svc-arrow { margin-left: auto; transition: transform .18s ease; } .abcm-svc-card:hover .abcm-svc-arrow { transform: translateX(4px); } /* Tint luân phiên — cùng bảng màu với 3 trụ hero */ .abcm-svc-card.tint-1 .abcm-svc-body { background: linear-gradient(180deg, rgba(123,92,255,.04), transparent 60%); } .abcm-svc-card.tint-2 .abcm-svc-body { background: linear-gradient(180deg, rgba(59,130,246,.04), transparent 60%); } .abcm-svc-card.tint-3 .abcm-svc-body { background: linear-gradient(180deg, rgba(45,212,191,.05), transparent 60%); } /* Bậc TỐI của mỗi họ màu, không phải màu brand nguyên bản: đây là chữ 14px trên nền trắng. #2DD4BF (teal brand) trên trắng chỉ đạt ~1.8:1 — gần như tàng hình; #0d9488 đạt 4.7:1. Cùng bộ màu chữ mà admin tiles (adm-thumb) đã dùng, nên không sinh sắc độ mới. */ .abcm-svc-card.tint-1 .abcm-svc-foot { color: var(--abcm-purple-text); } .abcm-svc-card.tint-2 .abcm-svc-foot { color: #2563eb; } .abcm-svc-card.tint-3 .abcm-svc-foot { color: #0d9488; } /* ===== Hero Bento Grid (homepage) — ẢNH LÀM CHỦ ===== Đảo tỷ lệ so với bản đầu (chữ 4/6 – ảnh 2/6): slider banner nhận 7/12, khối chữ 5/12. Yêu cầu kinh doanh: trang chủ show hình ảnh nhiều hơn chữ, và slider là ảnh thật do admin quản lý. Chiều cao hàng do .b-banner quyết định (min-height bên dưới); .b-hero co giãn theo. */ .abcm-bento-wrap { position: relative; z-index: 1; } .abcm-bento { display: grid; gap: clamp(.85rem, 1.6vw, 1.15rem); grid-template-columns: repeat(12, 1fr); grid-template-areas: "banner banner banner banner banner banner banner hero hero hero hero hero"; padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(1.5rem, 4vw, 3rem); } .abcm-bento .b-cell { border-radius: 1.25rem; position: relative; overflow: hidden; } /* Ô chữ — vai phụ: padding và cỡ chữ đều rút xuống một nấc so với thời nó là ô lớn. */ .b-hero { grid-area: hero; background: #fff; border: 1px solid var(--bs-border-color); box-shadow: var(--abcm-shadow-lg); padding: clamp(1.35rem, 2.4vw, 2.25rem); display: flex; flex-direction: column; justify-content: center; } .b-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 260px at 108% -10%, rgba(59,130,246,.10), transparent 60%), radial-gradient(420px 240px at -8% 118%, rgba(45,212,191,.10), transparent 60%); } .b-hero > * { position: relative; } /* Cỡ h1 rút từ 3.15rem xuống 2.4rem: chữ không còn là nhân vật chính của hero, và trong ô 5/12 một dòng 3.15rem gãy thành 3–4 dòng chiếm nửa chiều cao ô. 2.4rem vẫn thắng abcm-sec-title (2.1rem) nên thứ bậc thị giác của trang không đổi. */ .b-h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--abcm-ink); margin-bottom: clamp(.75rem, 1.5vw, 1rem); max-width: 18ch; } .b-sub { /* var(--fs-base) thay clamp(.95rem,1.2vw,1.05rem) cu: lech toi da 0.8px o hai dau, doi lai bot mot co chu le ngoai thang. */ color: var(--abcm-muted); font-size: var(--fs-base); max-width: 40ch; margin-bottom: clamp(1.15rem, 2vw, 1.6rem); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .b-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: clamp(1.15rem, 2vw, 1.6rem); } .b-trust { display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; padding-top: clamp(.9rem, 1.6vw, 1.15rem); border-top: 1px dashed var(--bs-border-color); color: var(--abcm-muted); font-size: var(--fs-sm); font-weight: 500; } .b-trust span { display: inline-flex; align-items: center; gap: .42rem; } .b-trust i { color: var(--abcm-teal); } /* Ô banner (ô LỚN) — min-height của nó là thứ quyết định chiều cao cả hàng bento: 40vw kẹp 340–520px cho ảnh đủ lớn để "kể chuyện" mà không nuốt cả màn hình laptop 768p. */ /* display:flex để .b-promo (nhánh dự phòng, phần tử in-flow) giãn đầy ô: height:100% của nó không hoạt động trên parent chỉ có min-height. Slider thì position:absolute nên flex không đụng. */ .b-banner { grid-area: banner; box-shadow: var(--abcm-shadow-lg); min-height: clamp(340px, 40vw, 520px); background: var(--abcm-navy); display: flex; } .b-banner .abcm-slider { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; } .b-banner .b-promo { flex: 1 1 auto; } .b-promo { position: relative; height: 100%; min-height: 260px; padding: clamp(1.35rem, 2.4vw, 1.8rem); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; background: var(--abcm-grad); } .b-promo::after { content: ""; position: absolute; right: -30%; top: -40%; width: 80%; height: 120%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 62%); } .b-promo > * { position: relative; } .b-promo-tag { align-self: flex-start; font-family: "Space Grotesk", sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); padding: .34rem .7rem; border-radius: 999px; } .b-promo-title { font-size: var(--fs-2xl); line-height: 1.15; margin-bottom: .4rem; color: #fff; } .b-promo-sub { font-size: var(--fs-sm); color: rgba(255,255,255,.86); max-width: 26ch; } .b-promo-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: var(--fs-sm); color: var(--abcm-navy); background: #fff; padding: .6rem 1.05rem; border-radius: .72rem; text-decoration: none; transition: transform .18s ease; } .b-promo-cta:hover { transform: translateX(3px); color: var(--abcm-navy); } /* ===== HÀNG MỚI VỀ — ruột của ô .b-hero (ô SÁNG bên phải) ===== Ô .b-hero giữ nguyên grid-area, nền trắng và viền, nên lưới bento không xê dịch; chỉ nội dung đổi. Tông SÁNG: chữ đậm trên nền trắng, ô con nền xám nhạt, giá màu tím thương hiệu — cùng ngôn ngữ với thẻ sản phẩm ở phần dưới trang. .b-hero có justify-content:center, nên panel cần height:100% để giãn đầy ô. */ .b-new { flex: 1 1 auto; height: 100%; display: flex; flex-direction: column; gap: clamp(.7rem, 1.5vw, 1rem); } .b-new-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .b-new-tag { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--abcm-purple-text, #6a49f2); background: rgba(123,92,255,.10); border: 1px solid rgba(123,92,255,.20); border-radius: 50px; padding: 5px 12px; } .b-new-all { font-size: var(--fs-sm); font-weight: 600; color: var(--abcm-muted); text-decoration: none; white-space: nowrap; } .b-new-all:hover { color: var(--abcm-ink); } .b-new-all i { transition: transform .15s ease; display: inline-block; } .b-new-all:hover i { transform: translateX(3px); } /* 2×2. minmax(0,1fr) trên CẢ hai trục: thiếu nó, tên sản phẩm dài sẽ nong cột ra và phá tỷ lệ ô — lỗi kinh điển của grid khi con là flex/text. */ .b-new-grid { flex: 1 1 auto; display: grid; gap: clamp(.5rem, 1.1vw, .7rem); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 0; } .b-new-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: .5rem; text-decoration: none; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .b-new-item:hover { border-color: rgba(123,92,255,.45); box-shadow: var(--abcm-shadow-sm); transform: translateY(-2px); } /* Ảnh chiếm phần lớn ô và tự co: flex:1 + min-height:0 để nó nhường chỗ cho tên/giá trước khi tràn, thay vì đẩy chúng ra ngoài ô. */ .b-new-media { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--abcm-surface); border-radius: .5rem; overflow: hidden; margin-bottom: .4rem; } .b-new-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .b-new-media i { font-size: 1.7rem; color: var(--abcm-purple); opacity: .5; } /* Kẹp 1 dòng: tên dài không được phép làm cao ô và lệch lưới 2×2. Cỡ chữ 13/14px chứ không phải 12px (--fs-xs) như bản đầu: 12px là cỡ dành cho NHÃN (badge "Hàng mới về", "Giảm giá"), còn đây là tên sản phẩm và GIÁ — nội dung thật, và giá là con số quyết định người ta có bấm vào hay không. Trên điện thoại ô này rộng chừng 160px nên chữ nhỏ ở đây không tiết kiệm được gì đáng kể. */ .b-new-name { font-size: .8125rem; font-weight: 600; color: var(--abcm-ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b-new-price { font-size: var(--fs-sm); font-weight: 700; color: var(--abcm-purple-text, #6a49f2); } .b-new-skel { background: var(--abcm-surface); border: 1px solid var(--bs-border-color); animation: shPulseB 1.6s ease-in-out infinite; } @keyframes shPulseB { 0%,100% { opacity: 1 } 50% { opacity: .5 } } @media (prefers-reduced-motion: reduce) { .b-new-skel { animation: none } } /* Responsive bento — ẢNH TRƯỚC, chữ sau (khớp thứ tự DOM trong Home.razor): trên điện thoại thứ khách thấy đầu tiên là banner, không phải một khối chữ. */ @media (max-width: 920px) { .abcm-bento { grid-template-columns: 1fr; grid-template-areas: "banner" "hero"; } .b-banner { min-height: clamp(300px, 64vw, 420px); } /* ===== Ô "HÀNG MỚI VỀ" PHẢI TỰ ĐỊNH ĐƯỢC CHIỀU CAO TỪ ĐÂY TRỞ XUỐNG ===== Vỡ giao diện trên iPhone (Safari), ảnh chụp từ iPhone 16 Pro Max: bốn ô con giãn cao bằng KÍCH THƯỚC GỐC của ảnh — SVG 800×600 — nên mỗi ô cao ~600px, xếp một cột, đẩy cả trang dài ra. Trên Chromium cùng bề ngang thì vẫn đúng, nên nó lọt qua mọi lần kiểm trước. Nguyên nhân là CHIỀU CAO KHÔNG XÁC ĐỊNH, không phải lỗi của Safari: trên 920px hai ô bento nằm cùng MỘT hàng và chiều cao hàng do .b-banner quyết định, nên .b-hero có chiều cao xác định và chuỗi .b-new{height:100%} → .b-new-grid{1fr} → .b-new-media{flex:1 1 auto} phân giải được. Dưới 920px lưới xếp thành hai hàng, .b-hero cao theo NỘI DUNG, và cả chuỗi phần trăm/1fr ở trên mất điểm tựa. Lúc đó mỗi engine tự đoán một kiểu — đúng chỗ không được phép đoán. Cách sửa là bỏ hẳn việc đoán: khoá TỈ LỆ ảnh (4/3, đúng bằng tỉ lệ ảnh bìa 800×600) và cho hàng cao theo nội dung. Không còn phần trăm nào phải phân giải, nên mọi trình duyệt ra cùng một kết quả. Bố cục trên 920px không đụng tới — nó vốn đang đúng. */ .b-new-media { aspect-ratio: 4 / 3; flex: 0 0 auto; } .b-new-grid { grid-template-rows: auto auto; } } /* ===== Sản phẩm trên TRANG CHỦ (.home-prod) — ảnh lớn hơn, chữ gọn hơn ===== ProductCard.razor dùng chung với /shop và "sản phẩm liên quan" nên KHÔNG sửa component; mọi khác biệt của trang chủ scope dưới .home-prod. !important là bắt buộc: chiều cao ảnh nằm ở inline style (height:190px) ngay trong ProductCard. */ .home-prod .card-img-top { height: clamp(185px, 21vw, 250px) !important; transition: transform .45s ease; } /* Placeholder không-ảnh (div.d-flex nền gradient) phải cao bằng ảnh thật, nếu không hai card cạnh nhau lệch chân. */ .home-prod .abcm-card .position-relative > .d-flex { height: clamp(185px, 21vw, 250px) !important; } /* Zoom nhẹ khi hover — cùng ngôn ngữ chuyển động với .abcm-svc-media img (scale + .45s). */ .home-prod .abcm-card a > .position-relative { overflow: hidden; } .home-prod .abcm-card:hover .card-img-top { transform: scale(1.05); } /* Tên sản phẩm kẹp 2 dòng + giữ chỗ đủ 2 dòng: tên 1 dòng và 3 dòng làm nút "Thêm" so le. */ .home-prod .abcm-card h3.h6 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.5em * 2); } @media (prefers-reduced-motion: reduce) { .home-prod .card-img-top { transition: none; } .home-prod .abcm-card:hover .card-img-top { transform: none; } } @media (max-width: 560px) { .b-cta .btn { flex: 1 1 auto; justify-content: center; } } /* ===== Service detail page ===== */ .abcm-svd-hero { position: relative; background-size: cover; background-position: center; overflow: hidden; } .abcm-svd-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,14,38,.5) 0%, rgba(11,14,38,.9) 100%); } .abcm-svd-hero.no-img { background: var(--abcm-grad); } .abcm-svd-hero.no-img::before { background: linear-gradient(180deg, rgba(11,14,38,.12), rgba(11,14,38,.42)); } .abcm-svd-hero > .container { position: relative; z-index: 1; font-size: 1rem; /* reset — tránh kế thừa cỡ chữ lớn */ padding-top: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: clamp(2rem, 4.5vw, 3rem); min-height: clamp(260px, 30vw, 360px); display: flex; flex-direction: column; justify-content: flex-end; } .abcm-svc-crumb { font-size: var(--fs-sm); } .abcm-svc-crumb a { color: rgba(255,255,255,.72); text-decoration: none; } .abcm-svc-crumb a:hover { color: #fff; } .abcm-svc-crumb .breadcrumb-item.active { color: rgba(255,255,255,.85); } .abcm-svc-crumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); } .abcm-svc-badge-cat { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6fe9d6; background: rgba(45,212,191,.16); border: 1px solid rgba(45,212,191,.3); padding: .3rem .8rem; border-radius: 50rem; } .abcm-svd-hero-sub { color: rgba(255,255,255,.82); font-size: var(--fs-base); max-width: 54ch; } .abcm-svd-hero-ghost { color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .abcm-svd-hero-ghost:hover { color: #fff; background: rgba(255,255,255,.24); border-color: #fff; } @media (min-width: 992px) { .abcm-svc-aside { position: sticky; top: 1.5rem; } } .abcm-svc-price-head { background: var(--abcm-grad); } .abcm-svc-price-table thead th { border: 0; border-bottom: 2px solid var(--bs-border-color); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: #7a82a6; } .abcm-svc-price-table td { border-color: #eef0f7; } .abcm-svc-proj { background: var(--abcm-surface); border: 1px solid var(--bs-border-color); transition: border-color .15s ease, box-shadow .15s ease; } .abcm-svc-proj:hover { border-color: #c9bcff; box-shadow: 0 8px 22px rgba(31,41,102,.1); } .abcm-svc-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(22,163,74,.14); color: #16a34a; font-size: var(--fs-xs); } /* Features grid */ .abcm-feat-ico { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #7B5CFF; background: linear-gradient(135deg, rgba(123,92,255,.14), rgba(45,212,191,.14)); } /* Process steps */ .abcm-steps { display: flex; flex-direction: column; gap: 1rem; } .abcm-step { display: flex; gap: 1rem; align-items: flex-start; } .abcm-step-num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-base); color: #fff; background: var(--abcm-grad); box-shadow: 0 6px 16px rgba(123,92,255,.3); } /* FAQ accordion */ .abcm-faq .accordion-button { padding: 1rem .25rem; background: transparent; box-shadow: none; color: var(--abcm-ink); } .abcm-faq .accordion-button:not(.collapsed) { color: #7B5CFF; background: transparent; } .abcm-faq .accordion-button:focus { box-shadow: none; } .abcm-faq .accordion-body { padding: 0 .25rem 1rem; } .abcm-faq .accordion-item { border: 0; border-bottom: 1px solid var(--bs-border-color); } .abcm-glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); border-radius: 1rem; } /* CTA band (nền sáng, tint dịu — đồng bộ trang) */ .abcm-cta { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid var(--bs-border-color); box-shadow: var(--abcm-shadow-sm); background: linear-gradient(120deg, rgba(123,92,255,.10) 0%, rgba(59,130,246,.07) 50%, rgba(45,212,191,.12) 100%), #fff; } .abcm-cta > * { position: relative; z-index: 1; } .abcm-cta h1, .abcm-cta h2, .abcm-cta .display-5, .abcm-cta .display-6 { color: var(--abcm-ink); } .abcm-cta .lead { color: var(--abcm-muted); } /* Dòng phụ dưới tiêu đề CTA — dùng ở Pages/ServiceList.razor:114. ĐÃ TỪNG BỊ XOÁ NHẦM: luật này nằm lọt giữa khối CSS của dải License (cũ: dòng 638, kẹp giữa .abcm-lic-price và .btn-accent) dù chẳng liên quan gì tới License. Lúc dọn khối License đi, nó bị cắt theo vì ở CÙNG VÙNG DÒNG, không phải cùng chức năng. Nay đặt cạnh .abcm-cta-* — đúng chỗ theo chức năng — nên lần dọn sau không vấp lại. */ .abcm-cta-lead { color: var(--abcm-muted); font-size: var(--fs-base); } /* Nút phụ trên nền sáng (Hotline / Zalo) */ .abcm-cta-ghost { --bs-btn-color: #3a4568; --bs-btn-border-color: #d3d8e6; --bs-btn-bg: #fff; --bs-btn-hover-color: #7B5CFF; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #7B5CFF; --bs-btn-active-color: #7B5CFF; --bs-btn-active-bg: #f6f4ff; --bs-btn-active-border-color: #7B5CFF; } /* Inputs */ .form-control, .form-select { border-radius: .7rem; border-color: #E3E5F0; padding: .6rem .85rem; } .form-control:focus, .form-select:focus { border-color: #c3b4ff; box-shadow: 0 0 0 .2rem rgba(123,92,255,.15); } .form-check-input:checked { background-color: #7B5CFF; border-color: #7B5CFF; } /* Footer */ .abcm-footer { background: #0A1130; color: #C2C9EC; } .abcm-footer a { color: #C2C9EC; transition: color .15s ease; } .abcm-footer a:hover { color: #fff; } .abcm-footer h6 { color: #fff; letter-spacing: .04em; } .abcm-footer hr { border-top-color: rgba(255,255,255,.12); opacity: 1; } .abcm-footer .footer-contact i { color: var(--abcm-teal); } .abcm-footer .footer-social { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.8); transition: all .15s ease; } .abcm-footer .footer-social:hover { background: var(--abcm-grad); border-color: transparent; color: #fff; } .abcm-footer .footer-news { display: flex; gap: 8px; max-width: 320px; } .abcm-footer .footer-news input { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: 10px; padding: 10px 13px; font: inherit; font-size: var(--fs-sm); outline: none; } .abcm-footer .footer-news input::placeholder { color: rgba(255,255,255,.45); } .abcm-footer .footer-news input:focus { border-color: rgba(123,92,255,.7); background: rgba(255,255,255,.10); box-shadow: 0 0 0 3px rgba(123,92,255,.25); } .abcm-footer .footer-news button:focus-visible { outline: 2px solid rgba(123,92,255,.7); outline-offset: 2px; } .abcm-footer .footer-news button { flex-shrink: 0; width: 44px; border: 0; border-radius: 10px; background: var(--abcm-grad); color: #fff; cursor: pointer; display: grid; place-items: center; transition: .15s; } .abcm-footer .footer-news button:hover:not(:disabled) { filter: brightness(1.08); } .abcm-footer .footer-news button:disabled { opacity: .6; cursor: default; } /* ========================================================================== AUTH (login / register) — split-screen hiện đại ========================================================================== */ /* NỀN PHẢI XÁM NHẠT, KHÔNG PHẢI TRẮNG. Form trắng đặt trên nền trắng thì không có hình dạng — nó trôi giữa một khoảng trống rộng chừng 800px, và đó chính là cảm giác "nghèo nàn". Nền xám nhạt cho tấm thẻ trắng một mép để tựa vào, nên nó đọc ra là MỘT VẬT THỂ chứ không phải chữ rơi trên nền. */ .auth-wrap { min-height: 100vh; background: var(--abcm-surface); } .auth-brand { position: relative; overflow: hidden; width: 46%; color: #fff; /* Hoạ tiết do tools/build/make-covers.mjs sinh — mấy tấm thẻ kính nhại đúng bảng điều khiển sắp đăng nhập vào. Gradient vẫn giữ bên dưới làm lớp dự phòng: nếu tệp SVG không tải được thì cột này vẫn ra màu thương hiệu chứ không phải một ô đen. */ background-image: url("../images/auth/auth-bg.svg"); background-size: cover; background-position: center; background-color: #5A49E0; } /* MÀN CHE CHO CHỮ. Hoạ tiết đã dạt sang phải, nhưng background-size:cover cắt theo tỉ lệ khung — mà khung này đổi tỉ lệ liên tục theo bề ngang cửa sổ, nên không có toạ độ nào trong tệp SVG bảo đảm được là hoạ tiết sẽ không bò vào dưới chân chữ. Đúng lần đầu ở 1440px đã có một tấm thẻ kính cắt ngang đoạn giới thiệu. Lớp phủ tối dần từ trái này thì không phụ thuộc tỉ lệ: chữ nằm bên trái, và bên trái luôn được làm tối. Cùng bài học với ảnh banner — hình phải nhường chữ, không phải ngược lại. pointer-events:none để nó không nuốt cú bấm vào logo. */ .auth-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(100deg, rgba(16,21,58,.62) 0%, rgba(16,21,58,.34) 42%, rgba(16,21,58,0) 76%); } .auth-brand > * { position: relative; z-index: 1; } .auth-brand h2 { color: #fff; letter-spacing: -.02em; line-height: 1.1; } /* Ba dòng năng lực: từ dấu tích trần thành ô icon có nền. Dấu tích trần cùng cỡ, cùng màu, cùng khoảng cách với chữ nên cả ba dòng trôi thành một khối xám; ô icon cho mỗi dòng một điểm neo và tách chúng ra. */ .auth-feature { display: flex; align-items: center; gap: .85rem; color: rgba(255,255,255,.92); font-size: var(--fs-sm); font-weight: 500; } .auth-feature i { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; color: #6fe9d6; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); } /* Nhãn nhỏ trên tiêu đề — cho khối chữ một bậc mở đầu thay vì vào thẳng dòng lớn nhất */ .auth-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: 5px 13px; } /* Form nằm trên MỘT TẤM THẺ trắng, không phải trôi trên nền. Đệm 2.75rem và bo 20px cho nó cùng ngôn ngữ với thẻ ở khu quản trị phía sau — người dùng gặp đúng hình dạng đó ngay sau khi đăng nhập xong. */ .auth-card { max-width: 424px; width: 100%; background: #fff; border: 1px solid var(--bs-border-color); border-radius: 20px; padding: clamp(1.6rem, 3vw, 2.75rem); box-shadow: var(--abcm-shadow-lg); } .auth-card h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; } /* Ô nhập cao 52px: đủ lớn cho ngón tay (trên ngưỡng 44px) mà không thành cái hộp rỗng. height cố định đã bị bỏ — nó là tàn dư của .form-floating, thứ cần chỗ trống phía trên cho nhãn trượt lên. Nay nhãn nằm ngoài ô nên ô chỉ cần đủ cao cho chính dòng chữ. */ .auth-card .form-control { padding: .8rem .95rem; min-height: 52px; } .auth-card .form-label { color: var(--abcm-ink); font-size: var(--fs-sm); margin-bottom: .35rem; } /* Ô mật khẩu + nút con mắt. Nút nằm ĐÈ lên ô chứ không phải input-group: input-group cắt bo góc phải của ô nhập thành góc vuông và biến nút thành một khối riêng nặng nề, trong khi đây chỉ là một thao tác phụ. Đệm phải của ô chừa sẵn chỗ để chữ không chui xuống dưới nút. */ .auth-pw { position: relative; } .auth-pw .form-control { padding-right: 3rem; } .auth-pw-btn { position: absolute; top: 0; right: 0; height: 100%; width: 3rem; display: grid; place-items: center; background: none; border: 0; color: var(--abcm-muted); font-size: 1.05rem; border-radius: 0 .7rem .7rem 0; cursor: pointer; transition: color .15s ease; } .auth-pw-btn:hover:not(:disabled) { color: var(--abcm-purple); } .auth-pw-btn:disabled { opacity: .45; cursor: default; } .auth-pw-btn:focus-visible { outline: 2px solid rgba(123,92,255,.6); outline-offset: -2px; } /* ĐIỆN THOẠI: form bám lên trên, không căn giữa dọc. Căn giữa trong 100vh đẩy logo xuống tận ~350px trên một màn hình 932px — một phần ba màn hình trống phía trên rồi mới tới thứ cần nhìn. Tệ hơn: lúc bàn phím bật lên, viewport co lại và cả khối tự căn giữa lần nữa, làm form NHẢY ngay dưới ngón tay đang gõ. Bám mép trên thì vị trí ô nhập cố định, bàn phím bật hay tắt cũng vậy. */ @media (max-width: 575.98px) { .auth-wrap > .flex-grow-1 { align-items: flex-start !important; padding-top: 2.5rem !important; } } /* ========================================================================== ADMIN dark sidebar (navy) ========================================================================== */ .app-sidebar { background: linear-gradient(180deg, #12163a 0%, #0b0e26 100%); color: rgba(255,255,255,.7); border-right: 1px solid rgba(255,255,255,.06); overflow-y: auto; /* cuộn nội bộ khi menu dài hơn màn hình (tránh cụt mục dưới + profile) */ overscroll-behavior: contain; } /* Desktop: sidebar dính, cố định bề rộng, cuộn riêng. Dưới lg để Bootstrap offcanvas-lg điều khiển. */ @media (min-width: 992px) { .app-sidebar { width: 256px; position: sticky; top: 0; height: 100vh; } } /* Thanh cuộn mảnh, hợp tông sidebar tối */ .app-sidebar::-webkit-scrollbar { width: 6px; } .app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; } .app-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); } .app-sidebar::-webkit-scrollbar-track { background: transparent; } .app-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; } .app-sidebar .nav-link { color: rgba(255,255,255,.62); border-radius: .7rem; padding: .6rem .8rem; font-weight: 500; transition: color .15s ease, background-color .15s ease; } .app-sidebar .nav-link i { font-size: 1.05rem; width: 1.35rem; text-align: center; opacity: .9; } .app-sidebar .nav-link:hover { color: #fff; background-color: rgba(255,255,255,.06); } .app-sidebar .nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(123,92,255,.38), rgba(59,130,246,.10)); box-shadow: inset 3px 0 0 var(--abcm-teal); } .app-sidebar .nav-link.active i { color: #6fe9d6; opacity: 1; } .app-sidebar .section-label { font-size: var(--fs-xs); letter-spacing: .13em; color: rgba(255,255,255,.34); font-weight: 600; } .app-sidebar-profile { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: .9rem; } /* Avatar (topbar + sidebar) */ .admin-avatar { border-radius: 50%; background: var(--abcm-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } /* Topbar */ .admin-topbar { background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid #ECEEF6; } .admin-iconbtn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #ECEEF6; background: #fff; color: #3B4166; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; } .admin-iconbtn:hover { color: #7B5CFF; border-color: #d9d2ff; background: #faf9ff; } /* Admin data table (modern) */ .adm-thumb { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; } .adm-thumb.t-purple { background: rgba(123,92,255,.12); color: #7B5CFF; } .adm-thumb.t-blue { background: rgba(59,130,246,.12); color: #3B82F6; } .adm-thumb.t-teal { background: rgba(20,184,166,.14); color: #0d9488; } .adm-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-xs); padding: 4px 10px; border-radius: 50px; } .adm-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .adm-pill.new { background: rgba(20,184,166,.14); color: #0d9488; } .adm-pill.used { background: rgba(59,130,246,.12); color: #3B82F6; } .adm-pill.live { background: rgba(22,163,74,.12); color: #16a34a; } .adm-pill.hidden { background: var(--abcm-surface); color: #9aa0bd; border: 1px solid var(--bs-border-color); } .adm-pill.amber { background: rgba(245,158,11,.16); color: #b45309; } .adm-pill.red { background: rgba(229,72,77,.12); color: #e5484d; } .adm-pill.info { background: rgba(59,130,246,.12); color: #3B82F6; } .adm-pill.gray { background: var(--abcm-surface); color: #6b7090; border: 1px solid var(--bs-border-color); } .adm-act { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--bs-border-color); background: #fff; display: inline-grid; place-items: center; transition: .15s; cursor: pointer; } .adm-act.edit { color: #7B5CFF; } .adm-act.edit:hover { background: rgba(123,92,255,.1); border-color: transparent; } .adm-act.del { color: #e5484d; } .adm-act.del:hover { background: rgba(229,72,77,.12); border-color: transparent; } .adm-act.view { color: #3B82F6; } .adm-act.view:hover { background: rgba(59,130,246,.1); border-color: transparent; } .adm-act.ok { color: #16a34a; } .adm-act.ok:hover { background: rgba(22,163,74,.12); border-color: transparent; } .adm-act.ai { color: #0d9488; } .adm-act.ai:hover { background: rgba(20,184,166,.14); border-color: transparent; } .adm-chip { border: 1px solid var(--bs-border-color); background: #fff; color: var(--bs-body-color); font-weight: 600; font-size: var(--fs-xs); padding: 6px 14px; border-radius: 50px; cursor: pointer; transition: .15s; } .adm-chip:hover { border-color: #c7b8ff; } .adm-chip.on { background: #7B5CFF; border-color: #7B5CFF; color: #fff; } .adm-search { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--bs-border-color); border-radius: 11px; padding: 8px 13px; color: #6b7090; min-width: 240px; } .adm-search input { border: 0; background: transparent; outline: none; width: 100%; color: var(--abcm-ink); font: inherit; } .adm-code { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: var(--fs-xs); color: #7B5CFF; background: rgba(123,92,255,.1); padding: 3px 9px; border-radius: 7px; } .tabular { font-variant-numeric: tabular-nums; } /* ===== Banner slideshow (hero) ===== */ .abcm-slider{position:relative;height:100%;min-height:340px;border-radius:20px;overflow:hidden; box-shadow:0 20px 46px rgba(14,19,48,.14);background:#0a1130} .abcm-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background-size:cover;background-position:center} .abcm-slide.on{opacity:1} /* Chữ của slide ĐANG TẮT phải biến mất NHANH HƠN cả tấm slide. Cả hai slide nằm chồng đúng một chỗ, nên trong 600ms chuyển cảnh hai tiêu đề in đè lên nhau — đọc ra như trang bị lỗi font. Cho phần chữ tắt trong 180ms thì mắt chỉ còn thấy ảnh giao nhau, đúng ý đồ của hiệu ứng mờ dần. */ .abcm-slide-body{transition:opacity .18s ease} .abcm-slide:not(.on) .abcm-slide-body{opacity:0} .abcm-g1{background-image:linear-gradient(120deg,#141a3a,#1e2a63 55%,#123a4d)} .abcm-g2{background-image:linear-gradient(120deg,#241a4d,#3a2a7a 55%,#5b3fb0)} .abcm-g3{background-image:linear-gradient(120deg,#0f2c33,#124a4a 55%,#1d6b5a)} .abcm-slide-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,26,.55),rgba(6,9,26,.12) 58%,transparent),linear-gradient(transparent 28%,rgba(6,9,26,.85))} /* Padding co giãn: slider nay là ô 7/12 của hero (~700px) chứ không còn là ô phụ 340px, padding cố định 24px làm chữ dính mép trong một khung lớn. */ .abcm-slide-body{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:clamp(20px,3vw,32px) clamp(18px,2.6vw,30px) clamp(36px,4vw,48px);color:#fff} .abcm-slide-badge{display:inline-block;font-size: var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.05em; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:50px;padding:4px 12px;margin-bottom:10px} /* Cỡ chữ slide nâng một nấc (1.55 → 1.9rem trần) cho cân với khung 7/12 mới — vẫn dưới b-h1. */ .abcm-slide-title{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;font-size:clamp(1.25rem,2.6vw,1.9rem); line-height:1.15;margin:0 0 6px;letter-spacing:-.01em;color:#fff !important;text-shadow:0 2px 14px rgba(0,0,0,.4)} .abcm-slide-sub, .abcm-slide-badge{text-shadow:0 1px 8px rgba(0,0,0,.35)} .abcm-slide-sub{font-size: var(--fs-sm);opacity:.9;margin:0 0 14px;max-width:44ch; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .abcm-slide-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#12163a;border-radius:50px; padding:8px 17px;font-size: var(--fs-sm);font-weight:700;text-decoration:none;transition:.15s} .abcm-slide-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.25)} /* Cụm mũi tên đặt góc trên-phải để không đè lên badge/tiêu đề (nằm dưới-trái) */ .abcm-slide-nav{position:absolute;top:14px;right:14px;z-index:4;display:flex;gap:8px} .abcm-slide-arrow{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.2); backdrop-filter:blur(4px);color:#fff;font-size:1rem;cursor:pointer;display:grid;place-items:center;transition:.15s} .abcm-slide-arrow:hover{background:rgba(255,255,255,.38)} .abcm-slide-dots{position:absolute;right:20px;bottom:16px;z-index:3;display:flex;gap:8px} .abcm-slide-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s} .abcm-slide-dots button.on{background:#fff;width:26px;border-radius:6px} /* ===== Language switcher (pill + dropdown) ===== */ .abcm-lang-btn { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--bs-border-color); border-radius: 50px; padding: .42rem .95rem; color: var(--abcm-ink, #0e1330); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: .15s; line-height: 1.2; } .abcm-lang-btn:hover { border-color: #c7b8ff; box-shadow: 0 2px 12px rgba(123,92,255,.14); } .abcm-lang-globe { font-size: 1.15rem; line-height: 1; background: linear-gradient(135deg, #3B82F6, #2DD4BF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .abcm-lang-chev { font-size: var(--fs-xs); color: #9aa0bd; transition: transform .18s; } .abcm-lang-btn[aria-expanded="true"] .abcm-lang-chev { transform: rotate(180deg); } .abcm-lang-menu { border: 0; border-radius: 14px; padding: .4rem; min-width: 200px; box-shadow: 0 12px 34px rgba(14,19,48,.16); } .abcm-lang-item { display: flex; align-items: center; gap: .75rem; border-radius: 10px; padding: .58rem .7rem; font-weight: 600; } /* Ghi đè mặc định Bootstrap .dropdown-item.active (nền xanh, chữ trắng) — dùng specificity cao hơn */ .abcm-lang-menu .abcm-lang-item, .abcm-lang-menu .abcm-lang-item:focus { color: var(--abcm-ink, #0e1330); background: transparent; } .abcm-lang-menu .abcm-lang-item:hover { background: rgba(123,92,255,.12); color: var(--abcm-ink, #0e1330); } .abcm-lang-menu .abcm-lang-item.active, .abcm-lang-menu .abcm-lang-item.active:focus { background: transparent; color: #3B82F6; font-weight: 800; } .abcm-lang-menu .abcm-lang-item.active:hover { background: rgba(59,130,246,.12); color: #3B82F6; } .abcm-lang-cc { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; color: #9aa0bd; min-width: 22px; text-align: center; } .abcm-lang-menu .abcm-lang-item.active .abcm-lang-cc { color: #3B82F6; } .adm-table thead th { font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: #9aa0bd; font-weight: 700; padding-top: .9rem; padding-bottom: .9rem; border-bottom-color: var(--bs-border-color); } .adm-table tbody td { padding-top: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid #eef0f7; vertical-align: middle; } .adm-table tbody tr:last-child td { border-bottom: 0; } /* Zebra rất nhẹ để tách dòng cho dễ đọc bảng nhiều cột (Đơn hàng) */ .adm-table tbody tr:nth-child(even) td { background: #fbfcfe; } .adm-table.table-hover tbody tr:hover td { background: rgba(123,92,255,.05); } /* Stat card */ .admin-stat { transition: transform .18s ease, box-shadow .18s ease; } .admin-stat:hover { transform: translateY(-4px); box-shadow: var(--abcm-shadow-lg) !important; } /* ===== THẺ SỐ LIỆU BẢNG ĐIỀU KHIỂN ===== Nhãn trên, số lớn dưới, icon dạt phải — xem chú thích trong AdminDashboard.razor. .kpi-num dùng clamp() thay vì chọn cấp thẻ tiêu đề theo độ dài chuỗi. Chuỗi dài nhất là số tiền ("327.710.000 ₫"); ba thẻ kia là số nguyên một hai chữ số. Trước đây tiền dùng h4 còn lại dùng h2, nên con số quan trọng nhất lại nhỏ nhất. Một cỡ cho cả bốn, và bề ngang co lại lo phần còn lại. tabular-nums: chữ số rộng bằng nhau, nên bốn con số thẳng hàng dọc với nhau và không nhảy khi dữ liệu đổi. */ .kpi { color: inherit; } .kpi:hover { color: inherit; } .kpi-label { color: var(--abcm-muted); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; padding-top: .15rem; } .kpi-num { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.5rem, 1.05rem + 1.15vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin: .55rem 0 .35rem; color: var(--abcm-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* Dòng gợi ý dưới số: nói thẻ này bấm vào đi đâu. Bốn thẻ đều là link, mà một thẻ link không có dấu hiệu gì thì người dùng phải rê chuột lên từng cái để đoán. */ .kpi-go { display: inline-flex; align-items: center; gap: .3rem; color: var(--abcm-muted); font-size: var(--fs-xs); font-weight: 600; transition: color .15s ease, gap .15s ease; } .kpi:hover .kpi-go { color: var(--abcm-purple); gap: .5rem; } .text-teal-strong { color: #0d9488 !important; } /* Chấm "chưa trả lời" cạnh tên khách trong danh sách liên hệ */ .adm-unread { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--abcm-purple); box-shadow: 0 0 0 3px rgba(123,92,255,.16); } .admin-stat-icon { width: 54px; height: 54px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.55rem; flex-shrink: 0; } .admin-stat-icon.c-purple { background: rgba(123,92,255,.12); color: #7B5CFF; } .admin-stat-icon.c-teal { background: rgba(20,184,166,.14); color: #0d9488; } .admin-stat-icon.c-blue { background: rgba(59,130,246,.12); color: #3B82F6; } .admin-stat-icon.c-amber { background: rgba(245,158,11,.15); color: #d97706; } /* ========================================================================== MASTER DATA hub — rail dọc (settings-style) + panel, responsive ========================================================================== */ .md-hub-icon { width: 46px; height: 46px; border-radius: .85rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: var(--abcm-grad); box-shadow: 0 8px 18px rgba(123,92,255,.28); } /* Segmented control ngang (1 cấp nav, nội dung full-width — tránh double-sidebar) */ .md-seg { display: flex; flex-wrap: wrap; gap: .25rem; background: var(--abcm-surface); border: 1px solid var(--bs-border-color); border-radius: .9rem; padding: .3rem; margin-bottom: 1.25rem; } .md-seg-item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .55rem .9rem; border: 0; background: transparent; border-radius: .65rem; color: var(--abcm-muted); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .md-seg-item i { font-size: 1rem; opacity: .9; flex-shrink: 0; } .md-seg-item:hover { color: var(--abcm-ink); } .md-seg-item.active { background: #fff; color: var(--abcm-purple); box-shadow: var(--abcm-shadow-sm); } .md-seg-item.active i { color: var(--abcm-purple); opacity: 1; } .md-panel { animation: mdFade .25s ease; } @keyframes mdFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Mobile: segmented cuộn ngang thay vì xuống dòng */ @media (max-width: 767.98px) { .md-seg { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .md-seg-item { flex-shrink: 0; } } /* Editor "Nội dung trang chủ" — section-card có header */ .ed-section { background: #fff; border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.15rem 1.35rem 1.4rem; margin-bottom: 1rem; box-shadow: var(--abcm-shadow-sm); } .ed-head { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem; } .ed-head-ic { width: 34px; height: 34px; border-radius: .6rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(123,92,255,.1); color: var(--abcm-purple); font-size: 1rem; } .ed-head h6 { margin: 0; font-weight: 700; color: var(--abcm-ink); line-height: 1.15; } .ed-head small { display: block; color: var(--abcm-muted); font-weight: 500; font-size: var(--fs-xs); } .ed-section .form-label { font-size: var(--fs-sm); color: var(--abcm-muted); font-weight: 600; margin-bottom: .3rem; } /* Master Data — card grid hub (scale khi nhiều mục) */ .md-group-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--abcm-muted); margin: 1.6rem 0 .8rem; } .md-group-label:first-of-type { margin-top: .25rem; } .md-card { display: flex; align-items: flex-start; gap: .9rem; height: 100%; background: #fff; border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; box-shadow: var(--abcm-shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .md-card:hover { transform: translateY(-4px); box-shadow: var(--abcm-shadow); border-color: #dfe3f0; color: inherit; } .md-card-ic { width: 46px; height: 46px; border-radius: .8rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; } .md-card-ic.i-purple { background: rgba(123,92,255,.12); color: #7B5CFF; } .md-card-ic.i-blue { background: rgba(59,130,246,.12); color: #3B82F6; } .md-card-ic.i-teal { background: rgba(20,184,166,.14); color: #0d9488; } .md-card-ic.i-amber { background: rgba(245,158,11,.15); color: #d97706; } .md-card-body { flex: 1 1 auto; min-width: 0; } .md-card-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; color: var(--abcm-ink); margin-bottom: .2rem; } .md-card-title .lbl { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; } .md-card-desc { color: var(--abcm-muted); font-size: var(--fs-sm); margin: 0; } .md-card-count { flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--abcm-purple); background: rgba(123,92,255,.1); padding: .1rem .5rem; border-radius: 50rem; } .md-card .md-arrow { color: var(--abcm-muted); transition: transform .18s ease, color .18s ease; flex-shrink: 0; } .md-card:hover .md-arrow { transform: translateX(3px); color: var(--abcm-purple); } /* Nút quay lại hub */ .md-back { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--abcm-muted); text-decoration: none; margin-bottom: .5rem; } .md-back:hover { color: var(--abcm-purple); } /* ========================================================================== KEYGO landing (navy + neon tím/ngọc) ========================================================================== */ .keygo-body { background: #0A1130; color: #dcd9f0; min-height: 100vh; } .keygo-hero { background: radial-gradient(50% 60% at 18% 18%, rgba(123,92,255,.42), transparent 55%), radial-gradient(46% 55% at 86% 22%, rgba(45,212,191,.35), transparent 55%), #0A1130; } .keygo-card { background: #141a3c; border: 1px solid rgba(255,255,255,.08); color: #dcd9f0; border-radius: 1rem; transition: transform .18s ease, border-color .18s ease; } .keygo-card:hover { transform: translateY(-6px); border-color: rgba(45,212,191,.5); } .keygo-body h1, .keygo-body h2, .keygo-body h3, .keygo-body h4, .keygo-body h5, .keygo-body h6, .keygo-body .h1, .keygo-body .h2, .keygo-body .h3, .keygo-body .h4, .keygo-body .h5, .keygo-body .h6, .keygo-body .display-5, .keygo-body .display-6 { color: #f3f1fb; } /* ===== Nút liên hệ nổi (Zalo + hotline) ===== */ .abcm-float{position:fixed;left:18px;bottom:20px;z-index:1045;display:flex;flex-direction:column;gap:12px} .abcm-float-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.35rem; text-decoration:none;box-shadow:0 8px 22px rgba(14,19,48,.28);transition:transform .15s} .abcm-float-btn:hover{transform:scale(1.08);color:#fff} .fc-zalo{background:linear-gradient(135deg,#0068ff,#00a0ff)} .fc-call{background:linear-gradient(135deg,#16a34a,#22c55e);position:relative} .fc-call::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(34,197,94,.55);animation:fcPulse 1.8s ease-out infinite} @keyframes fcPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}} @media (max-width:575.98px){.abcm-float{left:12px;bottom:14px;gap:10px}.abcm-float-btn{width:46px;height:46px;font-size:1.2rem}} /* ========================================================================== RESPONSIVE — mobile / tablet / iPad ========================================================================== */ /* Sidebar admin: dạng offcanvas trượt vào dưới 992px (giới hạn bề rộng) */ @media (max-width: 991.98px) { .app-sidebar.offcanvas-lg { width: min(280px, 82vw); height: 100vh; } } /* ========================================================================== MENU DỌC TRÊN ĐIỆN THOẠI / MÁY TÍNH BẢNG (dưới 992px) ========================================================================== Cùng một đống markup phục vụ hai bố cục hoàn toàn khác nhau. Nằm ngang trên desktop nó ổn; xếp dọc thì nó rã ra: năm dòng chữ trần, rồi một viên thuốc ngôn ngữ, rồi một nút viền, rồi một link chữ — bốn hình dạng, bốn bề rộng, lệch nhau, cộng một con số đỏ cắt ngang viền nút giỏ hàng. Nhìn ra ngay là phần thừa của thanh ngang chứ không phải một cái menu được thiết kế. Bố cục dọc ở đây có đúng MỘT hình dạng dòng: cao 52px, bo góc, icon dẫn đầu, chữ căn trái, chiếm trọn bề ngang. Năm mục điều hướng và ba hành động dùng chung hình dạng đó, cách nhau bằng một vạch. Không còn gì phải cân đo bằng mắt, và mọi dòng đều là vùng chạm cỡ ngón tay. Mốc 992px là mốc của .navbar-expand-lg — chỗ Bootstrap đổi từ menu bung sang thanh ngang. Đặt khác đi thì có một quãng bề ngang bị áp nhầm bố cục. */ @media (max-width: 991.98px) { #abcmNav { padding: .35rem 0 .6rem; } #abcmNav .navbar-nav { gap: 3px; } #abcmNav .nav-item { width: 100%; } #abcmNav .nav-link, #abcmNav .btn, #abcmNav .abcm-lang-btn { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 52px; padding: .55rem .9rem; margin: 0; border-radius: 14px; font-size: var(--fs-base); font-weight: 600; text-align: left; justify-content: flex-start; } /* Cột icon rộng bằng nhau nên chữ của tám dòng thẳng hàng dọc */ #abcmNav .nav-link > i, #abcmNav .btn > i, #abcmNav .abcm-lang-globe { width: 22px; flex-shrink: 0; text-align: center; font-size: 1.15rem; } #abcmNav .nav-link > i { color: var(--abcm-purple); opacity: .85; } #abcmNav .nav-link.active { background-color: rgba(123,92,255,.10); } /* Vạch tím bên trái: đánh dấu trang hiện tại rõ hơn một mảng nền nhạt, nhất là khi mảng nền đó chiếm trọn bề ngang và không còn hình viên thuốc để nhận ra. */ #abcmNav .nav-link.active { box-shadow: inset 3px 0 0 var(--abcm-purple); } #abcmNav .abcm-nav-sep { height: 1px; min-height: 0; background: var(--bs-border-color); margin: .5rem .35rem; padding: 0; } /* Con số giỏ hàng: thôi đè lên góc, về cuối dòng thành một viên thuốc riêng. Ba class .position-absolute/.top-0/.start-100/.translate-middle của Bootstrap đều mang !important, nên đè lại chúng cũng phải !important — không phải thói quen xấu ở đây mà là cách duy nhất thắng một utility class. */ #abcmNav .btn .badge { position: static !important; transform: none !important; margin-left: auto; font-size: .8rem; padding: .3rem .6rem; } /* Nút giỏ hàng là hành động chính trong menu — cho nó nền đặc, không phải viền */ #abcmNav .btn-outline-primary { background: var(--abcm-purple); border-color: var(--abcm-purple); color: #fff; } #abcmNav .btn-outline-primary .badge { background: rgba(255,255,255,.22) !important; } /* Ô ngôn ngữ: bỏ viền pill riêng, hoà vào cùng một hàng dọc với các mục khác */ #abcmNav .abcm-lang-btn { background: transparent; border-color: transparent; color: #3B4166; } #abcmNav .abcm-lang-btn:hover { background: rgba(123,92,255,.07); box-shadow: none; } #abcmNav .abcm-lang-chev { margin-left: auto; } /* .abcm-langsel là
bọc ngoài nút — nó cũng phải chiếm trọn bề ngang, nếu không nút bên trong chỉ rộng bằng nội dung dù đã đặt width:100%. */ #abcmNav .abcm-langsel { width: 100%; } #abcmNav .dropdown-menu { width: 100%; } } /* Điện thoại */ @media (max-width: 575.98px) { /* Nhịp section gọn hơn (đỡ trống) */ .section-py { padding-top: 2.75rem; padding-bottom: 2.75rem; } /* Ô tìm kiếm admin full-width, không tràn */ .adm-search { min-width: 0; width: 100%; } /* KHÔNG CÒN LUẬT MẬT ĐỘ BẢNG Ở ĐÂY — CÓ CHỦ Ý. Từng có một khối bóp đệm .adm-table cho màn hình hẹp, viết khi mới chỉ Sản phẩm và Đơn hàng có bản thẻ. Nay CẢ TÁM bảng quản trị đều nằm trong .table-responsive .d-none.d-lg-block, tức là display:none dưới 992px — nên mọi luật .adm-table trong khối @media 575.98px này không bao giờ khớp được một phần tử nào. Xoá đi thay vì để lại làm CSS chết trông như đang có tác dụng. */ /* Tiêu đề trang quản trị: h3 (~25px) chiếm hai dòng trên máy 360px và đẩy nút hành động xuống. Một nấc nhỏ hơn vẫn rõ là tiêu đề mà gọn trong một dòng. */ .admin-shell h1.h3 { font-size: var(--fs-2xl); } /* Slideshow: tap target lớn hơn cho ngón tay. Chấm phải NHỎ để nhìn ra là chấm, nhưng vùng chạm thì không cần trùng với phần nhìn thấy. ::before phủ ra ngoài mỗi chiều, cho vùng bấm ~41×23px trong khi chấm vẫn 13px. Nới ngang chỉ 5px mỗi bên: gap là 12px, nới rộng hơn thì vùng chạm của hai chấm cạnh nhau chồng lên nhau và chấm bên trái ăn mất lượt bấm của chấm phải. */ .abcm-slide-dots { gap: 12px; } .abcm-slide-dots button { width: 13px; height: 13px; position: relative; } .abcm-slide-dots button.on { width: 30px; } .abcm-slide-dots button::before { content: ""; position: absolute; inset: -14px -5px; } .abcm-slide-arrow { width: 42px; height: 42px; font-size: 1.1rem; } /* NÚT TRONG THẺ SẢN PHẨM: CHỮ TỰ CO, VÀ KHÔNG BAO GIỜ XUỐNG DÒNG. Lưới /shop và trang chủ là 2 cột dưới 992px, nên ở 390px mỗi thẻ chỉ còn ~170px. "Thêm vào giỏ" ở cỡ chữ mặc định bị gãy thành hai dòng ("Thêm vào" / "giỏ"), làm nút cao gấp đôi và cả hàng thẻ so le nhau — chưa kể một nút hai dòng trông như đang bị lỗi. clamp() cho chữ bám theo bề ngang màn hình: ~12px ở máy 360px, trở lại cỡ thường khi màn hình đủ rộng. nowrap là chốt chặn cuối, cho những chuỗi dài hơn khi đổi sang tiếng Anh ("Add to cart"). Chiều cao 44px của vùng chạm do khối pointer:coarse giữ, cỡ chữ nhỏ không đụng tới nó. */ .abcm-card .card-body .btn { font-size: clamp(.74rem, 3.4vw, .95rem); white-space: nowrap; padding-left: .5rem; padding-right: .5rem; } } /* Dòng sản phẩm trong giỏ khi ở dạng THẺ (dưới 768px) — xem Pages/Cart.razor. Đường kẻ phân cách nằm giữa các dòng chứ không viền quanh từng thẻ: bốn khung chữ nhật lồng trong khung .card bên ngoài đọc ra rối hơn là rõ hơn. */ .cart-line { padding: .9rem 1rem; border-bottom: 1px solid var(--bs-border-color); } .cart-line:last-child { border-bottom: 0; } /* ========================================================================== TÓM TẮT ĐƠN Ở TRANG THANH TOÁN — Pages/Checkout.razor ========================================================================== */ .co-line { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); } .co-line:last-child { border-bottom: 0; } /* Ô ảnh cố định 56px + badge số lượng đè lên góc. `overflow: visible` là bắt buộc: badge nhô ra ngoài một nửa, và cắt nó đi thì con số bị mất một bên. */ .co-thumb { position: relative; flex: 0 0 auto; width: 56px; height: 56px; } .co-thumb img, .co-thumb .co-thumb-empty { width: 100%; height: 100%; object-fit: cover; border-radius: .6rem; border: 1px solid var(--bs-border-color); background: #fff; } .co-thumb .co-thumb-empty { display: grid; place-items: center; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); } .co-qty { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bs-secondary-color); color: #fff; font-size: .7rem; font-weight: 600; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--bs-body-bg); } /* Tên sản phẩm: hai dòng rồi cắt. Một dòng thì "Laptop Dell Latitude 5420 i5 16GB" và "…i7 16GB" trông y hệt nhau; ba dòng thì đẩy tổng tiền xuống dưới nếp gấp. */ .co-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* DÍNH THEO MÀN HÌNH chỉ từ lg trở lên. Dưới lg hai cột đã xếp chồng nên không có gì để dính, và `position: sticky` trên một khối cao hơn khung nhìn thì khoá luôn phần cuối của nó — tức là đúng cái nút "Xác nhận đặt hàng". */ @media (min-width: 992px) { .co-summary { position: sticky; top: 88px; } } /* ========================================================================== HƯỚNG DẪN CHUYỂN KHOẢN — Pages/OrderConfirmation.razor ========================================================================== */ /* Thanh mã đơn + số tiền, ngay trên tiêu đề của thẻ. Xếp chồng trên điện thoại: một mã đơn 12 ký tự và một số tiền 7 chữ số không đứng cạnh nhau nổi ở 360px. */ .pay-head { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; padding: .85rem 1.5rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); } .pay-head-label { display: block; font-size: .75rem; color: var(--bs-secondary-color); } .pay-head-value { display: block; font-size: 1.05rem; font-weight: 700; word-break: break-all; } /* Một dòng thông tin + nút chép, bố cục BIÊN NHẬN: nhãn sát trái, giá trị sát phải. Nhãn KHÔNG có bề rộng cố định, và đó là điểm quan trọng: cột này chỉ rộng 288px ở khổ màn hình lg (container 960 → col-lg-7 → trừ mã QR 200px), nên một nhãn 8.5rem ăn mất một nửa và số tài khoản 11 chữ số bị bẻ làm hai dòng — đo được, không phải giả định. Nhãn co theo chữ, phần còn lại thuộc về giá trị. */ .pay-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--bs-border-color-translucent); } .pay-row:last-child { border-bottom: 0; } .pay-row-label { flex: 0 0 auto; white-space: nowrap; color: var(--bs-secondary-color); font-size: .875rem; } .pay-row-value { flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; } /* 36px là mức tối thiểu bấm được một tay; khối `pointer: coarse` ở cuối file nâng mọi .btn lên 44px nhưng đây không phải .btn — nó cố tình nhẹ hơn để không kéo sự chú ý khỏi mã QR. */ .pay-copy { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); color: var(--bs-secondary-color); cursor: pointer; transition: background .15s ease, color .15s ease; } .pay-copy:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } /* Điện thoại: nhãn lên dòng trên, giá trị xuống dòng dưới và quay về canh TRÁI. Canh phải chỉ đọc được khi nhãn và giá trị nằm cùng một dòng; xếp chồng mà vẫn canh phải thì hai thứ thuộc về nhau lại nằm ở hai đầu đối diện của màn hình. */ @media (max-width: 575.98px) { .pay-row { flex-wrap: wrap; } .pay-row-label { flex: 0 0 100%; } .pay-row-value { flex: 1 1 auto; text-align: left; } } /* Hộp "Lưu ý quan trọng". Không dùng .alert-warning của Bootstrap: nó dùng chung với các cảnh báo tạm thời ("thanh toán chưa hoàn tất") ở ngay trên, và hai thứ trông giống hệt nhau thì cái quan trọng hơn bị đọc lướt qua. */ .pay-warn { padding: .9rem 1rem; border-radius: .75rem; border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); color: var(--bs-body-color); } .pay-warn ul { margin-bottom: 0; } .pay-warn li + li { margin-top: .35rem; } .pay-warn .bi-exclamation-triangle-fill { color: #d97706; } /* Chọn hình thức thanh toán: cả Ô có viền phải bấm được, không riêng dòng chữ. Nhãn