/* ========================================================================== Art Drink Theme — Main Stylesheet ========================================================================== */ /* ========================================================================== 1. FONTS — loaded via Google Fonts CDN trong , không cần @font-face ở đây ========================================================================== */ /* ========================================================================== 2. CSS VARIABLES & TOKENS ========================================================================== */ :root { /* Colors */ --c-brand: #8B6B47; --c-brand-dark: #6B4F35; --c-brand-light: #B89968; --c-bg: #FDFBF7; --c-bg-cream: #F5EFE6; --c-bg-beige: #EDE4D4; --c-bg-white: #FFFFFF; --c-footer: #3D2817; --c-footer-light: rgba(255, 255, 255, 0.7); --c-text: #2C1810; --c-text-muted: #8B7355; --c-text-light: #A89380; --c-border: #E5DED1; --c-border-dark: #D4C8B4; --c-star: #F5B400; --c-success: #4D9A6F; --c-error: #C44545; /* Typography */ --ff-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Sizes — clamp(min, fluid, max) cho fluid typography */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: clamp(1.5rem, 2vw + 0.8rem, 2rem); /* 24–32 */ --fs-3xl: clamp(2rem, 3vw + 1rem, 3rem); /* 32–48 */ --fs-4xl: clamp(2.5rem, 5vw + 1rem, 4.5rem); /* 40–72 hero */ /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Layout */ --container: 1200px; --container-narrow: 800px; --gutter: clamp(1rem, 3vw, 2rem); /* Radius */ --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 9999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(44, 24, 16, 0.04); --shadow-md: 0 4px 12px rgba(44, 24, 16, 0.08); --shadow-lg: 0 12px 32px rgba(44, 24, 16, 0.12); --shadow-xl: 0 24px 56px rgba(44, 24, 16, 0.18); /* Transition */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 400ms; } /* ========================================================================== 3. RESET / NORMALIZE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; font-family: var(--ff-sans); font-size: var(--fs-base); line-height: 1.6; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; height: auto; display: block; } img { font-style: italic; background: var(--c-bg-cream); } a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--c-brand-dark); } a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-serif); font-weight: 700; line-height: 1.2; margin: 0 0 var(--sp-4); color: var(--c-text); letter-spacing: -0.01em; overflow-wrap: break-word; } p, ul, ol, dl, blockquote, pre, table { margin: 0 0 var(--sp-4); overflow-wrap: break-word; } ul, ol { padding-left: 1.5em; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } input, textarea, select { font: inherit; color: inherit; } table { width: 100%; border-collapse: collapse; } hr { border: 0; height: 1px; background: var(--c-border); margin: var(--sp-6) 0; } ::selection { background: var(--c-brand); color: #fff; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 4. UTILITY / LAYOUT PRIMITIVES ========================================================================== */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding-inline: var(--gutter); } .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: 0; padding: 12px 20px; background: var(--c-brand-dark); color: #fff; z-index: 999; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { top: 0; color: #fff; } .section { padding-block: clamp(3rem, 8vw, 7rem); } .section--cream { background: var(--c-bg-cream); } .section--beige { background: var(--c-bg-beige); } .section-header { text-align: center; margin-bottom: var(--sp-7); max-width: 700px; margin-inline: auto; } .section-header__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--c-bg-cream); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--c-brand); margin-bottom: var(--sp-4); font-weight: 500; } .section-header__title { font-family: var(--ff-serif); font-size: var(--fs-3xl); margin: 0 0 var(--sp-3); } .section-header__subtitle { color: var(--c-text-muted); font-size: var(--fs-md); margin: 0; } /* ========================================================================== 5. BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; font-size: var(--fs-base); font-weight: 500; font-family: var(--ff-sans); border-radius: var(--r-pill); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; text-align: center; min-height: 44px; } .btn--primary { background: var(--c-brand); color: #fff; } .btn--primary:hover, .btn--primary:focus-visible { background: var(--c-brand-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--secondary { background: transparent; color: var(--c-brand); border-color: var(--c-brand); } .btn--secondary:hover, .btn--secondary:focus-visible { background: var(--c-brand); color: #fff; } .btn--ghost { background: transparent; color: var(--c-text); padding: 8px 16px; } .btn--ghost:hover { background: var(--c-bg-cream); } .btn--sm { padding: 8px 18px; font-size: var(--fs-sm); min-height: 36px; } .btn--full { width: 100%; } .btn--lg { padding: 14px 32px; font-size: var(--fs-md); } /* ========================================================================== 6. HEADER ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--c-border); transition: box-shadow var(--dur) var(--ease); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 72px; padding-block: var(--sp-3); } .site-branding { flex-shrink: 0; } .site-title { font-family: var(--ff-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; color: var(--c-text); } .custom-logo { max-height: 48px; width: auto; } .site-nav { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; min-width: 0; max-height: 56px; /* không cho nav cao hơn header */ overflow: hidden; } .site-nav__list { display: flex !important; flex-direction: row !important; gap: clamp(0.4rem, 1.2vw, 1.5rem); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; align-items: center; } .site-nav__list::-webkit-scrollbar { display: none; } .site-nav__list > li { flex-shrink: 0; white-space: nowrap; list-style: none; margin: 0; padding: 0; } .site-nav__list a { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); position: relative; padding: 6px 4px; white-space: nowrap !important; word-break: keep-all; overflow-wrap: normal; display: inline-block; max-width: none; line-height: 1.4; } .site-nav__list a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--c-brand); transition: width var(--dur) var(--ease), left var(--dur) var(--ease); } .site-nav__list a:hover::after, .site-nav__list .current-menu-item > a::after { width: 100%; left: 0; } .site-header__actions { display: flex; align-items: center; gap: var(--sp-3); } .cart-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); color: var(--c-text); transition: background-color var(--dur) var(--ease); } .cart-icon:hover { background: var(--c-bg-cream); } /* Mobile menu toggle — force clickable */ .menu-toggle { display: none; flex-direction: column; gap: 4px; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-pill); background: transparent; border: 0; cursor: pointer; pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; z-index: 101; user-select: none; -webkit-user-select: none; } /* Force inner spans pointer-events none để click không bị stuck ở span */ .menu-toggle__bar { pointer-events: none; } .menu-toggle:active { background: var(--c-bg-cream); } .menu-toggle__bar { width: 22px; height: 2px; background: var(--c-text); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Mobile nav drawer — hoàn toàn inert khi đóng */ .mobile-nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: #fff !important; z-index: 99999 !important; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 8px 32px rgba(0,0,0,0.12); opacity: 0; visibility: hidden; pointer-events: none !important; transition: opacity 280ms ease, visibility 280ms, transform 280ms cubic-bezier(0.4,0,0.2,1); display: flex !important; flex-direction: column; transform: translateX(100%); } .mobile-nav.is-open { pointer-events: auto !important; transform: translateX(0) !important; } /* Header trong drawer với X close button */ .mobile-nav__header { display: flex !important; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--c-border); background: #fff; flex-shrink: 0; position: sticky; top: 0; z-index: 1; } .mobile-nav__brand { font-family: var(--ff-serif); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--c-text); } .mobile-nav__close { width: 44px; height: 44px; border-radius: 50%; background: var(--c-bg-cream); color: var(--c-text); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mobile-nav__close:active { background: var(--c-border); transform: scale(0.95); } /* Hidden attribute - browser default */ .mobile-nav[hidden] { display: block !important; /* override browser hidden để control bằng class */ } /* Khi mở */ .mobile-nav.is-open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .mobile-nav__inner { padding: var(--sp-4) var(--gutter) var(--sp-7); display: flex; flex-direction: column; min-height: 100%; } .mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mobile-nav__list li { border-bottom: 1px solid var(--c-border); } .mobile-nav__list li:last-child { border-bottom: 0; } .mobile-nav__list a { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-2); font-size: var(--fs-md); font-weight: 500; color: var(--c-text); text-decoration: none; min-height: 52px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .mobile-nav__list a::after { content: '›'; color: var(--c-text-muted); font-size: 18px; margin-left: 8px; } .mobile-nav__list a:hover, .mobile-nav__list a:focus-visible, .mobile-nav__list .current-menu-item > a { background: var(--c-bg-cream); color: var(--c-brand-dark); } /* Sub-menu indent nếu menu có 2 cấp */ .mobile-nav__list .sub-menu { list-style: none; padding: 0; margin: 0; background: var(--c-bg-cream); } .mobile-nav__list .sub-menu a { padding-left: var(--sp-5); font-size: var(--fs-sm); font-weight: 400; min-height: 44px; } /* Custom menu user-defined hiển thị bên dưới menu hardcoded */ .mobile-nav__custom { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); } .mobile-nav__heading { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--c-text-muted); margin: 0 0 var(--sp-2); padding: 0 var(--sp-2); } .mobile-nav__pos { margin-top: var(--sp-5); width: 100%; justify-content: center; } /* Phòng vệ: bắt buộc mobile-nav__list hiển thị dạng flex column dù CSS khác override */ .mobile-nav__list { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; } .mobile-nav__list li { display: block !important; width: 100%; } .mobile-nav__list a { visibility: visible !important; opacity: 1 !important; color: var(--c-text) !important; } /* ========================================================================== 7. HERO ========================================================================== */ .hero { padding-block: clamp(3rem, 7vw, 6rem); background: var(--c-bg); overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .hero__text { max-width: 540px; } .hero__trust { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(245, 180, 0, 0.1); border: 1px solid rgba(245, 180, 0, 0.25); border-radius: 99px; margin-bottom: var(--sp-4); font-size: var(--fs-sm); } .hero__trust__star { color: var(--c-star); letter-spacing: 1px; font-size: 13px; } .hero__trust__text { color: var(--c-brand-dark); font-weight: 500; } .hero__title { font-family: var(--ff-serif); font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--sp-3); color: var(--c-text); } .hero__tagline { font-family: var(--ff-serif); font-style: italic; font-size: var(--fs-lg); color: var(--c-brand); margin: 0 0 var(--sp-5); } .hero__desc { font-size: var(--fs-md); color: var(--c-text-muted); margin: 0 0 var(--sp-6); max-width: 460px; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); } .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); max-width: 440px; } .hero__stat__num { font-family: var(--ff-serif); font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); color: var(--c-text); margin: 0; display: block; } .hero__stat__label { font-size: var(--fs-sm); color: var(--c-text-muted); } .hero__media { position: relative; } .hero__image { border-radius: var(--r-lg); box-shadow: var(--shadow-xl); transform: rotate(2deg); aspect-ratio: 4/3; object-fit: cover; width: 100%; } .hero__location { position: absolute; left: 20px; bottom: -24px; background: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); box-shadow: var(--shadow-md); min-width: 180px; } .hero__location__label { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0 0 4px; } .hero__location__value { font-weight: 600; color: var(--c-text); } /* ========================================================================== 8. CARDS ========================================================================== */ /* Product card */ .product-card { background: var(--c-bg-white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display: flex; flex-direction: column; height: 100%; } .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .product-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg-cream); } .product-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .product-card:hover .product-card__image { transform: scale(1.04); } .product-card__badge { position: absolute; top: var(--sp-3); right: var(--sp-3); background: rgba(255,255,255,0.95); color: var(--c-text); padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; } .product-card__badge--discount { background: var(--c-brand); color: #fff; top: -8px; right: var(--sp-4); } .product-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .product-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--c-text-muted); } .product-card__title { font-family: var(--ff-serif); font-size: var(--fs-lg); margin: 0; line-height: 1.3; } .product-card__desc { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; flex: 1; } .product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; } .product-card__price { font-size: var(--fs-md); font-weight: 600; color: var(--c-text); } .product-card__price-old { font-size: var(--fs-sm); color: var(--c-text-light); text-decoration: line-through; margin-right: 6px; } /* Combo card variant */ .combo-card { position: relative; padding-top: var(--sp-7); } .combo-card__icon { width: 56px; height: 56px; background: var(--c-bg-cream); border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); font-size: 28px; } .combo-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); } .combo-card__features li { display: flex; align-items: center; gap: 8px; color: var(--c-text); } .combo-card__features li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--c-brand); flex-shrink: 0; } .combo-card__price-block { margin-top: var(--sp-3); } /* Story card (Câu chuyện page) */ .story-card { background: var(--c-bg-white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display: flex; flex-direction: column; } .story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .story-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--c-bg-cream); } .story-card__media img { width: 100%; height: 100%; object-fit: cover; } .story-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); } .story-card__title { font-family: var(--ff-serif); font-size: var(--fs-lg); margin: 0; } .story-card__desc { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; } /* Blog card */ .blog-card { background: var(--c-bg-white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display: flex; flex-direction: column; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .blog-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; } .blog-card__cat { position: absolute; top: var(--sp-3); left: var(--sp-3); background: rgba(255,255,255,0.95); padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); } .blog-card__body { padding: var(--sp-5); } .blog-card__title { font-family: var(--ff-serif); font-size: var(--fs-lg); margin: 0 0 var(--sp-3); } .blog-card__excerpt { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0 0 var(--sp-4); } .blog-card__meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-text-light); } .blog-card__read { color: var(--c-brand); font-weight: 500; } /* Feature card (Nghệ thuật pha chế, Trải nghiệm chất, Phong cách riêng) */ .feature-card { background: var(--c-bg-white); border-radius: var(--r-lg); padding: var(--sp-6); text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .feature-card__icon { width: 56px; height: 56px; margin: 0 auto var(--sp-4); background: var(--c-bg-cream); border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; color: var(--c-brand); } .feature-card__title { font-family: var(--ff-serif); font-size: var(--fs-md); margin: 0 0 var(--sp-3); } .feature-card__desc { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; } /* Testimonial card */ .testimonial-card { background: var(--c-bg-white); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); position: relative; } .testimonial-card__stars { display: flex; gap: 2px; margin-bottom: var(--sp-3); } .testimonial-card__stars svg { width: 16px; height: 16px; } .testimonial-card__quote { font-size: var(--fs-sm); color: var(--c-text); margin: 0 0 var(--sp-4); line-height: 1.6; } .testimonial-card__author { display: flex; align-items: center; gap: var(--sp-3); } .testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-sm); flex-shrink: 0; } .testimonial-card__name { font-weight: 600; color: var(--c-text); font-size: var(--fs-sm); margin: 0; } .testimonial-card__role { font-size: var(--fs-xs); color: var(--c-text-muted); } .testimonial-card__deco { position: absolute; top: var(--sp-4); right: var(--sp-5); font-family: var(--ff-serif); font-size: 60px; color: var(--c-bg-cream); line-height: 1; user-select: none; } /* ========================================================================== 9. GRIDS ========================================================================== */ .grid { display: grid; gap: var(--sp-5); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== 10. MENU FILTER (Thực đơn) ========================================================================== */ .menu-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-6); } .menu-filter__btn { padding: 8px 22px; background: transparent; border: 1px solid var(--c-border); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--c-text-muted); transition: all var(--dur) var(--ease); } .menu-filter__btn:hover { border-color: var(--c-brand); color: var(--c-brand); } .menu-filter__btn.is-active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); } /* ========================================================================== 11. FEATURE BAR (Giá tốt nhất / Phục vụ nhanh / Ưu đãi mỗi ngày) ========================================================================== */ .feature-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-5); text-align: center; padding-top: var(--sp-5); } .feature-bar__item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); } .feature-bar__icon { color: var(--c-brand); } .feature-bar__label { font-size: var(--fs-sm); color: var(--c-text-muted); } /* ========================================================================== 12. ABOUT / STORY SECTION ========================================================================== */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .about-grid__image { border-radius: var(--r-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; box-shadow: var(--shadow-md); } .about-grid__title { font-family: var(--ff-serif); font-size: clamp(1.5rem, 2vw + 0.8rem, 2rem); margin: 0 0 var(--sp-4); } .about-grid p { color: var(--c-text-muted); margin-bottom: var(--sp-4); } .about-grid strong { color: var(--c-text); } .about-badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); } .about-badge { background: var(--c-bg-white); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); } .about-badge__title { font-family: var(--ff-serif); font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--sp-1); } .about-badge__desc { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; } .about-highlight { background: var(--c-brand-dark); color: #fff; border-radius: var(--r-lg); padding: clamp(2rem, 4vw, 3rem); text-align: center; margin-top: var(--sp-6); } .about-highlight h3 { color: #fff; font-family: var(--ff-serif); font-size: var(--fs-2xl); margin: 0 0 var(--sp-4); } .about-highlight p { color: rgba(255,255,255,0.85); margin: 0; max-width: 680px; margin-inline: auto; } /* ========================================================================== 13. RATING SUMMARY BOX (4.8/5) ========================================================================== */ .rating-summary { background: var(--c-bg-beige); border-radius: var(--r-lg); padding: var(--sp-6); text-align: center; margin-top: var(--sp-7); } .rating-summary__score { font-family: var(--ff-serif); font-size: clamp(2rem, 3vw + 1rem, 3rem); color: var(--c-text); display: inline-flex; align-items: baseline; gap: 6px; } .rating-summary__score svg { width: 28px; height: 28px; } .rating-summary__total { font-size: var(--fs-md); color: var(--c-text-muted); } .rating-summary__desc { color: var(--c-text-muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-3); } .rating-summary__breakdown { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-text-muted); } .rating-summary__breakdown span { display: inline-flex; gap: 4px; align-items: center; } .rating-summary__breakdown svg { width: 12px; height: 12px; } /* ========================================================================== 14. CTA BOX ========================================================================== */ .cta-box { background: var(--c-bg-beige); border-radius: var(--r-lg); padding: clamp(2rem, 5vw, 4rem); text-align: center; } .cta-box__title { font-family: var(--ff-serif); font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); } .cta-box__desc { color: var(--c-text-muted); margin: 0 0 var(--sp-5); max-width: 540px; margin-inline: auto; } /* ========================================================================== 15. CUSTOMIZATION INFO BAR (Tuỳ chỉnh theo ý bạn) ========================================================================== */ .customize-info { background: var(--c-bg-cream); border-radius: var(--r-lg); padding: var(--sp-5); text-align: center; margin-top: var(--sp-6); } .customize-info__title { font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-2); display: inline-flex; align-items: center; gap: 6px; } .customize-info__desc { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; } .customize-info__desc strong { color: var(--c-brand); } /* ========================================================================== 16. POLICY PAGE (3.pdf) ========================================================================== */ .policy-page { padding-block: clamp(3rem, 6vw, 5rem); } .policy-page__title { font-family: var(--ff-serif); font-size: var(--fs-3xl); text-align: center; margin: 0 0 var(--sp-3); } .policy-page__update { text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-7); } .policy-card { background: var(--c-bg-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: var(--sp-5); max-width: 800px; margin-inline: auto; } .policy-card__title { font-family: var(--ff-serif); font-size: var(--fs-xl); margin: 0 0 var(--sp-4); } .policy-card ul { list-style: none; padding: 0; margin: 0; } .policy-card li { position: relative; padding-left: 24px; margin-bottom: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); } .policy-card li::before { content: ''; position: absolute; left: 6px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-brand); } .policy-card strong { color: var(--c-brand); } .policy-contact-box { background: var(--c-bg-cream); border-radius: var(--r-md); padding: var(--sp-5); margin-top: var(--sp-4); } .policy-contact-box h4 { font-family: var(--ff-serif); margin: 0 0 var(--sp-3); font-size: var(--fs-md); } .policy-contact-box ul li::before { display: none; } .policy-contact-box ul li { padding-left: 0; } .policy-agreement { background: var(--c-bg-beige); border-radius: var(--r-lg); padding: var(--sp-5); text-align: center; max-width: 800px; margin: var(--sp-6) auto 0; } .policy-agreement p { margin: 0 0 var(--sp-2); } .policy-agreement p:last-child { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; } /* ========================================================================== 17. STORIES PAGE (2.pdf) ========================================================================== */ .stories-page { padding-block: clamp(3rem, 6vw, 5rem); } .stories-page__title { font-family: var(--ff-serif); font-size: var(--fs-3xl); text-align: center; margin: 0 0 var(--sp-3); } .stories-page__subtitle { text-align: center; color: var(--c-brand-light); font-size: var(--fs-md); margin-bottom: var(--sp-7); } .stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-5); } @media (min-width: 768px) { .stories-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== 18. FOOTER ========================================================================== */ .site-footer { background: var(--c-footer); color: var(--c-footer-light); padding: clamp(3rem, 6vw, 4rem) 0 var(--sp-4); margin-top: var(--sp-8); } .site-footer a { color: var(--c-footer-light); } .site-footer a:hover { color: #fff; } .footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(2rem, 4vw, 3rem); margin-bottom: var(--sp-6); } @media (min-width: 768px) { .footer-widgets--default { grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; } } .footer-brand { font-family: var(--ff-serif); color: #fff; font-size: var(--fs-xl); margin: 0 0 var(--sp-3); letter-spacing: 0.04em; } .footer-tagline { font-style: italic; margin: 0 0 var(--sp-3); } .footer-description { font-size: var(--fs-sm); margin-bottom: var(--sp-4); } .footer-widget__title { color: #fff; font-family: var(--ff-serif); font-size: var(--fs-md); margin: 0 0 var(--sp-4); } .footer-menu, .footer-contact, .footer-hours { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .footer-menu li a { font-size: var(--fs-sm); } .footer-contact li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); } .footer-contact svg { flex-shrink: 0; margin-top: 2px; } .footer-hours li { display: flex; justify-content: space-between; font-size: var(--fs-sm); } .footer-hours strong { color: #fff; font-weight: 500; } .footer-order { margin-top: var(--sp-5); } .footer-order__label { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); } .footer-order__buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .badge-order { padding: 6px 14px; background: rgba(255,255,255,0.08); border-radius: var(--r-pill); font-size: var(--fs-xs); color: #fff; transition: background-color var(--dur) var(--ease); } .badge-order:hover { background: rgba(255,255,255,0.16); } .social-icons { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); } .social-icon { width: 36px; height: 36px; border-radius: var(--r-pill); background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .social-icon svg { width: 16px; height: 16px; } .social-icon:hover { background: var(--c-brand); transform: translateY(-2px); color: #fff; } .site-footer__bottom { padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); } .copyright { margin: 0; } .footer-bottom-links { display: flex; list-style: none; gap: var(--sp-4); margin: 0; padding: 0; } /* ========================================================================== 19. SINGLE / PAGE CONTENT ========================================================================== */ .entry { max-width: 800px; margin: 0 auto; padding-block: clamp(2rem, 5vw, 4rem); } .entry-header { margin-bottom: var(--sp-6); text-align: center; } .entry-title { font-family: var(--ff-serif); font-size: var(--fs-3xl); margin: 0 0 var(--sp-3); } .entry-meta { color: var(--c-text-muted); font-size: var(--fs-sm); } .entry-thumbnail { margin-bottom: var(--sp-6); border-radius: var(--r-lg); overflow: hidden; } .entry-content { font-size: var(--fs-md); } .entry-content h2, .entry-content h3, .entry-content h4 { margin-top: var(--sp-6); } .entry-content p { margin-bottom: var(--sp-4); } .entry-content a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 4px; } .entry-content blockquote { border-left: 4px solid var(--c-brand); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); margin: var(--sp-5) 0; font-style: italic; color: var(--c-text-muted); font-family: var(--ff-serif); font-size: var(--fs-lg); } .entry-content img, .entry-content figure { margin: var(--sp-5) 0; border-radius: var(--r-md); overflow: hidden; } .entry-content code { background: var(--c-bg-cream); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } .entry-content pre { background: var(--c-bg-cream); padding: var(--sp-4); border-radius: var(--r-md); overflow-x: auto; } .entry-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); } .entry-tag { padding: 4px 12px; background: var(--c-bg-cream); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--c-text-muted); } /* Pagination */ .pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); flex-wrap: wrap; } .pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-sm); transition: all var(--dur) var(--ease); } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); } /* Comments */ .comments-area { max-width: 800px; margin: 0 auto; padding-block: var(--sp-7); } .comments-title { font-family: var(--ff-serif); font-size: var(--fs-xl); margin-bottom: var(--sp-5); } .comment-list { list-style: none; padding: 0; margin: 0 0 var(--sp-6); } .comment-body { padding: var(--sp-5); background: var(--c-bg-white); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: var(--sp-4); } .comment-author { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); } .comment-author .avatar { border-radius: 50%; } .comment-metadata { font-size: var(--fs-xs); color: var(--c-text-muted); } .comment-form { display: grid; gap: var(--sp-3); } .comment-form label { font-size: var(--fs-sm); font-weight: 500; display: block; margin-bottom: var(--sp-1); } .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; transition: border-color var(--dur) var(--ease); } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--c-brand); } /* ========================================================================== 20. 404 PAGE ========================================================================== */ .error-404 { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); max-width: 600px; margin: 0 auto; } .error-404__code { font-family: var(--ff-serif); font-size: clamp(5rem, 12vw, 9rem); color: var(--c-brand); line-height: 1; margin: 0 0 var(--sp-3); } .error-404__title { font-family: var(--ff-serif); font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); } .error-404__desc { color: var(--c-text-muted); margin-bottom: var(--sp-6); } /* ========================================================================== 21. SEARCH FORM ========================================================================== */ .search-form { display: flex; gap: var(--sp-2); max-width: 480px; margin: 0 auto; } .search-form .search-field { flex: 1; padding: 12px 18px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: #fff; } .search-form .search-field:focus { outline: none; border-color: var(--c-brand); } .search-form .search-submit { flex-shrink: 0; } /* ========================================================================== 22. BREADCRUMB ========================================================================== */ .breadcrumb { font-size: var(--fs-sm); color: var(--c-text-muted); display: flex; gap: 6px; align-items: center; margin-bottom: var(--sp-4); } .breadcrumb a:hover { color: var(--c-brand); } /* ========================================================================== 23. ANIMATIONS — keyframes + reveal classes ========================================================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } /* Reveal on scroll (toggled bằng JS) */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger delay */ .reveal[data-delay="1"] { transition-delay: 80ms; } .reveal[data-delay="2"] { transition-delay: 160ms; } .reveal[data-delay="3"] { transition-delay: 240ms; } .reveal[data-delay="4"] { transition-delay: 320ms; } .reveal[data-delay="5"] { transition-delay: 400ms; } .reveal[data-delay="6"] { transition-delay: 480ms; } /* Hero auto-animate trên load */ .hero__text > * { animation: fadeInUp 700ms var(--ease) both; } .hero__text > *:nth-child(1) { animation-delay: 100ms; } .hero__text > *:nth-child(2) { animation-delay: 200ms; } .hero__text > *:nth-child(3) { animation-delay: 300ms; } .hero__text > *:nth-child(4) { animation-delay: 400ms; } .hero__text > *:nth-child(5) { animation-delay: 500ms; } .hero__media { animation: fadeIn 900ms var(--ease) both 300ms; } /* ========================================================================== 24. RESPONSIVE — MOBILE / TABLET ========================================================================== */ /* Hamburger sớm hơn (1400px) vì menu tiếng Việt thường dài, tránh overflow xấu */ @media (max-width: 1400px) { .site-nav { display: none !important; } .menu-toggle { display: inline-flex !important; } } @media (max-width: 768px) { .hero__inner { grid-template-columns: 1fr; } .hero__media { order: -1; } .hero__image { transform: rotate(0); } .hero__stats { max-width: 100%; } .about-grid { grid-template-columns: 1fr; } .about-grid__image { order: -1; } .site-footer__bottom { flex-direction: column; text-align: center; } .footer-bottom-links { justify-content: center; } } @media (max-width: 480px) { :root { --gutter: 1rem; } .site-header__inner { min-height: 64px; } .mobile-nav { inset-block-start: 64px; } .btn { padding: 10px 22px; font-size: var(--fs-sm); } .hero__cta .btn { flex: 1; } .product-card__body { padding: var(--sp-4); } } /* ========================================================================== 25. ELEMENTOR / GUTENBERG COMPAT ========================================================================== */ /* Cho phép Elementor full-width section */ .elementor-section.elementor-section-full_width, .elementor-section.elementor-section-stretched { max-width: 100%; } /* Gutenberg alignment */ .alignwide { max-width: var(--container); margin-left: auto; margin-right: auto; } .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .wp-block-image img { border-radius: var(--r-md); } .wp-block-button__link { background: var(--c-brand); color: #fff; border-radius: var(--r-pill); padding: 12px 28px; } .wp-block-button__link:hover { background: var(--c-brand-dark); } .wp-block-quote { border-left: 4px solid var(--c-brand); padding-left: var(--sp-5); font-style: italic; color: var(--c-text-muted); } /* ========================================================================== 26. MOBILE OPTIMIZATIONS — bổ sung ========================================================================== */ /* Tablet 768px↓ */ @media (max-width: 768px) { .section { padding-block: clamp(2.5rem, 6vw, 4rem); } .section-header { margin-bottom: var(--sp-5); } .section-header__title { font-size: clamp(1.75rem, 6vw, 2.5rem); } .section-header__subtitle { font-size: var(--fs-sm); } /* Hero — text căn giữa trên mobile */ .hero { padding-block: clamp(2rem, 6vw, 4rem); } .hero__text { max-width: 100%; text-align: center; } .hero__desc { margin-inline: auto; } .hero__cta { justify-content: center; } .hero__stats { max-width: 100%; gap: var(--sp-3); } .hero__stat__num { font-size: 1.5rem; } .hero__stat__label { font-size: var(--fs-xs); } .hero__image { transform: rotate(0); aspect-ratio: 4/3; } .hero__location { left: 50%; transform: translateX(-50%); min-width: auto; padding: 10px 16px; } /* Product cards bự hơn cho dễ tap */ .product-card__body { padding: var(--sp-4); gap: var(--sp-2); } .product-card__title { font-size: var(--fs-md); } .product-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; } .product-card__footer { gap: var(--sp-2); flex-wrap: wrap; } .product-card__price { font-size: var(--fs-md); } /* Combo cards stack icon + content */ .combo-card { padding-top: var(--sp-5); } .combo-card__icon { width: 48px; height: 48px; font-size: 24px; } /* Menu filter scroll ngang được */ .menu-filter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-bottom: 8px; scrollbar-width: none; } .menu-filter::-webkit-scrollbar { display: none; } .menu-filter__btn { flex-shrink: 0; } /* Grid 4 cột → 2 cột trên mobile */ .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } /* About: tăng spacing, image cao hơn */ .about-grid { gap: var(--sp-5); } .about-grid__image { aspect-ratio: 4/3; } .about-grid__title { font-size: var(--fs-2xl); text-align: center; } .about-grid p { text-align: center; } .about-badges { grid-template-columns: 1fr 1fr; max-width: 400px; margin-inline: auto; } .about-highlight { padding: var(--sp-5); } .about-highlight h3 { font-size: var(--fs-xl); } /* Testimonial gọn */ .testimonial-card { padding: var(--sp-4); } .testimonial-card__quote { font-size: 13px; } /* Rating summary thu nhỏ */ .rating-summary { padding: var(--sp-5); } .rating-summary__score { font-size: 2rem; } .rating-summary__breakdown { font-size: 11px; gap: var(--sp-2); } /* Customize info */ .customize-info { padding: var(--sp-4); } .customize-info__desc { font-size: 12px; } /* Feature bar 1 dòng trên mobile, scroll ngang */ .feature-bar { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: var(--sp-4); justify-content: flex-start; scrollbar-width: none; } .feature-bar::-webkit-scrollbar { display: none; } .feature-bar__item { flex-shrink: 0; min-width: 100px; } /* Footer columns stack cleanly */ .site-footer { padding-top: clamp(2rem, 5vw, 3rem); } .footer-widgets--default { grid-template-columns: 1fr; text-align: center; } .footer-widgets__col .social-icons, .footer-widgets__col .footer-order__buttons { justify-content: center; } .footer-contact li, .footer-hours li { justify-content: center; flex-wrap: wrap; } .footer-bottom-links { justify-content: center; gap: var(--sp-3); } /* Story / Blog cards — text dễ đọc */ .story-card__body, .blog-card__body { padding: var(--sp-4); } .story-card__title, .blog-card__title { font-size: var(--fs-md); } /* Policy page */ .policy-card { padding: var(--sp-4); } .policy-card__title { font-size: var(--fs-lg); } .policy-card li { font-size: 13px; } /* Entry / single post */ .entry { padding-block: clamp(1.5rem, 4vw, 3rem); } .entry-title { font-size: clamp(1.5rem, 6vw, 2rem); } .entry-content { font-size: var(--fs-base); } .entry-content blockquote { padding-left: var(--sp-4); font-size: var(--fs-md); } } /* Phone 480px↓ */ @media (max-width: 480px) { :root { --gutter: 12px; } /* Header */ .site-header__inner { min-height: 60px; gap: var(--sp-2); } .site-title { font-size: 1.125rem; letter-spacing: 0.04em; } .cart-icon { width: 36px; height: 36px; } /* Hero compact */ .hero__title { font-size: clamp(2.25rem, 11vw, 3rem); } .hero__tagline { font-size: var(--fs-base); } .hero__desc { font-size: var(--fs-sm); } .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { width: 100%; } .hero__stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); } /* Section title nhỏ hơn */ .section-header__title { font-size: clamp(1.5rem, 7vw, 2rem); } /* Grid 2 → 1 cột rất nhỏ */ .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } /* Combo cards full width */ .combo-card__features li { font-size: 13px; } /* Touch target larger */ .btn { min-height: 44px; padding: 12px 22px; } .btn--sm { min-height: 40px; padding: 10px 18px; font-size: 13px; } /* Story / blog cards: image vuông hơn */ .story-card__media, .blog-card__media { aspect-ratio: 16/12; } /* About badges 1 cột */ .about-badges { grid-template-columns: 1fr; } .about-badge { padding: var(--sp-3); } /* CTA box gọn */ .cta-box { padding: var(--sp-5) var(--sp-4); } .cta-box__title { font-size: var(--fs-xl); } /* Mobile nav full screen */ .mobile-nav__inner { padding: var(--sp-4); } .mobile-nav__list a { padding: var(--sp-4) 0; font-size: var(--fs-lg); } /* Testimonial deco mark */ .testimonial-card__deco { font-size: 40px; top: var(--sp-3); right: var(--sp-3); } /* Pagination */ .pagination .page-numbers { min-width: 40px; height: 40px; font-size: 13px; } } /* Phone rất nhỏ 360px↓ */ @media (max-width: 360px) { .hero__stats { grid-template-columns: 1fr 1fr; } .hero__stats .hero__stat:last-child { grid-column: 1 / -1; } .grid-4 { grid-template-columns: 1fr; } } /* Landscape phone */ @media (max-height: 480px) and (orientation: landscape) { .hero { padding-block: var(--sp-4); } .section { padding-block: var(--sp-5); } } /* iOS Safari notch */ @supports (padding: max(0px)) { .site-header__inner { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .site-footer { padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom)); } } /* ========================================================================== 27. FLOATING QUICK CONTACT (Zalo / Phone / Top) ========================================================================== */ .floating-contact { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: center; } .fc-btn { position: relative; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.18); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); cursor: pointer; border: 0; text-decoration: none; } .fc-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); color: #fff; } .fc-btn:active { transform: scale(0.95); } .fc-btn--zalo { background: #0084ff; } .fc-btn--phone { background: #4D9A6F; } .fc-btn--messenger { background: linear-gradient(135deg, #0084ff, #00d4ff); } .fc-btn--top { background: var(--c-brand); opacity: 0; pointer-events: none; transform: scale(0.5); transition: opacity 220ms, transform 220ms, background 220ms; } .fc-btn--top.is-visible { opacity: 1; pointer-events: auto; transform: scale(1); } .fc-btn__label { position: absolute; right: 58px; background: rgba(44,24,16,0.92); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 99px; white-space: nowrap; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 200ms, transform 200ms; font-family: var(--ff-sans); } .fc-btn:hover .fc-btn__label { opacity: 1; transform: translateX(0); } /* Pulse animation cho Zalo + Phone */ .fc-btn__pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 rgba(0,132,255,0.5); animation: fc-pulse 2.4s infinite; } .fc-btn--phone .fc-btn__pulse { box-shadow: 0 0 0 0 rgba(77,154,111,0.5); animation-delay: 0.6s; } @keyframes fc-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,132,255,0.45); } 70% { box-shadow: 0 0 0 14px rgba(0,132,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,132,255,0); } } @media (max-width: 480px) { .floating-contact { right: 12px; bottom: 12px; gap: 8px; } .fc-btn { width: 44px; height: 44px; } .fc-btn__label { display: none; } } /* ========================================================================== 28. POLISH — Product cards, hover, badges, animations ========================================================================== */ /* Sale badge highlight */ .product-card__badge--discount { background: linear-gradient(135deg, #C44545, #A23838); color: #fff; font-weight: 700; padding: 4px 12px; box-shadow: 0 2px 8px rgba(196, 69, 69, 0.3); } .product-card__badge--new { background: linear-gradient(135deg, #4D9A6F, #3D7A57); color: #fff; } .product-card__badge--hot { background: linear-gradient(135deg, #F5B400, #E09500); color: #fff; } /* Hover overlay với "Xem nhanh" */ .product-card__media { position: relative; } .product-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.18), transparent 50%); opacity: 0; transition: opacity 250ms var(--ease); pointer-events: none; } .product-card:hover .product-card__media::after { opacity: 1; } /* Polish button "Thêm vào giỏ" */ .product-card__footer .btn[data-ad-add-cart] { transition: all 200ms var(--ease); } .product-card__footer .btn[data-ad-add-cart]:hover { transform: scale(1.04); } .product-card__footer .btn[data-ad-add-cart]:active { transform: scale(0.96); } /* Loading skeleton placeholder cho image */ .product-card__media:not(:has(img)):not(:has(.product-card__image)) { background: linear-gradient(110deg, var(--c-bg-cream) 8%, var(--c-bg-beige) 18%, var(--c-bg-cream) 33%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Heading better spacing */ .section-header { padding-top: var(--sp-4); } .section-header__badge { box-shadow: 0 1px 3px rgba(139, 107, 71, 0.08); } /* Sticky "Đặt ngay" trên mobile single product */ @media (max-width: 768px) { .single-product__body button[data-ad-add-cart] { position: fixed; bottom: 78px; left: 12px; right: 12px; z-index: 50; border-radius: 12px; box-shadow: 0 8px 24px rgba(139,107,71,0.3); justify-content: center; font-size: 16px; } body.single-product { padding-bottom: 80px; } } /* Smooth scroll offset cho anchor */ [id] { scroll-margin-top: 90px; } /* ========================================================================== 29. PRINT ========================================================================== */ @media print { .site-header, .site-footer, .menu-toggle, .btn { display: none !important; } body { color: #000; background: #fff; } a::after { content: " (" attr(href) ")"; font-size: 0.85em; } }