/* Cakela home page styles. Single stylesheet for the public storefront so the layout has one source of truth: compact type, uniform image tiles, and one readable section per cake line. Type: mọi tiêu đề dùng đúng font của thương hiệu (VL Brown Sugar) như chữ CAKELA trên logo. Font này có đủ 146 chữ tiếng Việt nhưng nét rất mảnh, nên chỉ dùng cho tiêu đề từ ~1.35rem trở lên; nhãn nhỏ, giá và số size giữ Nunito để đọc rõ. Line-height để rộng (1.26) cho dấu tiếng Việt không bị cắt. */ @font-face { font-family: CakelaDisplay; src: url("/files/VL-Brown-Sugar.ttf") format("truetype"); font-display: swap; } :root { --bg: #fff8f1; --paper: #fffdf9; --cream: #f8efe4; --ink: #251914; --brown: #6e2c1d; --red: #b5221d; --muted: #7b665b; --line: rgba(110, 44, 29, .16); --shadow: 0 10px 30px rgba(89, 50, 31, .1); --radius: 10px; --container: 1200px; /* Lề trang: 16px trên máy nhỏ nhất, giãn dần tới 40px theo bề ngang máy, và từ lúc màn rộng hơn --container thì thành "phần thừa chia đôi" để nội dung căn giữa. Một biến lo cả ba việc nên không cần điểm ngắt riêng cho lề. */ --gutter: max(clamp(16px, 4vw, 40px), calc((100vw - var(--container)) / 2)); --header: 74px; /* Cỡ một nút dock liên hệ. Khai một chỗ vì có hai nơi phải khớp nhau: chính cái nút, và khoảng chừa dưới của chữ hero trên điện thoại - lệch một chút là dock đè lên nút bấm. */ --dock: 46px; /* Bậc chữ co giãn. Cỡ lớn nhất giữ đúng như cũ (máy để bàn không to thêm chữ nào), chỉ máy nhỏ được co lại có kiểm soát thay vì đứng yên một con số cứng - nhờ vậy điện thoại đọc vừa mắt mà không phải cuộn thêm. */ --text-xs: clamp(.66rem, .63rem + .1vw, .72rem); --text-sm: clamp(.79rem, .76rem + .12vw, .86rem); --text-md: clamp(.9rem, .88rem + .1vw, .96rem); --text-lg: clamp(.95rem, .92rem + .16vw, 1.02rem); --text-h3: clamp(1.24rem, 1.12rem + .5vw, 1.42rem); /* Nhịp giãn dòng giữa các khối, dùng chung cho lề trong thẻ và khoảng cách các phần - máy nhỏ chật thì hẹp lại, máy rộng thì thoáng ra. */ --space-sm: clamp(8px, 1.2vw, 12px); --space-md: clamp(12px, 1.6vw, 18px); --space-lg: clamp(16px, 2.2vw, 24px); /* Chuyển động khai báo một chỗ: khối @media ở cuối rút ngắn quãng dịch cho điện thoại, không phải viết lại từng luật. Nhịp lệch giữa các khối cùng hàng do motion.js đặt thẳng vào transition-delay của từng khối. */ --reveal-shift: 16px; --reveal-dur: .6s; --ease-out: cubic-bezier(.22, 1, .36, 1); --display: CakelaDisplay, Georgia, serif; --wordmark: var(--display); --sans: Nunito, "Segoe UI", Arial, sans-serif; } /* Màn rất rộng: nới khung nội dung một nhịp thay vì để hai bên trống hoác. Không nới nữa vì các đoạn chữ đã chặn ở 58ch, dài hơn là mỏi mắt đọc. */ @media (min-width: 1600px) { :root { --container: 1320px; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Lúc trang mới tải, chỗ đang đọc được đặt lại bằng JS (assets/scroll-keep.js). Cuộn mượt ở đây sẽ biến cú đặt lại đó thành một đoạn trang tự trôi trước mắt khách, nên tắt trong lúc tải rồi bật lại ngay khi đã về đúng chỗ: các nút trong menu vẫn cuộn mượt y như trước. */ html.is-booting { scroll-behavior: auto; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--text-md); line-height: 1.6; } body.nav-open, body.lightbox-open { overflow: hidden; } img { display: block; max-width: 100%; } a { color: inherit; } /* Nút, ô nhập và