/** Shopify CDN: Minification failed Line 257:0 Unexpected "<" Line 315:0 Unexpected "<" **/ /* HOME PAGE */ /* --- Desktop (Màn hình lớn): Giữ nguyên trên một dòng --- */ @media screen and (min-width: 768px) { [data-section-id="template--21428193099934__featured_collection_hgak4N"] .section__header--text h2 { white-space: nowrap !important; } [data-section-id="template--21428193099934__featured_collection_hgak4N"] .section__header--text h2 motion-element { display: inline !important; } [data-section-id="template--21428193099934__featured_collection_hgak4N"] .section__header--text { flex: 1 0 auto !important; } [data-section-id="template--21428193099934__featured_collection_hgak4N"] .section__header--buttons { flex: 0 0 auto !important; } } /* --- Mobile (Màn hình nhỏ dưới 768px): Cho phép xuống hàng tự nhiên để không bị cắt --- */ @media screen and (max-width: 767px) { [data-section-id="template--21428193099934__featured_collection_hgak4N"] .section__header--text h2 { white-space: normal !important; /* Hủy nowrap, cho phép xuống hàng */ word-break: break-word !important; max-width: 100% !important; } [data-section-id="template--21428193099934__featured_collection_hgak4N"] .section__header--text h2 motion-element { display: block !important; /* Trả về block để bao bọc text xuống hàng chuẩn theo theme */ } } /* PRODCUT PAGE */ /* CUSTOM CHÍNH CHO NÚT ADD TO CART */ /* 1. TRẠNG THÁI GỐC: ÁP DỤNG CHO TẤT CẢ NÚT ADD TO CART */ .product-form__submit.btn { background-color: #DB2128 !important; border: 1px solid #DB2128 !important; color: #FFFFFF !important; transition: all 0.4s ease !important; position: relative; overflow: hidden; z-index: 1; } /* Đảm bảo chữ bên trong luôn trắng */ .product-form__submit.btn span, .product-form__submit.btn .btn__text { color: #FFFFFF !important; } /* 2. GIỮ HIỆU ỨNG TRƯỢT NHƯNG ĐỔI MÀU LỚP PHỦ (HOVER) */ /* Màu #333333 là màu đen than, bạn có thể thay mã màu khác tại đây */ .product-form__submit.btn::before, .product-form__submit.btn::after { background-color: #FFDCDD !important; z-index: -1 !important; } /* 3. TRẠNG THÁI KHI DI CHUỘT VÀO (HOVER) */ .product-form__submit.btn:hover { background-color: transparent !important; /* Để hiện lớp trượt màu đen bên dưới */ border-color: #DB2128 !important; color: #FFFFFF !important; } /* Fix lỗi chữ bị đổi màu không mong muốn từ code cũ khi hover */ .product-form__submit.btn:hover span, .product-form__submit.btn:hover .btn__text { color: #DB2128 !important; } /* Style mặc định cho variant label */ .product-form__input--button-normal label { background-color: white !important; color: #108A9F !important; border: 2px solid #108A9F !important; font-weight: bolder !important; padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: all 0.25s ease; display: inline-block; } /* Hover và focus */ .product-form__input--button-normal label:hover, .product-form__input--button-normal input[type="radio"]:focus + label { background-color: #108A9F !important; color: white !important; border-color: white !important; font-weight: bold !important; } /* Khi được chọn */ .product-form__input--button-normal input[type="radio"]:checked + label { background-color: #108A9F !important; color: white !important; border-color: white !important; font-weight: bold !important; } @media screen and (min-width: 768px) { #shopify-section-template--19017115730078__main .product-card__action-button{ background-color: #136573; border: none; } .product-card__action-button:hover, .product-card__action-button:focus { border: 1.5px solid #136573 !important; } } /* Sửa lỗi mất chữ: Ép màu trắng và đẩy chữ lên trên cùng */ #ProductSubmitButton-template--20133349359774__main:hover div, #ProductSubmitButton-template--20133349359774__main:hover span { color: #ffffff !important; /* 1. Ép chữ thành màu Trắng */ position: relative !important; /* 2. Định vị lại vị trí */ z-index: 99 !important; /* 3. Đưa chữ nổi lên trên lớp nền */ background: transparent !important; /* Đảm bảo khung bao chữ không có nền riêng */ } /* Đảm bảo nút giữ màu nền mong muốn khi hover */ #ProductSubmitButton-template--20133349359774__main:hover { /* Nếu màu nền trong video là đúng ý bạn thì không cần sửa dòng dưới */ /* background-color: #127883 !important; */ } /* --- FIX LỖI DỰA TRÊN ID (Smart Selector) --- */ /* --- FIX PRE-ORDER: NỀN TRƯỢT TRẮNG + CHỮ XANH --- */ /* 1. Cấu hình CHỮ và ICON khi Hover (Chuyển sang màu Xanh) */ button[id*="submit"].vcf-pre-order:hover div, button[id*="submit"].vcf-pre-order:hover span, button[id*="submit"].vcf-pre-order:hover .btn__text { color: #127883 !important; /* Chữ hóa Xanh khi nền trắng trượt ra */ position: relative !important; z-index: 50 !important; /* Nằm đè lên lớp trượt */ background: transparent !important; transition: color 0.2s ease; } /* 2. Xử lý ICON đồng bộ màu Xanh */ button[id*="submit"].vcf-pre-order:hover svg, button[id*="submit"].vcf-pre-order:hover svg path { fill: #127883 !important; stroke: transparent !important; } /* 3. Cấu hình LỚP TRƯỢT (Background Animation) */ button[id*="submit"].vcf-pre-order::before, button[id*="submit"].vcf-pre-order::after { z-index: 1 !important; /* Nằm dưới chữ */ opacity: 1 !important; /* Bật hiệu ứng trượt */ /* QUAN TRỌNG: Đổi nền trượt thành TRẮNG TINH */ background-color: #ffffff !important; content: "" !important; display: block !important; visibility: visible !important; } /* 4. Thêm viền Xanh (Để khi nút hóa trắng không bị chìm vào nền web) */ button[id*="submit"].vcf-pre-order:hover { border: 1px solid #127883 !important; /* Viền xanh bao quanh */ background-color: transparent !important; /* Nền gốc trong suốt để thấy lớp trượt trắng */ } /* POLICY PAGE */ /* Điều chỉnh định dạng h2 của các trang policy được làm bằng page */ .page__content.rich-text__text h2 { font-weight: 700 !important; font-size: 32px !important; } /* Tăng padding-bottom heading 1 của trang Warrranty */ #shopify-section-template--21428193525918__main .page__title { padding-bottom: 30px !important; /* Tăng từ 30px lên 60px (hoặc giá trị bạn muốn) */ } /* ABOUT US */ /* Ẩn section Business Partners 2 dòng trên mobile */ @media screen and (max-width: 767px) { #shopify-section-template--21428193165470__brand_logos_RFbBag { display: none !important; } } /* Ẩn section logo Business Partner chạy trên Desktop */ @media screen and (min-width: 768px) { #shopify-section-template--21428193165470__scrolling_promotion_XHbP9t { display: none !important; } } /* Ẩn Header section trên desktop */ @media screen and (min-width: 768px) { #shopify-section-template--21428193165470__rich_text_e4Qj7k { display: none !important; } } /* Hiển thị header và canh giữa trên mobile */ @media screen and (max-width: 767px) { #shopify-section-template--20298757243038__rich_text_e4Qj7k { display: block !important; } #shopify-section-template--20298757243038__rich_text_e4Qj7k .rich-text__heading, #shopify-section-template--20298757243038__rich_text_e4Qj7k .rich-text__text, #shopify-section-template--20298757243038__rich_text_e4Qj7k .rich-text--standard { text-align: center !important; justify-content: center; align-items: center; } } /* Collection */ /* Chỉnh lại màu hover cho dãy icon phía cuối cùng của collection page mặc định */ #shopify-section-template--21428192805022__buttons_with_icon_7zH9F3 .button-list__item .button-item__inner { position: relative; overflow: hidden; z-index: 1; } #shopify-section-template--21428192805022__buttons_with_icon_7zH9F3 .button-list__item .button-item__inner::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #0D7182 !important; transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; z-index: -1; } #shopify-section-template--21428192805022__buttons_with_icon_7zH9F3 .button-list__item .button-item__inner:hover::before { width: 100%; } #shopify-section-template--21428192805022__buttons_with_icon_7zH9F3 .button-list__item .button-item__inner .button-item__text { transition: color 0.4s ease !important; } #shopify-section-template--21428192805022__buttons_with_icon_7zH9F3 .button-list__item .button-item__inner:hover .button-item__text { color: #FFFFFF !important; } /* Ẩn ngày đăng + tác giả của blogspot */ .main-blog .article-card__metas { display: none !important; }