* {
      box-sizing: border-box;
    }

    body {
      margin: 0px;
      font-family: Arial, sans-serif;
      background: #eee;
      padding: 0px;
      
    }

    .row {
       display: flex;
      padding-left:0px;
      padding-right:0px;
      flex-wrap: wrap;
      
    }

    .col {
      padding: 10px;
      flex: 0 0 50%; /* col-6 */
      max-width: 50%;
    }

    .box {
    position: relative;
      background: white;
      padding: 5px 5px;
      text-align: center;
      box-shadow: 4px 8px 10px rgba(0,0,0,0.4);
      border-radius: 8px;
      font-size: 16px;
      font-weight: bold;
      transition: transform 0.5s ease;
    }


.box:hover {
      transform: scale(1.1);
    }

    .box img {
      width: 100%;
      height: 30vh;
      min-height:150px;
      object-fit: cover;
      
    }

    .box h3 {
      margin: 10px;
      font-size: 16px;
      color: #333;
    }
    
    a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: underline;
  color: inherit;
}
    /* ≥576px ~ col-sm-6 */
    @media (min-width: 576px) {
      .col {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }

    /* ≥768px ~ col-md-4 */
    @media (min-width: 680px) {
      .col {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
      }
    }

    /* ≥992px ~ col-lg-3 */
    @media (min-width: 992px) {
      .col {
        flex: 0 0 25%;
        max-width: 25%;
      }
    }

    /* ≥1200px ~ col-xl-2 */
    @media (min-width: 1600px) {
      .col {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
      }
    }

    /* ≥2000px ~ col-xl-2 */
    @media (min-width: 2560px) {
      .col {
        flex: 0 0 12.5%;
        max-width: 12.5%;
      }
    }

    /* ≥2000px ~ col-xl-2 */
    @media (min-width: 3840px) {
      .col {
        flex: 0 0 10%;
        max-width: 10%;
      }
    }
    
    /* ========== NAVBAR ========== */
    .navbar {
      background: #222;
      color: white;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: top 0.3s ease-in-out; /* mượt khi ẩn/hiện */
  z-index: 999;
}

    .navbar .title {
      font-weight: bold;
      font-size: 18px;
    }

    .navbar select {
      padding: 6px;
      border-radius: 5px;
      font-size: 14px;
    }

    /* ========== GALLERY ========== */
    .gallery {
      column-count: 3;
      column-gap: 15px;
      padding: 20px;
    }

    .gallery-item {
      break-inside: avoid;
      margin-bottom: 15px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
      border: 2px solid #fc0;
    }

    .gallery-item:hover {
      transform: scale(1.02);
      box-shadow: 0 0 0 4px #c0f;
    }

    .gallery-item img {
      width: 100%;
      display: block;
      height: auto;
    }

    @media screen and (min-width: 1600px) {
      .gallery {
        column-count: 5;
      }
    }

    @media screen and (min-width: 1200px) and (max-width: 1599px) {
      .gallery {
        column-count: 4;
      }
    }

    @media screen and (max-width: 900px) {
      .gallery {
        column-count: 2;
      }
    }

    @media screen and (max-width: 600px) {
      .gallery {
        column-count: 1;
      }
    }

    /* ========== BOTTOM BAR ========== */
    .bottom-bar {
      display: flex;
      background: #333;
      color: white;
      padding: 15px 20px;
      font-size: 14px;
    text-align: center;
    display:flex;
    justify-content:center;
    }

    .bottom-bar > div {
      padding: 0 10px;
    }

    .bar-left {
      width: 25%;
    }

    .bar-center {
      width: 50%;
      text-align: center;
    }

    .bar-right {
      width: 25%;
      text-align: right;
    }

    @media screen and (max-width: 700px) {
      .bottom-bar {
        flex-direction: column;
        text-align: center;
      }
      .bar-left, .bar-center, .bar-right {
        width: 100%;
        margin: 5px 0;
      }
    }
    
        .description {
        padding:3px;
        opacity:0.5;
        color:#fff;
        box-sizing: border-box;
        position: relative;
        bottom: 82px;
        background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
        text-decoration: none;
        display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:300;
  text-align: justify;
    }
.description::after {
  content: "";
  display: inline-block;
  width: 100%;
}
@media screen and (min-width: 701px) {
      .description {
        font-size:13px;
      }
}
@media screen and (max-width: 700px) {
      .description {
        font-size:10px;
      }
}

    .number-photos {
        opacity:0.75;
        position: absolute;
        right: 5px;
        top: 5px;
        background: rgba(128, 128, 128, 0.4);
        color: #fff;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 4px;
    }
    .title-name {
        padding:5px 5px;
        color:#000;
        background: rgb(255, 255, 255, 0.75);
        margin-top: -82px;
        position: relative;  
        text-align: center;
        color: #000;
        width: 100%;
        font-weight: 300;
    }



[class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0px; 
}

/* ===== GRID SYSTEM (1 -> 12) ===== */
.col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9  { flex: 0 0 75%;      max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }

/* ===== BREAKPOINTS ===== */
/* ≥576px ~ sm */
@media (min-width: 576px) {
  .col-sm-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-sm-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-sm-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-sm-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-sm-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* ≥768px ~ md */
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-md-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* ≥992px ~ lg */
@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-lg-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* ≥1200px ~ xl */
@media (min-width: 1200px) {
  .col-xl-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-xl-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-xl-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-xl-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xl-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-xl-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-xl-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xl-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-xl-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-xl-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* ≥2000px ~ xxl */
@media (min-width: 2000px) {
  .col-xxl-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-xxl-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-xxl-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-xxl-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xxl-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-xxl-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-xxl-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xxl-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-xxl-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-xxl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xxl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-xxl-12 { flex: 0 0 100%;     max-width: 100%; }
}