/* =========================================================
   ABOUT
   ========================================================= */
.about{
    display: flex;
    justify-content: space-between;
    gap: 70px;

}
.about-photo{
    overflow: hidden;
    max-height: 465px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.backgroud-about{
    background-image: url(http://shiclinic.reviewcode.info/wp-content/uploads/2026/09/back-1.png);
    background-position: center center;
    background-repeat: no-repeat;     
    background-size: cover;
}

.theme-h2{
    font-size: 30px;
    margin-block-start: 0px;
    margin-block-end: 0px;
}
.theme-subtitle{
    font-size: 23px;
}
blockquote {
    border-left: 2px solid var(--menu-theme);
    color: #333;
    font-size: 1.2em;
    font-style: italic;
    margin: 0 0 1.25em;
    padding: 0 1.25em 0 1.875em;
    position: relative;
}
.nut-xem-them{
    color: #fff;
    background: var(--menu-theme);
    padding: 8px 18px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 95px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(11, 185, 184, .24);
}

/* =========================================================
   reason
   ========================================================= */

.reason-list{
    justify-items: stretch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}
.reason-item{
    border-radius: 10px;
    box-shadow: 2px 2px 20px #00000012;
    overflow: hidden;
    background: #fff;
}
   
.title-home{
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding: 10px;
    color: #fff;
    font-size: 15px;
    background: linear-gradient(to right, #09b4bc, #09b4bc63);
    min-height: 51px;

}

.reason-content
 {   padding: 13px;
    line-height: 1.4;
    letter-spacing: 0px;
}

.reason-img {
  overflow: hidden;
  
}

.reason-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Chuyển động nhẹ nhàng, tự nhiên */
}

.reason-item:hover .reason-img img {
  transform: scale(1.08);
}
#reason .theme-h2, #service .theme-h2,.section-title{
    margin: 25px 0px;
}
#reason,.backgroud-blogs{
    background: #09b4bc0a;
}

.home-post{
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #FFF;
}
.home-post-img a{
  overflow: hidden;
    height: 224px;
    display: flex;
    align-items: center;
}
.home-post-img a img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Chuyển động nhẹ nhàng, tự nhiên */
}

.home-post:hover .home-post-img a img{
  transform: scale(1.08);
}

.home-post-itle{
    padding: 0px 14px;
    margin-block-start: 14px;
    margin-block-end: 14px;
}
.home-post-itle a:hover{
    color: #000;
}
.home-post-content{
    padding: 0px 14px 14px 14px;
}

/* 1. Thiết lập khung chứa ảnh */
.home-post-img {
  position: relative;
  overflow: hidden;
  display: block;
}

/* 2. Tạo vệt sáng bằng pseudo-element ::before */
.home-post-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.65s ease-in-out;
  z-index: 2;
  pointer-events: none;
}

/* 3. Đẩy vệt sáng chạy ngang qua khi hover vào .home-post */
.home-post:hover .home-post-img::before {
  left: 150%;
}
.experience-item{
    max-height: 495px;
    overflow: hidden; 
}

/* Container chung */
.agency-registration {
  background: linear-gradient(15deg, #09b4bc 0%, #004144 100%);
  padding: 45px 20px;
  color: #ffffff;
}

.agency-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Nội dung bên trái */
.agency-text {
  flex: 1;
}

.agency-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.agency-desc {
  font-size: 15px;
  margin: 0;
  opacity: 0.95;
  line-height: 1.5;
}

/* Form bên phải */
.agency-form {
  flex-shrink: 0;
  width: 100%;
  max-width: 480px;
}

.input-group {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.agency-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 16px;
  font-size: 15px;
  color: #333333;
  border-radius: 4px 0 0 4px;
  background: transparent;
}

.agency-input::placeholder {
  color: #999999;
}

.agency-btn {
  background-color: #1ec2b2;
  color: #ffffff;
  border: none;
  outline: none;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
}

.agency-btn:hover {
  background-color: #17a89a;
}

.agency-btn:active {
  transform: scale(0.98);
}
#product-home .title-home{
    text-transform: uppercase; 
    min-height: 20px;
}

/* 3. Đẩy vệt sáng chạy ngang qua khi hover vào .home-post */
.home-post:hover .home-post-img::before {
  left: 150%;
}
.experience-item{
    max-height: 495px;
    overflow: hidden; 
}

/* Container chung */
.agency-registration {
  background: linear-gradient(15deg, #09b4bc 0%, #004144 100%);
  padding: 45px 20px;
  color: #ffffff;
}

.agency-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Nội dung bên trái */
.agency-text {
  flex: 1;
}

.agency-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.agency-desc {
  font-size: 15px;
  margin: 0;
  opacity: 0.95;
  line-height: 1.5;
}

/* Form bên phải */
.agency-form {
  flex-shrink: 0;
  width: 100%;
  max-width: 480px;
}

.input-group {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.agency-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 16px;
  font-size: 15px;
  color: #333333;
  border-radius: 4px 0 0 4px;
  background: transparent;
}

.agency-input::placeholder {
  color: #999999;
}

.agency-btn {
  background-color: #1ec2b2;
  color: #ffffff;
  border: none;
  outline: none;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
}

.agency-btn:hover {
  background-color: #17a89a;
}

.agency-btn:active {
  transform: scale(0.98);
}
#product-home .title-home{
    text-transform: uppercase; 
    min-height: 20px;
}


/* =========================================================
   PREMIUM SCROLL REVEAL - HOME PAGE
   Không áp dụng cho .slider-area
   ========================================================= */

/* Khóa animation khi trình duyệt yêu cầu giảm chuyển động */
@media (prefers-reduced-motion: no-preference) {

    /* Trạng thái ban đầu */
    .scroll-reveal {
        opacity: 0;
        transform: translate3d(0, 55px, 0) scale(.98);
        filter: blur(8px);
        transition:
            opacity .85s cubic-bezier(.16, 1, .3, 1),
            transform .95s cubic-bezier(.16, 1, .3, 1),
            filter .85s cubic-bezier(.16, 1, .3, 1);
        will-change: opacity, transform, filter;
    }

    /* Khi xuất hiện */
    .scroll-reveal.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    /* Tiêu đề: mở từ dưới lên + blur */
    .scroll-title {
        opacity: 0;
        transform: translate3d(0, 35px, 0);

        transition:
            opacity .8s ease,
            transform .9s cubic-bezier(.16, 1, .3, 1),
            clip-path 1s cubic-bezier(.16, 1, .3, 1);
    }

    .scroll-title.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }
/* =========================================================
   SCROLL TITLE
   ========================================================= */

.scroll-title {
    opacity: 0;
    transform: translate3d(0, 45px, 0) scale(.96);
    filter: blur(6px);

    transition:
        opacity .75s ease,
        transform .9s cubic-bezier(.16, 1, .3, 1),
        filter .75s ease;

    will-change: opacity, transform, filter;
}

.scroll-title.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* Thanh trang trí dưới tiêu đề */
.scroll-title::after {
    content: "";
    display: block;

    width: 0;
    height: 2px;

    margin: 12px auto 0;

    background: var(--menu-theme);
    border-radius: 50px;

    transition:
        width .9s cubic-bezier(.16, 1, .3, 1) .25s;
}

.scroll-title.is-visible::after {
    width: 70px;
}
    /* Ảnh: zoom nhẹ + trượt */
    .scroll-image {
        opacity: 0;
        transform: scale(1.12) translate3d(0, 20px, 0);
        filter: saturate(.75) brightness(.92);
        transition:
            opacity 1s cubic-bezier(.16, 1, .3, 1),
            transform 1.2s cubic-bezier(.16, 1, .3, 1),
            filter 1.1s ease;
        will-change: opacity, transform, filter;
    }

    .scroll-image.is-visible {
        opacity: 1;
        transform: scale(1) translate3d(0, 0, 0);
        filter: saturate(1) brightness(1);
    }

    /* Nội dung từ trái */
    .scroll-left {
        opacity: 0;
        transform: translate3d(-65px, 0, 0);
        filter: blur(5px);
        transition:
            opacity .9s ease,
            transform 1s cubic-bezier(.16, 1, .3, 1),
            filter .9s ease;
    }

    .scroll-left.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    /* Nội dung từ phải */
    .scroll-right {
        opacity: 0;
        transform: translate3d(65px, 0, 0);
        filter: blur(5px);
        transition:
            opacity .9s ease,
            transform 1s cubic-bezier(.16, 1, .3, 1),
            filter .9s ease;
    }

    .scroll-right.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    /* Card: nổi lên + xoay cực nhẹ */
    .scroll-card {
        opacity: 0;
        transform: perspective(900px) translate3d(0, 65px, 0) rotateX(7deg) scale(.96);
        transform-origin: center bottom;
        filter: blur(4px);
        transition:
            opacity .8s cubic-bezier(.16, 1, .3, 1),
            transform 1s cubic-bezier(.16, 1, .3, 1),
            filter .8s ease,
            box-shadow .45s ease;
        will-change: opacity, transform;
    }

    .scroll-card.is-visible {
        opacity: 1;
        transform: perspective(900px) translate3d(0, 0, 0) rotateX(0) scale(1);
        filter: blur(0);
    }

    /* Hiệu ứng hover nhẹ sau khi card đã xuất hiện */
    .scroll-card.is-visible:hover {
        transform: translate3d(0, -8px, 0) scale(1.015);
        box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
    }

    /* Đường sáng chạy qua card lúc xuất hiện */
    .scroll-card {
        position: relative;
        isolation: isolate;
    }

    .scroll-card::after {
        content: "";
        position: absolute;
        top: -20%;
        left: -80%;
        width: 45%;
        height: 140%;
        background: linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.0) 25%,
            rgba(255,255,255,.55) 50%,
            rgba(255,255,255,.0) 75%,
            transparent 100%
        );
        transform: skewX(-18deg);
        pointer-events: none;
        z-index: 10;
        opacity: 0;
    }

    .scroll-card.is-visible::after {
        opacity: 1;
        left: 140%;
        transition: left 1.05s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
    }

    /* Form CTA */
    .scroll-cta {
        opacity: 0;
        transform: translate3d(0, 45px, 0) scale(.97);
        filter: blur(6px);
        transition:
            opacity .9s ease,
            transform 1s cubic-bezier(.16, 1, .3, 1),
            filter .9s ease;
    }

    .scroll-cta.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    /* Khi cả nhóm xuất hiện, từng item tự delay */
    .scroll-stagger > * {
        --reveal-delay: 0ms;
        transition-delay: var(--reveal-delay);
    }

    /* Thanh nhấn dưới tiêu đề */
    .scroll-title::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        margin: 12px auto 0;
        background: var(--menu-theme);
        border-radius: 99px;
        transition: width 1s cubic-bezier(.16, 1, .3, 1) .25s;
    }

    .scroll-title.is-visible::after {
        width: 70px;
    }

    /* Trải nghiệm: ảnh/iframe có chiều sâu */
    .experience-item.scroll-card {
        overflow: hidden;
        border-radius: 10px;
    }

    /* Không gây animation lên iframe */
    .experience-item iframe {
        transform: translateZ(0);
    }
}

/* Người dùng chọn Reduce Motion: vẫn hiện nội dung, không chuyển động */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-title,
    .scroll-image,
    .scroll-left,
    .scroll-right,
    .scroll-card,
    .scroll-cta {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}

.theme-h2{
    text-align: center !important;
}

.about-content .theme-h2{
    text-align: justify !important;
}

/* responsive */
@media(max-width: 1040px) {
    .about {
        gap: 30px;
    }
    .experience-item{
        max-height: 392px !important;
    }
    .home-post{
        min-height: 472px;
    }
}
@media(max-width: 884px) {
    .experience-item {
        max-height: 300px !important;
    }
    .agency-form{ 
        max-width: 356px;
    }

    .reason-list{
        grid-template-columns: repeat(2, 1fr); 
    }

}

@media (max-width: 440px) {

    .about{
        flex-direction: column-reverse;
    }
    .reason-list, .service-list, .experience-list{
        grid-template-columns: repeat(1, 1fr);
    }
    .agency-container{
        flex-direction: column; 
    }
    .agency-form{
        max-width: 100%;
    }
    #experience{
        margin: 50px 0px;
    }
}