.myatnlayout-bg-v2 {
    background-image: url("/assets/front/images-atn/Frame\ 31.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  
  .line-banner {
    width: 130px;
    height: 0;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, #fe431b, #ffc137) 1;
    outline-offset: -1px;
  }
  
  .line-title-gradient {
    height: auto;
    min-height: 65px;
    width: 2px !important;
    background: linear-gradient(to bottom, #fe431b 0%, #ffc137 100%);
  }
  
  /* Icon sizes for cards */
  .icon-vt1 {
    max-width: 47px;
    height: 40px;
  }
  
  .icon-vt2 {
    max-width: 50px;
    height: 39px;
  }
  
  .icon-vt3 {
    max-width: 51px;
    height: 51px;
  }
  
  .icon-vt4 {
    max-width: 48px;
    height: 47px;
  }
  
  .icon-vt5 {
    max-width: 49px;
    height: 45px;
  }
  
  .item-card {
    background-size: cover;
    background-position: center;
    overflow: hidden;
    width: 368px;
    height: 401px;
  }
  
  .bg-banner-layout {
    background-image: url("/assets/front/images-atn/backgrou-banner.png");
    background-size: cover;
    background-position: center;
  }
  
  .bg-banner {
    width: 100%;
    max-width: 1920px;
    height: 669px;
    min-height: 710px;
    background-image: url("/assets/front/images-atn/backgrou-banner.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .bg-card-1 {
    background-image: url("/assets/front/images-atn/banne1.png");
  }
  
  .bg-card-2 {
    background-image: url("/assets/front/images-atn/banner2.png");
  }
  
  .bg-card-3 {
    background-image: url("/assets/front/images-atn/banner3.png");
  }
  
  .trapezoid-right {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  }
  
  .custom-card1 {
    width: 100%;
    max-width: 1144px;
    height: auto;
    min-height: 264px;
    background-image: url("/assets/front/images-atn/banner-left-white.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .custom-card2 {
    width: 100%;
    max-width: 1144px;
    height: auto;
    min-height: 264px;
    background-image: url("/assets/front/images-atn/banner-right-white.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .custom-card1:hover {
    background-image: url("/assets/front/images-atn/banner-left.png");
  }
  
  .custom-card1:hover .bg-yel-red {
    background: var(--var-color-yellow);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .custom-card1:hover ul {
    color: var(--var-color-yellow);
  }
  
  .custom-card2:hover {
    background-image: url("/assets/front/images-atn/banner-right.png");
  }
  
  .custom-card2:hover .bg-yel-red {
    background: var(--var-color-yellow);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .custom-card2:hover ul {
    color: var(--var-color-yellow);
  }
  
  .contact-section {
    width: 100%;
    min-height: 1058px;
    background-image: url("/assets/front/images-atn/bg-section.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .button-blue-on {
    background-image: url("/assets/front/images-atn/button-blue-on.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 410px;
    height: 130px;
  }
  
  .button-orang-on {
    background-image: url("/assets/front/images-atn/button-oranga-on.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 410px;
    height: 130px;
  }
  
  .button-blue-on:hover {
    background-image: url("/assets/front/images-atn/button-blue-off.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 410px;
    height: 130px;
  }
  
  .button-orang-on:hover {
    background-image: url("/assets/front/images-atn/button-oranga-off.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 410px;
    height: 130px;
  }
  
  #dropdownMenuLang {
    background-color: transparent !important;
    box-shadow: none;
  }
  
  .h-screen-banner-full {
    height: 100vh;
    min-height: 100vh;
    position: relative;
    margin-top: -120px;
    padding-top: 120px;
  }
  
  .h-screen-banner-full::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
  }
  
  /* Chỉ áp dụng cho ảnh banner, không áp dụng cho logo */
  .h-screen-banner-full > img {
    position: absolute !important;
    z-index: 0;
    top: -120px !important;
    left: 0;
    width: 100% !important;
    height: 120% !important;
    object-fit: cover !important;
    display: block;
  }
  
  /* Đảm bảo logo trong header-menu không bị ảnh hưởng bởi CSS của banner */
  .h-screen-banner-full .header-menu img.logo,
  .header-menu img.logo,
  .header-menu .logo {
    position: relative !important;
    z-index: 1001 !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: 50px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .h-screen-banner-full > div {
    position: relative;
    z-index: 2;
  }
  
  body {
    overflow-x: hidden;
  }
  
  header {
    position: relative;
    z-index: 10;
  }
  
  /* Đảm bảo header-menu hiển thị trên banner */
  .header-menu.large-screen {
    z-index: 1000 !important;
    position: fixed !important;
  }
  
  .header-menu.large-screen nav {
    position: relative;
    z-index: 1000;
  }
  
  .header-menu.large-screen .container {
    position: relative;
    z-index: 1000;
  }
  
  /* Đảm bảo nền trắng khi scrolled */
  .header-menu.large-screen.scrolled,
  .header-menu.large-screen.scrolled nav,
  .header-menu.large-screen.scrolled nav.bg-transparent {
    background-color: white !important;
  }
  
  .header-menu .nav-link {
    font-size: 16px !important;
    font-weight: 500 !important;
  }
  
  .header-menu .dropdown-toggle {
    font-size: 15px;
    font-weight: 500;
  }
  
  .header-menu button[aria-label="Search"] {
    font-size: 15px;
  }
  
  .header-menu ul {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    gap: 2.5rem !important;
  }
  
  .header-menu .nav-item {
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .search-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    padding: 8px 12px;
    color: white;
    font-size: 15px;
    width: 200px;
    transition: all 0.3s ease;
  }
  
  .search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.15);
  }
  
  .search-input.show {
    display: block !important;
  }
  
  .search-container {
    position: relative;
  }
  
  .hover-overlay {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .hover-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15); /* ánh sáng */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
  }
  
  .hover-overlay:hover::before {
    opacity: 1;
  }
  
  .hover-overlay:hover {
    transform: translateY(10px);
  }
  .form-control:hover,
  .form-control:focus {
    box-shadow: 0 0 0 4px rgba(200, 201, 206, 0.2); /* ánh sáng nhẹ màu cam */
    transition: box-shadow 0.3s ease;
  }
  .play-btn-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.85);
    border: none;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease;
  }
  /* Mỗi cột có padding 10px → khoảng cách giữa hai cột là 20px */
  .col-md-4,
  .col-lg-4 {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .hero-atntech {
    height: 100vh;
    min-height: 100vh;
  }
  
  .text-gradient-light {
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #b8e8f5 40%,
      #d0f0f8 60%,
      #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
  }
  
  .h-screen-banner-full h1 {
    font-size: 60px !important;
    line-height: 1.2;
  }
  
  .h-screen-banner-full p {
    font-size: 25px !important;
    line-height: 1.5;
  }
  
  .h-screen-banner-full .bg-red-orange {
    font-size: 20px !important;
  }
  
  .h-screen-banner-full .container.align-self-center {
    margin-top: 0;
    padding-bottom: 6px;
  }
  
  .h-screen-banner-full .no-wrap {
    white-space: nowrap;
  }
  
  .pt-9rem {
    padding-top: 9rem !important;
  }
  
  .w-756px {
    width: 756px;
  }
  
  /* Icon container styles */
  .icon-container-w {
    width: 80px;
  }
  
  .icon-container-h {
    height: 80px;
  }
  
  .radius-20.icon-container-w.icon-container-h {
    background-color: white;
  }
  
  .radius-20 {
    border-radius: 20px;
  }
  
  .shadow-icon {
    box-shadow: 0px 4px 4px 0px #00000040;
  }
  
  .word-break {
    word-break: break-word;
  }
  
  .inner-card-blue-border {
    width: 98%;
    height: 98%;
    border: 2px solid #0251ab;
    margin: auto;
  }
  
  .text-location-size {
    font-size: 26px;
  }
  
  .inner-card-blue-border-text {
    max-width: 296px;
  }
  
  .bg-light.p-4.h-100,
  .bg-white.p-4.h-100 {
    min-height: 250px;
  }
  
  .bg-light.p-4.h-100:hover {
    background-color: #f3f9fb !important;
  }
  
  .bg-light.p-4.h-100:hover h5,
  .bg-light.p-4.h-100:hover p {
    text-shadow: 0px 4px 4px #00000040;
  }
  
  /* Accordion styles for case studies section */
  .accordion-item-custom {
    border: none;
    border-radius: 0;
    background-color: white;
    margin-bottom: 15px;
    box-shadow: var(--var-boxshadow-primary);
  }
  
  .accordion-button-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 69px;
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: start;
    cursor: pointer;
  }
  
  .accordion-button-custom:not(.collapsed) {
    background-color: white;
  }
  
  .accordion-button-custom:not(.collapsed) h5 {
    color: var(--var--color--blue);
  }
  
  .accordion-body-custom {
    padding: 20px;
    background-color: white;
  }
  
  /* Hide chevron icon when accordion is active (not collapsed) */
  .accordion-button-custom:not(.collapsed) .chevron-icon {
    display: none;
  }
  
  /* Hide header text content when accordion is active (not collapsed) */
  .accordion-button-custom:not(.collapsed) .header-text-content {
    display: none;
  }
  
  /* Hide entire accordion button when active (not collapsed) */
  .accordion-button-custom:not(.collapsed),
  .accordion-button-custom[aria-expanded="true"] {
    display: none !important;
  }
  
  .accordion-button-custom .header-text-content {
    gap: 2rem;
  }
  
  /* Gradient background for chevron button */
  .bg-gradient-chevron {
    background: linear-gradient(217.56deg, #00a0df 0%, #0251ab 80.94%);
  }
  
  /* Image positioning in accordion - align to right and extend outside */
  .accordion-body-custom .col-12.col-md-6:last-child {
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }
  
  .accordion-body-custom .col-12.col-md-6:last-child > div {
    margin-left: auto;
    margin-right: -20px;
    position: relative;
  }
  
  /* Dark overlay 60% on accordion images */
  .accordion-body-custom .col-12.col-md-6:last-child > div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
  }
  
  .accordion-body-custom .col-12.col-md-6:last-child .position-absolute {
    z-index: 2;
  }
  
  /* Play button styling - 50% white background, no color icon */
  .accordion-body-custom .bg-white.rounded-circle {
    background-color: rgba(255, 255, 255, 0.5) !important;
  }
  
  .accordion-body-custom .fa-play {
    color: white !important;
  }
  
  /* Overlay for banner-home-bg with color #001D4180 */
  .banner-home-bg-overlay {
    position: relative;
    z-index: 0;
  }
  
  .banner-home-bg-overlay img {
    z-index: 0;
  }
  
  .banner-home-bg-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #001d4180;
    z-index: 1;
    pointer-events: none;
  }
  
  /* CTA buttons - layout */
  .cta-buttons {
    flex-wrap: nowrap;
  }
  
  .cta-buttons a.max-w-378 {
    flex: 0 1 378px;
    max-width: 378px;
    min-width: 0;
    white-space: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .accordion-image-wrapper {
    width: 100%;
    max-width: 556px;
    height: 328px;
    overflow: hidden;
  }
  
  .accordion-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Problems Section Background Images */
  .problems-section {
    overflow: hidden;
    padding-top: 100px;
    position: relative;
    z-index: 1;
  }
  
  /* Đảm bảo tất cả phần tử position-relative trong problems-section không đè lên header menu */
  .problems-section.position-relative,
  .problems-section .position-relative {
    z-index: 1 !important;
  }
  
  .problems-section .container.position-relative {
    z-index: 1 !important;
  }
  
  .solution-image-wrapper {
    background-color: var(--var-color-skyblue);
    min-height: 656px;
    overflow: visible;
  }
  
  .solution-image-wrapper img {
    width: 587px;
    height: 656px;
    top: -15%;
    left: 0;
    opacity: 1;
  }
  
  .solution-section .solution-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .solution-section .solution-tagline {
    gap: 1rem;
    padding: 0 3rem;
  }
  
  .solution-section .solution-tagline .line-title {
    flex-shrink: 0;
  }
  
  .problems-banner {
    background: #020612;
  }
  
  .problems-list-container {
    padding: 1rem;
    padding-bottom: 140px;
  }
  
  .collaboration-method-section {
    padding-top: 192px !important;
    padding-bottom: 192px !important;
  }
  
  .problems-bg-1 {
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    max-width: 30%;
    z-index: 0;
    opacity: 1;
  }
  
  .problems-bg-2 {
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
    max-width: 30%;
    z-index: 0;
    opacity: 1;
  }
  
  /* List with dots */
  .list-dotted {
    list-style-type: disc;
    padding-left: 1.5rem;
  }
  
  .list-dotted li {
    list-style-type: disc;
  }
  
  .list-dotted.list-gap-32 li:not(:last-child) {
    margin-bottom: 32px;
  }
  
  /* Compatibility Section */
  .compatibility-section {
    padding-top: 163px;
    padding-bottom: 163px;
  }
  
  .compatibility-image-wrapper {
    background: linear-gradient(204.52deg, #00a0df 1.8%, #0251ab 100.83%);
    max-width: 611px;
    min-height: 526px;
    overflow: visible;
  }
  
  .compatibility-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    top: -10%;
    left: -10%;
    z-index: 1;
  }
  
  /* Compatibility list with red bullets */
  .compatibility-list {
    list-style: none;
    padding-left: 0;
  }
  
  .compatibility-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  .compatibility-list li::before {
    content: "•";
    color: var(--var-color-red-orange);
    font-weight: bold;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    line-height: 1.5;
  }
  
  .compatibility-section .compatibility-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .compatibility-section .compatibility-tagline {
    gap: 1rem;
    padding: 0 3rem;
  }
  
  .compatibility-section .compatibility-tagline .line-title {
    flex-shrink: 0;
  }
  
  /* Sovereign AI Section */
  .sovereign-section {
    position: relative;
    z-index: 1;
  }
  
  .sovereign-section .position-relative {
    z-index: 1 !important;
  }
  
  .sovereign-card {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  
  .sovereign-card img {
    max-width: 360px;
    min-height: 250px;
  }
  
  .sovereign-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
    transition: backdrop-filter 0.3s ease, background 0.3s ease;
  }
  
  .sovereign-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 2;
    pointer-events: none;
  }
  
  .sovereign-card .position-absolute {
    z-index: 3;
    text-align: start;
  }
  
  .sovereign-card .position-absolute p {
    font-size: 24px;
  }
  
  .sovereign-title-dot {
    width: 8px;
    height: 8px;
  }
  
  /* Hover effect with backdrop-filter blur for sovereign cards */
  .sovereign-card:hover::after {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.3);
    transition: backdrop-filter 0.3s ease, background 0.3s ease;
  }
  
  /* Ad Banner Modal */
  .ad-banner-modal .modal-dialog {
    max-width: 100%;
    margin: 0;
  }
  
  .ad-banner-modal .modal-content {
    border: none;
    border-radius: 0;
    background: transparent;
    height: 100vh;
  }
  
  .ad-banner-content {
    background: transparent !important;
    border: none !important;
    height: 100%;
  }
  
  .ad-banner-modal .modal-body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  
  .ad-banner-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .ad-banner-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    border: none;
    background-image: none;
    padding: 0.5rem;
    flex-shrink: 0;
  }
  
  .ad-banner-close::before {
    display: none;
  }
  
  .ad-banner-close i {
    font-size: 18px;
    color: #000;
  }
  
  .ad-banner-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 1);
  }
  
  .ad-banner-link {
    display: inline-block;
    cursor: pointer;
    position: relative;
  }
  
  .ad-banner-link img {
    display: block;
    width: 85%;
    max-width: 85vw;
    max-height: 85vh;
    height: auto;
    object-fit: contain;
  }
  
  /* Mega menu CSS-only hover (no JavaScript) */
  /* Show mega menu when hovering over nav that contains mega-menu-link */
  .header-menu nav:hover ~ #mega-menu-case-studies {
    display: block !important;
  }
  
  /* Show mega menu when hovering over mega-menu-link */
  .header-menu .mega-menu-link:hover ~ #mega-menu-case-studies {
    display: block !important;
  }
  
  /* Keep mega menu visible when hovering over it */
  #mega-menu-case-studies:hover {
    display: block !important;
  }
  
  /* Override the default hidden state for submenus when hovering */
  /* Show ATN TECH submenu when hovering over atn-tech-hover */
  /* Using higher specificity to override styles.css rule */
  #mega-menu-case-studies .mega-menu-parent:has(.atn-tech-hover:hover) ~ #atn-tech-submenu,
  #mega-menu-case-studies .container .d-flex:has(.atn-tech-hover:hover) #atn-tech-submenu {
    display: block !important;
  }
  
  /* Hide ATN ADMIN submenu when hovering over ATN TECH */
  #mega-menu-case-studies .mega-menu-parent:has(.atn-tech-hover:hover) ~ #atn-admin-submenu,
  #mega-menu-case-studies .container .d-flex:has(.atn-tech-hover:hover) #atn-admin-submenu {
    display: none !important;
  }
  
  /* Show ATN ADMIN submenu when hovering over atn-admin-hover */
  #mega-menu-case-studies .mega-menu-parent:has(.atn-admin-hover:hover) ~ #atn-admin-submenu,
  #mega-menu-case-studies .container .d-flex:has(.atn-admin-hover:hover) #atn-admin-submenu {
    display: block !important;
  }
  
  /* Hide ATN TECH submenu when hovering over ATN ADMIN */
  #mega-menu-case-studies .mega-menu-parent:has(.atn-admin-hover:hover) ~ #atn-tech-submenu,
  #mega-menu-case-studies .container .d-flex:has(.atn-admin-hover:hover) #atn-tech-submenu {
    display: none !important;
  }
  
  /* Keep ATN TECH submenu visible when hovering over it and hide ATN ADMIN */
  #mega-menu-case-studies #atn-tech-submenu:hover {
    display: block !important;
  }
  
  #mega-menu-case-studies .container .d-flex:has(#atn-tech-submenu:hover) #atn-admin-submenu {
    display: none !important;
  }
  
  /* Keep ATN ADMIN submenu visible when hovering over it and hide ATN TECH */
  #mega-menu-case-studies #atn-admin-submenu:hover {
    display: block !important;
  }
  
  #mega-menu-case-studies .container .d-flex:has(#atn-admin-submenu:hover) #atn-tech-submenu {
    display: none !important;
  }
  
  /* Ensure text color is black for ATN TECH submenu items */
  #atn-tech-submenu .mega-sub-menu-link .dropdown-item,
  #atn-tech-submenu .mega-sub-menu-link .dropdown-item span {
    color: #000000 !important;
  }
  
  /* Ensure text color is black for ATN ADMIN submenu items */
  #atn-admin-submenu .mega-sub-menu-link .dropdown-item,
  #atn-admin-submenu .mega-sub-menu-link .dropdown-item span {
    color: #000000 !important;
  }