:root, [data-theme="dark"]{ --green:#D5E72F; --bg:#000000; --text:#ffffff; --heading:#ffffff; --muted:#b5bbc1; --card:#0f0f0f; --card-border:rgba(255,255,255,.10); --card-text:#c7ccd1; --line:rgba(255,255,255,.10); --hero-bg:#000000; --hero-text:#ffffff; --hero-sub:#c7ccd1; --hero-grid:rgba(213,231,47,.06); --strip-bg:#0f0f0f; --strip-text:#e8e8e8; --strip-muted:#9aa0a6; --header-bg:rgba(0,0,0,.85); --input-bg:#0e0e0e; --input-border:rgba(255,255,255,.18); --input-text:#fff; --eyebrow:var(--green); --art-bg:#0b0b0b; --glow-a:rgba(213,231,47,.16); --glow-b:rgba(213,231,47,.07); --glow-c:rgba(255,255,255,.05); --city-far:rgba(213,231,47,.055); --city-near:rgba(255,255,255,.045); --map-line:var(--green); --map-line-w:.9; --map-line-o:.4; --map-dot:var(--green); --map-o:.7; --map-o-sm:.38; --chat-panel:#141414; --chat-bg:#0b0b0b; --chat-bot-bg:#1c1c1c; --chat-bot-border:rgba(255,255,255,.12); --chat-bot-text:#e4e7ea; --chat-link:#c9dd2b; } [data-theme="light"]{ --green:#D5E72F; --bg:#ffffff; --text:#1a1a1a; --heading:#0a0a0a; --muted:#5f6b12; --card:#ffffff; --card-border:#e8ecd6; --card-text:#5a6172; --line:#e6e9d5; --hero-bg:#f6fae0; --hero-text:#0a0a0a; --hero-sub:#4a5320; --hero-grid:rgba(120,140,0,.14); --strip-bg:#f4f8d8; --strip-text:#2a2f10; --strip-muted:#6c7420; --header-bg:rgba(255,255,255,.9); --input-bg:#ffffff; --input-border:#d3d99f; --input-text:#111; --eyebrow:#5c6b00; --art-bg:#fbfdf0; --glow-a:rgba(213,231,47,.42); --glow-b:rgba(213,231,47,.22); --glow-c:rgba(255,255,255,.7); /* Nền hero sáng (#f6fae0) quá gần Lightning Green → lưới trạm & khối nhà bị chìm. Dùng tông ô-liu đậm + tăng độ dày/đục cho nhìn rõ. */ --city-far:rgba(74,92,0,.26); --city-near:rgba(26,34,0,.24); --chat-panel:#ffffff; --chat-bg:#f7f9ec; --chat-bot-bg:#ffffff; --chat-bot-border:#e2e7c9; --chat-bot-text:#2a2f10; --chat-link:#4a5a00; --map-line:#7a8c00; --map-line-w:1.3; --map-line-o:.72; --map-dot:#59680a; --map-o:.95; --map-o-sm:.46; } *{margin:0;padding:0;box-sizing:border-box} /* Thuộc tính [hidden] của HTML chỉ đặt display:none ở UA stylesheet nên bị MỌI rule display: khác ghi đè. Bộ lọc Tin tức ẩn .post-row (vốn display:grid) bằng el.hidden -> không ăn. Ép lại một lần ở đây cho toàn site. */ [hidden]{display:none !important} html{scroll-behavior:smooth;scroll-padding-top:84px} /* header sticky — chừa chỗ khi nhảy tới #anchor */ body{font-family:'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;transition:background .3s,color .3s} a{text-decoration:none;color:inherit} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .mono{font-variant-numeric:tabular-nums} section{position:relative} h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.02em} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)} .eyebrow::before{content:"";width:22px;height:2px;background:var(--green)} .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;cursor:pointer;border:none;transition:.2s;white-space:nowrap} .btn-primary{background:var(--green);color:#111} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(213,231,47,.45)} .btn-ghost{background:transparent;color:var(--hero-text);border:1px solid currentColor;opacity:.9} .btn-ghost:hover{border-color:var(--green);color:var(--green);opacity:1} .btn-dark{background:#111;color:#fff} .btn-dark:hover{background:#000} .sym{height:1em;width:auto;vertical-align:-.12em} /* HEADER */ header{position:sticky;top:0;z-index:900;background:var(--header-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .3s} .nav{display:flex;align-items:center;justify-content:space-between;height:72px} .nav .logo{height:34px;display:block} [data-theme="dark"] .logo-light{display:none} [data-theme="light"] .logo-dark{display:none} .nav ul{display:flex;gap:26px;list-style:none} .nav ul a{color:var(--text);font-size:15px;font-weight:500;transition:.2s;opacity:.88} .nav ul a:hover{color:var(--green);opacity:1} .nav .cta{display:flex;align-items:center;gap:12px} .ttoggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s} .ttoggle:hover{border-color:var(--green);color:var(--green)} .ttoggle svg{width:19px;height:19px} [data-theme="dark"] .ic-sun{display:none} [data-theme="light"] .ic-moon{display:none} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer} .burger span{width:26px;height:2px;background:var(--text);display:block} /* HERO */ .hero{position:relative;background:var(--hero-bg);color:var(--hero-text);padding:96px 0 80px;overflow:hidden;transition:background .3s,color .3s} /* Nền gradient thay cho lưới kẻ ô */ .hero-glow{position:absolute;inset:0;pointer-events:none; background: radial-gradient(120% 80% at 78% 8%, var(--glow-a), transparent 62%), radial-gradient(90% 70% at 8% 100%, var(--glow-b), transparent 60%), linear-gradient(160deg, var(--glow-c) 0%, transparent 55%)} /* Lưới điểm trạm — dựng từ toạ độ thật, nghiêng nhẹ cho có chiều sâu */ .hero-map{position:absolute;right:-4%;top:-10%;height:128%;width:auto;pointer-events:none;opacity:var(--map-o); -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 45%,transparent 88%); mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 45%,transparent 88%)} .hero-map .hm-line{stroke:var(--map-line);stroke-width:var(--map-line-w);opacity:var(--map-line-o)} .hero-map .hm-dot{fill:var(--map-dot);opacity:1} .hero-map .hm-dot circle{animation:blip 4s ease-in-out infinite} .hero-map .hm-dot circle:nth-child(3n){animation-delay:-1.3s} .hero-map .hm-dot circle:nth-child(3n+1){animation-delay:-2.6s} @keyframes blip{0%,100%{opacity:.35}50%{opacity:1}} /* Chế độ Sáng: đáy nhịp nháy phải cao hơn, nếu không chấm trạm biến mất trên nền lime nhạt */ [data-theme="light"] .hero-map .hm-dot circle{animation-name:blip-sang} @keyframes blip-sang{0%,100%{opacity:.62}50%{opacity:1}} /* Khối nhà đô thị ở chân hero */ .hero-city{position:absolute;left:0;right:0;bottom:0;width:100%;height:180px;pointer-events:none} .hero-city .hc-far{fill:var(--city-far)} .hero-city .hc-near{fill:var(--city-near)} .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center} .hero h1{font-size:clamp(38px,6vw,74px);font-weight:900;text-transform:lowercase} .hero h1 .hl{color:var(--green);-webkit-text-stroke:0} [data-theme="light"] .hero h1 .hl{color:#7f9200} .hero p.lead{color:var(--hero-sub);font-size:19px;max-width:520px;margin:22px 0 32px} .hero .actions{display:flex;gap:14px;flex-wrap:wrap} /* Hero trang chủ: 3 trạm thật (đã tách nền) + mascot 3D. Không vẽ lại bằng CSS — quy tắc thương hiệu: chỉ dùng asset gốc. */ .hero-visual{position:relative;height:420px} .hero-scene{position:absolute;inset:0} .hero-scene img{position:absolute;width:auto;animation:floaty 7s ease-in-out infinite} .hs-tram {height:92%;left:38%;bottom:6%;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))} .hs-t16 {height:74%;left:12%;bottom:9%;z-index:2;opacity:.92;animation-delay:-2s;filter:drop-shadow(0 20px 34px rgba(0,0,0,.45))} .hs-t8 {height:34%;right:0;bottom:6%;z-index:4;animation-delay:-4.6s;filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))} .hs-mascot{height:46%;left:0;bottom:0;z-index:5;animation-delay:-3.5s;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))} [data-theme="light"] .hero-scene img{filter:drop-shadow(0 20px 34px rgba(0,0,0,.24))} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .hs-tram{animation-name:floaty-c} @keyframes floaty-c{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}} @keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}} /* Hero các trang trong: mascot minh hoạ bên phải */ .page-hero.has-pet .wrap{grid-template-columns:1.25fr .75fr;align-items:center} .hero-pet{display:flex;justify-content:center;align-items:flex-end} .hero-pet img{max-height:230px;width:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.45));animation:floaty 7s ease-in-out infinite} [data-theme="light"] .hero-pet img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.2))} /* PAYMENT STRIP */ .paystrip{background:var(--strip-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;transition:background .3s} .paystrip .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center} .paystrip span.lbl{color:var(--strip-muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase} .paystrip .pay{display:flex;flex-direction:column;gap:2px;color:var(--strip-text);padding:8px 16px;border:1px solid var(--line);border-radius:10px;text-align:center} .paystrip .pay b{font-weight:700;font-size:15px} .paystrip .pay small{font-size:12px;color:var(--strip-muted);letter-spacing:.01em} /* SECTION SHELL */ .sec{padding:88px 0} .sec-head{max-width:660px;margin-bottom:44px} .sec-head h2{font-size:clamp(28px,4vw,44px);margin-top:14px;color:var(--heading)} .sec-head p{color:var(--muted);font-size:17px;margin-top:14px} /* band = always-dark accent section (both themes) */ .band{background:#000;color:#fff} .band .sec-head h2{color:#fff} .band .sec-head p{color:#b5bbc1} /* PRODUCTS */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:30px 26px;transition:.25s} .card:hover{transform:translateY(-6px);border-color:var(--green);box-shadow:0 18px 44px rgba(0,0,0,.12)} .card .ic{width:52px;height:52px;border-radius:13px;background:#000;display:flex;align-items:center;justify-content:center;margin-bottom:18px} .card .ic img{height:26px} .card h3{font-size:20px;color:var(--heading)} .card p{color:var(--card-text);font-size:15px;margin-top:10px} /* SẢN PHẨM / DỊCH VỤ */ .sub-title{font-size:23px;font-weight:800;color:var(--heading);display:flex;align-items:center;gap:12px;margin-bottom:22px;letter-spacing:-.01em} .sub-title .tick{width:26px;height:3px;background:var(--green);border-radius:2px} .sub-title small{font-weight:500;font-size:14px;color:var(--muted);letter-spacing:0} .machines{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pcard{background:var(--card);border:1px solid var(--card-border);border-radius:18px;overflow:hidden;transition:.25s;display:flex;flex-direction:column} .pcard:hover{transform:translateY(-6px);border-color:var(--green);box-shadow:0 18px 44px rgba(0,0,0,.12)} .pimg{aspect-ratio:16/11;position:relative;background:linear-gradient(135deg,#141414,#000);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--card-border);overflow:hidden} .machines .pimg{aspect-ratio:4/5} .pimg.has-photo{background:#fff} /* Infographic SVG cho dịch vụ — nền dịu, màu chữ theo theme */ .pimg.art{background:var(--art-bg);color:var(--heading)} .pimg.art svg.art,.modal .mimg.art svg.art{width:100%;height:100%;display:block;padding:14px;font-family:inherit} .modal .mimg.art{background:var(--art-bg);color:var(--heading);padding:8px} .pimg img.photo{width:100%;height:100%;object-fit:contain;padding:12px} .pimg .ph{display:flex;flex-direction:column;align-items:center;gap:8px} .pimg .ph img{width:38px;height:auto;opacity:.9} .pimg .ph span{font-size:12px;color:#8a9400;letter-spacing:.03em;font-weight:600} /* z-index bắt buộc: khi hover, img.photo nhận transform -> tạo stacking context và vì đứng SAU badge trong DOM nên vẽ đè lên nhãn. */ .pimg .badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--green);color:#111;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px} .pbody{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1} .pbody h4{font-size:17px;color:var(--heading);font-weight:700} .pbody p{color:var(--card-text);font-size:14px;margin-top:8px} .spec{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:0} .spec li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-top:1px dashed var(--card-border)} .spec li b{color:var(--muted);font-weight:500} .spec li span{color:var(--heading);font-weight:600;text-align:right} /* STATS (band) */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .stat .n{font-size:clamp(34px,5vw,56px);font-weight:900;color:var(--green);line-height:1} .stat .l{color:#b5bbc1;font-size:15px;margin-top:8px} /* MAP / STORE FINDER */ .finder{display:grid;grid-template-columns:.9fr 1.6fr;gap:26px;align-items:stretch} .finder .panel{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:24px;display:flex;flex-direction:column} .finder input,.finder select{width:100%;padding:12px 14px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);border-radius:10px;font-family:inherit;font-size:15px;margin-top:10px} .finder .list{margin-top:16px;overflow:auto;max-height:300px;display:flex;flex-direction:column;gap:10px} .finder .item{border:1px solid var(--card-border);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.15s} .finder .item:hover{border-color:var(--green);background:rgba(213,231,47,.08)} .finder .item{position:relative} .finder .item b{font-size:15px;color:var(--heading);display:block;padding-right:64px} .finder .item small{color:var(--muted);display:block;padding-right:64px} .finder .item .dist{position:absolute;top:12px;right:12px;font-size:12px;font-weight:700;color:#111; background:var(--green);border-radius:999px;padding:3px 9px;white-space:nowrap} .finder .geo{width:100%;justify-content:center;margin-bottom:4px} .finder .fbtns{display:flex;gap:10px;margin-top:12px} .finder .fbtns .btn{flex:1;min-height:44px;justify-content:center;padding:11px 14px} .finder .fbtns .freset{flex:0 0 auto;min-width:104px;border-color:var(--card-border);color:var(--text);opacity:1} .finder .fbtns .freset:hover{border-color:var(--green);color:var(--green)} .finder .fcount{margin-top:12px;font-size:13px;color:var(--muted)} .finder .fcount span:first-child{color:var(--eyebrow);font-weight:700} #map{height:440px;border-radius:18px;border:1px solid var(--card-border);z-index:1} /* PROPOSAL FORM (band) */ .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px} .field{display:flex;flex-direction:column;gap:7px} .field.full{grid-column:1/-1} .band .field label{font-size:14px;font-weight:600;color:#ddd} .band input,.band select,.band textarea{padding:13px 15px;border:1px solid rgba(255,255,255,.18);background:#0e0e0e;color:#fff;border-radius:11px;font-family:inherit;font-size:15px} .band input:focus,.band select:focus,.band textarea:focus{outline:none;border-color:var(--green)} .note{color:#8a8f94;font-size:13px;margin-top:12px} /* BLOG */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .post{border:1px solid var(--card-border);border-radius:18px;overflow:hidden;background:var(--card);transition:.25s} .post:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.12)} /* aspect-ratio thay height cố định: ảnh minh hoạ là 4:3, khung càng dẹt càng cắt mất chữ trong ảnh */ .post .thumb{aspect-ratio:16/10;background:var(--art-bg);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} /* Ảnh bài phải phủ kín khung (trước đây cố định 54px cho logo -> ảnh thật hụt khung) */ .post .thumb img{width:100%;height:100%;object-fit:cover;display:block} /* Chưa có ảnh riêng -> rơi về logo: hiện nhỏ giữa khung, không kéo giãn */ .post .thumb img[src$="symbol_green.png"]{width:auto;height:54px;object-fit:contain;opacity:.9} /* Nhãn đặt bên PHẢI: ảnh minh hoạ bài hướng dẫn có sẵn chữ ở góc trên trái, để trái là chồng chữ */ .post .thumb .tag{position:absolute;top:12px;right:12px;z-index:2;background:var(--green);color:#111;font-size:12px;font-weight:700;padding:4px 10px;border-radius:6px} .post .body{padding:20px} .post .body .date{color:var(--muted);font-size:13px} .post .body h3{font-size:18px;margin:6px 0 8px;color:var(--heading)} .post .body p{color:var(--card-text);font-size:14px} /* DANH SÁCH BÀI VIẾT dạng từng dòng (class .ev dùng chung với .post-row) */ .events{display:flex;flex-direction:column;gap:0} .ev{display:grid;grid-template-columns:210px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--card-border);transition:.2s} .ev:last-child{border-bottom:1px solid var(--card-border)} .ev:hover{background:rgba(213,231,47,.05)} .ev h3{font-size:19px;color:var(--heading)} .ev p{color:var(--card-text);font-size:15px;margin-top:6px} .ev .more{display:inline-block;margin-top:10px;color:var(--eyebrow);font-weight:600;font-size:13px} /* JOBS */ .jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .job{border:1px solid var(--card-border);border-radius:14px;padding:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:.2s;background:var(--card)} .job:hover{border-color:var(--green)} .job .meta small{color:var(--muted)} .job h3{font-size:18px;color:var(--heading)} .jobform input,.jobform select{padding:13px 15px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);border-radius:11px;font-family:inherit;font-size:15px} .jobform label{color:var(--text);font-size:14px;font-weight:600} .formnote{grid-column:1/-1;border-left:3px solid var(--green);background:var(--card);padding:12px 14px;border-radius:0 10px 10px 0;font-size:14px;color:var(--text)} .formnote b{color:var(--heading)} /* FOOTER (always dark) */ footer{background:#000;color:#cfd3d7;padding:64px 0 28px;border-top:1px solid rgba(255,255,255,.1)} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px} footer .flogo{height:40px;margin-bottom:16px} .fslogan{font-size:14px;max-width:300px;line-height:1.7} .fslogan em{color:#a5abb1;font-style:italic} .bct{display:inline-block;margin-top:18px} .bct img{width:150px;height:auto;display:block;opacity:.92;transition:opacity .2s} .bct:hover img{opacity:1} footer h4{color:#fff;font-size:15px;margin-bottom:14px;letter-spacing:.04em} footer ul{list-style:none;display:flex;flex-direction:column;gap:9px} footer ul a{color:#a5abb1;font-size:14px} footer ul a:hover{color:var(--green)} footer .contact p{font-size:14px;margin-bottom:8px} footer .contact b{color:var(--green)} .fbar{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#7d838a;font-size:13px} .pcard{cursor:pointer} /* MODAL — chi tiết sản phẩm/dịch vụ */ .modal{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);z-index:970;display:none;align-items:center;justify-content:center;padding:20px} .modal.open{display:flex} .modal .box{background:var(--bg);color:var(--text);width:100%;max-width:820px;max-height:90vh;overflow-y:auto;border-radius:20px;border:1px solid var(--card-border);position:relative} .modal .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:0} .modal .mimg{background:#fff;display:flex;align-items:center;justify-content:center;min-height:320px} .modal .mimg img{width:100%;height:100%;max-height:440px;object-fit:contain;padding:20px} .modal .mimg.ph{background:linear-gradient(135deg,#141414,#000)} .modal .mimg.ph img{width:70px;height:auto;opacity:.9} .modal .mbody{padding:30px 30px 34px} .modal .mbody .badge{display:inline-block;background:var(--green);color:#111;font-size:12px;font-weight:700;padding:4px 12px;border-radius:6px;margin-bottom:12px} .modal .mbody h3{font-size:26px;color:var(--heading);margin-bottom:12px} .modal .mbody p{color:var(--card-text);font-size:15px;margin-bottom:16px} .modal .mbody .spec{margin-top:6px} .modal .mclose{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:20px;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center} .modal .mclose:hover{background:#000} .modal .mcta{margin-top:20px} @media(max-width:680px){.modal .mgrid{grid-template-columns:1fr}.modal .mimg{min-height:220px}} /* ARTICLE — trang bài tin (mô phỏng trang riêng) */ .article{position:fixed;inset:0;background:var(--bg);color:var(--text);z-index:980;overflow-y:auto;display:none} .article.open{display:block} .article .abar{position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px} .article .abar img{height:30px} .article .aback{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:999px;padding:8px 18px;cursor:pointer;font-family:inherit;font-weight:600;font-size:14px} .article .aback:hover{border-color:var(--green);color:var(--green)} .article .awrap{max-width:760px;margin:0 auto;padding:44px 24px 80px} .article .atag{display:inline-block;background:var(--green);color:#111;font-size:12px;font-weight:700;padding:4px 12px;border-radius:6px} .article .adate{color:var(--muted);font-size:14px;margin:14px 0 6px} .article h1{font-size:clamp(28px,4vw,40px);color:var(--heading);line-height:1.15;margin-bottom:20px} /* Ảnh đầu bài — dùng cho cả trang bài viết tĩnh (.article-static) lẫn trang sự kiện. KHÔNG ép tỉ lệ: ảnh gốc là poster fanpage 1:1 hoặc 4:5, ép 16/7 + cover là cắt mất tiêu đề. */ .ahero{background:var(--art-bg);border-radius:16px;overflow:hidden; display:flex;align-items:center;justify-content:center;margin:8px 0 28px;border:1px solid var(--card-border)} .ahero img{width:100%;height:auto;display:block} /* Chưa có ảnh riêng -> rơi về logo: hiện nhỏ giữa khung tối, không kéo giãn */ .ahero img[src$="symbol_green.png"]{width:auto;height:70px;object-fit:contain;opacity:.9;margin:56px 0} /* Ảnh chèn giữa bài (cú pháp ![alt](src) trong markdown) */ .prose .mdfig{margin:26px 0} .prose .mdfig img{width:100%;height:auto;border-radius:14px;display:block;border:1px solid var(--card-border)} .prose .mdfig figcaption{color:var(--muted);font-size:14px;line-height:1.5;margin-top:10px;text-align:center} .article .abody{color:var(--text);font-size:17px;line-height:1.8} .article .abody p{margin-bottom:18px} .article .abody h3{color:var(--heading);font-size:22px;margin:26px 0 10px} /* FLOATING BUTTONS */ .floats{position:fixed;right:20px;bottom:22px;z-index:950;display:flex;flex-direction:column;gap:12px} .fab{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:0 8px 22px rgba(0,0,0,.28);cursor:pointer;position:relative;transition:.2s} .fab:hover{transform:scale(1.08)} .fab.zalo{background:#0068ff} .fab.phone{background:#22b04b} .fab.chat{background:var(--green);color:#111} .fab .rgn{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;animation:ring 1.8s infinite;opacity:.6} @keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}} .fab svg{width:26px;height:26px} /* CHAT WIDGET — màu theo biến theme, KHÔNG hardcode (phải đọc được ở cả Sáng và Tối) */ .chatbox{position:fixed;right:20px;bottom:92px;width:352px;max-width:calc(100vw - 40px);background:var(--chat-panel);color:var(--text);border:1px solid var(--card-border);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.28);overflow:hidden;z-index:951;display:none;flex-direction:column;max-height:calc(100vh - 108px);max-height:calc(100dvh - 108px)} .chatbox.open{display:flex} /* Header giữ nền Vanta Black ở cả hai theme — đó là màu thương hiệu, không phải màu nền trang */ .chatbox .ch-h{background:#000;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;font-size:15px} .chatbox .ch-h .dot{width:9px;height:9px;background:var(--green);border-radius:50%;flex:none} .chatbox .ch-x{margin:-7px -6px -7px auto;background:none;border:none;color:#fff;font-size:17px;line-height:1;cursor:pointer;width:44px;height:44px;border-radius:10px;flex:none} .chatbox .ch-x:hover{background:rgba(255,255,255,.14)} .chatbox .ch-b{padding:14px;flex:1 1 auto;min-height:104px;max-height:min(52vh,420px);max-height:min(52dvh,420px);overflow-y:auto;overscroll-behavior:contain;background:var(--chat-bg);display:flex;flex-direction:column;gap:9px} .bubble{max-width:86%;padding:10px 13px;border-radius:13px;font-size:14px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere} .bubble.bot{background:var(--chat-bot-bg);border:1px solid var(--chat-bot-border);align-self:flex-start;color:var(--chat-bot-text)} .bubble.me{background:var(--green);color:#111;align-self:flex-end;font-weight:500} .bubble a{color:var(--chat-link);font-weight:600} .bubble.me a{color:#0b3d00} /* dấu ba chấm "đang gõ" */ .ch-typing{display:inline-flex;gap:4px;align-items:center;height:14px} .ch-typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:chdot 1.1s infinite} .ch-typing i:nth-child(2){animation-delay:.18s} .ch-typing i:nth-child(3){animation-delay:.36s} @keyframes chdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}} /* chip câu hỏi gợi ý */ .ch-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0;flex:none} .ch-chips:empty{display:none} .ch-chips .ch-chip{background:var(--chat-bot-bg);color:var(--chat-bot-text);border:1px solid var(--chat-bot-border);border-radius:999px;padding:9px 13px;font-family:inherit;font-size:14px;cursor:pointer;min-height:44px} .ch-chips .ch-chip:hover{border-color:var(--green);color:var(--text)} /* form thu lead */ .ch-lead{display:flex;flex-direction:column;gap:7px;padding:12px 14px;border-top:1px solid var(--card-border);flex:none} .ch-lead input{background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-text);border-radius:9px;padding:11px 12px;font-family:inherit;font-size:14px;min-height:44px} .ch-lead button{background:var(--green);color:#111;border:none;border-radius:9px;padding:12px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;min-height:44px} /* dải nút chuyển sang người thật — luôn hiện, không phụ thuộc bot trả lời thế nào */ .ch-quick{display:flex;gap:6px;padding:10px 14px 0;flex:none} .ch-quick a,.ch-quick button{flex:1;text-align:center;background:var(--chat-bot-bg);border:1px solid var(--chat-bot-border);color:var(--chat-bot-text);border-radius:9px;padding:9px 4px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center} .ch-quick a:first-child{background:#0068ff;border-color:#0068ff;color:#fff} .chatbox .ch-i{display:flex;flex:none;border-top:1px solid var(--card-border);margin-top:10px;background:var(--chat-panel)} .chatbox .ch-i input{flex:1;min-width:0;border:none;background:transparent;color:var(--text);padding:13px 14px;font-family:inherit;font-size:15px;outline:none} .chatbox .ch-i button{border:none;background:#000;color:var(--green);padding:0 18px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;min-height:44px} [data-theme="light"] .chatbox .ch-i button{background:#111} .chatbox .ch-i button:disabled{opacity:.5;cursor:default} /* Nút phóng to khung chat (dựng bằng JS — xem chatDungNutTo trong app.js) */ .chatbox .ch-zoom{margin:-7px 0 -7px auto;background:none;border:none;color:#fff;font:inherit;cursor:pointer;width:44px;height:44px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center} .chatbox .ch-zoom:hover{background:rgba(255,255,255,.14)} .chatbox .ch-zoom svg{width:19px;height:19px} /* có nút zoom rồi thì ✕ không cần đẩy sang phải nữa */ .chatbox .ch-zoom + .ch-x{margin-left:2px} /* trạng thái phóng to: rộng hơn và vùng tin nhắn cao hơn */ .chatbox.big{width:min(560px,92vw)} .chatbox.big .ch-b{max-height:min(66vh,620px);max-height:min(66dvh,620px)} .chatbox.big .bubble{max-width:78%} /* toast */ .toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(120px);background:#111;color:#fff;padding:15px 26px;border-radius:12px;border:1px solid var(--green);z-index:999;transition:.35s;font-size:15px} .toast.show{transform:translateX(-50%) translateY(0)} .toast b{color:var(--green)} @media(max-width:900px){ .hero{padding:64px 0 52px} /* Mobile vẫn thấy trạm + mascot, chỉ thu nhỏ lại (mobile-first) */ .hero .wrap{grid-template-columns:1fr} .hero-visual{height:330px;margin-top:10px} .hero-map{opacity:var(--map-o-sm);right:-14%;height:112%} .hero-city{height:130px} .hs-mascot{height:42%} .hs-t8{height:30%} .page-hero.has-pet .wrap{grid-template-columns:1fr} .hero-pet{justify-content:flex-start;margin-top:18px} .hero-pet img{max-height:170px} .hero p.lead{font-size:17px;margin:18px 0 26px} .sec{padding:58px 0} .sec-head{margin-bottom:32px} .cards,.posts{grid-template-columns:1fr 1fr} .machines{grid-template-columns:1fr 1fr} .services{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .finder{grid-template-columns:1fr}.jobs{grid-template-columns:1fr} #map{height:340px} .fgrid{grid-template-columns:1fr 1fr} .formgrid{grid-template-columns:1fr} /* ==== mobile menu (dropdown) ==== */ .burger{display:flex} .nav ul{display:none;position:fixed;top:72px;left:0;right:0;flex-direction:column;gap:0; background:var(--bg);border-bottom:1px solid var(--line); padding:6px 0;box-shadow:0 22px 44px rgba(0,0,0,.35)} .nav.menu-open ul{display:flex} .nav ul li{width:100%} .nav ul a{display:block;padding:15px 24px;font-size:16px;opacity:1} .nav ul li+li a{border-top:1px solid var(--line)} .burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.active span:nth-child(2){opacity:0} .burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(max-width:560px){ .wrap{padding:0 18px} .cards,.posts,.fgrid,.machines{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .paystrip .wrap{gap:12px} .nav .cta .btn-primary{display:none} .fbar{flex-direction:column;gap:6px} .ev{grid-template-columns:1fr;gap:10px;padding:20px 0} /* nút nổi nhỏ lại + chừa chỗ để không che nội dung cuối khung */ .floats{right:14px;bottom:14px;gap:10px} .fab{width:48px;height:48px} .fab svg{width:22px;height:22px} .finder .list{padding-bottom:64px} /* Khung chat: gần full chiều ngang, đáy đặt trên cụm nút nổi (14 + 48 + 10) */ .chatbox{right:14px;left:14px;bottom:72px;width:auto;max-width:none;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px)} .chatbox .ch-b{max-height:min(40vh,300px);max-height:min(40dvh,300px)} /* phóng to trên mobile = toàn màn hình, để đọc hội thoại dài */ .chatbox.big{inset:0;width:auto;max-width:none;max-height:none;border-radius:0;border:0} .chatbox.big .ch-b{max-height:none;flex:1 1 auto} .chatbox.big .bubble{max-width:88%} } /* ==== micro-interactions & focus ==== */ .burger span{transition:transform .25s, opacity .25s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(213,231,47,.16)} .pimg img.photo{transition:transform .4s ease} .pcard:hover .pimg img.photo{transform:scale(1.05)} .post .thumb img{transition:transform .4s ease} .post:hover .thumb img{transform:scale(1.07)} .machines .pcard,.services .pcard,.post,.job,.card{will-change:transform} /* ==== scroll reveal (thêm class .reveal bằng JS; không JS thì hiện bình thường) ==== */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1 !important;transform:none !important;transition:none} .orbit,.spark,.fab .rgn,.hs-tram,.hs-mascot{animation:none} html{scroll-behavior:auto} .btn,.pcard,.post,.card{transition:none} } /* ==== multi-page additions ==== */ .nav ul a.active{color:var(--green)} .prose{color:var(--text);font-size:16px;line-height:1.8} .prose p{margin-bottom:16px} /* h2 là MỚI: trước đây md2html biến cả ## lẫn ### thành

nên bài không có cấp 2 nào. Trang Điều khoản/Bảo mật không sinh h2 (import_policies ép h2->h3) nên rule này không đụng tới chúng — cố ý giữ nguyên .prose h3 để hai trang đó không đổi. */ .prose h2{color:var(--heading);font-size:27px;line-height:1.3;margin:38px 0 12px;scroll-margin-top:88px} .prose h2:first-child{margin-top:0} .prose h3{color:var(--heading);font-size:22px;margin:26px 0 10px} .prose ul,.prose ol{margin:0 0 16px 22px} .prose li{margin-bottom:8px} .prose a{color:var(--eyebrow);text-decoration:underline} .prose em{color:var(--muted)} .prose h3{scroll-margin-top:88px} /* Bảng: bọc .tbl cuộn ngang riêng để trang không tràn ngang trên mobile (§9 CLAUDE.md) */ .prose .tbl{overflow-x:auto;margin:24px 0;border:1px solid var(--card-border);border-radius:12px} .prose table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px} .prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--card-border);vertical-align:top} .prose thead th{background:var(--card);color:var(--heading);font-weight:700;white-space:nowrap} .prose tbody tr:last-child td{border-bottom:0} /* Callout — :::luu-y / :::canh-bao / :::meo */ .prose .callout{border:1px solid var(--card-border);border-left:4px solid var(--green); background:var(--card);border-radius:12px;padding:16px 18px;margin:24px 0} .prose .callout>:last-child{margin-bottom:0} .prose .callout .co-lbl{display:block;color:var(--green);font-size:12.5px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px} .prose .callout.canh-bao{border-left-color:#e5352b} .prose .callout.canh-bao .co-lbl{color:#e5352b} [data-theme="light"] .prose .callout .co-lbl{color:var(--eyebrow)} [data-theme="light"] .prose .callout.canh-bao .co-lbl{color:#c22a21} /* Breadcrumb đầu bài */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13.5px; color:var(--muted);margin-bottom:16px} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--green);text-decoration:underline} .crumbs span{opacity:.5} /* Phân trang danh sách tin */ .pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:34px} .pager .pg{min-width:44px;min-height:44px;padding:0 14px;display:inline-flex;align-items:center; justify-content:center;border:1px solid var(--card-border);border-radius:10px;background:var(--card); color:var(--text);font-size:14.5px;font-weight:600;text-decoration:none;transition:.2s} .pager a.pg:hover{border-color:var(--green);color:var(--green)} .pager .pg.cur{background:var(--green);border-color:var(--green);color:#111} .pager .pg.off{opacity:.35} .pager .pg.gap{border:0;background:none;min-width:20px;padding:0;opacity:.5} /* Bài cùng chủ đề (cuối bài viết) */ .related{padding-top:10px} .rel-h{color:var(--heading);font-size:22px;margin-bottom:18px} /* Trang tác giả */ .author-card{display:flex;gap:22px;align-items:flex-start} .author-card .au-photo img{width:140px;height:140px;border-radius:50%;object-fit:cover; border:3px solid var(--green);display:block} @media(max-width:680px){.author-card{flex-direction:column;gap:16px}} /* Mục lục cho văn bản dài (Điều khoản · Bảo mật) */ .toc{border:1px solid var(--card-border);background:var(--card);border-radius:14px;padding:18px 22px;margin-bottom:30px} .toc b{display:block;color:var(--heading);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px} .toc ul{margin:0;padding:0;list-style:none;columns:2;column-gap:26px} .toc li{margin:0 0 6px;font-size:14.5px;break-inside:avoid} .toc a{color:var(--text);text-decoration:none;opacity:.85} .toc a:hover{color:var(--green);opacity:1;text-decoration:underline} @media(max-width:680px){.toc ul{columns:1}} /* FAQ accordion — dùng
, không cần JS */ .faq-group{margin-top:34px} .faq{display:flex;flex-direction:column;gap:10px;margin-top:14px} .faq details{border:1px solid var(--card-border);border-radius:12px;background:var(--card);overflow:hidden;transition:border-color .2s} .faq details[open],.faq details:hover{border-color:var(--green)} .faq summary{list-style:none;cursor:pointer;padding:16px 52px 16px 18px;position:relative;font-weight:600;color:var(--heading);font-size:16px;line-height:1.5;min-height:44px;display:flex;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px} .faq .chev{position:absolute;right:18px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .25s} .faq details[open] .chev{transform:rotate(-135deg);margin-top:-3px} .faq .ans{padding:0 18px 16px} .faq .ans p{margin:0;color:var(--card-text);font-size:15px;line-height:1.75} @media(prefers-reduced-motion:reduce){.faq .chev{transition:none}} /* ==== TIN TỨC: bộ lọc chuyên mục + danh sách từng dòng ==== */ .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px} /* Chip nay là (mỗi chuyên mục có trang hub riêng) chứ không còn là