/* ========================================================================== NEKO CHA — style.css -------------------------------------------------------------------------- MUỐN ĐỔI GIAO DIỆN? Chỉ cần sửa trong khối :root ngay bên dưới. Đổi 1 dòng ở đây là cả trang đổi theo. Không cần đụng file index.html. ========================================================================== */ :root{ /* ---------- MÀU (lấy từ logo, chỉ 4 màu chính) ---------- */ --xanh: #2A5233; /* xanh lá trà — màu chủ đạo, nút bấm, tiêu đề */ --xanh-dam: #1C3A23; /* xanh đậm hơn — dùng khi rê chuột / nền footer */ --muc: #262320; /* đen mực tàu — chữ chính */ --kem: #F7EFE4; /* kem giấy washi — nền toàn trang (khớp logo) */ --kem-dam: #EBE1D0; /* kem đậm hơn — nền thẻ, đường kẻ */ --do-an: #B4472F; /* đỏ triện — CHỈ dùng nhấn rất nhỏ (nhãn NEW) */ --chu-nhat: #6E675A; /* chữ phụ, ghi chú */ /* ---------- CHỮ ---------- */ /* Cả trang dùng CHUNG một font. Đổi ở đây + link Google Fonts trong */ --font: "Be Vietnam Pro", system-ui, sans-serif; /* Thang cỡ chữ — ưu tiên đọc trên điện thoại */ --cd-ghi-chu: 12px; --cd-nho: 14px; --cd-thuong: 16px; --cd-lon: 18px; --cd-tieu-de: 26px; --cd-hero: 33px; /* ---------- KHOẢNG CÁCH (thang chuẩn, không dùng số lẻ) ---------- */ --k1: 6px; --k2: 10px; --k3: 16px; --k4: 24px; --k5: 32px; --k6: 48px; --k7: 64px; /* ---------- KHÁC ---------- */ --bo-goc: 14px; /* độ bo góc thẻ, ảnh, nút */ --rong-toi-da: 560px; /* bề ngang nội dung tối đa (mobile-first) */ --vien: 1px solid var(--kem-dam); --do-cao-thanh-duoi: 66px; /* chừa chỗ cho thanh Gọi/Chỉ đường */ } /* ========================================================================== NỀN TẢNG ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--kem); color:var(--muc); font-family:var(--font); font-size:var(--cd-thuong); line-height:1.65; padding-bottom:var(--do-cao-thanh-duoi); -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:var(--xanh); text-decoration:none; } h1,h2,h3{ font-family:var(--font); font-weight:700; line-height:1.25; margin:0; letter-spacing:-.02em; } :focus-visible{ outline:3px solid var(--xanh); outline-offset:3px; } .chi-doc-man-hinh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ========================================================================== BỐ CỤC CHUNG ========================================================================== */ .khung{ max-width:var(--rong-toi-da); margin-inline:auto; padding-inline:var(--k4); } .muc{ padding-block:var(--k7); } .muc + .muc{ padding-top:0; } /* Con dấu 猫茶 — dấu hiệu nhận diện, dùng làm mốc mở đầu mỗi mục */ .trien{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; border:1.5px solid var(--xanh); border-radius:4px; padding:5px 6px; color:var(--xanh); font-size:15px; line-height:1.05; writing-mode:vertical-rl; letter-spacing:.08em; } .dau-muc{ display:flex; align-items:center; gap:var(--k3); margin-bottom:var(--k4); } .dau-muc h2{ font-size:var(--cd-tieu-de); } .dau-muc p{ margin:2px 0 0; font-size:var(--cd-nho); color:var(--chu-nhat); } /* ========================================================================== THANH TRÊN CÙNG ========================================================================== */ .thanh-tren{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--kem) 92%, transparent); backdrop-filter:blur(8px); border-bottom:var(--vien); } .thanh-tren .khung{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--k2); } /* Logo trên thanh đầu trang */ .logo-nho{ display:flex; align-items:center; gap:8px; } .logo-nho img{ width:34px; height:34px; border-radius:6px; } .logo-nho span{ font-size:var(--cd-lon); font-weight:700; letter-spacing:-.02em; color:var(--xanh); } /* Logo lớn ở đầu trang */ .logo-lon{ display:block; width:190px; height:auto; margin:0 auto var(--k4); } .lien-ket-nhanh{ font-size:var(--cd-nho); font-weight:500; color:var(--muc); } /* ========================================================================== HERO ========================================================================== */ .hero{ padding-top:var(--k5); } .hero-anh{ border-radius:var(--bo-goc); overflow:hidden; border:var(--vien); margin-bottom:var(--k4); } .hero-anh img{ width:100%; height:auto; } .hero h1{ font-size:var(--cd-hero); font-weight:700; margin-bottom:var(--k2); } .hero .khau-hieu{ font-size:var(--cd-nho); letter-spacing:.16em; text-transform:uppercase; color:var(--xanh); margin:0 0 var(--k3); } .hero .mo-ta{ color:var(--chu-nhat); margin:0 0 var(--k4); } /* Dải thông tin: đánh giá · giờ mở · khu vực */ .dai-tin{ display:flex; flex-wrap:wrap; gap:var(--k2) var(--k4); padding:var(--k3) 0; border-top:var(--vien); border-bottom:var(--vien); margin-bottom:var(--k4); font-size:var(--cd-nho); } .dai-tin b{ font-weight:600; } .dai-tin span{ color:var(--chu-nhat); } /* ========================================================================== NÚT BẤM ========================================================================== */ .nhom-nut{ display:flex; gap:var(--k2); } .nut{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 var(--k3); border-radius:var(--bo-goc); font-size:var(--cd-thuong); font-weight:600; border:1.5px solid var(--xanh); cursor:pointer; transition:background .18s ease, color .18s ease; } .nut-chinh{ background:var(--xanh); color:var(--kem); } .nut-chinh:hover{ background:var(--xanh-dam); border-color:var(--xanh-dam); } .nut-phu{ background:transparent; color:var(--xanh); } .nut-phu:hover{ background:var(--kem-dam); } /* ========================================================================== MENU ========================================================================== */ .nhom-mon + .nhom-mon{ margin-top:var(--k5); } .ten-nhom{ display:flex; align-items:baseline; gap:var(--k2); font-size:var(--cd-ghi-chu); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--xanh); padding-bottom:var(--k2); border-bottom:1.5px solid var(--xanh); margin-bottom:var(--k1); } .ten-nhom small{ font-weight:400; letter-spacing:0; text-transform:none; color:var(--chu-nhat); } .mon{ display:flex; align-items:baseline; gap:var(--k2); padding:var(--k2) 0; border-bottom:var(--vien); } .mon:last-child{ border-bottom:0; } .mon .ten{ font-size:var(--cd-lon); font-weight:500; } .mon .noi{ flex:1; border-bottom:1px dotted var(--kem-dam); transform:translateY(-4px); } .mon .gia{ font-weight:600; font-variant-numeric:tabular-nums; } .nhan-moi{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius:99px; background:var(--do-an); color:#fff; font-size:10px; font-weight:700; letter-spacing:.1em; vertical-align:2px; } .ghi-chu-menu{ margin-top:var(--k4); font-size:var(--cd-nho); color:var(--chu-nhat); } /* ========================================================================== KHÔNG GIAN (ảnh) ========================================================================== */ .luoi-anh{ display:grid; grid-template-columns:1fr 1fr; gap:var(--k2); } .luoi-anh figure{ margin:0; } .luoi-anh img{ width:100%; height:100%; object-fit:cover; border-radius:var(--bo-goc); border:var(--vien); } .luoi-anh .rong{ grid-column:1 / -1; } /* ========================================================================== GHÉ QUÁN ========================================================================== */ .the-tin{ background:#fff; border:var(--vien); border-radius:var(--bo-goc); padding:var(--k4); } .dong-tin{ display:flex; gap:var(--k3); padding-block:var(--k2); } .dong-tin + .dong-tin{ border-top:var(--vien); } .dong-tin .nhan{ flex:0 0 88px; font-size:var(--cd-nho); color:var(--chu-nhat); } .dong-tin .noi-dung{ flex:1; } .ban-do{ margin-top:var(--k4); border:var(--vien); border-radius:var(--bo-goc); overflow:hidden; line-height:0; } .ban-do iframe{ width:100%; height:240px; border:0; } /* ========================================================================== FOOTER ========================================================================== */ .chan-trang{ background:var(--xanh-dam); color:var(--kem); padding-block:var(--k6); text-align:center; } .chan-trang .trien{ border-color:var(--kem); color:var(--kem); } .chan-trang h2{ font-size:var(--cd-tieu-de); margin:var(--k3) 0 var(--k1); } .chan-trang p{ margin:0; font-size:var(--cd-nho); opacity:.8; } .chan-trang a{ color:var(--kem); text-decoration:underline; } /* ========================================================================== THANH HÀNH ĐỘNG DƯỚI ĐÁY (chỉ điện thoại) ========================================================================== */ .thanh-duoi{ position:fixed; inset:auto 0 0 0; z-index:50; display:flex; gap:var(--k2); padding:var(--k2) var(--k4) calc(var(--k2) + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--kem) 95%, transparent); backdrop-filter:blur(8px); border-top:var(--vien); } .thanh-duoi .nut{ min-height:46px; font-size:var(--cd-nho); } /* ========================================================================== HIỆU ỨNG XUẤT HIỆN KHI CUỘN ========================================================================== */ .hien-dan{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; } .hien-dan.da-hien{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .hien-dan{ opacity:1; transform:none; transition:none; } } /* ========================================================================== MÀN HÌNH LỚN (máy tính, tablet) ========================================================================== */ @media (min-width:768px){ :root{ --cd-hero:44px; --cd-tieu-de:32px; --rong-toi-da:680px; } body{ padding-bottom:0; } .thanh-duoi{ display:none; } .muc{ padding-block:var(--k7); } .ban-do iframe{ height:320px; } }