/* =========================================================================
* elementor-widgets.css
*
* CSS bổ sung cho các widget Elementor của theme.
* Cố ý tách riêng khỏi main.css: main.css phải giữ nguyên byte-identical
* với dist/assets/css/main.css, nên mọi khai báo mới nằm ở file này.
* Chỉ được nạp trên trang thực sự có dùng widget (get_style_depends).
* ========================================================================= */
/* --- Widget Hero (.youtube-bg đã có sẵn trong main.css) ----------------- */
/* Elementor bọc widget trong .elementor-widget-container -> gỡ mọi giới hạn
để hero tràn hết chiều ngang của cột. */
.elementor-widget-idhome-hero .elementor-widget-container {
width: 100%;
}
/* main.css chỉ định dạng cho `.youtube-bg video`; ảnh cần khai báo tương ứng. */
.idhome-hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Lớp phủ tuỳ chọn (Group_Control_Background ghi màu/gradient vào đây). */
.idhome-hero__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
/* .youtube-bg có pointer-events: none — trong trình sửa Elementor điều này
khiến không click chọn được widget, nên bật lại khi đang edit. */
.elementor-editor-active .idhome-hero,
.elementor-html .idhome-hero {
pointer-events: auto;
}
/* --- Widget Giới thiệu (.box1 đã có sẵn trong main.css) ---------------- */
/* Gỡ giới hạn của .elementor-widget-container để .box1 dùng trọn chiều
ngang của cột (giống hero ở trên). */
.elementor-widget-idhome-intro .elementor-widget-container {
width: 100%;
}
/* main.css đặt .box1-img { z-index: -1 } — trong bản static nó lùi sau nội
dung của .box1 mà vẫn hiện, vì không tạo stacking context riêng.
Elementor bọc widget trong Container có nền/transform nên logo tụt xuống
dưới nền cha và biến mất. isolation giới hạn z-index âm trong phạm vi
.box1, trả lại đúng thứ tự vẽ của bản gốc. */
.elementor-widget-idhome-intro .box1 {
isolation: isolate;
}
/* --- Widget Giới thiệu ID Home Design (.about-box1 đã có sẵn trong main.css) ------- */
/* Gỡ giới hạn của .elementor-widget-container để khối trên và dải nền xám dùng
trọn chiều ngang của cột (giống hero và .box1 ở trên). */
.elementor-widget-idhome-about-intro .elementor-widget-container {
width: 100%;
}
/* main.css viết cứng ảnh nền trong `.about-box1_top::before`. Pseudo-element
không nhận được thuộc tính do PHP in ra, nên chuyển sang biến CSS: giá trị dự
phòng chính là ảnh của bản static, widget chỉ ghi đè biến khi người dùng chọn
ảnh khác. Đường dẫn tương đối tính từ file CSS này — cùng thư mục
assets/css/ với main.css nên vẫn trỏ tới đúng một file. */
.elementor-widget-idhome-about-intro .about-box1_top::before {
background-image: var(--idhome-about-bg, url("../img/banner-about-us-4.png"));
}
/* main.css chỉ định dạng `.about-box1_top h1`. Control "Thẻ HTML" cho phép hạ
xuống h2–h4 khi trang đã có H1 khác, nên chép nguyên si khối khai báo sang
các thẻ còn lại — giống cách main.css liệt kê h2/h3/h4 ở dải xám. Không đụng
tới h1 để bản static và bản Elementor dùng chung đúng một nguồn giá trị. */
.elementor-widget-idhome-about-intro .about-box1_top h2,
.elementor-widget-idhome-about-intro .about-box1_top h3,
.elementor-widget-idhome-about-intro .about-box1_top h4 {
font-size: 100px;
font-weight: 200;
line-height: 60px;
text-align: center;
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
@media (max-width: 768px) {
.elementor-widget-idhome-about-intro .about-box1_top h2,
.elementor-widget-idhome-about-intro .about-box1_top h3,
.elementor-widget-idhome-about-intro .about-box1_top h4 {
font-size: 50px;
line-height: 50px;
top: -50px;
}
}
/* --- Widget Sứ mệnh / Tầm nhìn (mục 18.3 của main.css) ----------------- */
/* Gỡ giới hạn của .elementor-widget-container để .container bên trong tự lo
chiều ngang đúng như bản static (giống các widget trên). Mục 18.3 của
main.css ghi rõ .sub-title và .content không có khai báo nào ở bản gốc, nên
ngoài dòng này widget không cần thêm CSS. */
.elementor-widget-idhome-about-mission .elementor-widget-container {
width: 100%;
}
/* --- Widget Quy trình thiết kế (bản gốc không có CSS riêng) ------------- */
/* Gỡ giới hạn của .elementor-widget-container để .container bên trong tự lo
chiều ngang đúng như bản static (giống các widget trên). Bản gốc chỉ là một
![]()
trần trong .container: kích thước đến từ rule chung `img { max-width:
100%; height: auto }` ở đầu main.css, nên ngoài dòng này không cần gì thêm. */
.elementor-widget-idhome-about-process .elementor-widget-container {
width: 100%;
}
/* --- Widget Dịch vụ (mục 18.4 của main.css) ---------------------------- */
/* Gỡ giới hạn của .elementor-widget-container để dải dịch vụ dùng trọn chiều
ngang của cột (giống các widget trên). */
.elementor-widget-idhome-about-services .elementor-widget-container {
width: 100%;
}
/* main.css chỉ có đúng một khai báo cho .title_custom và nó bị khoá sau
body.page-about (rule `@media (max-width: 576px)` ở cuối file), nên trang
dựng bằng Elementor mà không phải trang Về chúng tôi sẽ mất cỡ chữ dành cho
điện thoại. Chép lại đúng khai báo đó nhưng khoanh trong widget — giống cách
widget Đối tác và widget Slider đã làm. Trên trang Về chúng tôi hai rule
trùng nhau nên không đổi gì. */
@media (max-width: 576px) {
.elementor-widget-idhome-about-services .title_custom {
font-size: 28px;
margin-top: 5px;
}
}
@media (min-width: 768px){
.idhome-about-services, .idhome-about-personnel{
padding-left: 3rem !important;
}
}
.idhome-about-personnel .title_custom{
line-height: 1.4;
}
.idhome-about-services .card-text{
font-size: 16px;
}
.blocks-gallery-grid{
padding: 0;
}
.blocks-gallery-grid li{
list-style: none !important;
}
@media (max-width: 767px){
.idhome-about-personnel {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
@media screen and (max-width: 600px) {
#wpadminbar {
position: fixed;
}
}
/* Liên kết tuỳ chọn bọc quanh ảnh + tên dịch vụ (bản gốc không có). Bỏ gạch
chân và trả màu chữ về mặc định để thẻ trông y như khi không có liên kết. */
.elementor-widget-idhome-about-services .idhome-about-services__link,
.elementor-widget-idhome-about-services .idhome-about-services__link:hover {
color: inherit;
text-decoration: none;
}
/* --- Widget Đội ngũ nhân sự (mục 18.4 của main.css) -------------------- */
/* Gỡ giới hạn của .elementor-widget-container để băng chuyền nhân sự dùng trọn
chiều ngang của cột (giống các widget trên). */
.elementor-widget-idhome-about-personnel .elementor-widget-container {
width: 100%;
}
/* Cùng lý do như widget Dịch vụ: khai báo .title_custom duy nhất của main.css
bị khoá sau body.page-about, nên trang dựng bằng Elementor mà không phải
trang Về chúng tôi sẽ mất cỡ chữ dành cho điện thoại. Chép lại đúng khai báo
đó nhưng khoanh trong widget. Trên trang Về chúng tôi hai rule trùng nhau
nên không đổi gì. */
@media (max-width: 576px) {
.elementor-widget-idhome-about-personnel .title_custom {
font-size: 28px;
margin-top: 5px;
}
}
/* main.css đặt `.personnel-carousel { overflow: hidden }` vì khối không mang
class .swiper-container. Trong trình sửa Elementor, Swiper có thể chưa kịp
khởi tạo khi widget vừa được vẽ lại — lúc đó mọi slide xếp ngang và tràn ra
ngoài. Ép chiều rộng để phần tràn luôn bị cắt đúng chỗ. */
.elementor-widget-idhome-about-personnel .personnel-carousel {
width: 100%;
}
/* Bản gốc không có khai báo nào cho .personnel-image; ảnh dọc 1228×1284 nên khi
một người có ảnh tỉ lệ khác thì hàng thẻ cao thấp so le. Ép cùng tỉ lệ để mọi
thẻ bằng nhau — `img { max-width:100%; height:auto }` ở đầu main.css vẫn lo
phần co giãn theo chiều rộng slide. */
.elementor-widget-idhome-about-personnel .personnel-image img {
width: 100%;
height: auto;
object-fit: cover;
}
/* --- Widget Đối tác & Khách hàng (.home-partner đã có sẵn trong main.css) - */
/* Gỡ giới hạn của .elementor-widget-container để dải logo dùng trọn chiều
ngang của cột (giống hero/giới thiệu ở trên). */
.elementor-widget-idhome-partners .elementor-widget-container {
width: 100%;
}
/* main.css khoá tiêu đề đậm của biến thể nền sáng sau body.page-partners
(`.page-partners .home-partner h2`), nên trang dựng bằng Elementor mà không
phải trang Đối tác sẽ mất độ đậm đó. Chép lại đúng khai báo ấy nhưng khoanh
trong widget và chỉ cho biến thể nền sáng — .partner-row-container chỉ xuất
hiện ở biến thể này. Trên trang Đối tác hai rule trùng nhau nên không đổi gì. */
.elementor-widget-idhome-partners .home-partner .partner-row-container h2 {
font-weight: 800 !important;
}
/* --- Widget Portfolio công ty (.down__doc đã có sẵn trong main.css) ----- */
/* Gỡ giới hạn của .elementor-widget-container để dải Portfolio dùng trọn
chiều ngang của cột (giống hero/giới thiệu ở trên). */
.elementor-widget-idhome-portfolio .elementor-widget-container {
width: 100%;
}
/* Dưới md khối chuyển từ .d-md-flex sang block: bản gốc nằm trong .container
nên nút tự canh trái. Khi tắt "Bọc trong .container", vẫn là inline-flex
nên không cần khai báo gì thêm — chỉ đảm bảo tiêu đề không bị co lại khi
Container cha của Elementor đặt display: flex. */
.elementor-widget-idhome-portfolio .portfolio {
flex-shrink: 0;
}
/* --- Widget Slider toàn màn hình (mục 11.5 của main.css) --------------- */
/* Gỡ giới hạn của .elementor-widget-container để slider dùng trọn chiều
ngang của cột (giống các widget trên). */
.elementor-widget-idhome-slider .elementor-widget-container {
width: 100%;
}
/* main.css khoá khoảng hở 30px của slide sau body.page-home
(`.page-home .swiper-slide`), nên trang dựng bằng Elementor mà không phải
trang chủ sẽ mất khoảng hở. Chép lại đúng hai khai báo đó nhưng khoanh
trong widget, để slider trông như nhau ở mọi trang. Trên trang chủ hai
rule trùng nhau nên không đổi gì. */
.idhome-slider .swiper-slide {
padding: 0px !important;
}
.idhome-slider .swiper-slide.slide--flush {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Chế độ "Cao tuỳ chỉnh": ghi đè 100vh của main.css bằng biến do control
Chiều cao đặt lên {{WRAPPER}}. Giữ !important để thắng .h-auto của
bootstrap nếu markup cũ (đã lưu trước đây) còn class đó. */
.idhome-slider--fixed .iframe-wrapper {
height: var(--idhome-slider-height, 100vh) !important;
}
/* Mọi slide trong một Swiper luôn cao bằng slide cao nhất — ở đây là slide
virtual tour, vì .virtual-tour-overlay phủ kín .iframe-wrapper cao 100vh
(main.css mục 11.5). Slide ảnh vì thế cũng phải để .iframe-wrapper giữ
nguyên chiều cao 100vh đó; trước đây nó bị .h-auto (height:auto!important)
ép co theo tỉ lệ ảnh nên hở một dải trắng dưới ảnh. .h-auto đã được gỡ khỏi
markup, thêm !important ở đây để nội dung lưu từ bản cũ cũng khỏi lỗi. */
.idhome-slider .swiper-slide > .iframe-wrapper {
display: block;
height: 100vh;
}
.idhome-slider:not(.idhome-slider--fixed) .swiper-slide > .iframe-wrapper.h-auto {
height: 100vh !important;
}
/* Ảnh chỉ được `img { max-width:100%; height:auto }` của main.css phục vụ, nên
phải nói rõ là phủ kín ô slide và cắt bớt phần thừa — giống cách
.virtual-tour-overlay dùng background-size: cover ở slide đầu. */
.idhome-slider .swiper-slide > .iframe-wrapper > img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Lớp phủ virtual tour có z-index 11 và phủ kín slide, nên trong trình sửa
Elementor nó nuốt mất cú click chọn widget. Vô hiệu hoá lúc đang edit —
nút xem tour vẫn bấm được vì được bật lại ngay bên dưới. */
.elementor-editor-active .idhome-slider .virtual-tour-overlay {
pointer-events: none;
}
.elementor-editor-active .idhome-slider .virtual-tour-button {
pointer-events: auto;
}
/* --- Widget Cảm nhận (mục 16 của main.css) ----------------------------- */
/* Gỡ giới hạn của .elementor-widget-container để dải cảm nhận dùng trọn
chiều ngang của cột (giống các widget trên). */
.elementor-widget-idhome-testimonials .elementor-widget-container {
width: 100%;
}
/* Trước khi Swiper khởi tạo, .swiper-wrapper chưa có display:flex nên bốn thẻ
xếp chồng và khối cao vọt lên trong một nhịp. Bản static không gặp vì băng
chuyền nằm sẵn trong HTML; ở đây widget có thể được vẽ lại bất cứ lúc nào
trong trình sửa. Cắt phần tràn cho tới khi Swiper gắn class initialized. */
.idhome-testimonials .testimonial-swiper:not(.swiper-container-initialized) .swiper-wrapper {
display: flex;
flex-wrap: nowrap;
}
/* main.css chỉ định .testimonial-slide bằng `.testimonial-swiper
.testimonial-slide`, nhưng chiều rộng slide do Swiper gán inline. Khi chưa
khởi tạo (hoặc khi trình duyệt tắt JS) thì mỗi thẻ tự chia đều để không có
thẻ nào tràn ra ngoài. */
.idhome-testimonials .testimonial-swiper:not(.swiper-container-initialized) .testimonial-slide {
flex: 1 0 0%;
min-width: 0;
}
/* --- Widget Form liên hệ (mục 17 của main.css lo phần còn lại) ---------- */
/* Gỡ giới hạn của .elementor-widget-container để dải .euro-city-projects dùng
trọn chiều ngang của cột (giống hero / giới thiệu ở trên). */
.elementor-widget-idhome-contact-form .elementor-widget-container {
width: 100%;
}
/* Bẫy bot. Cố ý KHÔNG dùng display:none hay visibility:hidden — nhiều bot bỏ
qua ô bị ẩn kiểu đó, còn ô đẩy ra ngoài màn hình thì chúng vẫn điền. Người
dùng thật không thấy, và tabindex="-1" trên input giữ cho phím Tab không
bao giờ dừng ở đây. */
.idhome-contact-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Dòng thông báo dưới nút. Bản gốc chỉ có .mt-3 .text-right nên chữ mang màu
mặc định; hai màu dưới đây chỉ để phân biệt thành công / thất bại. */
.idhome-contact-form__response:empty {
margin: 0 !important;
}
.idhome-contact-form__response.is-success {
color: #1f7a3f;
}
.idhome-contact-form__response.is-error {
color: #c0392b;
}
/* Trong lúc chờ máy chủ trả lời, nút bị disable — làm mờ để thấy rõ là đang
gửi chứ không phải bấm hụt. */
.idhome-contact-form button[type="submit"]:disabled {
cursor: progress;
opacity: 0.5;
}
/* --- Widget List dự án (mục 9 + 12 của main.css lo phần còn lại) -------- */
/* Gỡ giới hạn của .elementor-widget-container để lưới dùng trọn chiều ngang
Container cha — .contentFetch tự căn giữa bằng .container.mx-auto. */
.elementor-widget-idhome-project-list .elementor-widget-container {
max-width: none;
}
/* main.css đặt ".page-projects .contentFetch { max-width: fit-content }" —
trong trình sửa Elementor, không mang class page-projects nên lưới
trải rộng khác hẳn bản thật. Lặp lại rule đó theo widget để bản xem trước
khớp với frontend. */
.elementor-editor-active .elementor-widget-idhome-project-list .contentFetch,
.elementor-editor-preview .elementor-widget-idhome-project-list .contentFetch {
max-width: fit-content;
min-height: 400px;
margin-bottom: 30px;
}
/* Cùng lý do: main.css đặt ".projects { margin: 100px 0 }" và bản thật khoá
lại bằng ".page-projects .projects { margin: 0 !important }". */
.elementor-editor-active .elementor-widget-idhome-project-list .projects,
.elementor-editor-preview .elementor-widget-idhome-project-list .projects {
margin: 0;
}
/* Cùng lý do: định dạng phân trang của bản gốc nằm sau .page-projects. */
.elementor-editor-active .elementor-widget-idhome-project-list .pagination,
.elementor-editor-preview .elementor-widget-idhome-project-list .pagination {
height: 40px;
display: flex;
justify-content: center;
margin-top: 20px;
}
/* --- Widget Chi tiết dự án ---------------------------------------------- */
/* Trên frontend mọi thứ đã có sẵn: single-project.php in class
`project-detail` lên , nên toàn bộ mục 13 của main.css áp dụng.
Trong trình sửa Elementor thì KHÔNG có tổ tiên đó, nên các rule dưới đây
lặp lại đúng những khai báo bị mất để bản xem trước không lệch quá xa bản
thật. Chỉ chạy khi đang sửa — frontend vẫn dùng nguyên main.css. */
.elementor-editor-active .elementor-widget-idhome-project-detail .swiper-container,
.elementor-editor-preview .elementor-widget-idhome-project-detail .swiper-container {
position: relative;
overflow: visible !important;
}
.elementor-editor-active .elementor-widget-idhome-project-detail .btn-carousel-next,
.elementor-editor-active .elementor-widget-idhome-project-detail .btn-carousel-prev,
.elementor-editor-preview .elementor-widget-idhome-project-detail .btn-carousel-next,
.elementor-editor-preview .elementor-widget-idhome-project-detail .btn-carousel-prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
border: 0;
background: none;
padding: 0;
}
/* Bản thật đẩy hai nút ra ngoài cột (-22%). Khung xem trước hẹp hơn và cắt
mất phần tràn ra, nên trong trình sửa kéo chúng vào sát mép ảnh. */
.elementor-editor-active .elementor-widget-idhome-project-detail .btn-carousel-next,
.elementor-editor-preview .elementor-widget-idhome-project-detail .btn-carousel-next {
left: 2%;
}
.elementor-editor-active .elementor-widget-idhome-project-detail .btn-carousel-prev,
.elementor-editor-preview .elementor-widget-idhome-project-detail .btn-carousel-prev {
right: 2%;
}
.elementor-editor-active .elementor-widget-idhome-project-detail .read-more-im,
.elementor-editor-preview .elementor-widget-idhome-project-detail .read-more-im {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 32px;
margin-bottom: 24px;
}
.elementor-editor-active .elementor-widget-idhome-project-detail .read-more-im a,
.elementor-editor-preview .elementor-widget-idhome-project-detail .read-more-im a {
font-size: 14px;
line-height: 18px;
display: inline-block;
text-transform: uppercase;
margin-right: 16px;
color: #000;
font-weight: bold;
}
.elementor-editor-active .elementor-widget-idhome-project-detail .content,
.elementor-editor-preview .elementor-widget-idhome-project-detail .content {
margin-top: 32px;
line-height: 25px;
}
/* --- Widget List bản tin (mục 6 + 8 + 14 của main.css lo phần còn lại) --- */
/* Gỡ giới hạn của .elementor-widget-container để lưới dùng trọn chiều ngang
Container cha — bản gốc không bọc .container, hàng ô trải hết khung nhìn. */
.elementor-widget-idhome-news-list .elementor-widget-container {
max-width: none;
}
/* main.css khoá toàn bộ định dạng phân trang sau .page-news — trong trình sửa
Elementor, không mang class đó nên phân trang hiện ra trần trụi, khác
hẳn bản thật. Các rule dưới đây lặp lại đúng những khai báo bị mất, khoanh
trong widget và chỉ chạy khi đang sửa; frontend vẫn dùng nguyên main.css. */
.elementor-editor-active .elementor-widget-idhome-news-list .pagination,
.elementor-editor-preview .elementor-widget-idhome-news-list .pagination {
display: inline-flex;
list-style: none;
padding: 0;
margin: 0;
gap: 5px;
}
.elementor-editor-active .elementor-widget-idhome-news-list .pagination li,
.elementor-editor-preview .elementor-widget-idhome-news-list .pagination li {
display: inline-block;
}
.elementor-editor-active .elementor-widget-idhome-news-list .pagination li a,
.elementor-editor-active .elementor-widget-idhome-news-list .pagination li span,
.elementor-editor-preview .elementor-widget-idhome-news-list .pagination li a,
.elementor-editor-preview .elementor-widget-idhome-news-list .pagination li span {
display: block;
padding: 10px 15px;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s ease;
}
.elementor-editor-active .elementor-widget-idhome-news-list .pagination li.active span,
.elementor-editor-active .elementor-widget-idhome-news-list .pagination li.current span,
.elementor-editor-preview .elementor-widget-idhome-news-list .pagination li.active span,
.elementor-editor-preview .elementor-widget-idhome-news-list .pagination li.current span {
background-color: #007cba;
color: white;
border-color: #007cba;
}
/* Ô bản tin: thẻ bọc cả ảnh lẫn tiêu đề nên mặc định của trình duyệt gạch
chân và tô màu liên kết lên chữ. Bản static không gặp vì `a` của nó thừa
hưởng rule chung; khai báo lại ở đây cho chắc, tiêu đề đã có .color-212121. */
.elementor-widget-idhome-news-list .row > div > a,
.elementor-widget-idhome-news-list .row > div > a:hover {
text-decoration: none;
}