/* Theme Name: Chiic Digital Theme Theme URI: https://chiicworld.com Description: Child theme for Hello Elementor, customized by Chiic Digital Author: Hoang Dam Author URI: huuhoangdesigner@gmail.com Template: hello-elementor Version: 1.0.0 Text Domain: chiic-digital */ /* Add your custom styles below */ .img4-3 img { aspect-ratio: 4/3; object-fit: cover; } .img16-9 img { aspect-ratio: 16/9; object-fit: cover; } /* === Button nền SVG cho JetSlider === */ .jet-slider .jet-slider__button-wrapper .jet-slider__button--primary { --btn-bg: #C39A59; --btn-h: 56px; position: relative; display: inline-flex; /* quan trọng: không dùng grid */ align-items: center; /* canh giữa chiều dọc */ justify-content: center; /* canh giữa chiều ngang */ padding: 0 24px; min-height: var(--btn-h); color: #fff; text-decoration: none; border: none; background: none !important; isolation: isolate; /* tạo stacking context riêng */ cursor: pointer; filter: drop-shadow(0 6px 12px rgba(0,0,0,.15)); z-index: 0; /* để pseudo có thể nằm dưới */ transition: all .3s ease-in-out !important; } /* Nền SVG mask */ .jet-slider .jet-slider__button-wrapper .jet-slider__button--primary::before { content: ""; position: absolute; inset: 0; background: var(--btn-bg); pointer-events: none; z-index: -1; /* đẩy nền ra sau content */ -webkit-mask: url('/wp-content/themes/chiic-digital/assets/btn-shape.svg') center / 100% 100% no-repeat; mask: url('/wp-content/themes/chiic-digital/assets/btn-shape.svg') center / 100% 100% no-repeat; } /* Hover đổi màu */ .jet-slider .jet-slider__button-wrapper .jet-slider__button--primary:hover { --btn-bg: #8D2023; transition: all .3s ease-in-out !important; } /* ==================================== */ /* === custom arrow listing slider === */ /* ==================================== */ /* 1. Ẩn thẻ SVG mũi tên mặc định cũ đi */ .jet-listing-grid__slider-icon.slick-arrow svg { display: none !important; } /* 2. Cấu hình nền chứa icon mới */ .jet-listing-grid__slider-icon.slick-arrow { /* --- Phần quan trọng: Chèn link SVG của bạn --- */ background-image: url('/wp-content/uploads/2025/11/shape-4-ar.svg') !important; /* Cấu hình hiển thị ảnh nền */ background-repeat: no-repeat !important; background-position: center center !important; background-size: 16px auto !important; } /* ==================================== */ /* === custom Bullet === */ /* ==================================== */ /* 1. Cấu hình chung cho nút (Mask Base) */ .jet-listing-grid__slider .jet-slick-dots li { Reset style cũ border: none !important; border-radius: 0 !important; box-shadow: none !important; /* Kích thước icon */ width: 24px !important; height: 24px !important; /* MÀU SẮC TRẠNG THÁI BÌNH THƯỜNG */ /*background-color: #89614245 !important; */ -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; /* Mask mặc định (nếu không random) */ -webkit-mask-image: url('/wp-content/themes/chiic-digital/assets/shape-1.svg'); mask-image: url('/wp-content/themes/chiic-digital/assets/shape-1.svg'); transition: background-color 0.3s ease; } /* 2. Đổi màu khi Active (Đang chọn) */ .jet-listing-grid__slider .jet-slick-dots li.slick-active { /* MÀU SẮC TRẠNG THÁI ACTIVE */ background-color: #896142 !important; /* Đổi thành màu bạn muốn */ } /* 3. Đổi màu khi Hover (Tùy chọn) */ .jet-listing-grid__slider .jet-slick-dots li:hover { background-color: #896142 !important; opacity: 1; } .swiper-pagination-bullet { Reset style cũ border: none !important; border-radius: 0 !important; box-shadow: none !important; /* Kích thước icon */ width: 24px !important; height: 24px !important; /* MÀU SẮC TRẠNG THÁI BÌNH THƯỜNG */ /*background-color: #89614245 !important; */ -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; /* Mask mặc định (nếu không random) */ -webkit-mask-image: url('/wp-content/themes/chiic-digital/assets/shape-1.svg'); mask-image: url('/wp-content/themes/chiic-digital/assets/shape-1.svg'); transition: background-color 0.3s ease; } /* Gán class: btn-bo-nguoc vào widget button */ .btn-shape-1 .elementor-button { /* 1. Kích thước góc bo (Dùng em để scale theo font-size) */ /* 1em = cỡ chữ hiện tại của button */ --r: 0.5em; /* 2. Reset border mặc định */ border-radius: 0 !important; /* 3. Tạo khuôn mask (Cách viết Color Stops - Chuẩn nhất) */ /* Cú pháp: Vẽ hình tròn tại góc, trong suốt từ 0 đến bán kính r, sau đó là màu đen */ -webkit-mask: radial-gradient(circle at top left, transparent var(--r), #000 calc(var(--r) + 0.5px)) top left, radial-gradient(circle at top right, transparent var(--r), #000 calc(var(--r) + 0.5px)) top right, radial-gradient(circle at bottom right, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom right, radial-gradient(circle at bottom left, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom left; -webkit-mask-size: 51% 51%; -webkit-mask-repeat: no-repeat; /* Chuẩn cho các trình duyệt khác */ mask: radial-gradient(circle at top left, transparent var(--r), #000 calc(var(--r) + 0.5px)) top left, radial-gradient(circle at top right, transparent var(--r), #000 calc(var(--r) + 0.5px)) top right, radial-gradient(circle at bottom right, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom right, radial-gradient(circle at bottom left, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom left; mask-size: 51% 51%; mask-repeat: no-repeat; /* Transition mượt mà */ transition: all 0.3s ease; } .btn-shape-1 { filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.3)); } /* Lưu ý quan trọng: Khi dùng góc bo lớn, bạn phải tăng Padding để chữ không bị cắt. Đoạn dưới giúp set padding mặc định nếu cần */ /* .btn-bo-nguoc .elementor-button { padding-left: 2.5em !important; padding-right: 2.5em !important; } */ .mask-bottom { --r: 3em; border-radius: 0 !important; /* 3. Tạo khuôn mask (Cách viết Color Stops - Chuẩn nhất) */ /* Cú pháp: Vẽ hình tròn tại góc, trong suốt từ 0 đến bán kính r, sau đó là màu đen */ -webkit-mask: radial-gradient(circle at top left, transparent var(--r), #000 calc(var(--r) + 0.5px)) top left, radial-gradient(circle at top right, transparent var(--r), #000 calc(var(--r) + 0.5px)) top right, radial-gradient(circle at bottom right, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom right, radial-gradient(circle at bottom left, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom left; -webkit-mask-size: 51% 51%; -webkit-mask-repeat: no-repeat; mask: radial-gradient(circle at top left, transparent 0, #000 calc(var(--r) + 0.5px)) top left, radial-gradient(circle at top right, transparent 0, #000 calc(var(--r) + 0.5px)) top right, radial-gradient(circle at bottom right, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom right, radial-gradient(circle at bottom left, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom left; mask-size: 51% 51%; mask-repeat: no-repeat; transition: all 0.3s ease; } .mask-primary { --r: 3em; border-radius: 0 !important; /* 3. Tạo khuôn mask (Cách viết Color Stops - Chuẩn nhất) */ /* Cú pháp: Vẽ hình tròn tại góc, trong suốt từ 0 đến bán kính r, sau đó là màu đen */ -webkit-mask: radial-gradient(circle at top left, transparent var(--r), #000 calc(var(--r) + 0.5px)) top left, radial-gradient(circle at top right, transparent var(--r), #000 calc(var(--r) + 0.5px)) top right, radial-gradient(circle at bottom right, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom right, radial-gradient(circle at bottom left, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom left; -webkit-mask-size: 51% 51%; -webkit-mask-repeat: no-repeat; mask: radial-gradient(circle at top left, transparent var(--r), #000 calc(var(--r) + 0.5px)) top left, radial-gradient(circle at top right, transparent var(--r), #000 calc(var(--r) + 0.5px)) top right, radial-gradient(circle at bottom right, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom right, radial-gradient(circle at bottom left, transparent var(--r), #000 calc(var(--r) + 0.5px)) bottom left; mask-size: 51% 51%; mask-repeat: no-repeat; transition: all 0.3s ease; } @media screen and (max-width:767px) { .mask-primary { --r: 1em; } }