.hero-section-wrap {
   padding: 64px 0;
 }

 .hero-section {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 60px;
 }

 .hero-left {
   /* FONT-WEIGHT: 500; */
   flex: 0 0 50%;
   /* max-width: 420px; */
 }

 .hero-left h2 {
   color: var(--color-primary);
   font-size: clamp(26px, 4vw, 30px);
   font-weight: 900;
   line-height: 1.3;
   margin-bottom: 20px;
 }

 .hero-left p {
   font-size: 14px;
   margin-bottom: 16px;
   color: #475569;
 }

 .hero-label {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   font-weight: 600;
   color: #e8914a;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-bottom: 18px;
 }

 .hero-label::before {
   content: '';
   display: block;
   width: 28px;
   height: 2px;
   background: #e8914a;
   border-radius: 2px;
 }

 .hero-title {
   font-size: 34px;
   font-weight: 800;
   color: #1a2a4a;
   line-height: 1.25;
   margin-bottom: 24px;
 }

 .hero-desc {
   font-size: 15px;
   color: #4a5a72;
   line-height: 1.75;
   margin-bottom: 14px;
 }

 .hero-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-top: 10px;
   background: var(--color-5);
   color: #fff !important;
   font-size: 14px;
   font-weight: 700;
   padding: 10px 20px;
   border-radius: 6px;
   text-decoration: none;
   transition: background 0.2s;
   cursor: pointer;
   border: none;
 }

 .hero-btn:hover {
   background: var(--color-primary);
 }

 .hero-btn svg {
   width: 18px;
   height: 18px;
   opacity: 0.9;
 }

 /* Right: single image */
 .hero-right {
   flex: 1;
   min-height: 420px;
 }

 .hero-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 16px;
   height: 100%;
 }

 .has-margin-top {
   margin-top: 24px;
 }

 .have-margin-top {
   margin-top: -24px;
 }

 .grid-item {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   height: 176px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
   transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .grid-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.6s ease;
 }

 .grid-item:hover img {
   transform: scale(1.08);
 }

 /* Responsive cho hero-grid */
 @media (max-width: 600px) {
   .hero-grid {
     gap: 10px;
   }

   .grid-item {
     border-radius: 12px;
   }
 }

 /* ========== SECTION 2: CORE VALUES ========== */
 .values-section {
   background: #f8fafc;
   padding: 56px 0;
   text-align: center;
 }

 .section-title {
   color: var(--color-primary);
   font-size: clamp(26px, 4vw, 30px);
   font-weight: 900;
   line-height: 1.3;
   margin-bottom: 40px;
 }

 .values-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
 }

 .value-card {
   background: #fff;
   border-radius: 14px;
   padding: 24px 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
   transition: box-shadow 0.2s, transform 0.2s;
 }

 .value-card:hover {
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
   transform: translateY(-3px);
 }

 .value-icon {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .value-icon svg {
   width: 28px;
   height: 28px;
   color: #fff;
 }

 .icon-1 {
   background: #22c55e;
 }

 .icon-2 {
   background: var(--color-5);
 }

 .icon-3 {
   background: #22c55e;
 }

 .icon-4 {
   background: var(--color-primary);
 }

 .value-label {
   font-size: 18px;
   font-weight: 600;
   text-align: center;
 }

 /* ========== SECTION 3: TIMELINE ========== */
 .timeline-section {
   background: #fff;
   padding: 56px 0px;
   text-align: center;
 }

 .timeline-wrapper {
   position: relative;
   max-width: 910px;
   margin: 0 auto;
 }

 /* Vertical center line */
 .timeline-line {
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 2px;
   background: #d0d8e8;
   transform: translateX(-50%);
 }

 .timeline-items {
   display: flex;
   flex-direction: column;
   gap: 0;
   gap: 30px;
 }

 .timeline-item {
   display: flex;
   align-items: center;
   min-height: 110px;
   position: relative;
 }

 /* Dot on center line */
 .timeline-dot {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--color-primary);
   z-index: 2;
   border: 4px solid #FFF;
   box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
 }

 .timeline-card {
   background: #fff;
   border: 1px solid #e0e8f0;
   border-radius: 10px;
   padding: 16px;
   width: max-content;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .timeline-year {
   font-size: 24px;
   font-weight: 800;
   color: var(--color-5);
   margin-bottom: 6px;
 }

 .timeline-desc {
   font-size: 16px;
   color: #4a5a72;
   line-height: 1.55;
 }

 .timeline-item.left {
   justify-content: end;
 }

 /* Left side items */
 .timeline-item.left .timeline-card {
   margin-right: calc(50% + 20px);
   margin-left: 0;
   text-align: right;
 }

 /* Right side items */
 .timeline-item.right .timeline-card {
   margin-left: calc(50% + 20px);
   margin-right: 0;
   text-align: left;
 }


 .cta-section {
   background-color: var(--color-primary);
   /* subtle dot pattern overlay */
   padding: 56px 0;
   text-align: center;
 }

 .cta-title {
   font-size: clamp(23px, 4vw, 30px);
   font-weight: 800;
   color: #ffffff;
   line-height: 1.3;
   margin-bottom: 16px;
   max-width: 560px;
   margin-left: auto;
   margin-right: auto;
 }

 .cta-buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   flex-wrap: wrap;
 }

 .btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: var(--color-5);
   color: #fff !important;
   font-size: 14px;
   font-weight: 700;
   padding: 12px 24px;
   border-radius: 6px;
   border: none;
   cursor: pointer;
   text-decoration: none;
   transition: background 0.2s;
 }

 .btn-primary:hover {
   background: #897337;
 }

 .btn-primary svg {
   width: 17px;
   height: 17px;
   flex-shrink: 0;
 }

 .btn-secondary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #ffffff1a;
   color: #fff !important;
   font-size: 14px;
   font-weight: 600;
   padding: 12px 26px;
   border-radius: 6px;
   border: 1px solid #ffffff4d;
   cursor: pointer;
   text-decoration: none;
   transition: border-color 0.2s, background 0.2s;
 }

 .btn-secondary:hover {
   background: #fff3;
 }

 .value-icon .icon {
   width: 25px;
   height: 25px;
   filter: invert(1);
 }

 /* Responsive */
 @media (max-width: 992px) {
   .hero-section {
     grid-template-columns: 1fr;
     gap: 35px;
   }

   .hero-left {
     max-width: 100%;
     flex: unset;
   }

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

   .timeline-section {
     padding: 50px 0px;
   }
 }

 @media (max-width: 575px) {
   .values-grid {
     grid-template-columns: 1fr 1fr;
   }

   .hero-title {
     font-size: 26px;
   }

   .hero-section-wrap {
     padding: 35px 0 15px;
   }

   .values-section {
     padding: 40px 0;
   }

   .cta-section {
     padding: 40px 0;
   }

   .timeline-items {
     gap: 15px;
   }
 }

 @media (max-width: 380px) {
   .value-card {
     padding: 24px 20px;
   }

   .timeline-card {
     padding: 10px;
   }
 }