/* Fotoreto — website. Hệ thiết kế Gallery UI (bundle.css) + trang chủ (từ bản vẽ) + khung blog / chính sách. */

:root{--primary:#d0121b;--primary-focus:#e0343b;--primary-on-dark:#ff7a72;--ink:#1d1d1f;--on-dark:#fff;--body-muted:#cccccc;--ink-muted-80:#333333;--ink-muted-48:#7a7a7a;--divider-soft:#f0f0f0;--hairline:#e0e0e0;--hairline-soft:rgba(0,0,0,.08);--canvas:#fff;--canvas-parchment:#f5f5f7;--canvas-parchment-80:rgba(245,245,247,.8);--surface-pearl:#fafafc;--surface-tile-1:#2f3233;--surface-tile-2:#333738;--surface-tile-3:#2a2d2e;--surface-black:#000;--surface-chip-translucent:#d2d2d7;--chip-translucent-64:rgba(210,210,215,.64);--on-primary:#fff;--font-display:Geomanist,"Be Vietnam Pro",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;--font-text:Geomanist,"Be Vietnam Pro",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:17px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-section:80px;--radius-none:0;--radius-xs:5px;--radius-sm:8px;--radius-md:11px;--radius-lg:18px;--radius-pill:9999px;--radius-full:50%;--shadow-product:3px 5px 30px 0 rgba(0,0,0,.22);--size-global-nav:44px;--size-sub-nav:52px;--size-touch:44px;--blur-frosted:saturate(180%) blur(20px)}

a{color:#d0121b}a:hover{color:#a80e16}
.lp{font-family:var(--font-text);color:var(--ink);-webkit-font-smoothing:antialiased}
.lp h1,.lp h2,.lp h3,.lp p,.lp figure{margin:0}
.nav-links a{font-size:14px;letter-spacing:-0.224px}
.hero-title{font-family:var(--font-display);font-size:56px;font-weight:600;line-height:1.07;letter-spacing:-0.28px}
.shot{display:block;width:100%;height:auto;border-radius:18px 18px 0 0;box-shadow:var(--shadow-product)}
.shot-full{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-product)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--canvas-parchment);color:var(--ink)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.faq details{border-bottom:1px solid var(--hairline);padding:20px 0}
.faq summary{cursor:pointer;font-size:21px;font-weight:600;letter-spacing:0.231px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin-top:12px;font-size:17px;line-height:1.47;letter-spacing:-0.374px;color:var(--ink-muted-80);max-width:760px}
/* ---- trước / sau ---- */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pair figure{display:flex;flex-direction:column;gap:8px}
.pair img,.stack img{display:block;width:100%;height:auto;border-radius:11px}
.pair figcaption,.stack figcaption{font-size:14px;letter-spacing:-0.224px;color:#333333}
.stack{display:flex;flex-direction:column;gap:10px}
.stack figure{display:flex;flex-direction:column;gap:6px}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.bento .cell{border-radius:18px;background:#ffffff;padding:28px;display:flex;flex-direction:column;gap:18px}
.b-face{grid-column:1 / span 7}
.b-legs{grid-column:8 / span 5;grid-row:1 / span 2}
.b-brush{grid-column:1 / span 3;background:#2f3233 !important;color:#ffffff}
.b-hair{grid-column:4 / span 4}
.cell h3{font-size:21px;font-weight:600;letter-spacing:0.231px}
.cell p{font-size:17px;line-height:1.47;letter-spacing:-0.374px;color:#333333}
.b-brush p{color:#cccccc}
.tools{display:flex;gap:10px;flex-wrap:wrap}
.tools span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9999px;background:#333738;font-size:14px;letter-spacing:-0.224px;color:#ffffff}
.tools svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:9999px;background:rgba(255,255,255,.12)}
.seg button{height:40px;padding:0 20px;border:0;border-radius:9999px;font:inherit;font-size:15px;letter-spacing:-0.224px;cursor:pointer;background:transparent;color:#ffffff}
.seg button.on{background:#ffffff;color:#1d1d1f;font-weight:600}
.erase-img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-product)}
/* ---- so sánh ---- */
.cmp-wrap{overflow-x:auto;border-radius:18px;background:#ffffff}
.cmp{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;font-size:17px;line-height:1.47;letter-spacing:-0.374px;text-align:left}
.cmp th,.cmp td{padding:18px 22px;vertical-align:top}
.cmp thead th{font-size:17px;font-weight:600;padding-top:24px}
.cmp tbody th{font-weight:600;color:#1d1d1f;width:20%}
.cmp td{color:#333333}
.cmp tbody tr:nth-child(odd) th,.cmp tbody tr:nth-child(odd) td{background:#fafafc}
.cmp .me{background:rgba(208,18,27,.06) !important;color:#1d1d1f}
.cmp thead .me{color:#d0121b}
.fit{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:18px;background:#ffffff}
.fit h3{font-size:21px;font-weight:600;letter-spacing:0.231px}
.fit ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.fit li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.47;letter-spacing:-0.374px;color:#333333}
.fit li svg{flex:0 0 20px;width:20px;height:20px;margin-top:3px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fit .yes svg{color:#d0121b}
.fit .no svg{color:#7a7a7a}
/* ---- chuyển động: tắt hết khi người xem bật "giảm chuyển động" ---- */
.wave{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wv{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#e8e8ed}
.wv img{display:block;width:100%;height:100%;object-fit:cover}
.wv .ok{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;background:#d0121b;color:#fff;display:grid;place-items:center;opacity:1}
.wv .ok svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lang-tip{position:absolute;top:calc(100% + 12px);right:0;width:250px;padding:14px 16px 16px;border-radius:14px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(0,0,0,.08);color:#1d1d1f;text-align:left;z-index:20}
.lang-tip::before{content:'';position:absolute;top:-7px;right:96px;width:12px;height:12px;background:inherit;border-left:1px solid rgba(0,0,0,.08);border-top:1px solid rgba(0,0,0,.08);transform:rotate(45deg)}
.lang-tip button{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#333333;display:grid;place-items:center;cursor:pointer}
.lang-tip a.go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 14px;border-radius:9999px;background:#d0121b;color:#ffffff;text-decoration:none;font-size:14px;letter-spacing:-0.224px}
.sync-bar{height:6px;border-radius:9999px;background:#e0e0e0;overflow:hidden}
.sync-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3d3435,#d0121b);border-radius:9999px}
@media (prefers-reduced-motion:no-preference){
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:.35;transform:translateY(60px) scale(.94)}to{opacity:1;transform:none}}
@keyframes dev{0%,10%{filter:saturate(.3) brightness(.74) contrast(.82) sepia(.18)}22%,82%{filter:none}94%,100%{filter:saturate(.3) brightness(.74) contrast(.82) sepia(.18)}}
@keyframes okpop{0%,14%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1.12)}26%,82%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.6)}}
@keyframes fill{0%,8%{width:0}52%,82%{width:100%}94%,100%{width:0}}
@keyframes tipin{0%,40%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.lang-tip{animation:tipin 1.6s cubic-bezier(.2,.7,.2,1) both}
.lang-tip a.go svg{animation:nudge 1.4s ease-in-out 2s 3}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,90,82,.45)}70%,100%{box-shadow:0 0 0 22px rgba(255,90,82,0)}}
.ld{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.ld2{animation-delay:.1s}.ld3{animation-delay:.2s}.ld4{animation-delay:.32s}.ld5{animation:settle 1.2s cubic-bezier(.2,.7,.2,1) .4s both}
.wv img{animation:dev 10s ease-in-out infinite;animation-delay:calc(var(--i) * .32s)}
.wv .ok{animation:okpop 10s ease-in-out infinite;animation-delay:calc(var(--i) * .32s)}
.sync-bar i{animation:fill 10s ease-in-out infinite}
.bob{animation:bob 6s ease-in-out infinite}
.lock-ring{animation:ring 2.6s ease-out infinite}
.erase-img{animation:fadein .35s ease both}
.g-btn,.seg button{transition:transform .12s ease,background-color .2s ease}
.seg button:active{transform:scale(.98)}
@supports (animation-timeline: view()){
.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
.rv-img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
.g4>.rv:nth-child(4n+2),.g3>.rv:nth-child(3n+2){animation-range:entry 12% entry 62%}
.g4>.rv:nth-child(4n+3),.g3>.rv:nth-child(3n+3){animation-range:entry 19% entry 69%}
.g4>.rv:nth-child(4n+4){animation-range:entry 26% entry 76%}
}
}
@media (max-width:1068px){.hero-title{font-size:40px}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.b-face,.b-legs{grid-column:1 / -1;grid-row:auto}.b-brush{grid-column:1 / span 6}.b-hair{grid-column:7 / span 6}}
@media (max-width:833px){.wave{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-links{display:none!important}.g3,.g2{grid-template-columns:minmax(0,1fr)}.g-footer__cols{grid-template-columns:repeat(2,1fr)!important}.g-tile__title{font-size:32px!important}.g-tile__lead{font-size:21px!important}.b-brush,.b-hair{grid-column:1 / -1}}
@media (max-width:640px){.hero-title{font-size:34px}.g4{grid-template-columns:minmax(0,1fr)}.g-tile{padding-top:48px!important}.bento .cell{padding:20px}}

/* ---- Gallery UI: lớp thành phần ---- */
/* Gallery UI — component classes. Tokens only. */
.g-root, .g-root * { box-sizing: border-box; }
.g-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; cursor:pointer; text-decoration:none;
  font-family:var(--font-text); transition:transform .12s ease; white-space:nowrap; }
.g-btn:active, .g-btn.is-active { transform:scale(0.95); }
.g-btn:focus-visible, .g-btn.is-focus { outline:2px solid var(--primary-focus); outline-offset:2px; }
.g-btn--primary { background:var(--primary); color:var(--on-primary); border-radius:var(--radius-pill); padding:11px 22px;
  font-size:17px; line-height:1.47; letter-spacing:-0.374px; font-weight:400; }
.g-btn--secondary { background:transparent; color:var(--primary); border:1px solid var(--primary); border-radius:var(--radius-pill); padding:11px 22px;
  font-size:17px; line-height:1.47; letter-spacing:-0.374px; }
.g-btn--store { background:var(--primary); color:var(--on-primary); border-radius:var(--radius-pill); padding:14px 28px;
  font-size:18px; line-height:1; font-weight:300; }
.g-btn--utility { background:var(--ink); color:var(--on-dark); border-radius:var(--radius-sm); padding:8px 15px;
  font-size:14px; line-height:1.29; letter-spacing:-0.224px; }
.g-btn--pearl { background:var(--surface-pearl); color:var(--ink-muted-80); border:3px solid var(--divider-soft); border-radius:var(--radius-md);
  padding:8px 14px; font-size:14px; line-height:1.43; letter-spacing:-0.224px; }
.g-btn[disabled] { color:var(--ink-muted-48); cursor:default; }
.g-btn--primary.g-btn--sm { padding:6px 16px; font-size:14px; letter-spacing:-0.224px; line-height:1.29; }
.g-icon-btn { width:var(--size-touch); height:var(--size-touch); border-radius:var(--radius-full); border:0; background:var(--chip-translucent-64);
  color:var(--ink); display:inline-grid; place-items:center; cursor:pointer; transition:transform .12s ease; }
.g-icon-btn:active { transform:scale(0.95); }
.g-icon-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.g-link { color:var(--primary); text-decoration:none; font-family:var(--font-text); font-size:17px; line-height:1.47; letter-spacing:-0.374px; }
.g-link:hover { text-decoration:underline; }
.g-link--dark { color:var(--primary-on-dark); }

.g-nav { background:var(--surface-black); color:var(--on-dark); height:var(--size-global-nav); display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--space-lg); font-family:var(--font-text); font-size:12px; letter-spacing:-0.12px; }
.g-nav a { color:var(--on-dark); text-decoration:none; opacity:.88; }
.g-nav__links { display:flex; gap:20px; }
.g-nav__mark { width:14px; height:14px; border-radius:var(--radius-xs); background:var(--on-dark); opacity:.88; }
.g-subnav { background:var(--canvas-parchment-80); backdrop-filter:var(--blur-frosted); -webkit-backdrop-filter:var(--blur-frosted);
  height:var(--size-sub-nav); display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-lg);
  border-bottom:1px solid var(--hairline-soft); color:var(--ink); font-family:var(--font-text); }
.g-subnav__title { font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:0.231px; }
.g-subnav__links { display:flex; align-items:center; gap:var(--space-lg); font-size:14px; letter-spacing:-0.224px; }
.g-subnav__links a { color:var(--ink); text-decoration:none; }

.g-tile { text-align:center; padding:var(--space-section) var(--space-lg) 0; border-radius:var(--radius-none); overflow:hidden; font-family:var(--font-text); }
.g-tile--light { background:var(--canvas); color:var(--ink); }
.g-tile--parchment { background:var(--canvas-parchment); color:var(--ink); }
.g-tile--dark { background:var(--surface-tile-1); color:var(--on-dark); }
.g-tile--dark-2 { background:var(--surface-tile-2); color:var(--on-dark); }
.g-tile--dark-3 { background:var(--surface-tile-3); color:var(--on-dark); }
.g-tile__title { font-family:var(--font-display); font-size:40px; font-weight:600; line-height:1.1; margin:0; }
.g-tile__lead { font-family:var(--font-display); font-size:28px; font-weight:400; line-height:1.14; letter-spacing:0.196px; margin:6px 0 var(--space-md); }
.g-tile__ctas { display:flex; justify-content:center; gap:var(--space-sm); }
.g-tile__stage { height:140px; display:flex; align-items:flex-end; justify-content:center; padding-top:var(--space-xxl); }
.g-render { width:220px; height:92px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:var(--surface-chip-translucent); box-shadow:var(--shadow-product); }
.g-tile--dark .g-render, .g-tile--dark-2 .g-render, .g-tile--dark-3 .g-render { background:var(--ink-muted-80); }

.g-card { background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:var(--space-lg);
  font-family:var(--font-text); color:var(--ink); display:flex; flex-direction:column; gap:var(--space-xxs); }
.g-card__img { aspect-ratio:1/1; border-radius:var(--radius-sm); background:var(--canvas-parchment); display:grid; place-items:center; margin-bottom:var(--space-sm); }
.g-card__img span { width:46%; height:46%; border-radius:var(--radius-lg); background:var(--surface-chip-translucent); box-shadow:var(--shadow-product); }
.g-card__name { font-size:17px; font-weight:600; line-height:1.24; letter-spacing:-0.374px; }
.g-card__price { font-size:17px; line-height:1.47; letter-spacing:-0.374px; }

.g-chip { display:inline-flex; align-items:center; gap:var(--space-xs); background:var(--canvas); color:var(--ink); border:1px solid var(--hairline);
  border-radius:var(--radius-pill); padding:12px 16px; font-family:var(--font-text); font-size:14px; line-height:1.43; letter-spacing:-0.224px; cursor:pointer; }
.g-chip.is-selected { border:2px solid var(--primary-focus); padding:11px 15px; }
.g-chip__dot { width:18px; height:18px; border-radius:var(--radius-full); }
.g-chip__delta { color:var(--ink-muted-80); }

.g-search { display:flex; align-items:center; gap:var(--space-xs); height:var(--size-touch); background:var(--canvas); border:1px solid var(--hairline-soft);
  border-radius:var(--radius-pill); padding:0 20px; color:var(--ink); font-family:var(--font-text); }
.g-search svg { width:14px; height:14px; stroke:var(--ink-muted-80); fill:none; stroke-width:2; flex:none; }
.g-search input { border:0; outline:0; background:transparent; font:inherit; font-size:17px; letter-spacing:-0.374px; color:var(--ink); width:100%; }
.g-search:focus-within { outline:2px solid var(--primary-focus); outline-offset:2px; }

.g-sticky { height:var(--size-sticky-bar); padding:12px var(--space-xl); display:flex; align-items:center; justify-content:space-between;
  background:var(--canvas-parchment-80); backdrop-filter:var(--blur-frosted); -webkit-backdrop-filter:var(--blur-frosted);
  border-top:1px solid var(--hairline-soft); font-family:var(--font-text); font-size:17px; letter-spacing:-0.374px; color:var(--ink); }

.g-quote { background:var(--surface-tile-1); color:var(--on-dark); text-align:center; padding:var(--space-section) var(--space-lg); font-family:var(--font-text); }
.g-quote__mark { width:32px; height:32px; margin:0 auto var(--space-md); border-radius:var(--radius-full); border:2px solid var(--body-muted); }
.g-quote__title { font-family:var(--font-display); font-size:40px; font-weight:600; line-height:1.1; margin:0 0 var(--space-lg); }

.g-footer { background:var(--canvas-parchment); color:var(--ink-muted-80); padding:64px var(--space-lg); font-family:var(--font-text); }
.g-footer__cols { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-lg); padding-bottom:var(--space-lg); border-bottom:1px solid var(--hairline); }
.g-footer h4 { margin:0 0 var(--space-xs); font-size:14px; font-weight:600; line-height:1.29; letter-spacing:-0.224px; color:var(--ink); }
.g-footer ul { list-style:none; margin:0; padding:0; font-size:17px; line-height:2.41; }
.g-footer a { color:var(--ink-muted-80); text-decoration:none; }
.g-footer__legal { margin-top:var(--space-lg); font-size:12px; line-height:1; letter-spacing:-0.12px; color:var(--ink-muted-48); }

/* ===================== Khung website (thanh trên, chân trang, blog, chính sách) ===================== */
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-400.woff) format("woff")}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-600.woff) format("woff")}
html{scroll-padding-top:68px}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;border-radius:9999px;background:#fff;color:#1d1d1f}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px}
.site-nav{position:sticky;top:0;z-index:30;height:52px;padding:0 24px;background:rgba(35,37,38,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.site-nav .brand{display:flex;align-items:center;gap:10px;opacity:1}
.site-nav .brand img{width:28px;height:28px}
.site-nav .brand span{font-size:17px;font-weight:600;letter-spacing:-0.2px}
.site-nav .nav-links{gap:28px}
.site-nav .nav-links a[aria-current="page"]{opacity:1;font-weight:600}
.site-nav .right{display:flex;align-items:center;gap:16px}
.lang{position:relative;display:flex;align-items:center;gap:6px;font-size:14px}
.lang b{font-weight:600}.lang .sep{opacity:.5}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;color:#fff;place-items:center;cursor:pointer}
.menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mobile-menu{position:fixed;inset:52px 0 auto 0;z-index:29;background:rgba(35,37,38,.98);padding:8px 24px 20px;display:flex;flex-direction:column}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:14px 0;color:#fff;text-decoration:none;font-size:17px;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:833px){.menu-btn{display:grid}.site-nav .lang{display:none}}
.crumbs{max-width:1080px;margin:0 auto;padding:20px 24px 0;font-size:14px;color:#7a7a7a}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:#b0b0b5}
.crumbs a{color:#333;text-decoration:none}.crumbs a:hover{text-decoration:underline}
.page-head{max-width:1080px;margin:0 auto;padding:28px 24px 8px}
.page-head h1{margin:0;font-family:var(--font-display);font-size:48px;font-weight:600;line-height:1.08;letter-spacing:-0.3px}
.page-head p{margin:12px 0 0;max-width:760px;font-size:21px;line-height:1.4;color:#333}
@media (max-width:640px){.page-head h1{font-size:34px}.page-head p{font-size:18px}}
/* thẻ bài viết */
.cards{max-width:1080px;margin:0 auto;padding:32px 24px 80px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{display:flex;flex-direction:column;border-radius:18px;background:#fff;border:1px solid var(--hairline);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-product)}
.card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#333738,#832122 70%,#c4141c);display:grid;place-items:center}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .thumb .mark{width:56px;height:56px}
.card .body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px}
.card h2,.card h3{margin:0;font-size:21px;font-weight:600;line-height:1.25;letter-spacing:0.1px}
.card p{margin:0;font-size:15px;line-height:1.5;color:#333}
.card .meta{font-size:13px;color:#7a7a7a}
.lp .empty{max-width:1080px;margin:0 auto;padding:40px 24px 120px;font-size:19px;color:#333;box-sizing:border-box}
.pager{max-width:1080px;margin:-40px auto 0;padding:0 24px 80px;display:flex;justify-content:space-between;gap:16px}
.pager a{color:var(--primary);text-decoration:none;font-size:17px}
.latest{background:#fff;padding:80px 24px}
.latest .head{max-width:1080px;margin:0 auto;display:flex;align-items:end;justify-content:space-between;gap:16px;padding:0 24px}
.latest .head h2{margin:0;font-family:var(--font-display);font-size:40px;font-weight:600;line-height:1.1}
.latest .cards{padding-bottom:0}
/* bài viết, trang chính sách */
.article{max-width:1080px;margin:0 auto;padding:12px 24px 80px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start}
.article.no-toc{grid-template-columns:minmax(0,1fr)}
@media (max-width:960px){.article{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.article header h1{margin:0;font-family:var(--font-display);font-size:44px;font-weight:600;line-height:1.1;letter-spacing:-0.3px}
@media (max-width:640px){.article header h1{font-size:32px}}
.article header .meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:#7a7a7a}
.article header .meta a{color:var(--primary)}
.article .cover{margin:28px 0 0;border-radius:18px;overflow:hidden}
.article .cover img{display:block;width:100%;height:auto}
.prose{margin-top:28px;font-size:18px;line-height:1.7;color:#1d1d1f;max-width:720px}
.prose h2{margin:44px 0 12px;font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-0.1px}
.prose h3{margin:32px 0 8px;font-size:22px;line-height:1.3;font-weight:600}
.prose h4{margin:24px 0 6px;font-size:18px;font-weight:600}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose figure,.prose pre,.prose .table-wrap{margin:0 0 18px}
.prose ul,.prose ol{padding-left:24px}.prose li{margin:4px 0}
.prose a{color:var(--primary);text-underline-offset:3px}
.prose blockquote{padding:4px 0 4px 18px;border-left:3px solid var(--primary);color:#333}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:#f5f5f7;padding:2px 6px;border-radius:6px}
.prose pre{padding:16px 18px;border-radius:14px;background:#1d1d1f;color:#f5f5f7;overflow-x:auto}
.prose pre code{background:none;padding:0;color:inherit}
.prose figure img{display:block;width:100%;height:auto;border-radius:14px}
.prose figcaption{margin-top:8px;font-size:14px;color:#7a7a7a;text-align:center}
.prose hr{border:0;border-top:1px solid var(--hairline);margin:36px 0}
.prose .table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--hairline)}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hairline)}
.prose thead th{background:#f5f5f7;font-weight:600}
.toc{position:sticky;top:76px;padding:20px 22px;border-radius:18px;background:#f5f5f7;font-size:15px}
.toc b{display:block;margin-bottom:10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#7a7a7a}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.toc a{color:#333;text-decoration:none;line-height:1.35}.toc a:hover{color:var(--primary)}
.toc .l3{padding-left:12px;font-size:14px}
.post-cta{margin-top:40px;padding:28px;border-radius:18px;background:linear-gradient(135deg,#333738 0%,#3d3435 38%,#832122 72%,#c4141c 100%);color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:720px;box-sizing:border-box}
.post-cta h2{margin:0;font-size:24px;font-weight:600}.post-cta p{margin:6px 0 0;color:#e8e8ed}
.post-cta .g-btn{background:#fff;color:#c4141c}
.tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:6px 12px;border-radius:9999px;background:#f5f5f7;font-size:13px;color:#333}
.related{background:#f5f5f7;padding:56px 0 8px}
.related h2{max-width:1080px;margin:0 auto;padding:0 24px;font-size:28px;font-weight:600}
.pol-list{max-width:1080px;margin:0 auto;padding:24px 24px 100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:700px){.pol-list{grid-template-columns:minmax(0,1fr)}}
.pol-list a{display:flex;flex-direction:column;gap:6px;padding:24px 26px;border-radius:18px;background:#f5f5f7;color:inherit;text-decoration:none}
.pol-list a:hover{background:#ececf0}
.pol-list b{font-size:21px;font-weight:600}.pol-list span{font-size:15px;line-height:1.5;color:#333}
.side-links{margin-top:28px}
.side-links b{display:block;margin-bottom:10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#7a7a7a}
.side-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.side-links a{color:#333;text-decoration:none}.side-links a[aria-current="page"]{color:var(--primary);font-weight:600}
.nf{max-width:720px;margin:0 auto;padding:120px 24px;text-align:center}
.nf h1{font-size:44px;margin:0 0 12px}.nf p{font-size:19px;color:#333;margin:0 0 28px}
/* chân trang */
.site-footer .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:28px}
.site-footer .by{display:flex;align-items:center;gap:14px;font-size:14px;color:#333}
.site-footer .by img{display:block;height:28px;width:auto}
.site-footer .g-footer__cols ul{line-height:2.1;font-size:15px}
.site-footer .contact{margin-top:20px;font-size:14px;line-height:1.7;color:#333}
@media (max-width:833px){.site-footer .g-footer__cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.site-footer .g-footer__cols{grid-template-columns:minmax(0,1fr)}}

/* thanh hỏi đồng ý cookie (Google Analytics — 21/10): hai nút ngang nhau, kính mờ như thanh trên */
.cookie-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;width:min(760px,calc(100% - 24px));display:flex;gap:16px;align-items:center;padding:14px 16px 14px 20px;border-radius:18px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 40px rgba(0,0,0,.14);color:#1d1d1f;font-family:var(--font-text)}
.cookie-bar p{margin:0;flex:1;font-size:14px;line-height:1.45;letter-spacing:-.224px}
.cookie-bar a{color:#0066cc}
.cookie-btns{display:flex;gap:8px;flex:none}
.cookie-btn{min-width:96px;height:40px;padding:0 18px;border:0;border-radius:9999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.cookie-btn.yes{background:#1d1d1f;color:#fff}
.cookie-btn.no{background:#e8e8ed;color:#1d1d1f}
.cookie-btn:active{transform:scale(.95)}
.cookie-btn:focus-visible,.cookie-open:focus-visible{outline:2px solid #0071e3;outline-offset:2px}
.cookie-open{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.cookie-open:hover{text-decoration:underline}
@media (max-width:640px){.cookie-bar{flex-direction:column;align-items:stretch;gap:12px;bottom:12px;padding:16px}.cookie-btns .cookie-btn{flex:1}}