/* Product page style — title/price/tabs/swatches, dùng lại màu brand có sẵn (#d99894 dùng cho star-rating, icon tài khoản) */ .single-product .product .summary, .single-product .woocommerce-tabs { color: #4a4a4a !important; } .single-product .product_title { color: #d99894 !important; font-weight: 700; } .single-product .price, .single-product .price .woocommerce-Price-amount { color: #2b2b2b !important; } .single-product .price del .woocommerce-Price-amount { color: #b0b0b0 !important; } /* Tabs: kiểu gạch chân tối giản thay vì nút pill mặc định của Flatsome (.nav-pills). Phải reset toàn bộ box-model (padding/border-radius/background/line-height) bằng !important vì .nav-pills>li>a của theme có padding/border-radius riêng và file flatsome.css load SAU file này trong nên nếu không ép, theme sẽ đè lại. */ .single-product .woocommerce-tabs ul.tabs.wc-tabs { border-bottom: 1px solid #e8e8e8; padding: 0 !important; margin: 0 0 32px !important; display: flex; flex-wrap: wrap; gap: 4px; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li { background: none !important; border: none !important; margin: 0 !important; padding: 0 !important; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li a { display: inline-block; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; font-weight: 700; color: #9a9a9a !important; background: none !important; border-radius: 0 !important; line-height: 1.4 !important; padding: 10px 20px !important; transition: color 0.2s ease; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li.active { border-bottom: 2px solid #2b2b2b; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a { color: #2b2b2b !important; background: none !important; } .single-product .woocommerce-Tabs-panel { color: #4a4a4a !important; line-height: 1.8; font-size: 15px; max-width: 640px; padding: 16px 20px 0 !important; text-align: left; } .single-product .woocommerce-Tabs-panel p { margin: 0 0 16px; } /* Color swatches: ảnh tròn lớn hơn, giống style ảnh khách hàng thật */ .single-product .ux-swatches { --swatch-size-medium: 56px; --swatch-size-large: 56px; gap: 12px; } .single-product .ux-swatch--image img { width: 100%; height: 100%; object-fit: cover; } .single-product .ux-swatch.selected { box-shadow: 0 0 0 2px #d99894 !important; } /* Field WCPA (Custom name, Fonts...): chữ đang bị ăn theo màu cam mặc định của body, đổi lại màu trung tính dễ đọc. Không dùng !important để các màu riêng WCPA tự set qua biến --wcpaLabelColor/--wcpaInputColor... vẫn được ưu tiên nếu có. */ .single-product .wcpa_form_outer, .single-product .wcpa_form_outer p, .single-product .wcpa_form_outer span, .single-product .wcpa_form_outer label, .single-product .wcpa_form_outer div { color: #4a4a4a; } /* 2 nút NOT/YES Personalised: pill lớn hơn, 2 nút chia đều nhau (flex:1) để không bị lệch theo độ dài chữ, đồng bộ padding/màu với concept trang (override CSS cũ đang nằm rải rác trong Customizer Additional CSS) */ .single-product .personalise-toggle { display: flex; width: 100%; max-width: 420px; border: 1px solid #e2e2e2 !important; border-radius: 999px !important; overflow: hidden; margin-bottom: 20px; } .single-product .personalise-toggle button { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 14px 20px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em; border: none !important; background: #ffffff !important; color: #4a4a4a !important; cursor: pointer; text-align: center; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; } .single-product .personalise-toggle button:not(:last-child) { border-right: 1px solid #e2e2e2 !important; } .single-product .personalise-toggle button:hover { background-color: #f7f7f7 !important; } .single-product .personalise-toggle button.active { background-color: #d99894 !important; color: #ffffff !important; } @media (max-width: 549px) { .single-product .personalise-toggle button { white-space: normal; padding: 12px 10px !important; } } /* Nút Add to Cart: dạng pill vàng mù tạt, chữ trắng đậm, hiện giá ngay trong nút */ .single-product .single_add_to_cart_button { background-color: #c9a83a !important; border-color: #c9a83a !important; color: #ffffff !important; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px; width: 100%; padding: 16px 20px; font-size: 14px; } .single-product .single_add_to_cart_button:hover { background-color: #b3922f !important; border-color: #b3922f !important; } .single-product .single_add_to_cart_button .atc-price { font-weight: 400; opacity: 0.9; } /* Thanh cuộn thumbnail dọc: làm mảnh lại thay vì scrollbar mặc định của trình duyệt */ .single-product .vertical-thumbnails { scrollbar-width: thin; scrollbar-color: #d9d9d9 transparent; } .single-product .vertical-thumbnails::-webkit-scrollbar { width: 4px; } .single-product .vertical-thumbnails::-webkit-scrollbar-track { background: transparent; } .single-product .vertical-thumbnails::-webkit-scrollbar-thumb { background-color: #d9d9d9; border-radius: 4px; }