/* reset / layout */
    body { 
      padding-top: 60px; 
      font-size: medium;
    }

    /* Header */
    header {
      background: linear-gradient(90deg, rgba(237, 245, 245, 0.8), rgba(234, 247, 247, 0.8));
      /* background: linear-gradient(90deg,#e6ebea); */
      border-bottom: 1px solid #eee;
      z-index: 1030;
      height: 60px;
    }
    header .navbar-brand img { height: 45px; }

    .navbar-nav .nav-link {
        font-size: 1.1rem;   /* tăng size chữ, có thể chỉnh 1.2rem nếu muốn to hơn */
        font-weight: 600;    /* chữ đậm vừa phải */
         /* đổi màu xanh navy */
        /* color: #003366 !important; */
        padding: 0.5rem 2rem;
    }

    .navbar-nav .nav-item {
      margin-left: 20px;   /* khoảng cách bên trái */
      
    }

    .navbar-nav .nav-link:hover {
        color: #000 !important; /* xanh sáng hơn khi hover */
    }



     
    #scrollTopBtn {
      display: none; 
      position: fixed;
      bottom: 40px;
      right: 30px;
      z-index: 999;
      font-size: 22px;
      border: none;
      outline: none;
      background-color:rgb(213, 214, 219);
      color: white;
      cursor: pointer;
      padding: 12px 15px;
      border-radius: 49%;
      transition: all 0.3s;
    }

     #facebookBtn {
      display: none; 
      position: fixed;
      bottom: 40px;
      right: 30px;
      z-index: 999;
      font-size: 22px;
      border: none;
      outline: none;
      background-color:rgb(87, 118, 241);
      color: white;
      cursor: pointer;
      padding: 12px 15px;
      border-radius: 49%;
      transition: all 0.3s;
    }



    #facebookBtn {
      bottom: 100px; /* đặt cao hơn nút scroll */
      text-decoration: none;
      display: none; /* ẩn giống nút scroll */
      }

    #scrollTopBtn:hover {
      background-color: linear-gradient(90deg, #00B0F0, #CCFFFF);
    }




    /* Banner (scoped so it won't conflict with other carousels) */
    /* .banner .carousel-item {
      height: 500px;
      background: linear-gradient(to bottom, #ecf7ff, #c8e6f8);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .banner .carousel-item img {

        max-height: 100%;
        max-width: calc(100% - 10rem);
      object-fit: contain; 
      margin: 0 5rem;
    } */

    .banner .carousel-item {
    height: calc(100vh - 70px);  /* 100% chiều cao màn hình trừ đi navbar */
    background: linear-gradient(to bottom, #ecf7ff, #c8e6f8);
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .banner .carousel-item img {
    max-height: 100%;
    max-width: calc(100% - 10rem); /* cách lề trái và phải 5rem */
    object-fit: cover;
    margin: 0 5rem;
    }

    @media (max-width: 768px) {
      .banner .carousel-item img { max-width: calc(100% - 2rem); margin: 0 1rem; }
      .banner .carousel-item { height: 320px; }
    }

    .section { padding: 50px 0;}
    .section:not(.highlights) {
      /* height: 60vh !important; */
    }
    .section:not(.highlights) img { width: 100%; height: 310px; object-fit: cover; border-radius: 8px; }
    @media (max-width: 768px) { .section:not(.highlights) img { height: 200px; } }

    .footer { 
        background: linear-gradient(90deg,  rgba(237, 245, 245, 0.8), rgba(234, 247, 247, 0.8));
        
        color: #000; 
        padding: 15px 0; 
        
        display: flex;
        align-items: center;
    }
    .footer a { 
      color: #000; 
      text-decoration: none; 
    }
    .footer a:hover { text-decoration: underline; }

    .footer .row {
    display: flex;
    /* align-items: center;    */
    /* căn giữa theo chiều dọc */
    text-align: left;    /* căn giữa chữ trong cột */
    }

    .footer .col-md-3,
    .footer .col-md-6 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* nội dung trong cột cũng giữa */
    }

    .list-unstyled li a {
      font-size: x-large;     /* tùy chỉnh, ví dụ 20px */
      font-weight: 470; 
      line-height: 1.7;    /* tuỳ chọn: đậm hơn một chút */
    }

    .col-md-3.mb-3 a {
      
      font-weight: 470; 
      line-height: 1.7; /* tuỳ chọn: đậm hơn */
    }

    

    /* ----------------------------- */
    /* Highlight carousel (scoped to #highlightCarousel) */
    /* We intentionally DO NOT style generic .carousel-item here to avoid conflicts */

    /* center items inside highlight column */
    #highlightCarousel { position: relative; }
    #highlightCarousel .carousel-inner { display: flex; align-items: center; }
    #highlightCarousel .carousel-item { display: flex; justify-content: center; padding: 0.5rem 0; }

    /* card look */
    #highlightCarousel .card {
      width: 100%;
      max-width: 520px; /* limit width so card looks good inside column */
      border: none;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(13,38,71,0.08);
      background: #fff;
    }

    #highlightCarousel .card-img-top{
      width: 100%;
      height: 240px;       /* hình chữ nhật */
      object-fit: cover;
      display: block;
    }

    #highlightCarousel .card-body{ min-height: 150px; display: flex; flex-direction: column; padding: 1rem; }
    #highlightCarousel .read-more{ margin-top: auto; align-self: flex-end; font-weight: 600; text-decoration: none; }

    /* custom prev/next (made very visible and independent from banner) */
    #highlightCarousel .carousel-control-prev,
    #highlightCarousel .carousel-control-next{
      width:44px; height:44px; position:absolute; top:50%; transform:translateY(-50%); background: rgba(0,0,0,0.65); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:6; text-decoration:none;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    }
    #highlightCarousel .carousel-control-prev{ left: -22px; }
    #highlightCarousel .carousel-control-next{ right: -22px; }

    /* use plain text arrows inside (keeps compatibility) */
    #highlightCarousel .carousel-control-prev span,
    #highlightCarousel .carousel-control-next span{ font-size: 20px; line-height:1; color:#fff; }

    /* indicators (small dots) - optional and scoped */
    #highlightCarousel .carousel-indicators{ bottom: -18px; }
    #highlightCarousel .carousel-indicators li{ background-color: rgba(0,0,0,0.35); }
    #highlightCarousel .carousel-indicators .active{ background-color: #007bff; }

    /* responsive tweaks for highlight controls */
    @media (max-width: 767px){
      #highlightCarousel .carousel-control-prev{ left: -10px; }
      #highlightCarousel .carousel-control-next{ right: -10px; }
      #highlightCarousel .card-img-top{ height: 160px; }
      #highlightCarousel .card{ max-width: 100%; }
    }

    .custom-section {
        position: relative;
        /* background: url("../img/banner/trongdong_enhanced.png") no-repeat center center; */
        background-size: auto;
        padding: 0 0; /* khoảng cách trên dưới */
        color: #fff;
        height: 60vh !important;
    }

    .custom-section .overlay {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;  
        /* dải màu đỏ 70% opacity */
        background-color: rgba(183, 28, 28, 0.85); 
        /* background: linear-gradient(90deg, rgba(139, 0, 0, 0.8), rgba(255, 179, 0, 0.8)); */
        /* background: linear-gradient(90deg, 
        rgba(139, 0, 0, 0.8) 0%,      
        rgba(255, 179, 0, 0.9) 50%,   
        rgba(139, 0, 0, 0.8) 100%    
        ); */
        padding: 50px 0;
    }

    .custom-section h3, 
    .custom-section p {
     color: #FFD700; /* chữ vàng */
    }
    .custom-section h2 {
        font-family: 'Be Vietnam Pro', sans-serif;
        font-size: 2rem;  /* chữ lớn hơn */
        line-height: 1.3;
        text-align: center; /* căn giữa cho đẹp khi responsive */
        color: #FFD700;     /* vàng */
    }

    @media (max-width: 768px) {
        .custom-section h2 {
            font-size: 1.8rem; /* nhỏ hơn chút cho mobile */
        }
    }
    .custom-section img {
      object-fit: scale-down !important;
    }

    .btn-custom {
    display: inline-block;
    padding: 10px 28px;
    font-weight: 600;
    font-size: 1rem;
    color: #003366;
    background: linear-gradient(90deg, #f7fcfc, #f0f4f5);
    border: none;
    border-radius: 30px;     /* bo tròn đẹp hơn */
    text-decoration: none;
    transition: all 0.3s ease;
    }
    .btn-custom:hover {
    background: linear-gradient(90deg, #00B0F0, #CCFFFF);
    color: #003366;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .vina-banner{
      position: relative;
      z-index: 9;
      padding-bottom: 2rem;
      background: linear-gradient(to bottom, #ecf7ff, #c8e6f8);
      height: calc(100vh - 72px);
      padding-top: 4px;
    }

    .vina-banner .owl-dots{
      position: absolute;
      bottom: 0;
      left: 50%;
      height: 2rem;
      transform: translate(-50%, 0%);
      z-index: 1;
    }

     .vina-banner .owl-dots .owl-dot{
      position: relative;
      width: 2rem;
      height: 2rem;
      background-color: transparent;
      margin: 0 .5rem;
      opacity: .5;
     }

     .vina-banner .owl-dots .owl-dot.active{
      opacity: 1;
     }

     .vina-banner .owl-dots .owl-dot:focus{
      outline: none;
     }

     .vina-banner .owl-dots .owl-dot::before{
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      width: 100%;
      height: .25rem;
      background-color: #FFF;
     }

     .vina-highlights{
      position: relative;
      z-index: 9;
      width: 100%;
     }

     .vina-highlights .owl-nav{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 100%;
      height: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      opacity: 0;
      transition: all .15s ease-in;
     }

     .vina-highlights:hover .owl-nav{
      opacity: 1;
     }

     .vina-highlights .owl-nav button{
      position: relative;
      z-index: 3;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 1) !important;
      box-shadow: 0px 0px 11px 3px rgba(0,0,0,0.1);
     }

     .vina-highlights .owl-nav button span{
      color: transparent;
      position: absolute;
      width: 70%;
      height: 70%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: url(../img/arr.png) no-repeat center;
      background-size: 100%;
     }

     .vina-highlights .owl-nav button.owl-next span{
        transform: translate(-50%, -50%) rotate(180deg);
        margin-left: 3px;
     }

      .vina-highlights .owl-nav button:focus{
        outline: none;
     }

     .vina-pin{
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
     }

    .vina-pin-head{
      box-sizing: content-box;
      width: 50%;
      height: 0;
      padding-left: 50%;
      padding-bottom: 25%;
      overflow: hidden;
      position: relative;
     }

     .vina-pin img {
      opacity: .5;
     }

     .vina-pin-head div{
      width: 0;
      height: 0;
      margin-left: -1000px;
      margin-bottom: -100px;
      border-left: 1000px solid transparent;
      border-right: 1000px solid transparent;
      border-bottom: 500px solid rgba(238, 243, 243, 0.1);
     }

     .vina-pin .icon-pin{
      z-index: 5;
      position: absolute;
      top: -10px;
      left: calc(50% + 20px);
      width: 40px;
      height: 40px;
      transform: translate(-50%, -50%);
     }

    .vina-pin-content{
      background:rgba(238, 243, 243, 0.1);
      padding: 0 1rem;
      position: relative;
      z-index: 3;
     }
    .vina-pin-bot{
      background:rgba(238, 243, 243, 0.1);
      position: relative;
      z-index: 2;
      width: 100%;
      height: 4rem;
      border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
     }


     @media only screen and (max-width: 992px) {
      .vina-banner{
        height: auto;
      }

      .vina-banner .owl-dots{
        height: 1.25rem;
      }

      .vina-banner .owl-dots .owl-dot{
        position: relative;
        width: 1.25rem;
        height: 1.25rem;
      }

      .vina-banner .owl-dots .owl-dot::before{
        height: 3px;
      }

      .footer {
        height: 100%;
      }
     }