/* v20 — DESIGN SYSTEM MỚI, khác rõ v19. Nhận diện vẫn là Ver2Solution: xanh thương hiệu #0b5d4e làm điểm nhấn, nhưng nền, thẻ, bo góc, bóng đổ, header và hero đều làm lại. v19: nền be nhạt, thẻ viền nhạt, ảnh 3/4 hoặc 4/3, tường chữ dài. v20: nền xanh-nhạt, thẻ trắng bo 22px bóng mềm, ảnh 4/5 chiếm ưu thế, tên thật lớn, tag pill, nút hành động ngay trên thẻ. */ :root{--bg:#eef3f1;--card:#fff;--ink:#12211d;--mut:#5c6f68;--line:#dce7e1; --brand:#0b5d4e;--brand2:#0e8a6d;--brandsoft:#dff0ea;--amber:#ffb020;--red:#d92b1f; --r:22px;--sh:0 10px 30px rgba(11,93,78,.10)} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.55} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} /* HEADER MỚI: sticky, nền trắng mờ, logo pill + nav pill, không còn header 64px tối màu kiểu cũ */ .site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .head-in{display:flex;align-items:center;gap:18px;min-height:72px} .logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;color:var(--ink);white-space:nowrap;flex-shrink:0} .logo:hover{text-decoration:none} .logo-badge{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--brand);color:#fff;font-size:22px} .logo small{display:block;font-size:11px;letter-spacing:.12em;color:var(--mut);font-weight:700} .main-nav{margin-left:auto;display:flex;gap:4px;flex-wrap:nowrap;flex-shrink:0} .main-nav a{color:var(--ink);font-weight:700;padding:9px 10px;border-radius:999px;white-space:nowrap} .main-nav a:hover,.main-nav a.active{background:var(--brandsoft);color:var(--brand);text-decoration:none} /* v90: link Dang ky chi hien trong menu mo mobile (an tren desktop de khoi chat header). */ .nav-register{display:none} /* v90: nut header (Dang Nhap / "Ten · 250 diem" sau dang nhap) khong rot chu, khong bi ep nho; ten dai qua thi cat bang dau ... chu khong tran header. */ .site-head .btn{white-space:nowrap;flex-shrink:0;max-width:240px;overflow:hidden;text-overflow:ellipsis} /* v111 NEW-T4: vien ten dai bi cat CA 2 DAU — .btn la inline-flex + justify-content:center nen text dai hon hop se can giua va tran deu 2 ben, ellipsis khong co tac dung (ellipsis chi chay tren block container). Vien trong .user-menu-wrap ve inline-block de cat dung 1 dau phai co dau ...; min-width:0 de flex item co lai duoi min-content (QA v108: .user-menu-wrap min-width:auto day vo cap 240px). Dropdown khong doi: nut van la con truc tiep cua .user-menu-wrap (position:relative), JS toggleMenu tren nut giu nguyen. */ .site-head .user-menu-wrap{min-width:0} .site-head .user-menu-wrap>.btn{display:inline-block;min-width:0;text-align:left} /* v90: hamburger hien som tu <=1200px (truoc la <=1000px) — o 1000-1200px 6 link nav + pill diem khong du cho, chu rot 2 dong (anh nguoi dung 23:11). Do rong that do duoc: logo 230 + nav 675 (padding 10px) + pill 196 + gap = 1129px vua khung .wrap 1140px; khong giam padding thi thieu ~55px. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font-weight:800;cursor:pointer;font-size:15px} .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:var(--brand2);text-decoration:none} .btn-ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand)} .btn-ghost:hover{text-decoration:none;background:var(--brandsoft)} .btn-light{background:#fff;color:var(--ink)} .btn-sm{padding:9px 15px;font-size:14px;min-height:44px}/* v81: nut nho van du 44px de bam (mobile) */ .menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 13px;font-weight:800;min-height:44px}/* v81: nut Menu du 44px de bam (mobile) */ @media(max-width:1200px){.main-nav{display:none}.menu-btn{display:block}.main-nav.open{display:flex;flex-direction:column;width:100%;margin-left:0;margin-top:8px}.main-nav.open a{padding:12px 14px}.main-nav.open .nav-register{display:block}} /* v90 (F): dropdown dang xuat duoi vien diem header — absolute duoi vien, can phai, khong lam vo header (di cung fix nowrap muc A). */ .user-menu-wrap{position:relative;display:flex;flex-shrink:0} .user-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:220px;max-width:calc(100vw - 16px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(11,93,78,.16);padding:8px} .user-menu[hidden]{display:none} .user-menu-name{display:block;padding:10px 12px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-menu-points{margin:0;padding:2px 12px 10px;color:var(--mut);font-size:14px;white-space:nowrap} .user-menu-logout{display:block;width:100%;padding:10px 12px;border:0;border-radius:10px;background:#fff1f0;color:var(--red);font:inherit;font-weight:800;cursor:pointer;text-align:left} .user-menu-logout:hover{background:#ffe4e1} /* v90 (3): cuon toi ket qua (scrollIntoView block:'start') khong bi header sticky (72px) che mat hang dau — grid/section dung cach dinh 84px. v91 (9): them #kiotList + .filter-empty (bang "Chưa có dữ liệu" cua lo/xuong) de cuon toi dung bang thong bao khi loc 0 ket qua. */ #listGrid,#publicShopsList,#hubResults,#lo-hang-xa-kho,#xuong-may-gia-cong,#kiotList,.filter-empty{scroll-margin-top:84px} /* HERO MỚI: khối gradient xanh đậm, bo 28, tìm kiếm là thẻ trắng nổi lên */ .hero{margin:22px 0 8px;background:linear-gradient(135deg,#083f34,#0b5d4e 55%,#0e8a6d);color:#fff;border-radius:28px;padding:34px 32px 40px;position:relative;overflow:hidden} .hero:after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.10)} .hero h1{font-size:clamp(28px,4.5vw,44px);line-height:1.15;margin:6px 0 10px;max-width:760px} .hero p{color:#d7ece6;max-width:720px;margin:0 0 20px} .eyebrow{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 12px;font-weight:800;font-size:13px} .live-dot{width:9px;height:9px;border-radius:50%;background:#ff5a4e;display:inline-block} .search-card{background:#fff;color:var(--ink);border-radius:18px;padding:14px;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:10px;position:relative;z-index:1;box-shadow:var(--sh)} .search-card input,.search-card select{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit} .search-card label{font-size:12px;font-weight:800;color:var(--mut);display:block;margin-bottom:4px} .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:1} .chips a{background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:7px 13px;font-weight:700} .chips a:hover{background:#fff;color:var(--brand);text-decoration:none} .section{margin:17px 0} .section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:5px} .section-head h1{margin:0;font-size:28px}.section-head h2{margin:0;font-size:26px}.section-head h2 a{color:var(--brand)}.section-head h2 a:hover{text-decoration:underline} .section-head p{margin:4px 0 0;color:var(--mut)} .section-foot{display:flex;justify-content:flex-end;margin:12px 0 0}/* v75: nut "Xem tất cả tin →" chuyen xuong duoi hang tin, can phai */ /* THẺ MỚI: ảnh 4/5 chiếm ưu thế, tên lớn, tag pill, 2 nút ngay trên thẻ */ .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .grid-3{grid-template-columns:repeat(3,1fr)} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 4px 16px rgba(11,93,78,.06);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s} .card:hover{transform:translateY(-3px);box-shadow:var(--sh)} .card-photo{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,#d9eae4,#eef3f1);overflow:hidden} .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .card-photo .ph-note{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:5px 10px} .status{position:absolute;left:12px;top:12px;background:#fff;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:900;display:flex;gap:6px;align-items:center;box-shadow:0 4px 12px rgba(0,0,0,.15)} .status i{width:9px;height:9px;border-radius:50%;background:#1fae6a} .ph-holder{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;color:#9db8ae} .card-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1} .card-body h3{margin:0;font-size:21px;line-height:1.25} .card-body h3 a{color:var(--ink)} .card-title{color:var(--mut);margin:0} .tags{display:flex;gap:7px;flex-wrap:wrap} .tag{background:var(--brandsoft);color:var(--brand);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:800;white-space:nowrap} .tag.soft{background:#f1f4f2;color:var(--ink)} /* v87 — badge đếm online (số ẢO minh hoạ + số thật đang online, gộp 1 số). Pill gọn, chấm xanh lá = đang online; đặt đầu trang, dưới header. */ .online-badge{display:inline-flex;align-items:center;gap:7px;background:var(--brandsoft);color:var(--brand);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;margin:0 0 10px} .online-badge[hidden]{display:none}/* v89 22:47 07/11: display:inline-flex o tren thang [hidden] cua UA nen badge van hien du da hidden tu v88 — buoc phai co quy tac nay. Badge CHI duoc an bang CSS, KHONG xoa khoi DOM vi js/online-counter.js suy pageKey tu [data-online]. */ .online-dot{width:9px;height:9px;border-radius:50%;background:#1faa59;display:inline-block;flex:none} /* POPUP ONLINE (v87 bo sung 20:51–20:52 ngay 07/11; v89 doi len giua mep phai 22:47 ngay 07/11 theo yeu cau nguoi dung): popup noi giua mep phai (right:0, top:50%), bieu tuong sap hang (SVG inline, khong emoji), hien luon so nguoi dang online (cung so voi badge) + dong diem khi da dang nhap. Hien tren MOI trang (ke ca dang ky/dang nhap/bai viet). Nut gop y do da an tren moi trang tu v89 (trung vi tri giua-phai voi popup — theo quy tac nguoi dung chot 22:28 ngay 07/11: co bo dem ben phai thi bo nut gop y do). */ .online-popup{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px 0 0 14px;box-shadow:0 10px 30px rgba(11,93,78,.16);padding:10px 12px;max-width:min(340px,calc(100vw - 28px))}/* v111 NEW-T2: rong 320->340px de dong diem nowrap vua (than popup ~216px o desktop, ~246px o 390px) */ .online-popup[hidden]{display:none} .online-popup-stall{width:52px;height:48px;flex:none} .online-popup-body{min-width:0} .online-popup-line{margin:0;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap} .online-popup-points{margin:2px 0 0;font-size:12px;color:var(--mut);white-space:nowrap}/* v111 NEW-T2: dong "Da tieu: 0 xu • Con lai: 230 xu" khong ngat giua chung nua */ .online-popup-close{flex:none;border:0;background:transparent;color:var(--mut);font-size:20px;line-height:1;cursor:pointer;padding:4px} .online-popup-close:hover{color:var(--ink)} @media(max-width:480px){.online-popup{padding:8px 10px;gap:8px}.online-popup-stall{width:42px;height:40px}.online-popup-line{font-size:12px}} .facts{margin:0;display:grid;gap:6px;font-size:14px} .facts div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:6px} .facts b{font-weight:800} .facts span{text-align:right} .card-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:9px} .card-actions .btn{white-space:nowrap} /* DÒNG QUYẾT ĐỊNH (v28, thẻ 5 giây, thiết kế 2026-11-05): mặt thẻ chỉ hiện hàng có giá trị thật — hàng trống không được render nên không còn chữ "Chưa cập nhật" nào trên mặt thẻ. Lương số + Lịch xếp 2 cột khi cả hai đều có; chỉ có 1 mục thì mục đó giãn hết hàng, không chừa ô trống. Lương/ Lịch cắt 1 dòng có dấu …, Kinh nghiệm tối đa 2 dòng. Chip xám "Lương thỏa thuận" chỉ hiện khi lương là "Thỏa thuận". Thẻ shop vẫn dùng .facts ở trên, không đổi. Trang chi tiết giữ bảng đầy đủ. */ .tag-negotiable{background:#eef1ef;color:#5c6f68} .decision{display:grid;gap:8px;font-size:14px} .decision-row{display:flex;gap:10px;flex-wrap:wrap} .decision-item{flex:1 1 0;min-width:0;background:#f4f8f6;border-radius:12px;padding:9px 12px;min-height:72px} .decision-label{display:block;font-size:12px;font-weight:800;color:var(--mut)} .decision-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .decision-item .decision-value{font-weight:800} .decision-value.muted{color:var(--mut);font-weight:600} .decision-exp{background:#f4f8f6;border-radius:12px;padding:9px 12px;min-height:72px} .decision-exp .decision-value{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .warn{font-size:13px;color:#7a5b00;background:#fff7dd;border-radius:12px;padding:10px 12px;margin:0} .warn a{font-weight:800} .disclaimer{font-size:12px;color:var(--mut);font-style:italic;border-top:1px solid var(--line);padding-top:8px;margin:8px 0 0} /* v42: dong huong dan chu so huu (duoi .disclaimer, cuoi the) — chu nho 12px nhu disclaimer; chu thuong mau muted, link mau xanh thuong hieu. */ .owner-note{font-size:12px;color:var(--mut);margin:6px 0 0} .owner-note a{color:var(--brand);font-weight:800;text-decoration:none} .owner-note a:hover{text-decoration:underline} /* LỌC + PHÂN TRANG */ .filter-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .filter-card.cols-3{grid-template-columns:repeat(3,1fr)} /* v98: bo loc chung trang Shop thu gon 2 hang x 6 o (theo yeu cau 19:22 ngay 08/11): hang 1 = 6 o loc mau, hang 2 = 4 o loc lo/xuong + 2 nut (Ap dung / Dat lai) nam dung 2 o cuoi. Nut can duoi cung cua o de thang hang voi cac select. */ .filter-card.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}/* v111 NEW-P5: minmax(0,1fr) thay 1fr (=minmax(auto,1fr)) — cot dai nhat khong day cac cot khac hep lai, 6 cot chia deu 182px */ /* v111 NEW-P5: o loc 6 cot desktop — chu 13px + padding gon de nhan select hien du: "Mac dinh (moi nhat)" ~131px va "Chon loai luong truoc" ~139px vua o text ~149px (truoc: 16px + padding 12px, chi ~138px nen cat "Mac dinh (moi nh"). Chi ap dung >1000px (o 601-1000px luoi 3 cot, <=600px 1 cot, nhan thua cho o 16px). */ .filter-card.cols-6 .uni-field{min-width:0} @media(min-width:1001px){.filter-card.cols-6 select,.filter-card.cols-6 input{font-size:13px;padding:9px 20px 9px 10px}} .filter-card .uni-actions{display:flex;align-items:flex-end} .filter-card .uni-actions .btn{width:100%} .filter-card .filter-count,.filter-card .filter-empty{grid-column:1/-1} @media(max-width:1000px){.filter-card.cols-6{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.filter-card.cols-6{grid-template-columns:1fr}} .filter-card label{font-size:12px;font-weight:800;color:var(--mut)} .filter-card input,.filter-card select{width:100%;margin-top:5px;padding:12px;border:1.5px solid var(--line);border-radius:12px;font:inherit} .filter-card .full{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap} .filter-title{margin:14px 0 6px;font-size:15px} .filter-area{position:relative}/* v116 (M15): neo overlay .v2s-filter-msg */ .filter-area .filter-title:first-child{margin-top:6px} /* v96: khung loc chung trang Shop — thanh truot chon hang muc (segmented control 3 nut) + truong bi khoa (mo + khong bam duoc). */ .uni-cat-switch{display:flex;gap:6px;background:#e7efec;border:1px solid var(--line);border-radius:999px;padding:5px;margin:0 0 10px} .uni-cat-switch .uni-cat-btn{flex:1;min-width:0;border:0;background:transparent;border-radius:999px;padding:11px 6px;font:inherit;font-weight:800;font-size:14px;color:var(--mut);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .uni-cat-switch .uni-cat-btn.active{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(11,93,78,.28)} .uni-cat-switch .uni-cat-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .filter-card .uni-field.locked{opacity:.55} .filter-card .uni-field.locked label{color:#9aa8a2} .filter-card select:disabled,.filter-card input:disabled{background:#f1f4f2;color:#8a9a94;cursor:not-allowed} @media(max-width:600px){.uni-cat-switch{flex-direction:column;border-radius:16px}.uni-cat-switch .uni-cat-btn{white-space:normal}} /* v63: khoi "Tim mau cho 11.11 — 3 buoc" tren trang Danh cho Shop (thiet ke 2026-11-06). 1 the noi bat ngay duoi tieu de trang, truoc the loc tin tuyen shop; vung ket qua tai dung .grid.grid-3 (3 cot desktop, 2 cot <=1000px, 1 cot <=600px theo quy tac chung). Mobile <=360px chi hien toi da 1 the (the dau theo dung thu tu); dong ho <=280px chi giu tieu de khoi + dong dem / link "Xem tat ca" (hubCount), an o chon + ket qua + dong phu. */ .hub-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin:0 0 9px;box-shadow:0 4px 16px rgba(11,93,78,.06)} .hub-card h2{margin:0 0 4px;font-size:22px} .hub-sub{margin:0 0 10px;color:var(--mut)} .hub-filters{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px} .hub-filters label{font-size:12px;font-weight:800;color:var(--mut)} .hub-filters select{width:100%;margin-top:5px;padding:12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;min-width:0} .hub-results{margin-top:4px} .hub-count{margin:10px 0 0} .hub-help{margin:6px 0 0;color:var(--mut);font-size:14px} .pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:20px 0} .pager button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer} .pager button:disabled{opacity:.45;cursor:default} .pager button.current{background:var(--brand);color:#fff;border-color:var(--brand)} .pager-info{font-weight:800} /* CHI TIẾT 2 CỘT */ .detail-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:start;margin:22px 0} .detail-main,.contact-card,.side-card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 4px 16px rgba(11,93,78,.06)} .detail-photo{aspect-ratio:4/3;background:linear-gradient(160deg,#d9eae4,#eef3f1);position:relative} .detail-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .detail-photo .ph-holder{font-size:88px} .detail-body{padding:26px} .detail-body h1{margin:0 0 6px;font-size:32px;line-height:1.2} .detail-body .subtitle{color:var(--mut);font-size:18px;margin:0 0 18px} .fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0} .fact{background:#f4f8f6;border-radius:14px;padding:13px 15px} .fact b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)} .fact span{font-weight:800} .contact-card{padding:22px;position:sticky;top:92px;background:linear-gradient(180deg,#0b5d4e,#083f34);color:#fff;border:0} .contact-card h2{margin-top:0} .contact-card p{color:#d7ece6} .contact-card .btn{display:flex;width:100%;margin:8px 0} .side-card{padding:20px;margin-top:18px} .mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .mini{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden} .mini-photo{aspect-ratio:4/3;position:relative;background:linear-gradient(160deg,#d9eae4,#eef3f1)} .mini-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .mini-body{padding:14px} .mini-body h3{margin:0 0 4px;font-size:17px} .mini-body p{margin:3px 0;color:var(--mut);font-size:14px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px} .step b{font-size:26px;color:var(--brand)} .news-list{display:grid;grid-template-columns:1fr 1fr;gap:12px} .news-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px} .news-item .cat{font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--brand);text-transform:uppercase} .news-item a{color:var(--ink);font-weight:800} .news-item .meta{color:var(--mut);font-size:13px} /* v38: HANG TIN GHIM + TIN THEO 4 COT CHUYEN MUC (mau Brands Vietnam). Khung vuong: anh ti le co dinh, bo goc 6-8px, khong bong do; tieu de toi da 2 dong; noi dung can tren; giu mau xanh thuong hieu. */ .pinned-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .pin-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative} .pin-card a{display:block;color:inherit;text-decoration:none} .pin-num{position:absolute;top:auto;bottom:8px;left:8px;z-index:1;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.25)}/* v78 B3: badge ghim xuong goc duoi-trai — goc tren-trai che chu "Ver2Solution" tren infographic */ .pin-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} .pin-noimg{display:grid;place-items:center;background:var(--brand);color:#fff} .pin-noimg b{font-size:40px;font-weight:900} .pin-card h3{margin:8px 10px 2px;font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pin-cat{margin:0 10px 10px;padding-left:44px;color:var(--mut);font-size:12px}/* v85 LỖI 1: huy hiệu .pin-num (28px, left:8px) đè 2–4 ký tự đầu dòng nguồn tin ở desktop — chừa đệm trái đủ chỗ cho huy hiệu (28 + 8 + 8) */ /* v100: the tin rut gon — 1 anh dai dien nho 16/9 + dung 2 dong (tieu de toi da 2 dong co cat ..., dong meta chuyen muc · ngay). Dung chung cho tin-tuc, trang chu (homeNews + homePinned) va hang tin trang Mau. */ .news-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative} .news-card a{display:block;color:inherit;text-decoration:none} .news-card-img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#0b5d4e}/* v114 (P3-2): contain thay cover — anh og 1200x630 khong bi crop 2 ben nua, chu "Ver2Solution" khong mat mep trai; dai trong ~2% tren/duoi lay nen xanh thuong hieu */ .news-card .pin-noimg{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:var(--brand);color:#fff} .news-card .pin-noimg b{font-size:40px;font-weight:900} .news-card h3{margin:8px 10px 2px;font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news-card-meta{margin:0 10px 10px;color:var(--mut);font-size:12px} /* v111 NEW-T1: huy hieu .pin-num (28px, bottom:8px;left:8px) de len dong meta o day the — ".pin-cat{padding-left:44px}" cua v85 la code chet (khong cho nao render .pin-cat tu v100, meta render bang .news-card-meta). The nao co huy hieu thi dem trai meta 44px (28 + 8 + 8) de chu bat dau ben phai huy hieu. Mobile huy hieu o left:16px nen dem 52px. Trang Mau + Tin tuc khong danh so nen khong bi anh huong (khong co .pin-num). */ .news-card:has(.pin-num) .news-card-meta{padding-left:44px} @media(max-width:600px){.news-card:has(.pin-num) .news-card-meta{padding-left:52px}} .news-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .gopy-fab{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:90;background:var(--red);color:#fff;border:0;border-radius:50%;width:56px;height:56px;font-size:22px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25)} .gopy-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px} .gopy-overlay.open{display:flex} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .gopy-box{background:#fff;border-radius:20px;padding:22px;max-width:520px;width:100%;max-height:90vh;overflow:auto} .gopy-box label{display:block;font-weight:800;font-size:14px;margin:12px 0 4px} .gopy-box input,.gopy-box select,.gopy-box textarea{width:100%;padding:11px;border:1.5px solid var(--line);border-radius:12px;font:inherit} .gopy-box textarea{min-height:110px} /* FORM v20 (Shop / Mẫu / đăng tin): thẻ trắng bo 22px, cùng hệ với filter-card */ .form-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;margin:16px 0} .form-card label{display:block;font-weight:800;font-size:14px;margin:12px 0 4px} .form-card input,.form-card select,.form-card textarea{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff} .form-card textarea{min-height:110px} .form-card fieldset{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px} .form-card fieldset legend{font-weight:800;padding:0 6px} .form-card fieldset label{display:inline-flex;align-items:center;gap:6px;font-weight:400;margin:4px 12px 4px 0} .form-card fieldset label input{width:auto} .form-card fieldset input[type=text]{width:100%} /* v110: form Đặt câu hỏi trên trang Hỏi đáp — select 1/3 trái, textarea 2/3 phải (gap 12px theo chuẩn đã siết ở v108); mobile ≤600px xếp dọc, ô nhập 16px để iOS không tự zoom (như .form-card v91). */ .faq-ask{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;margin:16px 0} .faq-ask h2{margin:0 0 6px} .faq-ask p{margin:0 0 12px} .faq-ask-grid{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:start} .faq-ask label{display:block;font-weight:800;font-size:14px} .faq-ask select,.faq-ask textarea{width:100%;margin-top:5px;padding:12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff} .faq-ask textarea{min-height:110px;resize:vertical} .faq-ask-msg{margin:12px 0 0;font-size:14px;min-height:1.2em} .faq-ask-msg.ok{color:#0b7a4b} .faq-ask-msg.err{color:#d92b1f} .faq-ask-receipt{margin:12px 0 0;padding:12px 14px;border:1px solid #bfe3d2;background:#eefaf4;border-radius:12px;font-size:14px}/* v114 (P3-8): bien nhan sau khi gui cau hoi */ .faq-ask-receipt p{margin:0 0 6px} .faq-ask-receipt p:last-child{margin-bottom:0} .filter-hint,.filter-count,.filter-empty{font-size:13px;color:var(--mut);margin:8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* v115: tat ca dong giai thich/huong dan trong bo loc chung 1 form font, chi 1 dong (khong xuong dong) de tiet kiem khong gian */ .wallet-balance{font-size:44px;font-weight:800;margin:6px 0;color:#0b5d4e}/* v114 (P1-1): so du lon trang Vi cua toi */ @media(max-width:600px){.faq-ask-grid{grid-template-columns:1fr}.faq-ask select,.faq-ask textarea{font-size:16px}.faq-ask .btn{min-height:48px}} /* v45 auth: 1 the, 1 view hien tai 1 thoi diem (mau chuan login/signup) */ .auth-view[hidden]{display:none} .auth-links{margin:14px 0 0;font-size:14px} .auth-links a{display:inline-block;margin:0 16px 6px 0} .pw-wrap{position:relative;display:block} .pw-wrap input{padding-right:56px} .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font:inherit;font-size:13px;font-weight:700;color:var(--brand);cursor:pointer} .auth-type-btn{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px;margin:10px 0;cursor:pointer;font:inherit} .auth-type-btn:hover{border-color:var(--brand)} .auth-type-btn b{display:block;font-size:16px;margin-bottom:2px} .auth-type-btn span{font-size:13px;color:var(--mut)} .notice{font-size:14px;color:#7a5b00;background:#fff7dd;border-radius:12px;padding:12px 14px;margin:12px 0} .empty-state{font-size:14px;color:#5b6470;background:#f2f5f7;border:1px dashed #c3ccd4;border-radius:12px;padding:12px 14px;margin:12px 0} .news-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:14px;align-items:start} @media(max-width:820px){.news-layout{grid-template-columns:1fr}} .most{list-style:none;margin:0;padding:0} .most li{display:flex;gap:10px;border-bottom:1px solid var(--line);padding:10px 0} .most li:last-child{border:0} .rank{flex:0 0 28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800} .most a{font-weight:700} .most .meta{color:var(--mut);font-size:13px} footer.site-foot{margin-top:44px;border-top:1px solid var(--line);background:#fff;padding:26px 0;color:var(--mut)} /* v56: dong Powered by Ver2Solution o cuoi footer moi trang. */ .site-foot .powered{margin-top:10px;color:var(--ink);font-weight:700} /* v77: link trang phap ly (AdSense) o cuoi footer moi trang. */ .site-foot .foot-legal{margin-top:12px;font-size:13px;color:var(--mut)} .site-foot .foot-legal a{color:var(--mut);text-decoration:underline;text-underline-offset:2px} .site-foot .foot-legal a:hover{color:var(--ink)} :focus-visible{outline:3px solid var(--amber);outline-offset:2px} @media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.pinned-row{grid-template-columns:repeat(2,1fr)}.news-row-4{grid-template-columns:repeat(2,1fr)}.grid-3,.mini-grid{grid-template-columns:repeat(2,1fr)}.search-card{grid-template-columns:1fr 1fr}.detail-layout{grid-template-columns:1fr}.contact-card{position:static}.head-in{flex-wrap:wrap}.main-nav{display:none}.main-nav.open{display:flex;flex-direction:column;width:100%;margin-left:0;margin-top:8px}.menu-btn{display:block}} @media(max-width:600px){.grid,.grid-3,.mini-grid,.news-list,.steps{grid-template-columns:1fr}.pinned-row{grid-template-columns:1fr}.news-row-4{grid-template-columns:1fr}.search-card,.filter-card,.hub-filters{grid-template-columns:1fr}.fact-grid{grid-template-columns:1fr}.hero{padding:26px 20px}.head-in{flex-wrap:wrap}.main-nav{margin-left:0}.head-in{position:relative}.user-menu-wrap{position:static}.user-menu{left:auto;right:16px;top:calc(100% + 8px)}/* v90 (F-fix): mobile vien diem xuong dong 2 ben trai — dropdown can phai theo .head-in (thay vi theo vien) de khong tran trai man hinh; right:16px vi .head-in CHINH LA .wrap (padding nam TRONG border-box) nen right:0 se sat mep viewport; KHOI NAY VAN MO (dong o .pin-num dong 279) — dung dong them dau ngoac o day. */ /* v28: mobile — Lương 1 dòng, Lịch 1 dòng, Kinh nghiệm tối đa 2 dòng, xếp dọc. */ .decision-row{flex-direction:column}.decision-item{flex:1 1 auto} /* v39: nut Gop y xuong goc duoi phai (khong che noi dung giua man hinh). */ .gopy-fab{top:auto;bottom:20px;right:14px;transform:none} /* v39: nut phan trang du lon de bam bang ngon tay. */ .pager button{min-height:44px;padding:10px 16px} /* v91 (8): mobile 390px — nut hanh dong chinh >=48px (nut hero "Tìm mẫu" chi 41px vi rule 48px cu chi ap trong @media 360px); o nhap form Gop y (#gopyForm, co tren moi trang) + 2 select loc Kiot 16px de iOS khong tu zoom khi bam vao (truoc day 14px / 13.33px). */ .search-card .btn,.filter-card .btn,.form-card .btn,.card-actions .btn{min-height:48px} #gopyForm input,#gopyForm select,#gopyForm textarea{font-size:16px} #kiotProv,#kiotCat{font-size:16px} /* v39: o tin dang ngang — anh 120px ben trai, tieu de + chuyen muc ben phai (4 o xep doc 1 cot se rat dai neu giu anh 16:9 day chieu rong). */ .pin-card a{display:grid;grid-template-columns:120px 1fr;grid-template-areas:"img title" "img cat";column-gap:10px;align-items:start;padding:10px} .pin-card:not(:has(>a)){display:grid;grid-template-columns:120px 1fr;grid-template-areas:"img title" "img cat";column-gap:10px;align-items:start;padding:10px} .pin-img,.pin-noimg{grid-area:img;width:120px;aspect-ratio:4/3} .pin-card h3{grid-area:title;margin:0} .pin-cat{grid-area:cat;margin:0;padding-left:0}/* v85: mobile — huy hiệu nằm trên góc ảnh, không đè dòng nguồn nên bỏ đệm trái */ .pin-num{top:auto;bottom:16px;left:16px}}/* v78 B3: goc duoi-trai (mobile) */ @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} /* MÀN HÌNH RẤT NHỎ (điện thoại nhỏ, đồng hồ ~200–320px): không tràn ngang, mọi thứ xếp dọc 1 cột, chữ vẫn đọc được, nút đủ lớn để bấm bằng ngón tay. Các breakpoint này là mô phỏng bằng CSS, KHÔNG thay thế kiểm tra thiết bị thật. */ @media(max-width:360px){ .wrap{padding:0 10px}.hero{padding:20px 14px;border-radius:20px}.hero h1{font-size:24px} .search-card{padding:10px}.card-actions .btn,.search-card .btn,.filter-card .btn,.form-card .btn{width:100%;min-height:48px}.card-actions{grid-template-columns:1fr} .detail-body{padding:16px}.detail-body h1{font-size:24px}.fact-grid{grid-template-columns:1fr} .gopy-fab{width:48px;height:48px;right:8px} /* v39: man hinh rat nho — GIU DU thong tin tren the (khong an o thu 2 hay muc Kinh nghiem nhu v28 nua), chi thu gon padding/min-height de vua man hinh 360px; decision-value van toi da 2 dong. */ .decision-item,.decision-exp{padding:7px 9px;min-height:56px} /* v39: chong tran ngang — o nhap trong luoi khong duoc vuot chieu rong. */ .search-card input,.search-card select,.filter-card input,.filter-card select,.form-card input,.form-card select,.form-card textarea{min-width:0} /* v63: man hinh rat nho — khoi hub chi hien toi da 1 the ket qua. */ .hub-results .card:nth-child(n+2){display:none} .hub-card{padding:14px} } @media(max-width:280px){ /* v63: dong ho — khoi hub chi giu tieu de + dong dem / link "Xem tat ca" (hubCount), an o chon + ket qua + dong phu. */ .hub-filters,.hub-results,.hub-help{display:none} } @media(max-width:320px){ body{font-size:15px}.logo{font-size:17px}.logo small{display:none} .hero h1{font-size:21px}.section-head h2{font-size:21px} .tags{flex-direction:column}.tag{width:fit-content} .facts div{flex-direction:column;gap:2px}.facts span{text-align:left} .pager button{padding:10px;min-height:44px} img,.card-photo,.detail-photo{max-width:100%} } html,body{overflow-x:hidden} img{max-width:100%} /* SHOP TUYỂN MẪU (v22): thẻ tin tuyển công khai. v101: shop không logo hiện tên sản phẩm bán trong ô ảnh thay cho chữ cái đầu. */ .shop-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .shop-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 16px rgba(11,93,78,.06)} .shop-head{display:flex;gap:12px;align-items:center;background:linear-gradient(160deg,#d9eae4,#eef3f1);border-radius:16px;padding:14px;min-height:100px} .shop-initial{flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:900} .shop-card h3{margin:0;font-size:21px;line-height:1.3;min-height:55px} .shop-card h3 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .shop-sub{margin:4px 0 0;color:var(--mut);font-size:14px} .shop-card .facts{margin:0;display:grid;gap:6px;font-size:14px} .shop-card .facts div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:6px} .shop-card .facts dt{font-weight:800;color:var(--mut);flex:0 0 auto} .shop-card .facts dd{margin:0;text-align:right} .shop-src{font-size:13px;color:var(--mut);margin:0} .shop-src a{font-weight:800} /* v32: thẻ shop theo mẫu thẻ mẫu MC — logo là điểm nhấn (72px), thông tin quyết định (lĩnh vực, lương, tỉnh) đưa lên đầu; trang chi tiết shop theo mẫu trang công ty — đầu trang logo lớn (96px) + tên, rồi thông tin shop và tin tuyển đang mở của chính shop đó. */ .shop-card .shop-logo,.shop-card .shop-initial{flex:0 0 25%;width:25%;height:auto;aspect-ratio:1;border-radius:18px;font-size:40px} /* v57: logo shop 1/4 chieu rong o thong tin (goc trai tren) — chi the shop, khong doi trang chi tiet (.company-head giu 96px). */ .shop-meta{margin:0;color:var(--mut);font-size:13px} .shop-foot{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px} .shop-foot .contact-note{margin:0} .company-head{display:flex;gap:18px;align-items:flex-start;padding:26px 26px 0} .company-head .shop-logo,.company-head .shop-initial{flex:0 0 96px;width:96px;height:96px;border-radius:22px;font-size:40px} .company-head h1{margin:0 0 6px;font-size:30px;line-height:1.2} .company-head .shop-sub{font-size:16px} .job-item{background:#f4f8f6;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:12px 0} .job-item h3{margin:0 0 6px;font-size:19px} .job-meta{margin:0 0 10px;color:var(--mut);font-size:14px} .job-count{margin:0;color:var(--mut);font-size:14px} @media(max-width:600px){.company-head{padding:18px 18px 0;gap:12px}.company-head .shop-logo,.company-head .shop-initial{flex:0 0 72px;width:72px;height:72px;font-size:30px}.company-head h1{font-size:24px}} @media(max-width:1000px){.shop-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.shop-grid{grid-template-columns:1fr}} /* DẢI NIỀM TIN (v26, spec §4): ngay sau hero trang chủ, 3 số đã kiểm chứng + nút CTA tới mục shop. 1 hàng trên desktop, xếp dọc trên mobile. */ .trust-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 22px;margin:16px 0 0;box-shadow:0 4px 16px rgba(11,93,78,.06);overflow:hidden} .trust-lead{margin:0;font-weight:800;font-size:17px} .trust-text{flex-basis:100%;min-width:0}/* v49: doan PR chiem tron 1 hang rieng — tranh hang voi o so lieu + nut gay day nut xuong */ .trust-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 16px;flex-basis:100%;min-width:0}/* v65: gop 3 hang so lieu thanh 1 grid 4 cot x 2 hang — gon, chuyen nghiep; thu tu: Mau/Shop/Khach/Xuong | Tinh/Lo/Thu mua/Cho */ .trust-num{min-width:0}/* v49: nhan dai duoc xuong dong trong o, khong ep o rong ra */ .trust-num b{display:block;font-size:28px;line-height:1.1;color:var(--brand)} .trust-num span{display:block;font-size:13px;color:var(--mut);font-weight:700} /* v41: dong thu 2 cua moi o so lieu (luong/doanh thu) + ghi chu nho. */ .trust-sub{display:block;font-size:12px;color:var(--mut);font-weight:700;margin-top:2px} .trust-note{display:none;font-size:11px;color:var(--mut);font-style:italic;margin-top:2px}/* v49: AN ghi chu noi bo (doanh thu cao nhat chua co du lieu) — chu noi bo lot ra giao dien; dong dai khong xuong dong ep hang so lieu tran khung, day nut xuong. Giu span trong HTML de JS cap nhat sau. */ /* DAI LOGO DOI TAC (v49, yeu cau nguoi dung 06/11/2026 — lam lai theo mau SEONGON; v50: doi thanh o tron 48px chua 1 icon; v51: logo MAU GOC, dai logo nam gon trong khung trang — .trust-strip overflow:hidden, .trust-logos min-width:0 de track marquee khong tran vien bo phai): moi o chua icon cua thuong hieu (images/partners/*-icon.png); van tu dong xoay ngang; dung chuot thi tam dung. 2 nhom giong he de cuon lien tuc. */ .trust-logos{flex-basis:100%;min-width:0;margin-top:6px;border-top:1px solid var(--line);padding-top:14px} .trust-logos-label{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} .logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .logo-track{display:flex;width:max-content;animation:logo-scroll 122s linear infinite} .logo-marquee:hover .logo-track{animation-play-state:paused} .logo-group{display:flex;align-items:center;gap:16px;padding-right:16px} @keyframes logo-scroll{to{transform:translateX(-50%)}} /* DAI LOGO DOI TAC (v50, yeu cau nguoi dung 06/11/2026 11:44-11:45): moi thuong hieu CHI 1 icon duy nhat, khong lay bo logo kem chu/slogan; o TRON 48px (co ~2 dong chu), anh 70% trong o. Mac dinh xam mo, hover hien mau. Giu marquee + mask mo 2 mep + tam dung khi hover. */ .logo-card{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:0} .logo-card img{width:70%;height:70%;object-fit:contain} @media(max-width:600px){.logo-group{gap:12px;padding-right:12px}.logo-card{width:44px;height:44px}.logo-track{animation-duration:90s}} /* LOGO SHOP (v26, spec §5): khung vuông 52px như ô chữ cái cũ để thẻ không lệch. cover = ảnh vuông crop; contain = logo ngang/trong suốt, nền trắng, padding, không crop. */ .shop-logo{flex:0 0 52px;width:52px;height:52px;border-radius:16px;display:block} .shop-logo--cover{object-fit:cover} .shop-logo--contain{object-fit:contain;background:#eef7f2;border:1px solid var(--line);padding:6px} /* KHỐI LIÊN HỆ + DÒNG NOTES (v26, spec §8): chỉ mục đã công khai trong contact-audit-v26.md. Mục không có nguồn công khai không hiện. */ .contact-list{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:14px} .contact-list a{font-weight:800} .contact-note{font-size:13px;color:var(--mut);background:#eef7f2;border-radius:10px;padding:8px 11px;margin:0} .contact-card .contact-list a{color:#fff} .contact-card .contact-note{color:#d7ece6;background:rgba(255,255,255,.12)} @media(max-width:900px){.trust-nums{grid-template-columns:repeat(2,1fr);gap:12px 16px}} @media(max-width:600px){.trust-strip{flex-direction:column;align-items:flex-start;gap:14px}.trust-nums{margin-left:0}.trust-num b{font-size:26px}} /* SKIN LE HOI (v52, yeu cau nguoi dung 06/11/2026 — lam luon bo 3 skin Tet Nguyen Dan, Noel, Tet Duong lich; het dip tu tro ve giao dien mac dinh). - Class theme dat len boi js/themes.js theo ngay; ngoai moi dip thi khong co class nao -> bien mau mac dinh o :root. - Moi theme chi doi bien mau CSS + dai mau 6px tren cung + hieu ung roi nhe bang CSS thuan (khong anh, khong JS nang, pointer-events:none nen khong chan click, khong che noi dung). - .theme-fx-off (nguoi dung bam nut "Tat hieu ung", luu localStorage) chi tat 2 lop roi, van giu mau theme. - KHONG dong vao dai logo doi tac (.trust-strip/.logo-card): chi doi bien mau chung; o logo tron 48px + anh icon mau goc giu nguyen. */ html.theme-noel{--brand:#b91c1c;--brand2:#15803d;--brandsoft:#fdecec;--amber:#e8a100} html.theme-tet-duong{--brand:#8a6d00;--brand2:#b8860b;--brandsoft:#fdf6e0;--amber:#d99a00} html.theme-tet{--brand:#c8102e;--brand2:#a67c00;--brandsoft:#fdeeee;--amber:#e8a100} html.theme-noel body{border-top:6px solid #b91c1c;border-image:linear-gradient(90deg,#b91c1c,#15803d,#b91c1c) 1} html.theme-tet-duong body{border-top:6px solid #8a6d00;border-image:linear-gradient(90deg,#8a6d00,#f5b301,#8a6d00) 1} html.theme-tet body{border-top:6px solid #c8102e;border-image:linear-gradient(90deg,#c8102e,#f5b301,#c8102e) 1} /* Lop roi 1 (body::after, o 120px, roi 12s) + lop roi 2 (html::after, o 180px, roi 20s): quang duong roi bang dung kich thuoc o nen lap lai khong giat. */ html.theme-noel body::after,html.theme-tet body::after,html.theme-tet-duong body::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;background-repeat:repeat;animation:theme-fall-a 12s linear infinite} html.theme-noel::after,html.theme-tet::after,html.theme-tet-duong::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;background-repeat:repeat;animation:theme-fall-b 20s linear infinite} /* Noel: tuyet (cham xanh-xam nhat de thay tren nen sang). */ html.theme-noel body::after{background-image:radial-gradient(circle at 25% 25%,#a8c4dc 1.6px,transparent 2px),radial-gradient(circle at 70% 60%,#c3d6e8 1.1px,transparent 1.5px),radial-gradient(circle at 45% 85%,#d3e2ef .9px,transparent 1.3px);background-size:120px 120px} html.theme-noel::after{background-image:radial-gradient(circle at 30% 40%,#8fb0cc 1.1px,transparent 1.5px),radial-gradient(circle at 65% 75%,#c3d6e8 .8px,transparent 1.2px);background-size:180px 180px} /* Tet Duong: phao giay/confetti vang-do-xanh. */ html.theme-tet-duong body::after{background-image:radial-gradient(circle at 30% 30%,#f5b301 1.8px,transparent 2.2px),radial-gradient(circle at 70% 65%,#d92b1f 1.5px,transparent 1.9px),radial-gradient(circle at 50% 85%,#0e8a6d 1.5px,transparent 1.9px);background-size:120px 120px} html.theme-tet-duong::after{background-image:radial-gradient(circle at 35% 35%,#e8a100 1.2px,transparent 1.6px),radial-gradient(circle at 65% 70%,#c8102e 1px,transparent 1.4px);background-size:180px 180px} /* Tet: canh hoa dao hong + vang roi. */ html.theme-tet body::after{background-image:radial-gradient(ellipse 3px 4.5px at 30% 30%,#ff8fa3 60%,transparent 66%),radial-gradient(ellipse 2.5px 4px at 70% 65%,#f5b301 60%,transparent 66%),radial-gradient(ellipse 2px 3.5px at 50% 85%,#ffb3c1 60%,transparent 66%);background-size:120px 120px} html.theme-tet::after{background-image:radial-gradient(ellipse 2.5px 3.5px at 35% 40%,#ff8fa3 60%,transparent 66%),radial-gradient(ellipse 2px 3px at 65% 70%,#f5b301 60%,transparent 66%);background-size:180px 180px} @keyframes theme-fall-a{from{background-position:0 0}to{background-position:0 120px}} @keyframes theme-fall-b{from{background-position:0 0}to{background-position:0 180px}} html.theme-fx-off body::after,html.theme-fx-off::after{display:none} @media(prefers-reduced-motion:reduce){html.theme-noel body::after,html.theme-tet body::after,html.theme-tet-duong body::after,html.theme-noel::after,html.theme-tet::after,html.theme-tet-duong::after{animation:none}} /* Nut tat/bat hieu ung (js/themes.js tu tao khi co theme; goc duoi trai de khong dung nut Gop y o phai). */ .theme-fx-toggle{position:fixed;left:12px;bottom:12px;z-index:2002;padding:6px 12px;font-size:12px;font-weight:700;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:var(--sh);cursor:pointer} .theme-fx-toggle:hover{border-color:var(--brand)} /* Loi chuc mung ngay le (v53, yeu cau nguoi dung 06/11/2026 — them loi chuc cho ngay dac biet dung skin): thanh chuc mung nho gon do js/themes.js tu tao (id themeGreeting) khi co theme, dat dau
— ngay duoi header, tren hero; an khi het dip (khong co theme) hoac nguoi dung bam nut dong (luu localStorage 'ver2theme-greeting' theo mua). Mau nen lay tu bien --brandsoft nen tu doi theo tung theme; khong dong vao dai logo. */ .theme-greeting{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--brandsoft);color:var(--ink);font-size:14px;font-weight:600;line-height:1.5;text-align:center} .theme-greeting span{flex:1 1 auto} .theme-greeting button{flex:0 0 auto;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:13px;line-height:1;cursor:pointer} .theme-greeting button:hover{border-color:var(--brand);color:var(--brand)} @media(max-width:600px){.theme-greeting{font-size:13px;padding:8px 10px;margin-bottom:10px}} /* v55: MUC LO HANG XA KHO (danh-sach-shop.html, yeu cau nguoi dung 06/11/2026 — chien luoc giup doanh nghiep xa hang ton kho thu ve von tai san xuat): muc dat o khu vuc top trang shop, ngay tren danh sach shop (truoc #publicShopsList, sau phan tieu de/gioi thieu trang). Khop phong cach hien tai: the trang bo tron, vien --line, bong --sh; gia in dam mau --brand; nhan "Chua xac thuc" nen vang nhat de canh bao nhe, khong dung do gay gat. Luoi 3 cot desktop, 2 cot <=1000px, 1 cot <=600px (khop .shop-grid). */ .lot-section{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;margin:9px 0;box-shadow:var(--sh)} .lot-section h2{margin:0 0 8px;font-size:24px} .lot-section h3{margin:20px 0 8px;font-size:18px} .lot-intro{color:var(--mut);margin:0 0 4px} .lot-sub{color:var(--mut);font-size:14px;margin:0 0 12px} .lot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .lot-card{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:#fff;min-width:0;overflow-wrap:break-word}/* v85: the xuong tran vien phai tren mobile — grid item mac dinh min-width:auto nen chuoi dai (URL Facebook trong .lot-meta) day track rong hon viewport; min-width:0 + be dong */ .lot-card .lot-meta,.lot-card .lot-price{overflow-wrap:break-word} .lot-card a{overflow-wrap:anywhere} .lot-card h4{margin:0 0 6px;font-size:16px;line-height:1.4} .lot-price{margin:0 0 6px;font-size:17px;font-weight:900;color:var(--brand)} .lot-meta{margin:0 0 4px;font-size:14px;color:var(--ink)} .lot-date{margin:0 0 8px;font-size:13px;color:var(--mut)} .lot-label{display:inline-block;margin:0 0 10px;padding:4px 10px;border-radius:999px;background:#fff4e5;color:#8a5a00;border:1px solid #f2d5a0;font-size:12px;font-weight:800} .lot-card p:last-child{margin:0} .lot-note{margin:16px 0 0;font-size:13px;color:var(--mut)} @media(max-width:1000px){.lot-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.lot-grid{grid-template-columns:1fr}.lot-section{padding:8px}.lot-section h2{font-size:21px}} /* v57: muc lo hang chi hien 2 hang mac dinh (nut Xem them mo rong du 13 lo). An nhom phu (.lot-extra) + the thu 7 tro di o luoi dau khi thu gon: desktop 3 cot -> 6 the, tablet 2 cot -> 4 the, mobile 1 cot -> 2 the. */ .lot-section.collapsed .lot-extra{display:none} #faq.collapsed .faq-extra{display:none}/* v75: FAQ trang chu chi hien 3 cau dau, cac cau sau an sau nut Xem them */ .lot-section.collapsed .lot-grid .lot-card:nth-child(n+13){display:none} /* v64: loc lo/xuong — the khong khop bo loc luon an, ke ca khi mo rong */ .lot-card.lot-filtered-out{display:none} .filter-count{margin:6px 0 0;color:var(--mut);font-size:13px} .filter-empty{margin:6px 0 0;color:#8a5a00;font-size:13px} @media(max-width:1000px){.lot-section.collapsed .lot-grid .lot-card:nth-child(n+5){display:none}} @media(max-width:600px){.lot-section.collapsed .lot-grid .lot-card:nth-child(n+3){display:none}} .lot-more{display:block;margin:16px auto 0;padding:10px 22px;border:1px solid var(--line);border-radius:999px;background:#eef7f2;color:var(--brand);font-weight:800;font-size:15px;cursor:pointer} .lot-more:hover{background:#dff0ea} /* v68: trang dang nhap 2 cot (form trai, bang gioi thieu phai). */ .auth-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start} .auth-side h2{margin:0 0 8px;font-size:22px} .auth-side h3{margin:18px 0 6px;font-size:17px} .auth-side ul{margin:6px 0;padding-left:20px} .auth-side li{margin:4px 0} .auth-note{font-size:13px;color:var(--mut)} .coming{display:inline-block;background:#fff3cd;border:1px solid #e6c87a;color:#7a5b00;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:800;vertical-align:middle} .auth-type-btn.sel{border-color:var(--brand);background:#eef7f2} /* v85: phan hoi form dang ky/dang nhap ro rang — thong bao co 2 trang thai mau (xanh = thanh cong, do = loi), dat ngay tren nut submit de nhin thay khong can cuon; loi tung truong hien do duoi dung truong sai + to do vien o do. .field-err rong thi an (khong chiem cho). */ .auth-msg{margin:12px 0;font-size:14px;font-weight:700} .auth-msg:empty{display:none} .auth-msg.ok{color:#0b6b3a;background:#e7f6ec;border:1px solid #bfe6c9;border-radius:12px;padding:10px 12px} .auth-msg.err{color:#b42318;background:#fdecea;border:1px solid #f5c6c0;border-radius:12px;padding:10px 12px} .auth-msg.err a{color:#b42318;text-decoration:underline} .field-err{margin:4px 0 0;font-size:13px;font-weight:700;color:#b42318} .field-err:empty{display:none} .form-card input.invalid,.form-card select.invalid,.form-card textarea.invalid{border-color:#d92b1f;box-shadow:0 0 0 1px #d92b1f} /* v85: thong bao man hinh ban mobile — dung 2 dong, chi hien <=768px (tren desktop/tablet lon an han). Thanh nho tren cung, tren header; chu nguyen van, khong link; nut X tat (luu sessionStorage, xem app.js). */ .mobile-notice{display:none} @media(max-width:768px){ .mobile-notice{display:flex;align-items:flex-start;gap:10px;background:var(--brandsoft);border-bottom:1px solid var(--line);padding:8px 12px;font-size:13px;line-height:1.45;color:var(--ink)} .mobile-notice-text{flex:1 1 auto;min-width:0} .mobile-notice-text span{display:block} .mobile-notice-close{flex:0 0 auto;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:13px;line-height:1;cursor:pointer} .mobile-notice-close:hover{border-color:var(--brand);color:var(--brand)} } @media(max-width:900px){.auth-layout{grid-template-columns:1fr}} /* v70: SUA LOI MOBILE/TABLET (kiem tra tinh 06/11/2026 — KHONG chup duoc man hinh that vi tai Chromium that bai 2 kenh (chromium + chromium-headless- shell, deu "Download failure, code=1") va Chromium he thong tu choi chay (Hatch WebGL domain policy); cac sua duoi day dua tren kiem tra tinh v20.css + HTML, khong doi noi dung/so lieu/URL, khong doi hanh vi desktop. Kiem chung truc quan tren dien thoai that de sau khi deploy. */ /* (1) BANG RESPONSIVE: quy-tac-diem-thuong.html co bang 4 cot khong co CSS rieng nen o mobile bang tran khung va bi cat (html,body overflow-x:hidden che di). Quy tac chung: bang day du vien + cuon ngang o <=600px. */ table{width:100%;border-collapse:collapse;margin:14px 0} th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top} th{background:#f4f8f6} @media(max-width:600px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}th,td{padding:6px 8px;font-size:13px}} @media(max-width:600px){.table-scroll table{min-width:560px}}/* v81 P3-12: bang diem giu do rong cot doc duoc, cuon ngang trong wrapper */ /* (2) HEADER MOBILE 390px: logo + Menu + Dang Nhap (~414px) khong vua 1 hang (noi dung 350px) nen nut Dang Nhap roi xuong hang 2 lech trai. Thu gon header o <=600px de vua 1 hang. */ @media(max-width:600px){ .wrap{padding:0 16px} .head-in{gap:10px;min-height:60px} .logo{font-size:17px} .logo small{display:none} .logo-badge{width:34px;height:34px;font-size:19px;border-radius:11px} .menu-btn{padding:8px 11px;min-height:44px} .head-in .btn-sm{padding:8px 12px;font-size:13px} /* (4) Nut Gop y co dinh goc duoi phai che noi dung footer khi cuon toi cuoi trang — them khoang trong duoi footer. */ footer.site-foot{padding-bottom:84px} } @media(max-width:360px){.wrap{padding:0 10px}} /* (3) STEPS O TABLET 768px: .steps giu 3 cot (moi cot ~230px) lam doan FAQ dai bi hep; xuong 2 cot o <=1000px (<=600px van 1 cot nhu cu). (5) Nav mo o tablet: link cao ~47px de bam bang ngon tay (>=44px). */ @media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}.main-nav.open a{padding:12px 14px}} /* (6) iOS tu zoom khi bam o nhap neu font <16px. v90: o nhap FORM (dang ky/dang nhap) giu 16px o MOI co man hinh (audit mobile #4: o 390px o nhap chi 14px nen iPhone tu zoom); o nhap search/filter van chi can 16px o <=320px (body o muc nay la 15px). */ .form-card input,.form-card select,.form-card textarea{font-size:16px} /* v90: nut submit form dang ky full-width, cao toi thieu 48px (audit #4). v91: mo rong sang ca 2 trang auth rieng + 2 trang danh sach co form auth nhung (dang nhap + dang ky mau/shop) — cung chuan 48px tren mobile. */ #authSignUp button[type="submit"],#authSignIn button[type="submit"],#mauSignUp button[type="submit"],#mauSignIn button[type="submit"],#shopSignUp button[type="submit"],#shopSignIn button[type="submit"]{width:100%;min-height:48px} @media(max-width:320px){ .search-card input,.search-card select,.filter-card input,.filter-card select{font-size:16px} } /* v72: SUA GIAO DIEN MOBILE — kiem chung bang anh chup that 390px (Playwright + local server, 06/11/2026). Hoc Shopee/Lazada (luoi 2 cot, bo loc gap duoc, header gon) + VnExpress (tin ngang anh trai + tieu de phai, tieu de muc ngan gon). Cac loi that truoc v72: (F1) Header 2 hang (cao 91px): logo + Menu + Dang Nhap khong vua 358px, nut Dang Nhap roi xuong hang 2 lech trai (v70 uoc luong thieu ~6px). (F2) Bo loc trang Shop giu 3 cot o mobile, chu bi cat ("Tat ca tir..."): .filter-card.cols-3 (0,2,0) thang quy tac <=600px .filter-card (0,1,0). (F3) Trust strip cat doan PR + chi hien 1 cot so lieu: o <=600px flex-direction:column + align-items:flex-start lam flex-basis:100% thanh co chieu CAO, rong cua moi muc = max-content (PR 2720px, marquee 3248px, so lieu 994px) roi bi overflow:hidden cat di. (F4) Hero cao 853px; eyebrow xuong 2 dong, cham do nam le 1 dong. (F5) The mau cao 1261px (anh 4/5 cao 445px), the shop 1094px; trang chu dai 28.851px — luoi 1 cot keo dai vo tan. Khong doi noi dung/so lieu/URL, khong doi hanh vi desktop. */ /* (F1) HEADER 1 HANG o <=600px: thu nho logo + nut + khoang cach, mo rong wrap de vua 366px. */ @media(max-width:600px){ .wrap{padding:0 12px} .head-in{gap:8px;min-height:56px} .logo{font-size:15px} .logo-badge{width:32px;height:32px;font-size:18px;border-radius:10px} .menu-btn{padding:8px 10px;min-height:44px} .head-in .btn-sm{padding:8px 10px;font-size:13px} } /* (F2) BO LOC 1 COT o <=600px: .cols-3 phai ghi de o muc nay (cung specificity 0,2,0, viet SAU nen thang quy tac goc). */ @media(max-width:600px){ .filter-card.cols-3{grid-template-columns:1fr} } /* (F3) TRUST STRIP o <=600px: keo dan cac muc theo chieu ngang (stretch) + huy flex-basis:100% (o column no la co cao) de chu xuong dong binh thuong, so lieu hien du 2 cot, marquee chay dung khung. */ @media(max-width:600px){ .trust-strip{align-items:stretch;padding:16px} .trust-text,.trust-logos,.trust-nums{flex-basis:auto;width:100%} } /* (F4) HERO GON o <=600px + eyebrow xuong dong tu nhien (cham do di kem chu, khong nam le 1 dong). */ @media(max-width:600px){ .hero{padding:22px 18px 26px} .hero h1{font-size:24px} .hero p{font-size:15px} .eyebrow{display:inline-block;font-size:12px} .eyebrow .live-dot{margin-right:6px} } /* (F5) LUOI 2 COT kieu san TMDT o <=600px: the mau + the shop. Anh 4/5 o rong ~169px chi cao ~211px (thay vi 445px); nut hanh dong xep doc de vua the hep; the shop bo min-height co dinh. */ @media(max-width:600px){ .grid{grid-template-columns:repeat(2,1fr);gap:12px} .shop-grid{grid-template-columns:repeat(2,1fr);gap:12px} .card-body{padding:14px} .card-body h3{font-size:17px} .card-actions{grid-template-columns:1fr} .tag{font-size:12px;padding:4px 9px} .decision-item,.decision-exp{min-height:60px} .shop-card{padding:14px} .shop-card h3{font-size:17px;min-height:0} .shop-head{min-height:0;padding:10px} .gopy-fab{width:48px;height:48px;font-size:20px;bottom:16px;right:12px} body{padding-bottom:76px}/* v78 B4: noi dung cuoi trang cuon len khoi FAB 48px + bottom 16px (du 12px tho) */ } /* (F5b) The shop o mobile: logo + ten xep doc (logo 56px doc duoc, thay vi 25% ~35px mo nhat); o tin (khong logo that) cung 56px. */ @media(max-width:600px){ .shop-head{flex-direction:column;align-items:flex-start;gap:8px} .shop-card .shop-logo,.shop-card .shop-initial{flex:0 0 56px;width:56px;height:56px;font-size:28px} } /* (F7) Anh loi tai: nen xanh nhat + font-size:0 de khung khong trang boc va chu alt khong no ra khi anh chua tai duoc (mang cham); anh that van phu kin (object-fit:cover), font-size khong anh huong anh that. */ .pin-img{background:var(--brandsoft);font-size:0} .card-photo img{font-size:0} .shop-logo{font-size:0} /* (F6) NUT MO/DONG BO LOC chi hien tren mobile (<=600px). Mac dinh gap (an) de trang ngan gon kieu san lon; bam thi mo. Xem them app.js initFilterToggle + class .filters-open tren section. */ .filter-toggle{display:none} @media(max-width:600px){ .filter-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;margin:6px 0 10px;border:1.5px solid var(--brand);border-radius:999px;background:#fff;color:var(--brand);font:inherit;font-weight:800;font-size:15px;cursor:pointer} .filter-section .filter-area{display:none} .filter-section.filters-open .filter-area{display:block} .filter-section>.filter-card{display:none} .filter-section.filters-open>.filter-card{display:grid} } /* v73: sua vo mobile 360px (nguoi dung bao bang anh chup dien thoai that 19:22/19:34 ngay 06/11 — may 360px CSS, khong phai 390px nhu test v72). Hoc Shopee (luoi 2 cot minmax, pill cat gon) — giu nhan dien Ver2Solution. */ .trust-num span.trust-note{display:none}/* G4: .trust-num span (0,1,1) de mat .trust-note (0,1,0) — ghi chu noi bo "(doanh thu cao nhat chua co du lieu...)" lot ra giao dien; an han bang specificity 0,2,1. */ @media(max-width:400px){/* v85: mo rong quy tac thu nho header tu <=380px len <=400px — o 390px header van rot 2 hang (quy tac cu khong ap dung) */ .head-in{gap:6px}/* G5: o 360px logo 177 + Menu 57 + Dang Nhap 93 + 2 gap 8px = 343px > 336px — nut Dang Nhap rot hang 2 (cao 88px). Giam gap + co chu + bot padding de vua 1 hang (~322px). */ .logo{font-size:14px} .menu-btn{padding:8px 8px} .head-in .btn-sm{padding:8px 8px} } @media(max-width:600px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))}/* G1: 1fr = minmax(auto,1fr) — min-content the shop 240px lam luoi tran 430px trong khung 336px o 360px, cot phai bi cat khoi man hinh (anh 1). minmax(0,1fr) khoa 2 cot deu 162px. */ .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .card,.shop-card{min-width:0} .card-body{min-width:0} .shop-head{min-width:0} .shop-head h3{min-width:0;overflow-wrap:break-word} .shop-foot{min-width:0} .shop-foot>*{min-width:0}/* G2: chan .contact-list/.shop-meta lam tran .shop-foot (do 210px trong o 132px). */ .contact-list a,.shop-src a{overflow-wrap:anywhere}/* G2b: link dai (URL) duoc be xuong dong trong o hep. */ .card-actions{min-width:0} .decision,.decision-row,.decision-item,.decision-exp{min-width:0} .tags{min-width:0} .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* G3: pill dai nhat ~190px ("Toan quoc / Live online") tran o 132px — cat gon bang dau ..., thong tin day du van co trong o "Tinh" cua the. */ } /* v78 C1: link chia se bai viet bi cat tren mobile (34 trang bai, body rong 444px @360/390 vi chua URL khong nga dong duoc). Luat tap trung o day thay vi sua inline