/* ========================================================================= KHO BÁU HẢI TẶC — hệ thống thị giác dùng chung cho toàn bộ mockup Chủ đề: hải tặc / bản đồ kho báu / huyền bí. Không dùng logo/nhân vật có bản quyền — chỉ mượn tinh thần thị giác (la bàn, đồng xu, rương báu, bản đồ da thuộc, dấu wax-seal). ========================================================================= */ :root { /* Bảng màu: đêm biển sâu + vàng kho báu + đỏ rượu vang (wax seal) */ --ink-900: #060c14; --ink-800: #0a1626; --ink-700: #10233a; --ink-600: #17324f; --parchment: #f3e4bf; --parchment-2: #e9d5a3; --parchment-ink: #2c1c0e; --gold: #d9a441; --gold-bright: #f4c95d; --gold-dim: #c49535; --wine: #7d1f2c; --wine-bright: #a92b3b; --teal: #123f45; --mist: rgba(217, 164, 65, 0.12); /* Font — dùng CSS variable để SA/chủ shop chọn font từ cài đặt. Mặc định: system (Inter) — an toàn nhất, không bao giờ vỡ. */ --font-display: var(--store-font-display, Inter, system-ui, -apple-system, sans-serif); --font-body: var(--store-font-body, Inter, system-ui, -apple-system, sans-serif); --font-accent: var(--store-font-display, Inter, system-ui, -apple-system, sans-serif); --radius: 14px; --radius-sm: 8px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-swash: cubic-bezier(0.34, 1.56, 0.64, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* Vân giấy da / sao trời phủ toàn trang cho không khí huyền bí Tối ưu: dùng background thay vì ::before fixed (giảm paint/composite cost khi cuộn). */ body { font-family: var(--font-body); background: radial-gradient(1.5px 1.5px at 20% 30%, rgba(244, 201, 93, 0.4) 0, transparent 60%), radial-gradient(1.5px 1.5px at 70% 15%, rgba(244, 201, 93, 0.28) 0, transparent 60%), radial-gradient(1px 1px at 85% 60%, rgba(244, 201, 93, 0.3) 0, transparent 60%), radial-gradient(1.5px 1.5px at 40% 80%, rgba(244, 201, 93, 0.22) 0, transparent 60%), radial-gradient(1px 1px at 10% 65%, rgba(244, 201, 93, 0.28) 0, transparent 60%), var(--ink-900); color: var(--parchment); overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; } /* =========================== Icon sprite ============================= */ .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; vertical-align: -0.15em; } .icon-fill { fill: currentColor; stroke: none; } /* =============================== Header =============================== */ .site-header { position: sticky; top: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; padding: 14px clamp(16px, 4vw, 48px); background: linear-gradient(180deg, rgba(6,12,20,0.96) 0%, rgba(6,12,20,0.86) 100%); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(217,164,65,0.25); } /* .brand và .header-actions không bao giờ được co lại/bị đẩy ra ngoài khung nhìn — nếu .site-nav (ở giữa) không đủ chỗ (vd: sau khi thêm 2 mục Cộng đồng/Sự kiện, nav dài hơn), PHẦN NAV phải tự cuộn ngang trước, chứ không được đẩy nút giỏ hàng/tài khoản ra ngoài màn hình khiến chúng "không click được" dù DOM vẫn còn nguyên. */ .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; } .brand-mark { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, var(--gold-dim) 100%); display: flex; align-items: center; justify-content: center; color: var(--ink-900); box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 3px var(--gold-dim), 0 4px 14px rgba(217,164,65,0.35); transition: transform .6s var(--ease-swash); } .brand:hover .brand-mark { transform: rotate(360deg); } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.5px; color: var(--parchment); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: clamp(90px, 18vw, 220px); } .brand-name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 10px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; } .site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 26px); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0 4px; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { position: relative; font-size: 14px; font-weight: 600; color: var(--parchment-2); padding: 6px 2px; transition: color .25s var(--ease-out); white-space: nowrap; flex-shrink: 0; } .site-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--gold-bright); transition: right .3s var(--ease-out); } .site-nav a:hover, .site-nav a.active { color: var(--gold-bright); } .site-nav a:hover::after, .site-nav a.active::after { right: 0; } .header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .icon-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(217,164,65,0.4); background: rgba(217,164,65,0.08); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform .25s var(--ease-swash), background .25s; } .icon-btn:hover { background: rgba(217,164,65,0.2); transform: translateY(-2px) rotate(-8deg); } .cart-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 50%; background: var(--wine-bright); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink-900); } .nav-toggle { display: none; } /* Dải cờ đuôi nheo (bunting) — điểm nhận diện thương hiệu, treo ngay dưới header, thuần CSS (2 lớp gradient chéo lệch nhau tạo hình tam giác lặp lại). */ .bunting { height: 15px; position: sticky; top: 70px; z-index: 490; background: linear-gradient(-45deg, transparent 50%, var(--gold-dim) 50%) 0 0/16px 15px repeat-x, linear-gradient(45deg, transparent 50%, var(--wine) 50%) 8px 0/16px 15px repeat-x; opacity: 0.9; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } @media (max-width: 900px) { .site-header { padding: 10px 16px; } .brand-mark { width: 32px; height: 32px; } .brand-name { max-width: 110px; font-size: 14px; } .brand-name small { display: none; } .header-actions { gap: 8px; } .icon-btn { width: 34px; height: 34px; font-size: 14px; } .cart-count { min-width: 15px; height: 15px; font-size: 9px; top: -3px; right: -3px; border-width: 1.5px; } .bunting { height: 8px; top: 52px; } /* ─── Mobile drawer menu ─── PirateFloatingNav (component React riêng) là điều hướng chính trên mobile — đủ tất cả category/link. Ẩn hoàn toàn cả hamburger lẫn drawer để tránh mọi xung đột. */ .nav-toggle { display: none !important; } .site-nav { display: none !important; } .site-nav.open { display: flex !important; flex-direction: column; align-items: stretch; gap: 0; position: fixed; top: 0; right: 0; bottom: 0; width: min(78vw, 320px); max-width: 320px; background: var(--ink-800); border-left: 1px solid rgba(217,164,65,0.3); padding: 84px 22px 24px; overflow-y: auto; overflow-x: hidden; transform: translateX(0); box-shadow: -12px 0 32px rgba(0,0,0,0.45); z-index: 550; scrollbar-width: thin; } .site-nav.open a { padding: 14px 2px; font-size: 16px; border-bottom: 1px solid rgba(217,164,65,0.12); flex-shrink: 0; } .site-nav.open a::after { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE PHONE (≤ 480px) — Thiết kế theo chuẩn UX app e-commerce hiện đại. Nguyên tắc: compact, dễ thao tác 1 tay, nội dung ưu tiên, ít phân tâm. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { /* Header */ .site-header { padding: 8px 12px; } .brand { gap: 8px; } .brand-mark { width: 28px; height: 28px; } .brand-name { max-width: 128px; font-size: 13px; letter-spacing: 0; } .icon-btn { width: 30px; height: 30px; font-size: 13px; } .bunting { display: none; } /* Typography */ h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; } .lede { font-size: 13px; } .eyebrow { font-size: 10px; letter-spacing: 2px; margin-bottom: 8px; } .eyebrow::before, .eyebrow::after { width: 18px; } /* Hero */ .hero { min-height: 60svh; } .hero-content { padding: 0 16px; } .hero-compass-ring { width: 48px; height: 48px; margin-bottom: 12px; } .hero-compass-ring .icon { width: 26px; height: 26px; } .hero-cta { gap: 10px; margin-bottom: 32px; } .hero-cta .btn { padding: 10px 16px; font-size: 12px; white-space: nowrap; } .hero-moon { width: 80px; height: 80px; top: 5%; right: 8%; } /* Layout spacing */ .section-pad { padding-block: 32px; } .wrap { padding-inline: 14px; } .grid-2 { gap: 20px; } /* Buttons — prevent text wrap */ .btn { padding: 10px 18px; font-size: 13px; gap: 6px; white-space: nowrap; } .btn-sm { padding: 8px 14px; font-size: 11px; } /* Add to cart button — phải giữ 1 dòng */ .add-cart-btn { padding: 10px 8px; font-size: 11px; gap: 4px; white-space: nowrap; } /* Product grid: 2 cột */ .product-grid { gap: 10px; } .product-card { border-radius: 12px; } .product-body { padding: 10px; } .product-set { font-size: 9px; } .product-name { font-size: 13px; margin: 4px 0; } .product-price { font-size: 14px; } .product-price .original { font-size: 10px; } .product-stock { font-size: 10px; } .product-tag, .chest-tag { font-size: 9px; padding: 3px 7px; } /* Chest card */ .chest-box { border-radius: 12px 12px 4px 4px; } /* Cart — KHÔNG force 2 cột, giữ nguyên 4-col layout nhưng scale nhỏ */ .cart-row { grid-template-columns: 50px 1fr auto auto; gap: 8px; padding: 10px; border-radius: 12px; margin-bottom: 10px; } .cart-row .thumb { width: 50px; height: 50px; border-radius: 8px; font-size: 18px; } .cart-row .name { font-size: 12px; } .cart-row .meta { font-size: 10px; } .qty-stepper { gap: 4px; padding: 3px 6px; } .qty-stepper button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; } .qty-stepper span { font-size: 12px; } .summary-card { padding: 16px; border-radius: 12px; } .summary-row { font-size: 13px; } .summary-row.total { font-size: 15px; } .promo-row input { padding: 10px; font-size: 12px; } /* Footer */ .site-footer { padding: 28px 0 14px; margin-top: 40px; } .footer-grid { grid-template-columns: 1fr; gap: 16px; } .footer-grid h4 { font-size: 11px; margin-bottom: 6px; } .footer-grid p, .footer-grid li { font-size: 11px; line-height: 1.7; } .footer-bottom { font-size: 10px; margin-top: 16px; padding-top: 12px; } /* Voyage map */ .voyage-map { padding: 10px; border-radius: 12px; } .voyage-island-label { font-size: 9px; } .voyage-island-dot { width: 28px; height: 28px; } /* Page banner */ .page-banner { padding: 24px 0 18px; } .page-banner .brand-mark { width: 32px; height: 32px; } .page-banner .breadcrumb { font-size: 10px; } /* Filter / pagination */ .filter-bar { padding: 10px 0 16px; gap: 8px; margin-bottom: 18px; } .select-pirate { padding: 7px 12px; font-size: 12px; } .pagination { margin-top: 24px; } .page-btn { width: 32px; height: 32px; font-size: 12px; } /* Cards */ .card-parchment { border-radius: 12px; } /* CTA */ .chest-cta { padding: 32px 16px; border-radius: 16px; } .subscribe-row input { min-width: 160px; padding: 10px 14px; font-size: 13px; } } /* ═══════════════════════════════════════════════════════════════════════════ ULTRA-NARROW PHONE (≤ 360px) — iPhone SE, Galaxy A01, etc. Ẩn brand-name chỉ giữ brand-mark để header không bị overflow. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 360px) { .brand-name { display: none; } .icon-btn { width: 28px; height: 28px; font-size: 12px; } .header-actions { gap: 6px; } } /* =============================== Buttons =============================== */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.3px; padding: 13px 28px; border-radius: 999px; border: none; transition: transform .25s var(--ease-swash), box-shadow .25s; } .btn-gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--parchment-ink); box-shadow: 0 6px 0 var(--gold-dim), 0 10px 24px rgba(217,164,65,0.35); } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--gold-dim), 0 16px 28px rgba(217,164,65,0.4); } .btn-gold:active { transform: translateY(1px); box-shadow: 0 3px 0 var(--gold-dim); } .btn-wine { background: linear-gradient(180deg, var(--wine-bright), var(--wine)); color: var(--parchment); box-shadow: 0 6px 0 #4d1119, 0 10px 24px rgba(125,31,44,0.4); } .btn-wine:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #4d1119, 0 16px 28px rgba(125,31,44,0.45); } .btn-wine:active { transform: translateY(1px); box-shadow: 0 3px 0 #4d1119; } .btn-outline { background: transparent; color: var(--gold-bright); border: 1.5px solid var(--gold); } .btn-outline:hover { background: rgba(217,164,65,0.12); transform: translateY(-2px); } .btn-outline.active { background: rgba(217,164,65,0.18); border-color: var(--gold-bright); color: var(--gold-bright); } .btn-block { width: 100%; } .btn-sm { padding: 9px 18px; font-size: 13px; } /* ============================= Seal badge =============================== */ .seal { --sz: 74px; width: var(--sz); height: var(--sz); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--wine-bright), var(--wine) 70%); display: flex; align-items: center; justify-content: center; color: var(--parchment); font-family: var(--font-accent); font-size: 26px; box-shadow: inset 0 0 0 3px rgba(244,228,191,0.25), 0 10px 24px rgba(0,0,0,0.45); position: relative; } .seal::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(217,164,65,0.5); } /* ============================== Sections ================================ */ .wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 48px); position: relative; z-index: 1; } section { position: relative; z-index: 1; } .eyebrow { font-family: var(--font-accent); font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; } .eyebrow::before, .eyebrow::after { content: ''; width: 26px; height: 1px; background: var(--gold-dim); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--parchment); } h1 { font-size: clamp(34px, 6vw, 66px); } h2 { font-size: clamp(26px, 4vw, 42px); } h3 { font-size: 20px; } p { line-height: 1.7; color: var(--parchment-2); } .lede { font-size: clamp(16px, 2vw, 19px); color: var(--parchment-2); max-width: 620px; } /* ================= "Vén màn" reveal — chỉ dùng cho trang chủ ============ */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .12s; } .reveal-delay-2 { transition-delay: .24s; } .reveal-delay-3 { transition-delay: .36s; } /* Vệt sương/ánh sáng lướt theo mỗi lần vén màn — mô phỏng mép giấy da vừa được tháo cuộn lướt qua, kèm 1 đường viền sáng như nếp gấp của cuộn giấy. */ .mist-veil { position: relative; } .mist-veil::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(217,164,65,0.55) 0%, rgba(217,164,65,0.18) 8%, transparent 45%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 3%, transparent 10%); opacity: 0; transform: translateY(-40%); } .mist-veil.in-view::after { animation: veil-sweep 1.15s var(--ease-out); } @keyframes veil-sweep { 0% { opacity: 0; transform: translateY(-70%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(75%); } } /* ==================== Cuộn bản đồ mở dần theo tiến độ cuộn trang ================= Thanh cố định bên rìa phải mô phỏng 1 cuộn bản đồ da thuộc: "nhả" dài dần khi cuộn xuống, "cuốn lại" khi cuộn lên — tỉ lệ đúng theo % đã xem hết trang. */ .voyage-scroll { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 300; width: 16px; height: 58vh; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .voyage-rod { width: 22px; height: 10px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright) 50%, var(--gold-dim)); box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .voyage-track { position: relative; width: 6px; flex: 1; background: rgba(217,164,65,0.15); border-radius: 4px; margin: 6px 0; overflow: visible; } .voyage-paper { position: absolute; top: 0; left: 0; right: 0; height: 0%; background: linear-gradient(180deg, var(--parchment), var(--parchment-2)); border-radius: 4px; box-shadow: 0 0 10px rgba(217,164,65,0.5); transition: height 0.05s linear; } .voyage-marker { position: absolute; left: 50%; top: 0%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim)); display: flex; align-items: center; justify-content: center; color: var(--parchment-ink); box-shadow: 0 0 0 3px var(--ink-900), 0 0 14px rgba(244,201,93,0.6); } .voyage-marker .icon { width: 15px; height: 15px; animation: brand-spin 10s linear infinite; } @media (max-width: 1100px) { .voyage-scroll { display: none; } } /* Chỉ báo cuộn hình la bàn */ .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gold); } .scroll-cue .icon { width: 30px; height: 30px; animation: compass-bob 2.6s ease-in-out infinite; } @keyframes compass-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(10px) rotate(8deg); } } .scroll-cue span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); } /* ================================ Cards ================================= */ .card-parchment { background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%); color: var(--parchment-ink); border-radius: var(--radius); box-shadow: 0 18px 36px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(44,28,14,0.08); position: relative; } /* h1-h4 mặc định dùng màu --parchment (kem) cho nền tối; trên nền --card-parchment (cũng màu kem) thì tiêu đề gần như biến mất vào nền — phải ép lại màu chữ tối. */ .card-parchment h1, .card-parchment h2, .card-parchment h3, .card-parchment h4 { color: var(--parchment-ink); } .card-parchment::before { content: ''; position: absolute; inset: 6px; border: 1px dashed rgba(44,28,14,0.22); border-radius: calc(var(--radius) - 4px); pointer-events: none; } .beri { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .beri .icon { width: 1.15em; height: 1.15em; color: var(--gold-dim); } /* Ảnh đồng beri nền trắng hình chữ nhật — crop tròn + object-fit:cover để chỉ hiện phần đồng xu, không hiện nền trắng vuông xung quanh (ảnh gốc do người dùng cung cấp, không chỉnh sửa được). */ .beri-icon { border-radius: 50%; object-fit: cover; } /* ============================ Product card =============================== */ .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 580px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } } @media (min-width: 900px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } } @media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } /* Trang danh sách sản phẩm: số cột phải cố định (2 trên điện thoại, 3 từ tablet trở lên) chứ không auto-fill như các block "sản phẩm nổi bật" ở trang chủ — 9 sản phẩm/trang khi đó luôn xếp đúng 3 dòng đầy, và phần dư ở trang cuối mới có thể ẩn sau nút "Xem tất cả" (xem useFullRowGrid.ts). Đặt sau các rule .product-grid ở trên để thắng cả về specificity lẫn thứ tự nguồn. */ .product-grid.grid-fixed-cols { grid-template-columns: repeat(2, 1fr); } @media (min-width: 580px) { .product-grid.grid-fixed-cols { grid-template-columns: repeat(3, 1fr); } } .product-card { background: linear-gradient(180deg, var(--parchment), var(--parchment-2)); border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: 0 14px 30px rgba(0,0,0,0.35); transition: transform .35s var(--ease-swash), box-shadow .35s; /* Grid kéo mọi thẻ trong cùng hàng cao bằng nhau (align-items:stretch mặc định của .product-grid), nhưng nếu không dùng flex thì nút "Bỏ vào túi" nằm ngay sau nội dung thật (đổi theo tên SP dài/ ngắn, có/không phụ đề) nên mỗi thẻ có khoảng trống thừa khác nhau bên dưới nút — nhìn lệch hàng. display:flex + margin-top:auto ở .add-cart-btn ép nút luôn dính sát đáy thẻ, bất kể nội dung. */ display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-8px) rotate(-0.6deg); box-shadow: 0 24px 44px rgba(0,0,0,0.45); } @media (hover: none) { .product-card:hover { transform: none; box-shadow: 0 14px 30px rgba(0,0,0,0.35); } .chest-card:hover .chest-lid { transform: none; } .chest-card:hover .chest-item { transform: translateY(10px); filter: none; opacity: 0.88; } .chest-card:hover .chest-photo { opacity: 1; } } .product-media { aspect-ratio: 3/4; background: radial-gradient(circle at 30% 20%, rgba(217,164,65,0.35), transparent 55%), var(--ink-700); display: flex; align-items: center; justify-content: center; font-size: 46px; color: var(--gold); position: relative; overflow: hidden; } .product-media::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(244,228,191,0.05) 0 2px, transparent 2px 26px); } .product-tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: #fff; background: var(--wine-bright); box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .product-tag.new { background: #2f7d5c; } .product-tag.sale { background: var(--gold-dim); color: var(--parchment-ink); } .product-body { padding: 16px; color: var(--parchment-ink); } .product-set { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-dim); font-weight: 700; } .product-name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; margin: 6px 0 4px; line-height: 1.3; } .product-rarity { font-size: 12px; color: #4d3d26; margin-bottom: 8px; } .product-price { font-size: 18px; color: var(--wine); } .product-price .original { font-size: 12px; color: #6b5c3f; text-decoration: line-through; margin-left: 6px; font-weight: 400; } .product-stock { font-size: 11.5px; color: #2f7d5c; margin-top: 6px; font-weight: 600; } .product-stock.out { color: #6b5a3f; } .add-cart-btn { width: 100%; padding: 12px; border: none; background: var(--parchment-ink); color: var(--gold-bright); font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: 0.4px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .add-cart-btn:hover { background: #1a0f06; } .add-cart-btn:disabled { background: #6b5a3f; color: #efe6d0; cursor: not-allowed; } /* ======================= Chest card — thẻ sản phẩm dạng rương báu ========== Nắp rương (.chest-lid) lật mở bằng phép quay 3D khi hover, để lộ vật phẩm phát sáng bay lên (.chest-item) kèm tia lửa vàng (.chest-sparks) và 1 vệt sáng quét chéo (.chest-shine) — mô phỏng đúng cảm giác "mở rương báu". */ .chest-card { perspective: 1000px; } .chest-card .product-media { display: none; } /* thay bằng cấu trúc rương bên dưới */ .chest-box { position: relative; aspect-ratio: 3/4; border-radius: var(--radius) var(--radius) 6px 6px; overflow: hidden; background: var(--ink-800); } .chest-well { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 78%, rgba(244,201,93,0.4), transparent 62%), linear-gradient(180deg, #2a1608, #170c05); } .chest-well::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(217,164,65,0.35); border-radius: 8px; } .chest-item { font-size: 44px; color: var(--gold-bright); position: relative; z-index: 2; transform: translateY(10px); opacity: 0.88; transition: transform .55s var(--ease-swash), filter .55s, opacity .4s; } .chest-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .chest-sparks span { position: absolute; width: 7px; height: 7px; color: var(--gold-bright); opacity: 0; } .chest-sparks span:nth-child(1) { left: 30%; top: 60%; } .chest-sparks span:nth-child(2) { left: 48%; top: 66%; } .chest-sparks span:nth-child(3) { left: 64%; top: 58%; } .chest-sparks span:nth-child(4) { left: 40%; top: 50%; } .chest-lid { position: absolute; top: 0; left: 0; right: 0; height: 42%; z-index: 4; background: linear-gradient(160deg, #7a5426, #4a3216 75%); border-radius: var(--radius) var(--radius) 3px 3px; box-shadow: inset 0 -6px 12px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.4); transform-origin: bottom center; transform-style: preserve-3d; backface-visibility: hidden; transition: transform .6s var(--ease-swash); } .chest-lid::before, .chest-lid::after { content: ''; position: absolute; top: 10px; bottom: 10px; width: 10px; background: rgba(217,164,65,0.5); border-radius: 3px; } .chest-lid::before { left: 14px; } .chest-lid::after { right: 14px; } .chest-lock { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 6; width: 30px; height: 30px; border-radius: 8px; color: var(--parchment-ink); background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.4); } .chest-shine { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.55) 50%, transparent 58%); transform: translateX(-140%); mix-blend-mode: overlay; } .chest-tag { position: absolute; top: 10px; left: 10px; z-index: 7; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: #fff; background: var(--wine-bright); box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .chest-tag.new { background: #2f7d5c; } .chest-tag.sale { background: var(--gold-dim); color: var(--parchment-ink); } .chest-card:hover .chest-lid { transform: rotateX(-122deg) translateY(-2px); } .chest-card:hover .chest-item { transform: translateY(-16px) scale(1.14); filter: drop-shadow(0 0 16px rgba(244,201,93,0.85)); opacity: 1; } .chest-card:hover .chest-shine { transform: translateX(140%); transition: transform .85s ease-out; } .chest-card:hover .chest-sparks span { animation: spark-float 1s ease-out forwards; } .chest-card:hover .chest-sparks span:nth-child(1) { animation-delay: .05s; } .chest-card:hover .chest-sparks span:nth-child(2) { animation-delay: .16s; } .chest-card:hover .chest-sparks span:nth-child(3) { animation-delay: .1s; } .chest-card:hover .chest-sparks span:nth-child(4) { animation-delay: .22s; } @keyframes spark-float { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) translateX(var(--sx, 6px)) scale(1.1); } } .chest-sparks span:nth-child(odd) { --sx: 10px; } .chest-sparks span:nth-child(even) { --sx: -10px; } /* ============================== Footer =================================== */ .site-footer { background: var(--ink-900); border-top: 1px solid rgba(217,164,65,0.2); padding: 56px 0 20px; margin-top: 90px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; } .footer-grid h4 { font-family: var(--font-display); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .footer-grid p, .footer-grid li { font-size: 13.5px; color: var(--parchment-2); line-height: 2; } .footer-grid a:hover { color: var(--gold-bright); } .footer-bottom { text-align: center; margin-top: 40px; padding-top: 18px; border-top: 1px dashed rgba(217,164,65,0.2); font-size: 12px; color: var(--gold-dim); letter-spacing: 0.5px; } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* ============================ Treasure burst ============================= */ .treasure-trigger { position: relative; overflow: visible; } .coin-particle { position: fixed; z-index: 3000; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim)); box-shadow: 0 0 6px rgba(244,201,93,0.8); } /* ============================ Bay vào giỏ hàng ============================= */ .fly-to-cart-bone { position: fixed; z-index: 3000; left: 0; top: 0; font-size: 30px; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); } .icon-btn.cart-bump { animation: cart-bump .35s var(--ease-swash); } @keyframes cart-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-6deg); } 70% { transform: scale(0.94) rotate(3deg); } } .chest-pop { display: inline-block; } .chest-pop.burst { animation: chest-shake .5s var(--ease-swash); } @keyframes chest-shake { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.08) rotate(-4deg); } 50% { transform: scale(1.14) rotate(4deg); } 75% { transform: scale(1.05) rotate(-2deg); } } /* ============================== Toast ==================================== */ .toast-stack { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4000; display: flex; flex-direction: column; gap: 10px; align-items: center; } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: linear-gradient(180deg, var(--parchment), var(--parchment-2)); color: var(--parchment-ink); font-weight: 600; font-size: 13.5px; box-shadow: 0 12px 26px rgba(0,0,0,0.4); animation: toast-in .4s var(--ease-swash); } .toast .icon { color: var(--wine); width: 18px; height: 18px; } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================== Utilities ================================= */ .center { text-align: center; } .mx-auto { margin-inline: auto; } .section-pad { padding-block: clamp(60px, 10vw, 110px); } .divider-map { height: 46px; background-repeat: repeat-x; background-size: 120px 46px; opacity: 0.55; background-image: radial-gradient(circle, var(--gold-dim) 1.4px, transparent 1.6px); background-position: center; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } @media (max-width: 960px) { .grid-2 { gap: 28px; } } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 480px) { .grid-2 { gap: 20px; } } .tag-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--gold-dim); color: var(--gold-bright); font-size: 12.5px; font-weight: 600; background: rgba(217,164,65,0.08); } .tag-pill.active { background: var(--gold); color: var(--parchment-ink); border-color: var(--gold); } /* ======================= Section divider — mỏ neo làm điểm nhấn ========== */ .section-divider { display: flex; align-items: center; gap: 14px; max-width: 240px; margin: 0 auto; } .section-divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .section-divider .icon-wrap { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; color: var(--gold-bright); background: rgba(217,164,65,0.08); } /* ======================= Skeleton loading — product grid shimmer =========== Pulse + shimmer chạy gradient qua — trải nghiệm loading chuyên nghiệp hơn opacity tĩnh, user nhận biết đang tải nội dung. */ .pirate-skeleton-card { pointer-events: none; } .pirate-skeleton-shimmer { background: var(--ink-700); position: relative; overflow: hidden; } .pirate-skeleton-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(217,164,65,0.08) 40%, rgba(217,164,65,0.14) 50%, rgba(217,164,65,0.08) 60%, transparent); animation: pirate-shimmer 1.6s ease-in-out infinite; } .pirate-skeleton-line { background: rgba(217,164,65,0.12); border-radius: 4px; animation: pirate-pulse 1.6s ease-in-out infinite; } @keyframes pirate-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes pirate-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* ======================= Sticky checkout bar — mobile cart page ============ Hiện cố định ở đáy màn hình trên mobile, cho phép bấm "Thanh toán" bất kỳ lúc nào mà không cần scroll xuống cuối trang tìm nút. Desktop ẩn vì đã có summary-card sticky bên phải. */ .pirate-cart-sticky-bar { display: none; /* mặc định ẩn (desktop) */ } @media (max-width: 900px) { .pirate-cart-sticky-bar { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 700; background: linear-gradient(180deg, rgba(6,12,20,0.96), rgba(6,12,20,0.99)); backdrop-filter: blur(8px); border-top: 1px solid rgba(217,164,65,0.3); padding: 10px clamp(12px, 4vw, 24px); box-shadow: 0 -4px 20px rgba(0,0,0,0.4); } .pirate-cart-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 600px; margin: 0 auto; } } /* ======================= "Thả neo" — nút quay về đầu trang ================ Xếp chồng theo cột dọc góc phải: ChatWidget (den den mushi) ở dưới cùng (bottom:16/24), Back-to-top ở giữa (bottom:80/100), PirateFloatingNav ở trên cùng (bottom:150). Khoảng cách đủ để animation ring-expand (scale 2.2 ~ 56*2.2=123px) của den den mushi không chạm vào back-to-top. */ .anchor-top-btn { position: fixed; right: 16px; bottom: 80px; z-index: 600; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 8px 18px rgba(0,0,0,0.4); opacity: 0; transform: translateY(14px) scale(0.85); pointer-events: none; transition: opacity .3s, transform .3s var(--ease-swash); } @media (min-width: 640px) { .anchor-top-btn { right: 24px; bottom: 100px; width: 46px; height: 46px; font-size: 18px; } } .anchor-top-btn.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .anchor-top-btn:hover { transform: translateY(-3px) rotate(-8deg); box-shadow: 0 14px 28px rgba(217,164,65,0.3); } .anchor-top-btn .icon { width: 20px; height: 20px; } /* ============================ Page banner ================================ */ .page-banner { position: relative; padding: 62px 0 54px; text-align: center; overflow: hidden; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(217,164,65,0.16), transparent 65%), var(--ink-800); border-bottom: 1px solid rgba(217,164,65,0.18); } .page-banner .brand-mark { margin: 0 auto 16px; } .page-banner .breadcrumb { font-size: 12.5px; color: var(--gold-dim); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 10px; } .page-banner .breadcrumb a:hover { color: var(--gold-bright); } /* ============================ Timeline (giới thiệu) ======================= */ .timeline { position: relative; padding-left: 34px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold-dim), transparent); } .timeline-item { position: relative; padding-bottom: 34px; } .timeline-item::before { content: ''; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--ink-900), 0 0 0 5px var(--gold-dim); z-index: 1; box-sizing: border-box; } .timeline-item h4 { color: var(--gold-bright); margin-bottom: 4px; font-family: var(--font-display); } /* ============================ Crew cards (giới thiệu) ====================== */ .crew-card { text-align: center; padding: 28px 20px; } .crew-avatar { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim)); display: flex; align-items: center; justify-content: center; color: var(--parchment-ink); font-size: 30px; box-shadow: inset 0 0 0 3px rgba(44,28,14,0.15); } .crew-role { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--wine); font-weight: 700; margin-top: 4px; } /* ============================ Filter bar (sản phẩm) ======================== */ .filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 0 30px; border-bottom: 1px dashed rgba(217,164,65,0.25); margin-bottom: 34px; } .select-pirate { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--gold-dim); background: var(--ink-700); color: var(--parchment); font-size: 13px; cursor: pointer; } .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; } .page-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-dim); background: transparent; color: var(--parchment-2); display: flex; align-items: center; justify-content: center; font-weight: 600; } .page-btn.active { background: var(--gold); color: var(--parchment-ink); border-color: var(--gold); } /* ============================ Cart page ==================================== */ .cart-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 32px; align-items: start; } @media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } } .cart-row { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 14px; align-items: center; padding: 14px; border-radius: var(--radius); margin-bottom: 14px; background: linear-gradient(180deg, var(--parchment), var(--parchment-2)); color: var(--parchment-ink); box-shadow: 0 10px 22px rgba(0,0,0,0.3); } @media (min-width: 640px) { .cart-row { grid-template-columns: 84px 1fr auto auto; gap: 18px; padding: 18px; } } .cart-row .thumb { width: 84px; height: 84px; border-radius: 10px; background: var(--ink-700); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 26px; } .cart-row .name { font-family: var(--font-display); font-weight: 600; } .cart-row .meta { font-size: 12px; color: #6a5a3f; margin-top: 2px; } .qty-stepper { display: flex; align-items: center; gap: 12px; background: rgba(44,28,14,0.06); border-radius: 999px; padding: 6px 10px; } .qty-stepper button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 50%; border: none; background: var(--parchment-ink); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; } .qty-stepper button:disabled { opacity: 0.4; cursor: default; } .qty-stepper .icon { width: 16px; height: 16px; pointer-events: none; } .qty-stepper span { min-width: 20px; text-align: center; } .cart-row .remove { color: var(--wine); background: none; border: none; } .summary-card { padding: 26px; border-radius: var(--radius); background: linear-gradient(180deg, var(--parchment), var(--parchment-2)); color: var(--parchment-ink); box-shadow: 0 16px 32px rgba(0,0,0,0.35); } .summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 12px; color: #4a3a24; } .summary-row.total { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--parchment-ink); border-top: 1px dashed rgba(44,28,14,0.25); padding-top: 14px; margin-top: 4px; } .promo-row { display: flex; gap: 8px; margin: 16px 0; } .promo-row input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(44,28,14,0.25); font-size: 13px; } /* ============================ Policy page (luật lệ) ========================= */ .article { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px dashed rgba(217,164,65,0.2); } .article-num { font-family: var(--font-accent); font-size: 32px; color: var(--gold); text-align: center; } .article h3 { margin-bottom: 8px; } /* ============================ Contact page =================================== */ .contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } } .contact-form { display: flex; flex-direction: column; gap: 14px; } .contact-form input, .contact-form textarea { padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(44,28,14,0.2); background: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 14px; color: var(--parchment-ink); } .contact-form textarea { min-height: 130px; resize: vertical; } .contact-info-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; } .contact-info-card .icon { width: 24px; height: 24px; color: var(--wine); flex-shrink: 0; margin-top: 2px; } /* ===================== Bản Đồ Đại Hải Trình (minh hoạ gốc) ==================== */ .voyage-map { position: relative; border-radius: var(--radius); overflow: hidden; padding: 22px; background: linear-gradient(160deg, var(--parchment), var(--parchment-2)); box-shadow: 0 24px 50px rgba(0,0,0,0.4); } .voyage-map::before { content: ''; position: absolute; inset: 10px; border: 2px dashed rgba(44,28,14,0.25); border-radius: 10px; pointer-events: none; } .voyage-svg { width: 100%; height: auto; display: block; } .voyage-island { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; } .voyage-island-dot { width: 42px; height: 42px; border-radius: 50%; color: var(--parchment-ink); background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim)); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,0.35); transition: transform .35s var(--ease-swash), box-shadow .35s; } .voyage-island:hover .voyage-island-dot { transform: scale(1.18) rotate(-8deg); box-shadow: 0 10px 22px rgba(217,164,65,0.55); } .voyage-island-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--parchment); background: rgba(44,28,14,0.88); padding: 3px 11px; border-radius: 999px; white-space: nowrap; } .voyage-x { position: absolute; width: 30px; height: 30px; color: var(--wine); transform: translate(-50%, -50%) rotate(-10deg); } @media (max-width: 700px) { .voyage-island-label { font-size: 10.5px; padding: 2px 8px; } .voyage-island-dot { width: 34px; height: 34px; } .voyage-map { padding: 12px; } } /* ========================================================================= Phần dưới đây vốn nằm trong