@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:optional;src:url(fonts/be-vietnam-400-vi.woff2?v=dc085e2fba34) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:optional;src:url(fonts/be-vietnam-400-latin.woff2?v=03d1b589cff1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:optional;src:url(fonts/be-vietnam-700-vi.woff2?v=4f58af2d1c3e) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:optional;src:url(fonts/be-vietnam-700-latin.woff2?v=a193dd87699b) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root { --brand-50: #f0f9ff; --brand-100: #e0f2fe; --brand-200: #bae6fd; --brand-500: #0ea5e9; --brand-600: #0284c7; --brand-700: #0369a1; --brand-900: #0c4a6e; --brand-950: #082f49; --green-50: #f0fdf4; --green-100: #dcfce7; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534; --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 10px 25px rgba(0,0,0,0.1); --font-heading: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Be Vietnam Pro', -apple-system, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; scroll-padding-top: 76px; font-size: 16px; } body { font-family: var(--font-body); color: var(--slate-800); background-color: #ffffff; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { body { padding-bottom: 0; } } img, picture { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; } .container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; } @media (min-width: 768px) { .container { padding: 0 24px; } } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--slate-900); line-height: 1.3; } section { padding: 48px 0; } @media (min-width: 768px) { section { padding: 64px 0; } } .section-header { text-align: center; max-width: 760px; margin: 0 auto 36px; } .section-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; background: var(--brand-100); color: var(--brand-700); } .section-tag.green { background: var(--green-100); color: var(--green-800); } .section-tag.amber { background: var(--amber-100); color: var(--amber-700); } .section-header h2 { font-size: 1.65rem; margin-bottom: 10px; font-weight: 800; } @media (min-width: 768px) { .section-header h2 { font-size: 2.1rem; } } .section-header p { font-size: 0.95rem; color: var(--slate-600); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 0.98rem; padding: 13px 24px; border-radius: var(--radius-md); cursor: pointer; border: none; transition: background .2s, transform .2s, box-shadow .2s; text-align: center; } .btn-green { background: var(--green-700); color: #ffffff; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25); } .btn-green:hover { background: var(--green-700); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35); } .btn-secondary { background: var(--slate-100); color: var(--slate-700); border: 1px solid var(--slate-200); } .btn-secondary:hover { background: var(--slate-200); color: var(--slate-900); } .icon-svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .topbar { background: var(--brand-950); color: #e2e8f0; font-size: 0.82rem; padding: 7px 0; text-align: center; font-weight: 600; } .topbar span.highlight { color: #fde047; font-weight: 700; } .nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; } .logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--slate-900); } .logo-badge { width: 32px; height: 32px; background: var(--brand-700); color: #fff; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 0.9rem; } .nav-menu { display: none; list-style: none; gap: 14px; } @media (min-width: 1100px) { .nav-menu { display: flex; align-items: center; } } .nav-menu a { font-size: 0.82rem; font-weight: 600; color: var(--slate-700); transition: color .2s; } .nav-menu a:hover { color: var(--brand-600); } .nav-cta { padding: 9px 18px; font-size: 0.88rem; flex-shrink: 0; white-space: nowrap; } @media (max-width: 479px) { .logo { gap: 6px; font-size: .94rem; } .logo-badge { flex-shrink: 0; } .nav-cta { padding: 10px 12px; font-size: .8rem; } .nav-cta .icon-svg { display: none; } } .hero { background: linear-gradient(180deg, var(--brand-50) 0%, #ffffff 100%); padding: 24px 0 36px; border-bottom: 1px solid var(--slate-200); } @media (min-width: 768px) { .hero { padding: 44px 0 54px; } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "media" "details"; gap: 18px; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "intro media" "details media"; column-gap: 40px; row-gap: 14px; } .hero-intro { align-self: end; } .hero-details { align-self: start; } } .hero-intro { grid-area: intro; min-width: 0; } .hero-details { grid-area: details; min-width: 0; } .hero-intro h1 { font-size: 1.75rem; font-weight: 800; color: var(--slate-900); margin-bottom: 12px; line-height: 1.25; } @media (min-width: 768px) { .hero-intro h1 { font-size: 2.3rem; } } .hero-intro h1 span.brand-hl { color: var(--brand-600); display: inline-block; white-space: nowrap; } .hero-mobile-prices { display: none; } @media (max-width: 899px) { .hero-mobile-prices { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 10px; font-size: .76rem; font-weight: 700; color: var(--green-800); } .hero-mobile-prices a { text-decoration: underline; text-underline-offset: 3px; } .hero { padding-top: 16px; } .hero-intro .section-tag { margin-bottom: 6px; font-size: .7rem; } .hero-intro h1 { margin: 0; font-size: clamp(1.3rem, 5.6vw, 1.85rem); } } .hero-desc { font-size: 0.96rem; color: var(--slate-700); margin-bottom: 18px; line-height: 1.6; } .hero-ratio-box { background: var(--green-50); border: 1.5px solid var(--green-600); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; } .hero-ratio-icon { width: 40px; height: 40px; background: var(--green-600); color: #fff; border-radius: 8px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; } .hero-ratio-text strong { display: block; color: var(--green-800); font-size: 0.98rem; font-weight: 800; } .hero-ratio-text span { font-size: 0.85rem; color: var(--slate-600); font-weight: 500; } .hero-bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .hero-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--slate-800); } .bullet-check { color: var(--green-600); margin-top: 3px; } .hero-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } @media (min-width: 480px) { .hero-actions { flex-direction: row; align-items: center; flex-wrap: wrap; } } .hero-actions .btn { white-space: nowrap; font-size: .9rem; padding: 13px 18px; } .hero-trust-bar { display: flex; flex-wrap: wrap; gap: 14px 20px; font-size: 0.82rem; color: var(--slate-600); font-weight: 600; padding-top: 12px; border-top: 1px solid var(--slate-200); } .hero-trust-bar span { display: flex; align-items: center; gap: 6px; } .hero-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .hero-offer { position: relative; min-width: 0; padding: 16px 12px; border: 2px solid var(--green-600); border-radius: 14px; background: var(--green-50); } .hero-offer--farm { border-color: var(--amber-600); background: var(--amber-50); } .offer-kicker { display: block; color: var(--green-800); font-size: .72rem; font-weight: 700; margin-bottom: 7px; } .hero-offer--farm .offer-kicker { color: #92400e; } .hero-offer h2 { font-size: clamp(1.1rem, 2vw, 1.4rem); } .hero-offer h2 span, .gift-highlight { color: #b91c1c; } .offer-price { display: block; font-size: clamp(1.3rem, 2.5vw, 1.65rem); letter-spacing: -.6px; color: var(--green-800); margin: 6px 0 3px; white-space: nowrap; } .hero-offer--farm .offer-price { color: #9a3412; } .hero-offer p { color: var(--slate-700); font-size: .76rem; line-height: 1.5; min-height: 36px; margin-bottom: 12px; } .hero-offer .btn { width: 100%; min-height: 44px; font-size: .8rem; padding: 10px 5px; white-space: nowrap; } .btn-offer { background: #c2410c; color: #fff; } .btn-offer:hover { background: #9a3412; } .attention-cta { animation: offer-nudge 1.2s ease-in-out 2; } .attention-cta:hover, .attention-cta:focus-visible { animation: none; } .btn:focus-visible, .mobile-btn-buy:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 4px; } @keyframes offer-nudge { 0%, 60%, 100% { transform: translateY(0); } 72% { transform: translateY(-3px); } 84% { transform: translateY(0); } } .hero-offer::after, .price-box.offer-highlight::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 5px rgba(217,119,6,.22); pointer-events: none; opacity: 0; } .hero-offer.offer-in-view::after, .price-box.offer-highlight.offer-in-view::after { animation: offer-glow 1.2s ease-in-out 2; } @keyframes offer-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .hero-offer, .attention-cta { animation-play-state: paused; } .hero-offer.offer-in-view, .attention-cta.offer-in-view { animation-play-state: running; } @media (max-width: 359px) { .hero-offers { grid-template-columns: 1fr; } .hero-offer p { min-height: 0; } } .hero > .container { max-width: 1240px; } .hero-video { grid-area: media; min-width: 0; width: 100%; max-width: 440px; margin: 0 auto; } .hero-video-stage { position: relative; width: min(100%, 380px, 44vh); width: min(100%, 380px, 44svh); aspect-ratio: 9/16; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #0f172a; box-shadow: 0 10px 28px rgba(8,47,73,.18); } .hero-video-stage video { display: block; width: 100%; height: 100%; object-fit: contain; } .hero-video-caption { margin-top: 10px; text-align: center; } .hero-video-caption strong { display: block; color: var(--brand-950); font-size: .9rem; } .hero-video-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .hero-video-toolbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 24px 10px 10px; background: linear-gradient(transparent,rgba(0,0,0,.8)); pointer-events: none; } .video-timeline { display: flex; flex: 0 0 100%; align-items: center; gap: 8px; min-width: 0; color: #fff; } .video-timeline[hidden] { display: none; } .video-time { flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; } .video-seek { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; touch-action: pan-y; } .video-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right,#fff var(--seek-progress,0%),rgba(255,255,255,.4) var(--seek-progress,0%)); } .video-seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.4); } .video-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: #fff; } .video-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .video-seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .video-seek:disabled { opacity: .5; cursor: default; } .video-seek:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; } .video-control { min-width: 44px; width: 44px; min-height: 44px; padding: 10px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(15,23,42,.85); color: #fff; cursor: pointer; pointer-events: auto; } .video-control--fullscreen { margin-left: auto; } .video-control svg { display: block; margin: auto; width: 22px; height: 22px; } .video-icon-on, .video-icon-pause { display: none; } [aria-pressed="true"] .video-icon-on, [data-playing="true"] .video-icon-pause { display: block; } [aria-pressed="true"] .video-icon-off, [data-playing="true"] .video-icon-play { display: none; } .hero-video-stage video:fullscreen { object-fit: contain; background: #000; } .video-control--sound { background: rgba(15,23,42,.85); } .video-control:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; } .video-control[hidden] { display: none; } @media (max-width: 899px) { .hero-video-stage { width: min(100%, 340px, 42vh); width: min(100%, 340px, 42svh); } .hero-video-caption { margin-top: 8px; } } .trust-section { background: #ffffff; border-bottom: 1px solid var(--slate-200); } .trust-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .trust-card { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; } .trust-icon-box { width: 44px; height: 44px; background: var(--brand-100); color: var(--brand-700); border-radius: 10px; display: grid; place-items: center; margin-bottom: 4px; } .trust-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--slate-900); } .trust-card p { font-size: 0.88rem; color: var(--slate-600); line-height: 1.55; } .comp-section { background: var(--slate-50); border-bottom: 1px solid var(--slate-200); } .comp-grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 920px; margin: 0 auto; } @media (min-width: 768px) { .comp-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } .comp-card { background: #ffffff; border-radius: var(--radius-lg); padding: 24px 20px; border: 1.5px solid var(--slate-200); display: flex; flex-direction: column; justify-content: space-between; } .comp-card.highlight { border-color: var(--green-600); box-shadow: 0 4px 18px rgba(22, 163, 74, 0.15); background: linear-gradient(180deg, #ffffff, var(--green-50)); } .comp-badge { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; display: inline-block; margin-bottom: 12px; width: fit-content; } .comp-card:not(.highlight) .comp-badge { background: #fee2e2; color: #991b1b; } .comp-card.highlight .comp-badge { background: var(--green-700); color: #fff; } .comp-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 14px; } .comp-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; flex-grow: 1; } .comp-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; line-height: 1.5; color: var(--slate-700); } .comp-price-box { border-top: 1px dashed var(--slate-300); padding-top: 14px; text-align: center; } .comp-price-label { font-size: 0.8rem; color: var(--slate-500); margin-bottom: 2px; } .comp-price-val { font-size: 1.45rem; font-weight: 800; } .comp-card:not(.highlight) .comp-price-val { color: #dc2626; } .comp-card.highlight .comp-price-val { color: var(--green-700); font-size: 1.65rem; } .benefits-section { background: #ffffff; border-bottom: 1px solid var(--slate-200); } .benefits-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .benefits-grid { grid-template-columns: 1fr 1fr; gap: 20px; } } .benefit-item { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: 22px 18px; display: flex; gap: 14px; } .benefit-icon { width: 44px; height: 44px; background: var(--brand-100); color: var(--brand-700); border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; } .benefit-info h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; color: var(--slate-900); } .benefit-info p { font-size: 0.88rem; color: var(--slate-600); line-height: 1.55; } .real-section { background: var(--brand-50); border-bottom: 1px solid var(--slate-200); } .how-steps-bar { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; } @media (min-width: 768px) { .how-steps-bar { grid-template-columns: repeat(3, 1fr); gap: 18px; } } .step-item { background: #ffffff; border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: 18px 16px; box-shadow: var(--shadow-sm); } .step-badge { display: inline-block; background: var(--brand-700); color: #ffffff; font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; margin-bottom: 8px; } .step-item h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 4px; color: var(--slate-900); } .step-item p { font-size: 0.85rem; color: var(--slate-600); line-height: 1.5; } .gallery-grid-unified { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .gallery-grid-unified { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .gallery-grid-unified { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .gallery-card { background: #ffffff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .gallery-card-img { aspect-ratio: 3/4; position: relative; background: #e2e8f0; overflow: hidden; } .gallery-card-img picture { height: 100%; } .gallery-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .gallery-portraits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; } .gallery-portraits .gallery-card { min-width: 0; } .gallery-portraits-hint { display: none; } .gallery-card-img--portrait { aspect-ratio: 4/5; background: #e9eff3; } .gallery-photo-link { display: block; height: 100%; position: relative; } .gallery-card-img--portrait picture { height: 100%; } .gallery-card-img--portrait img { object-fit: contain; } .gallery-photo-link:focus-visible { outline: 3px solid var(--brand-600); outline-offset: -3px; } .gallery-photo-zoom { position: absolute; bottom: 10px; right: 10px; padding: 5px 10px; border-radius: 6px; color: #fff; background: rgba(15, 23, 42, .82); font-size: .75rem; pointer-events: none; } .gallery-portraits .gallery-card-tag { z-index: 1; pointer-events: none; } @media (max-width: 899px) { .gallery-portraits-hint { display: block; margin-bottom: 10px; font-size: .83rem; color: var(--slate-600); } .gallery-portraits { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 3px 2px 14px; } .gallery-portraits .gallery-card { scroll-snap-align: start; } } .photo-dialog { margin: auto; width: min(96vw, 860px); max-height: 94vh; max-height: 94dvh; padding: 12px; border: 0; border-radius: 14px; background: #0f172a; color: #fff; overflow: auto; } .photo-dialog::backdrop { background: rgba(2, 6, 23, .86); } .photo-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; } .photo-dialog-header p { font-size: .85rem; } .photo-dialog-close { min-width: 70px; min-height: 44px; border: 1px solid #64748b; border-radius: 8px; background: #1e293b; color: #fff; cursor: pointer; } .photo-dialog-close:focus-visible { outline: 3px solid #38bdf8; outline-offset: 2px; } .photo-dialog img { width: 100%; height: auto; max-height: 76vh; max-height: 76dvh; object-fit: contain; } .gallery-card-tag { position: absolute; top: 8px; left: 8px; background: rgba(15, 23, 42, 0.82); color: #ffffff; font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(4px); } .gallery-card-body { padding: 14px 16px; flex-grow: 1; } .gallery-card-body .gallery-card-tag { position: static; display: inline-block; margin-bottom: 8px; backdrop-filter: none; } .gallery-card-body h3 { font-size: 0.95rem; font-weight: 700; color: var(--slate-900); margin-bottom: 4px; } .gallery-card-body p { font-size: 0.83rem; color: var(--slate-600); line-height: 1.45; } .reviews-section { background: #ffffff; border-bottom: 1px solid var(--slate-200); } .reviews-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .review-box { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: 20px 18px; display: flex; flex-direction: column; justify-content: space-between; } .review-stars { color: #f59e0b; font-size: 0.95rem; margin-bottom: 8px; } .review-comment { font-size: 0.88rem; color: var(--slate-700); line-height: 1.6; margin-bottom: 14px; font-style: italic; } .review-case-badge { background: var(--brand-100); color: var(--brand-900); font-size: 0.75rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; margin-bottom: 12px; display: inline-block; } .review-user { display: flex; align-items: center; gap: 10px; border-top: 1px dashed var(--slate-200); padding-top: 12px; } .review-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--brand-500); } .review-user-info h3 { font-size: 0.9rem; font-weight: 700; color: var(--slate-900); } .review-user-info span { font-size: 0.78rem; color: var(--slate-500); } .pricing-section { background: var(--slate-50); border-bottom: 1px solid var(--slate-200); } .pricing-grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 980px; margin: 0 auto; } @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .price-box { background: #ffffff; border: 1.5px solid var(--slate-200); border-radius: var(--radius-lg); padding: 24px 18px; display: flex; flex-direction: column; position: relative; } .price-box.popular { border-color: var(--green-600); box-shadow: 0 6px 20px rgba(22, 163, 74, 0.15); } .price-badge-top { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--green-700); color: #ffffff; font-size: 0.72rem; font-weight: 800; padding: 3px 12px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; } .price-box h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 4px; } .price-box p.sub { font-size: 0.82rem; color: var(--slate-500); margin-bottom: 14px; } .price-tag { font-size: 1.7rem; font-weight: 800; color: var(--slate-900); margin-bottom: 4px; } .price-per-l { font-size: 0.82rem; color: var(--green-700); font-weight: 700; margin-bottom: 16px; } .price-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; flex-grow: 1; font-size: 0.86rem; color: var(--slate-700); } .price-features li { display: flex; align-items: center; gap: 8px; } .price-features li svg { color: var(--green-600); } .price-box.offer-highlight { border-width: 2px; background: var(--green-50); } .price-box.offer-highlight { animation-play-state: paused; } .price-box.offer-highlight.offer-in-view { animation-play-state: running; } .price-box.farm { border-color: var(--amber-600); background: var(--amber-50); } .price-box.farm .price-badge-top { background: #b45309; } .offer-highlight h3 { font-size: 1.65rem; margin-top: 8px; } .offer-highlight .price-tag { font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -.7px; } .price-box.farm .price-tag { color: #9a3412; } .offer-highlight .btn { font-size: .85rem; padding: 13px 8px; min-height: 48px; } @media (max-width: 767px) { .pricing-grid { gap: 28px; } .price-box.popular { order: -2; } .price-box.farm { order: -1; } } .order-section { background: #ffffff; } .order-wrapper { max-width: 680px; margin: 0 auto; background: var(--slate-50); border: 1.5px solid var(--slate-200); border-radius: var(--radius-lg); padding: 26px 20px; box-shadow: var(--shadow-sm); } @media (min-width: 600px) { .order-wrapper { padding: 36px 30px; } } .combo-selector { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .combo-option { background: #ffffff; border: 1.5px solid var(--slate-200); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: border-color .2s, background .2s; } .combo-option.selected { border-color: var(--green-600); background: var(--green-50); } .combo-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .combo-radio { width: 18px; height: 18px; accent-color: var(--green-600); } .combo-title { font-size: 0.92rem; font-weight: 700; color: var(--slate-900); } .combo-desc { font-size: 0.78rem; color: var(--slate-500); } .combo-price { font-size: 1rem; font-weight: 800; color: var(--green-700); text-align: right; } .combo-radio { flex-shrink: 0; } .combo-option { gap: 10px; } @media (max-width: 479px) { .combo-option { flex-wrap: wrap; } .combo-price { padding-left: 28px; text-align: left; } } .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 5px; color: var(--slate-800); } .form-control { width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--slate-300); border-radius: var(--radius-sm); font-size: 16px !important; background: #ffffff; color: var(--slate-900); transition: border-color .2s; } .form-control:focus { outline: none; border-color: var(--brand-600); } .form-row-2 { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 600px) { .form-row-2 { grid-template-columns: 1fr 1fr; } } .order-perks { list-style: none; margin: 16px 0 20px; display: flex; flex-direction: column; gap: 6px; font-size: 0.83rem; color: var(--slate-600); } .order-perks li { display: flex; align-items: center; gap: 6px; } .order-perks svg { color: var(--green-600); width: 16px; height: 16px; } .success-box { display: none; background: var(--green-50); border: 1.5px solid var(--green-600); border-radius: var(--radius-md); padding: 20px; text-align: center; margin-top: 16px; } .success-box h3 { color: var(--green-800); font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; } .success-box p { font-size: 0.88rem; color: var(--slate-700); } .faq-section { background: var(--slate-50); border-bottom: 1px solid var(--slate-200); } .faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { background: #ffffff; border: 1px solid var(--slate-200); border-radius: var(--radius-md); overflow: hidden; } .faq-item summary { padding: 14px 18px; font-weight: 700; font-size: 0.95rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; color: var(--slate-900); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.2rem; color: var(--slate-500); font-weight: 800; } .faq-item[open] summary::after { content: '−'; } .faq-answer { padding: 0 18px 16px; font-size: 0.88rem; color: var(--slate-600); line-height: 1.6; border-top: 1px solid var(--slate-100); } .footer { background: var(--slate-900); color: var(--slate-300); padding: 44px 0 24px; font-size: 0.86rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; } } .footer h2 { color: #ffffff; font-size: 1rem; font-weight: 700; margin-bottom: 12px; } .footer p { color: var(--slate-400); line-height: 1.6; margin-bottom: 8px; font-size: 0.84rem; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; } .footer-links a { color: var(--slate-400); transition: color .2s; } .footer-links a:hover { color: #ffffff; } .footer-bottom { border-top: 1px solid var(--slate-800); padding-top: 20px; text-align: center; color: var(--slate-500); font-size: 0.78rem; } .mobile-float-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; background: #ffffff; border-top: 1px solid var(--slate-200); box-shadow: 0 -2px 10px rgba(0,0,0,0.08); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; align-items: center; } @media (min-width: 768px) { .mobile-float-bar { display: none; } } .mobile-btn-call { flex: 1; height: 44px; background: var(--brand-700); color: #ffffff; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 0.88rem; } .mobile-btn-buy { flex: 2; height: 44px; background: var(--green-600); color: #ffffff; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 0.92rem; } .desktop-contact { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 90; flex-direction: column; gap: 12px; } @media (min-width: 768px) { .desktop-contact { display: flex; } } .float-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); color: #ffffff; transition: transform .2s; } .float-circle:hover { transform: scale(1.08); } .float-zalo { background: #0369a1; } .float-hotline { background: #15803d; } .form-control { font-size: 16px; min-width: 0; } .form-hint { font-size: .8rem; color: var(--slate-600); margin: 12px 0; } .form-hint a, .privacy-section a { color: var(--brand-700); text-decoration: underline; } .form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .order-summary { background: var(--green-50); border: 1px solid var(--green-700); border-radius: 10px; padding: 14px; color: var(--green-800); font-weight: 700; font-size: .9rem; } .form-error { padding: 12px; border: 1px solid #b91c1c; color: #991b1b; background: #fef2f2; border-radius: 8px; margin: 12px 0; } .form-error[hidden] { display: none; } button:disabled { opacity: .65; cursor: wait; } .privacy-section { padding: 32px 0; border-top: 1px solid var(--slate-200); } .privacy-section h2 { font-size: 1.15rem; margin-bottom: 12px; } .privacy-section p { font-size: .85rem; color: var(--slate-600); margin-top: 8px; } .form-control:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; } .hero-video { align-self: start; } .mobile-btn-buy { background: var(--green-700); } @media (max-width: 479px) { .container { padding-left: 14px; padding-right: 14px; } .logo > span > span { display: none; } .mobile-btn-call { flex: 0 0 88px; font-size: .75rem; } .mobile-btn-buy { font-size: .8rem; white-space: nowrap; } .order-wrapper { padding: 20px 14px; } .section-header { margin-bottom: 24px; } section { padding-top: 36px; padding-bottom: 36px; } .section-tag { font-size: .7rem; } } .mobile-menu { display: block; margin-left: auto; } .mobile-menu summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px; color: var(--brand-950); cursor: pointer; border: 1px solid var(--slate-200); border-radius: 8px; font-size: .8rem; font-weight: 700; list-style: none; } .mobile-menu summary::-webkit-details-marker { display: none; } .mobile-menu-links { list-style: none; position: absolute; top: calc(100% + 4px); left: 12px; right: 12px; padding: 8px; max-height: calc(100dvh - 150px); overflow: auto; background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; box-shadow: var(--shadow-lg); } .mobile-menu-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 6px; color: var(--slate-800); } .mobile-menu-links a:hover { background: var(--brand-50); } @media (min-width: 1100px) { .mobile-menu { display: none; } } @media (max-width: 479px) { .nav-inner { gap: 6px; } .nav-cta { padding: 10px 12px; font-size: .78rem; min-height: 44px; } .nav-cta .icon-svg, .mobile-menu summary span { display: none; } } :where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--brand-700); outline-offset: 3px; } .footer :where(a, button):focus-visible { outline-color: #7dd3fc; } input::placeholder { color: var(--slate-500); opacity: 1; } [id] { scroll-margin-top: 88px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .privacy-banner { position: fixed; z-index: 150; bottom: 16px; left: 16px; width: min(440px, calc(100% - 32px)); padding: 16px; background: #fff; border: 1px solid var(--slate-300); border-radius: 12px; box-shadow: 0 8px 32px #082f4930; font-size: .8rem; color: var(--slate-800); max-height: calc(100dvh - 170px); overflow: auto; } .privacy-banner[hidden], .privacy-choices[hidden] { display: none; } .privacy-banner p { margin: 0 0 10px; } .privacy-banner a { color: var(--brand-700); text-decoration: underline; } .privacy-actions { display: flex; gap: 8px; flex-wrap: wrap; } .privacy-banner button { min-height: 44px; padding: 8px 10px; border: 1px solid var(--brand-700); border-radius: 6px; color: var(--brand-950); background: var(--brand-50); cursor: pointer; font: inherit; font-weight: 700; } .privacy-choices { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--slate-200); } .privacy-choices label { display: flex; align-items: center; gap: 8px; min-height: 44px; } .privacy-choices input { width: 18px; height: 18px; accent-color: var(--brand-700); } @media (max-width: 767px) { .privacy-banner { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 12px 16px; background: #fff; color: var(--brand-950); border: 2px solid var(--brand-700); border-radius: 8px; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }