/* ========================================================================== TrendyShop — component Một file. Không bundle riêng cho trang chủ: docblock của Mona_Enqueue::context() ghi lại cái giá của lần chia trước — năm rule nằm trong bundle chỉ-trang-chủ và render không style ở mọi trang khác. Thứ tự: chrome → hero → dải 1..9 → mảnh dùng lại → footer → dock. ========================================================================== */ /* ══ Thanh trên cùng ══════════════════════════════════════════════════════ Quy ước của trang bán hàng Việt: hotline và cam kết giao/đổi nằm TRÊN header, thấy ngay dòng đầu tiên. Người mua ở đây quyết định bằng "có COD không, đổi trả thế nào" trước khi xem tới sản phẩm. */ .mona-topbar { background: var(--ink); color: var(--on-dark-soft); font-size: var(--t-micro); } /* nowrap, KHÔNG phải wrap. Bản đầu để flex-wrap:wrap nên ở khoảng 760–900px thanh này tụt xuống hai dòng: ba cam kết một dòng, dòng miễn phí vận chuyển một dòng nữa. Một thanh phụ chiếm hai dòng trên điện thoại là hai dòng lấy mất của nội dung. Thay vì cho xuống dòng thì bỏ bớt mục theo khổ. */ .mona-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; flex-wrap: nowrap; overflow: hidden; } .mona-topbar__in > p { white-space: nowrap; flex: none; } .mona-topbar ul { display: flex; gap: 20px; flex-wrap: wrap; } .mona-topbar li { display: inline-flex; align-items: center; gap: 6px; } .mona-topbar svg { width: 14px; height: 14px; color: var(--sun); flex: none; } .mona-topbar b { color: var(--on-dark); font-weight: 600; } .mona-topbar a { color: var(--on-dark); } @media (max-width: 980px) { .mona-topbar li:nth-child(n+3) { display: none; } } @media (max-width: 700px) { .mona-topbar li:nth-child(n+2) { display: none; } } /* Dưới 520px giữ dòng miễn phí vận chuyển — nó là lời hứa mạnh nhất — và bỏ danh sách cam kết, vốn đã lặp lại trong hero. */ @media (max-width: 520px) { .mona-topbar ul { display: none; } .mona-topbar__in { justify-content: center; } } /* ══ Header ═══════════════════════════════════════════════════════════════ Dính. Trang bán hàng cuộn dài qua nhiều lưới sản phẩm; giỏ hàng và ô tìm kiếm phải theo người dùng xuống, nếu không họ phải cuộn ngược lên đầu để tìm một mẫu khác. */ .mona-header { position: sticky; top: 0; z-index: 60; background: var(--card); border-bottom: 1px solid var(--line); } .mona-header__bar { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 32px); min-height: 72px; } .mona-logo { display: inline-flex; align-items: center; gap: 10px; } .mona-logo__word { display: flex; flex-direction: column; font-family: var(--f-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.03em; /* 1.05 đủ cho "TrendyShop" vì nó không có dấu — nhưng trong theme dòng này là bloginfo('name'), biên tập viên đổi được. 1.27 là sàn đo được của Plus Jakarta Sans 800 với dấu chồng. Chênh lệch ~4px, không đáng tiếc. */ line-height: 1.27; } .mona-logo__word span { /* Không thừa hưởng 1.05 của .mona-logo__word. Dòng này là text-transform: uppercase, nên sàn không phải 1.17 của chữ thường mà là 1.356 — chữ hoa có dấu chồng (Ô, Ắ, Á) là thứ cao nhất trong font. */ line-height: 1.45; font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; } /* Ô tìm kiếm là phần tử rộng nhất của header. Trên một shop, tìm kiếm là đường đi chính chứ không phải một icon nép ở góc. */ .mona-search { position: relative; display: flex; } .mona-search input { width: 100%; min-height: var(--tap); padding: 10px 46px 10px 42px; border: 1.5px solid var(--line-2); border-radius: var(--r-full); background: var(--card); font: inherit; font-size: var(--t-small); color: var(--ink); } .mona-search input::placeholder { color: var(--ink-2); } .mona-search input:focus { border-color: var(--ink); outline: none; } .mona-search__ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-2); pointer-events: none; } .mona-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; } .mona-search button:hover { background: var(--brand); } .mona-header__act { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); } .mona-hot { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: var(--r-full); background: var(--brand-wash); } .mona-hot i { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--brand); color: var(--on-dark); display: grid; place-items: center; } .mona-hot i svg { width: 15px; height: 15px; } .mona-hot span { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .mona-hot b { display: block; font-family: var(--f-num); font-weight: 800; font-size: .95rem; color: var(--brand-ink); letter-spacing: -.01em; } .mona-cart { position: relative; width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); } .mona-cart:hover { border-color: var(--ink); } .mona-cart__n { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-full); background: var(--brand); color: var(--on-dark); font-family: var(--f-num); font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--ground); } .mona-burger { width: var(--tap); height: var(--tap); display: none; place-items: center; } /* ══ Nav + mega menu ══════════════════════════════════════════════════════ Mở bằng :hover VÀ :focus-within, nên đi bằng phím Tab cũng mở được panel mà không cần một dòng JS. `visibility` chứ không phải `display:none` — display không transition được, và một panel bật tắt cụp đọc ra lỗi chứ không đọc ra hiệu ứng. `visibility: hidden` cũng kéo panel ra khỏi thứ tự Tab khi đóng, là điều `opacity: 0` một mình không làm được. */ /* Prototype có border-top ở đây và border-bottom ở .mona-crumb, và ở đó chúng đúng: nền header là --ground, nền trang cũng --ground, nên ba nét kẻ là thứ duy nhất tách được các dải cùng màu. Site này đã đổi sang nền trắng --card theo yêu cầu, và lúc đó ba nét ấy thành ba lát cắt ngang một mặt trắng liền, cách nhau chừng 40px. Giữ đúng một nét: border-bottom của .mona-header, cái tách thanh dính đầu trang khỏi nội dung. */ .mona-nav { position: relative; } .mona-nav > .mona-container { position: static; } /* panel bám mép .mona-nav, không bám container */ .mona-nav__list { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .mona-nav__list > li { position: static; } .mona-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 6px 14px; font-family: var(--f-display); font-weight: 600; font-size: var(--t-small); border-bottom: 2px solid transparent; } .mona-nav a:hover { color: var(--brand-ink); } .mona-nav a[aria-current="page"] { color: var(--brand-ink); border-bottom-color: var(--brand); } .mona-nav .is-hot { color: var(--brand-ink); } .mona-nav__caret { width: 11px; height: 11px; transition: transform var(--dur) var(--ease); } .mona-nav__list > li:hover .mona-nav__caret, .mona-nav__list > li:focus-within .mona-nav__caret { transform: rotate(180deg); } .mona-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 24px 44px -22px rgba(23,18,14,.42); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur) var(--ease-2), transform var(--dur) var(--ease), visibility var(--dur); } .mona-nav__list > li:hover > .mona-panel, .mona-nav__list > li:focus-within > .mona-panel { opacity: 1; visibility: visible; transform: none; } /* Mega: bốn cột nhân vật + một thẻ khuyến mãi */ .mona-mega { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 250px; gap: clamp(18px, 2vw, 34px); padding-block: clamp(22px, 2.4vw, 32px); } /* Bốn cột có 7 / 5 / 7 / 6 mục, nên nếu để chảy tự nhiên thì bốn link "Xem cả bộ" nằm ở bốn độ cao khác nhau — nhìn ra ngay là lệch. Mỗi cột là một flex column, link đẩy xuống đáy bằng margin-top:auto, và grid stretch làm mọi cột cao bằng cột cao nhất. */ .mona-mega > div { display: flex; flex-direction: column; min-width: 0; } /* Tên và số lượng CỐ Ý xuống hai dòng ở mọi cột. Để chung một dòng thì "THANH GƯƠM DIỆT QUỶ · 13 MẪU" tự xuống dòng còn ba cột kia không, và bốn danh sách bắt đầu ở bốn độ cao khác nhau. */ .mona-mega h3 { font-size: var(--t-micro); letter-spacing: .11em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 11px; font-family: var(--f-display); font-weight: 700; line-height: 1.45; } .mona-mega h3 b { display: block; font-weight: 700; } .mona-mega h3 span { display: block; color: var(--ink-2); font-weight: 500; letter-spacing: .06em; margin-top: 2px; } .mona-mega ul { display: flex; flex-direction: column; gap: 1px; } .mona-mega ul a { min-height: 32px; padding: 4px 0; font-weight: 500; font-size: var(--t-small); border-bottom: 0; color: var(--ink-2); } .mona-mega ul a:hover { color: var(--brand-ink); } .mona-mega__all { margin-top: auto; padding-top: 14px; font-size: var(--t-micro); color: var(--brand-ink); font-weight: 700; } .mona-mega__promo { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--ground-2); min-height: 190px; display: block; } .mona-mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mona-mega__promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,9,7,.86), rgba(12,9,7,.14) 62%, transparent); } .mona-mega__promo > span { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 14px 16px; color: var(--on-dark); } .mona-mega__promo b { display: block; font-family: var(--f-display); font-size: var(--t-card); font-weight: 800; } .mona-mega__promo em { font-style: normal; display: block; font-size: var(--t-micro); color: rgba(255,255,255,.82); margin-top: 3px; } /* Dropdown thường: một cột, hẹp */ .mona-drop { width: 312px; left: auto; right: auto; border-radius: 0 0 var(--r-m) var(--r-m); } .mona-drop ul { padding: 8px 0; } /* flex-direction: column — thiếu nó thì thành flex item thứ hai và mô tả nằm CẠNH tiêu đề, hai bên cùng bó lại thành hai cột hẹp. */ .mona-drop a { display: flex; flex-direction: column; justify-content: center; gap: 2px; /* align-items: center của .mona-nav a vẫn dội xuống đây; ở flex column nó canh giữa theo TRỤC NGANG, nên cả tiêu đề lẫn mô tả bị đẩy vào giữa. */ align-items: flex-start; min-height: 48px; padding: 9px 20px; border-bottom: 0; font-weight: 600; line-height: 1.35; text-align: left; } .mona-drop a:hover { background: var(--ground); color: var(--brand-ink); } .mona-drop a small { font-size: var(--t-micro); color: var(--ink-2); font-weight: 400; line-height: 1.45; } @media (max-width: 1120px) { .mona-mega { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mona-mega__promo { display: none; } } /* Dòng phụ của logo xuống hai dòng ở khổ hẹp. Thu nhỏ và cấm xuống dòng trước; chỉ khi vẫn không đủ chỗ thì mới bỏ hẳn — một dòng chữ nhỏ vẫn nói được shop bán gì, còn không có gì thì không. */ @media (max-width: 480px) { .mona-logo__word { font-size: 1.04rem; } .mona-logo__word span { font-size: 8.5px; letter-spacing: .04em; white-space: nowrap; } } @media (max-width: 350px) { .mona-logo__word span { display: none; } } @media (max-width: 900px) { /* HAI cột, không phải ba. Ô tìm kiếm bị display:none nên nó rời khỏi lưới, và cụm nút tụt vào cột 2 (1fr) — canh trái, để trống hẳn cột 3. Đó là khoảng trống bên phải trong ảnh. Logo giữ 1fr, cụm nút auto ở mép phải. */ .mona-header__bar { grid-template-columns: minmax(0, 1fr) auto; } .mona-header__act { justify-self: end; } .mona-search { display: none; } .mona-burger { display: grid; } .mona-nav { display: none; } /* Chỉ thu gọn hotline TRONG HEADER. Không giới hạn phạm vi thì drawer — vốn dùng lại đúng component này — cũng mất luôn nhãn và số. Ở đây bỏ hẳn chữ và biến nó thành nút tròn: một pill có padding mà bên trong không còn chữ nào đọc ra "hỏng", không đọc ra "thu gọn". */ .mona-header .mona-hot { padding: 0; background: transparent; } .mona-header .mona-hot .mona-hot__txt { display: none; } .mona-header .mona-hot i { width: var(--tap); height: var(--tap); } .mona-header .mona-hot i svg { width: 18px; height: 18px; } /* Trong drawer thì ngược lại: đây là nút được bấm nhiều nhất, cho nó to. */ .mona-drawer .mona-hot { width: 100%; padding: 10px 20px 10px 10px; } .mona-drawer .mona-hot b { font-size: 1.12rem; } } /* ══ Hero ═════════════════════════════════════════════════════════════════ Ảnh đời thường bên phải (bàn gỗ, tay đang lắp), lời chào và giá "từ" bên trái. Một thẻ sản phẩm nổi đè lên mép ảnh — mô-típ MONA dùng ở cả hai dự án trước: thẻ ảnh xếp chồng lệch để dải mở đầu có chiều sâu. */ .mona-hero { padding-block: clamp(28px, 3.4vw, 56px) clamp(40px, 5vw, 78px); } .mona-hero__in { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .mona-hero__title { font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: -.035em; /* Cân dòng khi trình duyệt hỗ trợ;
ở markup lo phần còn lại. */ text-wrap: balance; } .mona-hero__title em { font-style: normal; color: var(--brand-ink); } .mona-hero__lede { color: var(--ink-2); margin-top: 16px; max-inline-size: 44ch; } .mona-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .mona-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .mona-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-full); background: var(--card); border: 1px solid var(--line); font-size: var(--t-micro); font-weight: 500; } .mona-chip svg { width: 14px; height: 14px; color: var(--green); flex: none; } .mona-hero__media { position: relative; } .mona-hero__media > img { width: 100%; aspect-ratio: 1600 / 900; object-fit: cover; border-radius: var(--r-l); } /* Thẻ giá nổi — đặt bằng % để nó bám mép ảnh ở mọi khổ, không phải px cứng */ .mona-hero__float { position: absolute; left: -4%; bottom: -26px; width: min(268px, 62%); background: var(--card); border-radius: var(--r-m); box-shadow: var(--sh-lift); padding: 12px; display: flex; gap: 12px; align-items: center; } .mona-hero__float img { width: 68px; height: 68px; border-radius: var(--r-s); flex: none; background: var(--ground-2); } .mona-hero__float b { display: block; font-family: var(--f-display); font-size: .92rem; font-weight: 700; line-height: 1.3; } .mona-hero__float .mona-price { margin-top: 4px; } @media (max-width: 900px) { .mona-hero__in { grid-template-columns: minmax(0, 1fr); } .mona-hero__float { left: auto; right: 12px; bottom: -20px; } } /* ══ Thẻ sản phẩm ═════════════════════════════════════════════════════════ Trái tim của một trang bán hàng. Ảnh vuông vì shop chụp studio 1200×1200 — ép 4:3 sẽ cắt mất chân đế của mô hình. Thẻ trắng trên nền ấm: sản phẩm chụp nền trắng, nên thẻ phải trắng để ảnh liền mạch với thẻ, và nền trang phải ấm để thẻ tách khỏi nền. */ .mona-pcard { display: flex; flex-direction: column; /* Khai màu chữ, đừng thừa kế. Thẻ là một MẶT TRẮNG và nó xuất hiện trong cả dải sáng lẫn dải tối; trong .mona-flash (color: --on-dark) nó thừa kế màu trắng và toàn bộ tên sản phẩm biến mất trên nền trắng. Sửa ở thẻ chứ không ở từng dải: dải tối nào thêm sau cũng an toàn. */ color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease-2); } .mona-pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); border-color: transparent; } /* Thẻ phải cao bằng ô lưới chứa nó. Prototype không cần dòng này vì sáu thẻ trong dải flash của nó cao y hệt nhau: thẻ nào cũng có thanh "đã bán". Với dữ liệu thật thì thanh đó chỉ hiện khi shop đếm tồn kho, nên trong cùng một dải có thẻ có thanh và thẻ không, và vì
là khối cao tự động nằm trong
  • đã bị grid kéo giãn, các thẻ so le nhau ở đáy. .mona-pcard__body đã có flex:1 và .mona-pcard__foot đã có margin-top:auto, hai thứ đó chỉ có tác dụng khi bản thân thẻ được kéo cao hết ô. dynamic-content.md § "prototype chỉ cho thấy một trạng thái". */ .mona-pcard { height: 100%; } /* Nền ô ảnh phải là --card, đúng nền studio 1200×1200 mà shop chụp sản phẩm. Lệch một sắc là thấy ngay đường viền quanh mô hình. */ .mona-pcard__media { position: relative; aspect-ratio: 1 / 1; background: var(--card); } /* 3%, không phải 6%. Ảnh studio của shop đã tự chừa lề quanh mô hình rồi, nên 6% ở đây là lề chồng lên lề: mô hình ngồi nhỏ giữa một ô trắng rộng và thẻ trông rỗng. Giảm một nửa thì sản phẩm to lên rõ mà không chạm mép ô. */ .mona-pcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 3%; } /* Lùi vào 14px cho khớp lề 17-18px của thân thẻ, và bỏ weight 800 xuống 700. Đây là vệt màu đặc duy nhất trong một lưới toàn nền trắng, nên mỗi cân nặng thừa của nó đều được nhân với số thẻ trên màn hình. Giữ nền --brand đặc: đây vẫn là thông tin người mua tìm, chỉ là nó không cần hét. */ .mona-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 3px 8px; border-radius: var(--r-s); font-family: var(--f-num); font-size: 11px; font-weight: 700; letter-spacing: -.01em; } .mona-badge--off { background: var(--brand); color: var(--on-dark); } .mona-badge--new { background: var(--sun); color: var(--ink); } /* Prototype để --hot là var(--ink), tức một viên đen. Chủ site yêu cầu đổi, nên đổi: cam --sun-2, chữ --ink (8.2:1). Cam tách bạch với --off đỏ và --new vàng, mà vẫn nằm trong bảng màu sẵn có — --sun-2 trước nay chỉ dùng làm điểm cuối của gradient, đây là chỗ đầu tiên nó thành nền đặc. */ .mona-badge--hot { background: var(--sun-2); color: var(--ink); } /* Nút yêu thích — góc phải, hiện rõ hơn khi hover thẻ nhưng KHÔNG ẩn hoàn toàn: một nút chỉ tồn tại khi rê chuột thì trên điện thoại là không tồn tại. */ .mona-fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); opacity: .6; transition: opacity var(--dur) var(--ease-2), color var(--dur) var(--ease-2); } .mona-pcard:hover .mona-fav, .mona-fav:focus-visible { opacity: 1; } .mona-fav:hover { color: var(--brand); } .mona-pcard__body { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .mona-pcard__k { font-size: var(--t-micro); color: var(--ink-2); letter-spacing: .03em; } .mona-pcard__title { font-family: var(--f-display); font-weight: 700; font-size: var(--t-card); line-height: 1.34; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* Tên 1 dòng và 2 dòng phải xếp bằng nhau trong cùng một hàng lưới */ min-height: calc(1.34em * 2); } .mona-pcard:hover .mona-pcard__title { color: var(--brand-ink); } /* Giá: giá bán to và đỏ, giá gốc gạch ngang nhỏ và xám. Thứ tự này là quy ước — đảo lại là người mua đọc nhầm con số. */ .mona-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mona-price b { font-family: var(--f-num); font-weight: 800; font-size: 1.06rem; color: var(--brand-ink); letter-spacing: -.02em; } .mona-price del { font-size: var(--t-micro); color: var(--ink-2); text-decoration-thickness: 1px; } .mona-pcard__foot { margin-top: auto; padding-top: 15px; display: flex; align-items: center; gap: 8px; } .mona-add { flex: 1; min-height: 38px; border-radius: var(--r-full); background: var(--ink); color: var(--on-dark); font-family: var(--f-display); font-weight: 700; font-size: var(--t-micro); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background var(--dur) var(--ease-2); } .mona-add:hover { background: var(--brand); } .mona-add svg { width: 14px; height: 14px; } /* margin-left:auto đẩy nó về mép phải của hàng giá, nên hàng giá đọc thành "giá — giá cũ ............ còn hàng" thay vì ba thứ dính chùm bên trái. */ .mona-stock { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: var(--t-micro); color: var(--green); } .mona-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ══ Đường ray sản phẩm ═══════════════════════════════════════════════════ Lưới bốn cột đổi thành đường ray cuộn ngang. Vì sao đáng đổi: một lưới chỉ khoe được đúng số thẻ nó có chỗ, còn đường ray khoe cùng số thẻ đó rồi nói thêm "còn nữa" — và trên điện thoại, THẤY MỘT PHẦN thẻ kế tiếp là tín hiệu cuộn được mạnh hơn mọi mũi tên. Cuộn được bằng chạm, trackpad, và bàn phím (tabindex + role) TRƯỚC khi JS chạy. Mũi tên chỉ thêm vào — .mona-railnav ẩn cho tới khi .js xuất hiện, nên tắt JS không để lại nút chết. */ .mona-prail { --gap: clamp(12px, 1.3vw, 20px); --per: 4; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; /* Chừa chỗ cho bóng đổ khi thẻ nhấc lên lúc hover, nếu không nó bị cắt */ padding: 4px 4px 14px; margin: -4px -4px -14px; scrollbar-width: none; } .mona-prail::-webkit-scrollbar { display: none; } /* Kéo được thì phải nhìn ra là kéo được. Link và nút bên trong tự mang cursor: pointer của riêng chúng nên không bị nắm tay này đè lên. */ .mona-prail { cursor: grab; } .mona-prail.is-grabbing { cursor: grabbing; user-select: none; } .mona-prail > * { scroll-snap-align: start; } /* Màn rộng: thêm thẻ mỗi khung, không kéo thẻ to ra. Ảnh sản phẩm là 1200px vuông; một thẻ rộng hơn ~460px bắt đầu phóng ảnh lên và làm mờ. */ @media (min-width: 1900px) { .mona-prail { --per: 5; } } @media (min-width: 2600px) { .mona-prail { --per: 6; } } @media (min-width: 3200px) { .mona-prail { --per: 7; } } /* Ở khổ hẹp để lẻ 0.15 thẻ: mép thẻ kế tiếp thò ra là lời mời cuộn. */ @media (max-width: 1000px) { .mona-prail { --per: 3; } } @media (max-width: 760px) { .mona-prail { --per: 2.15; } } @media (max-width: 460px) { .mona-prail { --per: 1.6; } } /* Đầu dải khi có mũi tên: tiêu đề trái, link + mũi tên phải */ .mona-head__act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* ══ Ô bộ sưu tập ═════════════════════════════════════════════════════════ Ảnh nhóm 16:9 phủ gradient, chữ đặt lên. Ô đầu rộng gấp đôi để dải không đọc ra "năm ô giống nhau" — và vì One Piece là nhóm nhiều mẫu nhất. */ /* Lưới 6 cột, hai hàng: hàng trên hai ô lớn (span 3), hàng dưới ba ô (span 2). Bản đầu xếp cả năm ô trên một hàng — mỗi ô cao khoảng 60px, đọc ra "hàng nút" chứ không đọc ra "chọn bộ nào", và gradient nuốt hết ảnh vì ô quá thấp. */ .mona-colls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 18px); } /* ⚠️ grid-column phải đặt trên
  • , KHÔNG phải trên bên trong nó. Phần tử lưới là con trực tiếp của .mona-colls; một `span` khai trên không áp dụng gì cả và không báo lỗi ở đâu — năm ô dồn thành một hàng, mỗi ô cao khoảng 60px, và trông y như một lựa chọn thiết kế tồi. */ .mona-colls > li { grid-column: span 2; min-width: 0; } .mona-colls > li.is-wide { grid-column: span 3; } .mona-coll { position: relative; height: 100%; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 11; display: block; transition: transform var(--dur) var(--ease); } .mona-coll--wide { aspect-ratio: 16 / 8; } .mona-coll:hover { transform: translateY(-3px); } .mona-coll img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .mona-coll:hover img { transform: scale(1.045); } .mona-coll::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,9,7,.82) 0%, rgba(12,9,7,.30) 52%, rgba(12,9,7,0) 82%); } .mona-coll__t { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 16px 18px; color: var(--on-dark); } .mona-coll__t strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: var(--t-h3); } .mona-coll--wide .mona-coll__t { padding: 20px 22px; } .mona-coll--wide .mona-coll__t strong { font-size: clamp(1.25rem, 1rem + .8vw, 1.65rem); } .mona-coll__t span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-micro); color: rgba(255,255,255,.82); margin-top: 4px; } @media (max-width: 900px) { .mona-colls { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mona-colls > li, .mona-colls > li.is-wide { grid-column: span 2; } .mona-coll, .mona-coll--wide { aspect-ratio: 16 / 10; } } @media (max-width: 560px) { .mona-colls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mona-colls > li, .mona-colls > li.is-wide { grid-column: span 1; } } /* ══ Dải cam kết ══════════════════════════════════════════════════════════*/ .mona-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); } .mona-trust > li { display: flex; gap: 14px; align-items: flex-start; } .mona-trust i { width: 44px; height: 44px; border-radius: var(--r-m); flex: none; background: var(--brand-wash); color: var(--brand-ink); display: grid; place-items: center; } .mona-trust i svg { width: 21px; height: 21px; } .mona-trust b { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-card); } .mona-trust p { color: var(--ink-2); font-size: var(--t-small); margin-top: 3px; } @media (max-width: 760px) { .mona-trust { grid-template-columns: minmax(0, 1fr); } } /* Dạng thẻ, dùng cho dải cam kết trên trang chủ và trang giới thiệu. Không đặt lên .mona-trust trần: page.php dùng lại class đó cho danh sách gọn trong cột phụ, đóng khung ở đó là hộp lồng trong hộp. */ .mona-trust--cards > li { padding: clamp(18px, 1.8vw, 24px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-card); } .mona-trust--cards > li > div { min-width: 0; } /* ══ Combo ════════════════════════════════════════════════════════════════ Dải tối, đặt giữa hai lưới sản phẩm để mắt được nghỉ và để ưu đãi không lẫn vào một hàng thẻ nữa. */ /* ── Dải combo ────────────────────────────────────────────────────────────── Site vệ tinh: thiết kế tự do. Trái là thông điệp, phải là hình — ba ảnh sản phẩm thật xếp fan thành "combo", huy hiệu tiết kiệm nổ lên trên. Một vệt sáng ấm phía sau để nền tối không bị chết. */ .mona-combo-band { position: relative; overflow: hidden; } .mona-combo-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42rem 32rem at 82% 42%, rgba(255, 200, 51, .16), transparent 60%), radial-gradient(30rem 30rem at 96% 88%, rgba(217, 43, 56, .22), transparent 60%); } .mona-combo { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(28px, 4vw, 72px); align-items: center; } @media (max-width: 900px) { .mona-combo { grid-template-columns: minmax(0, 1fr); } } .mona-combo__msg { max-width: 44rem; } .mona-combo__title { font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.7rem); line-height: var(--lh-head); max-inline-size: 16ch; } .mona-combo__deals { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .mona-deal { border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .05); border-radius: var(--r-m); padding: 15px 22px; min-width: 148px; } .mona-deal b { display: block; font-family: var(--f-num); font-weight: 800; font-size: 1.7rem; color: var(--sun); letter-spacing: -.02em; } .mona-deal span { display: block; font-size: var(--t-micro); color: var(--on-dark-soft); margin-top: 3px; } .mona-combo__note { color: var(--on-dark-soft); font-size: var(--t-small); margin-top: 16px; max-inline-size: 46ch; } /* Nút to hơn một chút và phát sáng đỏ để mời bấm. */ .mona-combo__cta { margin-top: 26px; gap: 9px; padding: 14px 30px; font-size: var(--t-body); box-shadow: 0 10px 30px -8px rgba(217, 43, 56, .6); } .mona-combo__cta:hover { box-shadow: 0 14px 34px -6px rgba(217, 43, 56, .75); } @media (max-width: 900px) { .mona-combo__cta { width: 100%; justify-content: center; } } /* ── Hình combo bên phải ─────────────────────────────────────────────────── */ .mona-combo__visual { position: relative; min-height: 300px; display: grid; place-items: center; } .mona-combo__stack { position: relative; width: min(100%, 26rem); aspect-ratio: 3 / 2; } .mona-combo__pic { position: absolute; top: 50%; width: 44%; aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; background: var(--card); border: 3px solid #fff; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); transform: translateY(-50%) rotate(var(--rot)); } /* Ba ảnh chồng nhẹ, nghiêng xen kẽ như đang cầm trên tay. */ .mona-combo__pic:nth-child(1) { left: 0; --rot: -7deg; z-index: 1; } .mona-combo__pic:nth-child(2) { left: 28%; --rot: 3deg; z-index: 3; top: 46%; width: 46%; } .mona-combo__pic:nth-child(3) { left: 56%; --rot: 8deg; z-index: 2; } .mona-combo__pic img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Dấu + giữa các ảnh — làm rõ "gộp lại". */ .mona-combo__plus { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); font-family: var(--f-num); font-weight: 800; font-size: 1.6rem; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); } .mona-combo__plus--a { left: 25%; } .mona-combo__plus--b { left: 53%; } /* Huy hiệu tiết kiệm — nổ lên góc trên phải của chồng ảnh. */ .mona-combo__burst { position: absolute; z-index: 5; top: 2%; right: 2%; width: 8.4rem; height: 8.4rem; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 38% 32%, var(--sun-lit), var(--sun) 62%, var(--sun-2)); color: var(--ink); transform: rotate(-10deg); box-shadow: 0 12px 30px -8px rgba(255, 138, 61, .7), 0 0 0 6px rgba(255, 200, 51, .18); } .mona-combo__burst small { display: block; font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .mona-combo__burst b { display: block; font-family: var(--f-num); font-weight: 800; font-size: 1.5rem; line-height: 1.05; letter-spacing: -.02em; } @media (max-width: 900px) { .mona-combo__visual { min-height: 260px; margin-top: 8px; } .mona-combo__burst { width: 7rem; height: 7rem; } .mona-combo__burst b { font-size: 1.25rem; } } /* ══ Chọn theo độ tuổi ════════════════════════════════════════════════════*/ .mona-age { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); } .mona-age__c { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .mona-age__c:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); } .mona-age__n { font-family: var(--f-num); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; color: var(--ink); } .mona-age__c p { color: var(--ink-2); font-size: var(--t-small); max-inline-size: 34ch; } .mona-age__c .mona-more { margin-top: 8px; } /* Vệt màu mỏng ở mép trên, mỗi thẻ một màu — đủ để ba thẻ không đọc ra một khối */ .mona-age__c::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--sun); } .mona-age__c:nth-child(2)::before { background: var(--sky); } .mona-age__c:nth-child(3)::before { background: var(--brand); } @media (max-width: 860px) { .mona-age { grid-template-columns: minmax(0, 1fr); } } /* ══ Bài viết ═════════════════════════════════════════════════════════════*/ .mona-post { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .mona-post:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); } .mona-post__media { aspect-ratio: 1400 / 788; background: var(--ground-2); } .mona-post__media img { width: 100%; height: 100%; object-fit: cover; } .mona-post__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .mona-post__title { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mona-post:hover .mona-post__title { color: var(--brand-ink); } .mona-post__meta { margin-top: auto; font-size: var(--t-micro); color: var(--ink-2); } /* ══ Bốn bước đặt hàng ════════════════════════════════════════════════════ Người mua lần đầu trên một shop chưa quen cần biết "đặt xong thì sao". */ .mona-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); counter-reset: s; } .mona-steps > li { counter-increment: s; position: relative; padding-top: 46px; } .mona-steps > li::before { content: counter(s, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--on-dark); font-family: var(--f-num); font-size: var(--t-micro); font-weight: 800; display: grid; place-items: center; } /* Đường nối giữa các bước — chỉ ở desktop, và không vẽ sau bước cuối */ .mona-steps > li::after { content: ""; position: absolute; top: 17px; left: 44px; right: -14px; height: 1px; border-top: 1px dashed var(--line-2); } .mona-steps > li:last-child::after { display: none; } .mona-steps b { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-card); } .mona-steps p { color: var(--ink-2); font-size: var(--t-small); margin-top: 4px; } @media (max-width: 860px) { .mona-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mona-steps > li::after { display: none; } } @media (max-width: 480px) { .mona-steps { grid-template-columns: minmax(0, 1fr); } } /* ══ Đường ray ngang ══════════════════════════════════════════════════════ Dùng cho hàng sản phẩm ở khổ hẹp: cuộn được bằng chạm/trackpad/bàn phím trước khi JS chạy. Mũi tên chỉ THÊM vào, nên tắt JS không để lại nút chết. */ /* ══ Mũi tên carousel ═════════════════════════════════════════════════════ Hai nút nằm HAI BÊN hàng thẻ, căn giữa theo chiều dọc — đúng chỗ mắt và tay tìm chúng. Bản đầu nhét chúng vào đầu dải cạnh đồng hồ: chúng vừa xa thứ mà chúng điều khiển, vừa chen vào một hàng vốn đã có tiêu đề và đồng hồ. Cả cụm là một lớp phủ `inset: 0` với `pointer-events: none`, chỉ hai nút nhận chuột — nếu không nó sẽ chặn mọi thao tác vuốt lên hàng thẻ. */ .mona-railwrap { position: relative; } .mona-railnav { display: none; } /* :not([hidden]) — thiếu nó thì `.js .mona-railnav { display:block }` (0,2,0) thắng `[hidden]{display:none}` của UA stylesheet, và `nav.hidden = true` trong main.js không giấu được gì. Một thuộc tính đặt đúng mà không có tác dụng là loại lỗi khó thấy nhất. */ .js .mona-railnav:not([hidden]) { display: block; } .mona-railnav { position: absolute; inset: 0; z-index: 5; pointer-events: none; /* để vuốt ngang trên hàng thẻ vẫn đi tới ray */ } .mona-railnav button { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; box-shadow: 0 4px 14px -4px rgba(23,18,14,.30); transition: background var(--dur) var(--ease-2), color var(--dur) var(--ease-2), opacity var(--dur) var(--ease-2), border-color var(--dur) var(--ease-2); } .mona-railnav [data-rail-prev] { left: -19px; } .mona-railnav [data-rail-next] { right: -19px; } .mona-railnav button:disabled { opacity: .3; cursor: default; box-shadow: none; } .mona-railnav button:not(:disabled):hover { background: var(--ink); color: var(--on-dark); border-color: transparent; } /* Dưới 1024px máng lề hẹp lại, nên nút lùi vào TRONG mép ray. Ra ngoài ở khổ đó là đẩy nút ra sát mép màn hình. */ @media (max-width: 1024px) { .mona-railnav [data-rail-prev] { left: 5px; } .mona-railnav [data-rail-next] { right: 5px; } } /* ══ Footer ═══════════════════════════════════════════════════════════════ Footer của một shop phải trả lời được ba câu mà người mua hỏi ở cuối trang: liên hệ ai, trả tiền kiểu gì, và có gì đảm bảo. Bản đầu chỉ có bốn cột link. ══════════════════════════════════════════════════════════════════════════ */ /* Dải đăng ký footer tự kéo lên tối đa 52px (translateY) và straddle mép trên footer. Chừa sẵn khoảng này DƯỚI mọi nội dung để phần kéo lên luôn rơi vào chỗ trống, không đè content — thay cho việc vá từng trang. */ #main { padding-bottom: clamp(60px, 6vw, 88px); } .mona-footer { background: var(--ink); color: var(--on-dark-soft); } /* ── Dải đăng ký, nằm đè lên mép trên của footer ─────────────────────────── Tấm sáng đè lên nền tối: nó là thứ đầu tiên mắt gặp khi tới footer, thay vì một bức tường link. */ .mona-foot-cta { position: relative; z-index: 2; transform: translateY(clamp(-52px, -4vw, -34px)); margin-bottom: clamp(-38px, -3vw, -22px); background: var(--card); color: var(--ink); /* Thẻ này nằm vắt ngang mép footer tối, nên nửa dưới của nó không còn bóng để tựa vào: bóng trên nền đen là vô hình. Viền là thứ duy nhất giữ được mép ở cả hai nửa. */ border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 38px); box-shadow: var(--sh-lift); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, auto); align-items: center; gap: 20px 36px; } .mona-foot-cta h2 { font-size: clamp(1.2rem, .98rem + .9vw, 1.6rem); max-inline-size: 22ch; } .mona-foot-cta p { color: var(--ink-2); font-size: var(--t-small); margin-top: 6px; max-inline-size: 46ch; } .mona-sub { display: flex; gap: 8px; } .mona-sub input { flex: 1; min-width: 0; min-height: var(--tap); padding: 10px 18px; border: 1.5px solid var(--line-2); border-radius: var(--r-full); font: inherit; font-size: var(--t-small); background: var(--ground); } .mona-sub input:focus { border-color: var(--ink); outline: none; } /* Dải đăng ký chạy bằng MONA Smart Form, nên markup là của plugin (.msf-*), không phải .mona-sub của prototype. dynamic-content.md §7: tô lại markup của plugin, KHÔNG dựng lại form trong theme để lấy đúng hình — dựng lại là tách đôi đường gửi và mất luôn chống spam (nonce + honeypot + time-trap). Các giá trị dưới đây chép nguyên từ .mona-sub / .mona-btn--brand. */ .mona-foot-cta .msf-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .mona-foot-cta .msf-field { flex: 1 1 200px; margin: 0; min-width: 0; } /* Nhãn vẫn phải tồn tại cho trình đọc màn hình — placeholder không phải nhãn. Ẩn bằng clip chứ không display:none, để nó còn được đọc. */ .mona-foot-cta .msf-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .mona-foot-cta .msf-field input { width: 100%; min-width: 0; min-height: var(--tap); padding: 10px 18px; border: 1.5px solid var(--line-2); border-radius: var(--r-full); font: inherit; font-size: var(--t-small); background: var(--ground); color: var(--ink); } .mona-foot-cta .msf-field input:focus { border-color: var(--ink); outline: none; } .mona-foot-cta .msf-form > p:last-of-type { margin: 0; } .mona-foot-cta .msf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 11px 22px; cursor: pointer; border: 1.5px solid transparent; border-radius: var(--r-full); font-family: var(--f-display); font-weight: 700; font-size: var(--t-small); background: var(--brand); color: #fff; box-shadow: var(--sh-pop); white-space: nowrap; transition: background var(--dur) var(--ease-2), transform var(--dur) var(--ease); } .mona-foot-cta .msf-btn:hover { background: var(--brand-ink); transform: translateY(-1px); } /* Vùng báo kết quả AJAX chiếm trọn hàng, nếu không nó chen vào giữa ô và nút. */ .mona-foot-cta .msf-status:not(:empty), .mona-foot-cta .msf-alert { flex: 1 0 100%; margin: 0; font-size: var(--t-small); } .mona-foot-cta .msf-err, .mona-foot-cta .msf-field .msf-error { color: var(--brand); } @media (max-width: 420px) { .mona-foot-cta .msf-form { flex-direction: column; align-items: stretch; } .mona-foot-cta .msf-btn { width: 100%; } } /* minmax(0, 1fr), KHÔNG phải 1fr. `1fr` là `minmax(auto, 1fr)`, và cận dưới `auto` bằng min-content của ô lớn nhất — ở đây là form đăng ký, 315px vì mang size=20 mặc định. Track rộng hơn cả thẻ, và ở máy 320px thì tràn ngang. Đây đúng là ca kinh điển cần minmax(0, 1fr). */ @media (max-width: 780px) { .mona-foot-cta { grid-template-columns: minmax(0, 1fr); } } .mona-foot-cta > * { min-width: 0; } /* Dưới 420px nút và ô nhập không đủ chỗ nằm cạnh nhau: nút "Đăng ký" là nowrap 102px, phần còn lại không đủ để gõ một email. */ @media (max-width: 420px) { .mona-sub { flex-direction: column; } .mona-sub .mona-btn { width: 100%; } } .mona-footer__main { padding-block: clamp(44px, 5vw, 68px) 26px; } /* BA khối, không phải năm. Bản đầu để năm cột và ở ≤1060px chúng rơi vào lưới ba cột: hàng hai còn đúng hai ô, cột ba bỏ trống — một mảng rỗng to bằng cả một cột. Năm không chia chẵn cho ba hay hai ở bất kỳ mốc nào. Gom ba cột link vào một lưới con, còn lại đúng ba khối: thương hiệu · link · liên hệ. Ba khối chia chẵn ở mọi mốc, và không mốc nào để lại ô trống. */ .mona-footer__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr) minmax(0, 1.2fr); gap: clamp(22px, 2.6vw, 46px); } .mona-footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 36px); } .mona-footer h3 { font-size: var(--t-small); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); font-weight: 700; margin-bottom: 15px; font-family: var(--f-display); } .mona-footer ul { display: flex; flex-direction: column; gap: 6px; } /* min-height 24px thay vì để chiều cao chạy theo dòng chữ (21px). Khoảng cách giữa các mục giảm từ 10 xuống 6 để cột không cao thêm — tổng nhịp giữ nguyên 31px, chỉ chuyển từ "khoảng trống" sang "vùng bấm". */ .mona-footer ul a { display: inline-flex; align-items: center; min-height: 24px; } .mona-footer a:hover { color: var(--on-dark); } .mona-footer__blurb { font-size: var(--t-small); margin-top: 14px; max-inline-size: 40ch; } .mona-footer .mona-logo__word { color: var(--on-dark); } .mona-footer .mona-logo__word span { color: var(--on-dark-soft); } /* Khối liên hệ — hotline là dòng to nhất footer, vì nó là thứ được bấm nhiều nhất */ .mona-contact { display: flex; flex-direction: column; gap: 14px; } .mona-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-small); } .mona-contact svg { width: 16px; height: 16px; color: var(--sun); flex: none; margin-top: 3px; } .mona-contact b { display: block; color: var(--on-dark); } .mona-contact a.mona-contact__hot { font-family: var(--f-num); font-weight: 800; font-size: 1.28rem; color: var(--sun); letter-spacing: -.02em; } .mona-social { display: flex; gap: 9px; margin-top: 18px; } .mona-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; color: var(--on-dark-soft); } .mona-social a:hover { background: var(--brand); border-color: transparent; color: var(--on-dark); } .mona-social svg { width: 17px; height: 17px; } .mona-pay { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .mona-pay span { padding: 5px 11px; border-radius: var(--r-s); border: 1px solid var(--line-dark); font-size: 11px; letter-spacing: .04em; } /* Ô này là CHỖ ĐẶT, không phải một huy hiệu. Xem ghi chú trong index.html. */ .mona-govslot { margin-top: 16px; padding: 10px 14px; border: 1px dashed rgba(255,255,255,.28); border-radius: var(--r-s); font-size: 11px; color: rgba(255,255,255,.55); max-inline-size: 30ch; line-height: 1.5; } .mona-sign { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: var(--t-micro); } .mona-sign a { color: var(--on-dark); } /* Link "MONA.Media" nằm giữa một câu — WCAG 2.2 SC 2.5.8 miễn trừ đích inline, và nới nó sẽ phá nhịp dòng chữ. Ba link