/* =========================================================================
   Toyota VN original section classes — ported 1:1 from homepage-new.css
   Applied for: DỊCH VỤ, CÔNG NGHỆ, TIN TỨC & KHUYẾN MÃI sections + hero
   ========================================================================= */

/* ============ HERO BANNER ============ */
.section-slider-banner .swiper-slider-banner { width: 100%; max-width: 1600px; margin: 0 auto; height: 600px; position: relative; }
.section-slider-banner .swiper-slide { position: relative; }
.section-slider-banner .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section-slider-banner .content-banner { position: absolute; left: 120px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; z-index: 2; }
.section-slider-banner .content-banner p { margin: 0; }
.section-slider-banner .content-banner p:nth-child(1) { font-weight: 600; font-size: 40px; line-height: 120%; color: #FFFFFF; margin-bottom: 20px; }
.section-slider-banner .content-banner p:nth-child(2) { font-weight: 700; font-size: 64px; line-height: 120%; color: #FFFFFF; margin-bottom: 32px; }
.section-slider-banner .content-banner.dark p { color: #1A1A1A; }
.section-slider-banner .button-kham-pha { display: inline-flex; align-items: center; gap: 8px; background: #EB0A1E; color: #fff; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 0.05em; padding: 14px 28px; text-decoration: none; width: fit-content; transition: background .2s; }
.section-slider-banner .button-kham-pha:hover { background: #C5091A; }
.section-slider-banner .swiper-pagination .swiper-pagination-bullet { margin: 0 4px; width: 8px; height: 8px; border-radius: 2px; background: #CCCCCC; opacity: 1; }
.section-slider-banner .swiper-pagination .swiper-pagination-bullet-active { background: #EB0A1E; }
.section-slider-banner .swiper-button-prev, .section-slider-banner .swiper-button-next { width: 40px !important; height: 40px !important; border-radius: 50%; background: rgba(255,255,255,0.2); border: 1px solid #fff; color: #fff !important; }
.section-slider-banner .swiper-button-prev { left: 60px !important; }
.section-slider-banner .swiper-button-next { right: 60px !important; }
.section-slider-banner .swiper-button-prev::after, .section-slider-banner .swiper-button-next::after { font-size: 14px !important; color: #fff; }

/* ============ DỊCH VỤ ============ */
.section-service { width: 100%; max-width: 1230px; margin: 0 auto; padding: 100px 15px 0; }
.section-service-title { font-weight: 400; font-size: 26px; line-height: 50px; color: #101010; margin-bottom: 60px; text-align: center; position: relative; }
.service-tab ul { display: flex; list-style: none; padding: 0; margin-bottom: 0; }
.service-tab-item { flex: 1; padding-bottom: 11px; cursor: pointer; text-align: center; }
.service-tab-name { font-size: 14px; font-weight: 400; color: #3A3A3A; margin: 0; letter-spacing: 0.05em; }
.service-tab-item.active .service-tab-name { color: #EB0A1E; }
.service-tab-item.active { border-bottom: 4px solid #EB0A1E; }
.divider-bottom-service-tab { height: 1px; background-color: #101010; margin-top: -4px; }

.service-news { position: relative; margin-top: 40px; }
.service-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-news-swiper-item { position: relative; overflow: hidden; cursor: pointer; }
.service-news-swiper-item::before { content: ''; position: absolute; z-index: 2; pointer-events: none; width: 100%; height: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.8)); left: 0; top: 0; }
.service-news-swiper-item::after { content: ''; position: absolute; z-index: 2; pointer-events: none; width: 100%; height: 100%; background: transparent; left: 0; top: 0; transition: background .3s; }
.service-news-swiper-item:hover::after { background: rgba(0,0,0,0.2); }
.service-news-swiper-item-image { width: 100%; height: 520px; object-fit: cover; object-position: center; display: block; transition: transform .5s ease; }
.service-news-swiper-item:hover .service-news-swiper-item-image { transform: scale(1.02); }
.service-news-swiper-item-detail { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; padding: 24px; }
.service-news-swiper-item-title { margin: 0 0 16px; font-weight: 600; font-size: 22px; line-height: 150%; color: #fff; }
.service-news-swiper-item-excerpt { font-size: 16px; line-height: 150%; font-weight: 400; color: #fff; margin: 0 0 24px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; max-height: 0; transition: max-height .5s; }
.service-news-swiper-item:hover .service-news-swiper-item-excerpt { max-height: 100px; }
.service-news-swiper-item-viewmore { font-weight: 600; font-size: 16px; color: #101010; text-transform: uppercase; background: #fff; width: 150px; height: 50px; display: flex; align-items: center; justify-content: center; position: relative; transition: background .4s ease; text-decoration: none; }
.service-news-swiper-item-viewmore:hover { background: #d8d8d8; }
.service-news-swiper-item-viewmore i { font-size: 14px; opacity: 0; margin-left: 5px; transition: opacity .2s; }
.service-news-swiper-item-viewmore:hover i { opacity: 1; }

/* ============ CÔNG NGHỆ ============ */
.section-technology { width: 100%; max-width: 1230px; margin: 0 auto; padding: 150px 15px 0; }
.section-technology-title { font-weight: 400; font-size: 26px; line-height: 150%; color: #101010; margin-bottom: 40px; text-align: center; position: relative; }
.section-technology-title::after { content: ''; display: block; width: 56px; height: 3px; background: #EB0A1E; margin: 8px auto 0; }
.technology-tab ul { display: flex; list-style: none; justify-content: center; padding: 0; margin: 0; gap: 0; }
.technology-tab-item { width: calc(100% / 5); padding-bottom: 11px; text-align: center; cursor: pointer; }
.technology-tab-name { font-size: 14px; font-weight: 400; color: #3A3A3A; margin: 0; letter-spacing: 0.05em; }
.technology-tab-item.active .technology-tab-name { color: #EB0A1E; }
.technology-tab-item.active { border-bottom: 4px solid #EB0A1E; }
.divider-bottom-technology-tab { height: 1px; background-color: #101010; margin-top: -4px; }

.technology-container { margin-top: 40px; }
.technology-item-large { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 24px; }
.technology-item-large .tech-large-img { width: 50%; height: 350px; position: relative; overflow: hidden; }
.technology-item-large .tech-large-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.technology-item-large .tech-large-img:hover img { transform: scale(1.02); }
.technology-item-large .tech-large-content { width: 50%; background: #3A3A3A; padding: 24px; display: flex; flex-direction: column; justify-content: center; height: 350px; }
.tech-title { font-size: 22px; font-weight: 600; line-height: 150%; margin-bottom: 16px; }
.tech-title a { color: #fff; text-decoration: none; }
.tech-desc { color: #fff; font-size: 16px; font-weight: 400; line-height: 150%; margin-bottom: 40px; }
.technology-item-large .tech-large-content .button-view-more { font-weight: 600; font-size: 16px; color: #101010; text-transform: uppercase; background: #fff; width: 129px; height: 54px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; text-decoration: none; transition: all .4s ease; }
.technology-item-large .tech-large-content .button-view-more:hover { background: transparent; color: #fff; }

.technology-list-small { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.technology-item-small .tech-small-img { height: 236px; position: relative; overflow: hidden; }
.technology-item-small .tech-small-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.technology-item-small .tech-small-img:hover img { transform: scale(1.02); }
.tech-small-title { margin: 16px 0 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.tech-small-title a { color: #101010; text-decoration: none; }
.tech-small-title a:hover { color: #EB0A1E; }

/* ============ TIN TỨC & KHUYẾN MÃI ============ */
.section-news-promote { max-width: 1230px; margin: 0 auto; padding: 100px 15px; }
.section-news-promote-title { font-weight: 400; font-size: 26px; line-height: 150%; color: #101010; margin-bottom: 40px; text-align: center; position: relative; }
.section-news-promote-title::after { content: ''; display: block; width: 56px; height: 3px; background: #EB0A1E; margin: 8px auto 0; }
.news-promote-tab ul { display: flex; list-style: none; padding: 0; margin: 0; position: relative; }
.news-promote-tab-item { flex: 1; padding-bottom: 11px; cursor: pointer; text-align: center; }
.promotion-tab-name { font-size: 14px; font-weight: 400; color: #3A3A3A; margin: 0; letter-spacing: 0.05em; }
.news-promote-tab-item.active .promotion-tab-name { color: #EB0A1E; }
.news-promote-tab-item.active { border-bottom: 4px solid #EB0A1E; }
.divider-bottom-news-promote-tab { height: 1px; background-color: #101010; margin-top: -4px; }

.news-promote-post { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 40px; }
.news-promote-post-item { position: relative; overflow: hidden; cursor: pointer; }
.news-promote-post-item::before { content: ''; position: absolute; z-index: 2; pointer-events: none; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,0.85)); }
.news-promote-post-item::after { content: ''; position: absolute; z-index: 2; pointer-events: none; inset: 0; background: transparent; transition: background .3s; }
.news-promote-post-item:hover::after { background: rgba(0,0,0,0.2); }
.news-promote-post-img { overflow: hidden; }
.news-promote-post-img a { display: block; }
.news-promote-post-img img { width: 100%; height: 320px; object-fit: cover; display: block; transition: transform .5s; }
.news-promote-post-item:hover .news-promote-post-img img { transform: scale(1.03); }
.news-promote-post-content { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 20px; }
.news-promote-post-content .content-title { font-size: 15px; line-height: 1.4; color: #fff; margin: 0; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============ MEGA MENU — real classes from header-desktop-v3.css ============ */
.box-menu-content { background: #fff; }

/* Image-banner style (Công nghệ / Tin tức / Điện hóa / Về Toyota) */
.box-news-contain { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 0; }
.box-news-contain .custom-grid { display: grid; grid-gap: 9px 6px; grid-template-rows: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.box-news-contain .custom-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.box-news-item { position: relative; height: 268px; display: block; overflow: hidden; text-decoration: none; }
.box-news-item > img { width: 100%; height: 100%; transform: scale(1); transition: all .3s linear; object-fit: cover; }
.box-news-item:hover > img { transform: scale(1.04); }
.box-news-linear-layer { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(170,170,170,0) 14.63%, rgba(0,0,0,0.408) 46.25%, rgba(0,0,0,0.696) 71.59%, rgba(0,0,0,0.8) 99.6%); opacity: .8; transition: all .3s ease; }
.box-news-linear-layer.height-layer-desktop { height: 166px; }
.news-description { position: absolute; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #fff; bottom: 20px; left: 24px; z-index: 1; }

/* Text-list style (Dịch vụ) */
.box-service-contain { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 0; }
.box-service-contain .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.box-service-contain .col-6 { }
.box-service-menu .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-list { list-style: none; padding: 0; margin: 0; }
.subnav-dropdown-title { font-weight: 700; font-size: 16px; text-transform: uppercase; color: #EB0A1E; margin-bottom: 15px; }
.subnav-dropdown-link { margin: 8px 0; font-size: 14px; }
.subnav-dropdown-link a { color: #212529; text-decoration: none; }
.subnav-dropdown-link a:hover { color: #EB0A1E; font-weight: 700; }
.box-service-banner { width: 100%; height: 100%; }
.box-service-banner > img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; }

/* Dịch vụ bottom footer icons */
.dropdown-nav-menu-footer { display: flex; justify-content: center; align-items: center; height: 76px; border-top: 1px solid #ccc; }
.dropdown-nav-menu-footer-item { margin: 0 46px; display: flex; align-items: center; text-decoration: none; color: #212529; font-size: 14px; }
.dropdown-nav-menu-footer-item:hover { color: #EB0A1E; }
.dropdown-nav-menu-footer-item img { margin-right: 8px; width: 28px; height: 28px; object-fit: contain; }

.box-view-more { display: flex; justify-content: center; }
.box-view-more .button-view-more { font-weight: 600; font-size: 14px; line-height: 150%; color: #101010; padding: 12px 32px; border: 1px solid #101010; margin-top: 40px; text-decoration: none; transition: background .2s, color .2s; }
.box-view-more .button-view-more:hover { background: #101010; color: #fff; }