/* ==========================================================================
   Base / Reset / Helpers
   ========================================================================== */

   *, *::before, *::after {
    box-sizing: border-box;
    /* -webkit-box-sizing: border-box; */ /* Removed prefix */
}

.block {
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Keep unless sure it's always nested */
}

.opacity {
    opacity: 0 !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

/* Common absolute positioning (full overlay) */
.thumb-res:before, .thumb-res > .absolute, .thumb-res img,
.absolute, .btt:after, .overlay-dark, .overlay-white,
.btn-bars:before, .btn-bars:after, .banner-lg:before,
.list-course .block:before, .list-course .block:after,
.list-news:not(.carousel-base) .thumb-res.wide:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.absolute {
    z-index: 10; /* Specific z-index for .absolute */
}

/* Common background image settings */
.overlay-dark, .overlay-white, .banner-lg,
.block-bg, .bg-cover, .thumb-res, .thumb-res > .absolute, .avatar {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ==========================================================================
   Thumbnail / Image Placeholder
   ========================================================================== */

.thumb-res {
    overflow: hidden;
    display: block;
    position: relative;
    margin-bottom: 13px; /* Default margin */
    /* Background properties handled in grouped selector above */
}

.thumb-res:before {
    content: '';
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.05); /* Subtle overlay */
    z-index: 100; /* Above image, below content usually */
    /* Position handled in grouped selector above */
}

.thumb-res img {
    /* Position handled in grouped selector above */
    max-height: 100%; /* Ensure image fits vertically */
    margin: auto; /* Center image if aspect ratio differs */
    width: auto; /* Allow natural width unless container forces constraint */
    max-width: 100%; /* Prevent overflow */
}

.thumb-res.wide {
    padding-bottom: 57%; /* Aspect ratio */
}

.thumb-res.wide-lg {
    padding-bottom: 70%; /* Different aspect ratio */
}

/* ==========================================================================
   Project List Specific Styles
   ========================================================================== */

.list-projects {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -18px; /* Base gutter simulation */
    /* display: -webkit-box; */ /* Removed prefixes */
    /* display: -ms-flexbox; */
    /* -ms-flex-wrap: wrap; */
}

.list-projects .item {
    display: block;
    width: 50%; /* Default: 2 columns */
    padding: 0 1px; /* Gutter adjustment */
    margin-bottom: 2px; /* Vertical spacing */
    overflow: hidden;
}

.list-projects .block {
    overflow: hidden; /* Ensure content clipping */
    height: 100%; /* Allow block to fill item height if needed */
}

.list-projects .thumb-res {
    margin: 0; /* Override default thumb margin */
    transition: transform 1s ease;
    transform: scale(1.2); /* Initial zoom effect */
    /* -webkit-transition: all 1s ease; */ /* Prefix removed */
    /* -webkit-transform: scale(1.2); */ /* Prefix removed */
}

.list-projects .overlay {
    position: absolute; /* Positioned within .thumb-res or .block */
    bottom: 0;
    left: 0;
    right: 0;
    top: auto; /* Ensure it stays at the bottom */
    padding: 10px; /* Base padding */
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
    /* background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.8))); */ /* Prefix removed */
    color: #fff;
    transition: all 0.4s ease;
    /* -webkit-transition: all 0.4s ease; */ /* Prefix removed */
    z-index: 10; /* Above image, below :before if needed */
}

/* Typography within project list */
.tt-xxl, .tt-xl, .tt-lg, .tt-md, .tt-sm, .tt-xs, .tt {
    font-weight: bold;
    margin: 0 0 10px;
    color: #232323; /* Default text color */
}

.tt-xs { /* General .tt-xs styles */
    font-size: 16px;
    line-height: 1.4;
}

.list-projects .tt-xs { /* Specific override for project list */
    color: #fff; /* Text on overlay */
    font-size: 12px; /* Base size in project list */
    margin-bottom: 0;
    /* Inherits font-weight: bold from .tt-xs */
    /* Transition applied on hover if needed */
}

.list-projects .fa {
    font-weight: 400; /* Assuming Font Awesome icons */
}

/* Hover effects */
.list-projects .item:hover .thumb-res {
    transform: none; /* Scale back to normal */
    /* -webkit-transform: none; */ /* Prefix removed */
}

.list-projects .item:hover .overlay {
    padding-bottom: 20px; /* Increase padding */
    /* border-radius: 0; <-- Not necessary unless a radius was set elsewhere */
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media screen and (min-width: 768px) {
    .list-projects {
        margin: 0 -1px; /* Adjusted gutter for medium screens */
    }
    .list-projects .item {
        width: 25%; /* 4 columns */
    }
}

@media screen and (min-width: 992px) {
    .list-projects .overlay {
        padding: 10px 15px; /* Adjusted padding for large screens */
    }
    .list-projects .tt-xs {
        font-size: 13px; /* Slightly larger text */
    }
}

@media screen and (min-width: 1200px) {
    .list-projects .tt-xs {
        font-size: 14px; /* Even larger text */
    }
}

/* ==========================================================================
   Animations (WOW.js related potentially)
   ========================================================================== */

.wow {
    visibility: hidden; /* Hide elements until animated */
}

.wow:nth-child(1) { /* Example delay override */
    animation-delay: .05s;
    /* -webkit-animation-delay: .05s; */ /* Prefix removed */
}

/* Keyframes - Keep prefixes if older browser support needed */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.6, 0.6, 0.6);
        /* -webkit-transform: scale3d(0.6, 0.6, 0.6); */
    }
    50% {
        opacity: 1;
    }
}
/* @-webkit-keyframes zoomIn { ... } */

.zoomIn {
    animation-name: zoomIn;
    /* -webkit-animation-name: zoomIn; */
}

@keyframes zoomOutIn {
    from {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2);
        /* -webkit-transform: scale3d(1.2, 1.2, 1.2); */
    }
    50% {
        opacity: 1;
    }
}
/* @-webkit-keyframes zoomOutIn { ... } */

.zoomOutIn {
    animation-name: zoomOutIn;
    /* -webkit-animation-name: zoomOutIn; */
}


/* ==========================================================================
   Other Components (Example)
   ========================================================================== */

.mainer { /* Styles for .mainer if needed */
    margin: auto;
    min-height: 380px;
    position: relative;
    padding-block: 0px !important; /* Consider if !important is truly needed */
}
/* ===========Tiêu đề album============== */

.title-wrapper {
    position: relative;
    text-align: center;
    margin: 40px 0;
  }
  
  .title-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    z-index: 0;
  }
  
  .title-text {
    position: relative;
    display: inline-block;
    background: white; /* Màu nền che đường kẻ */
    padding: 0 15px;
    font-size: 32px;
    font-weight: 600;
    z-index: 1;
    color: var(--primary-color);
  }
  @media (max-width: 765px) {
    .list-projects {
      padding: 0 1rem;
    }
  }