/* Custom styles to apply the Inter font */
body {
    font-family: 'Inter', sans-serif;
    background-color: #fdfdfd;
    color: #1a1a1a;
}

/* Custom class for subtle text */
.text-muted {
    color: #666666;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* === UPDATED HEADER STYLES FOR TRANSPARENCY EFFECT === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 6rem; /* 96px */
    
    /* Initial state: Transparent */
    background-color: transparent;
    border-bottom: 1px solid transparent;

    /* Smooth transition for background and border */
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Scrolled state: White background, border */
.site-header--scrolled {
    background-color: white;
    border-bottom: 1px solid #e5e7eb; /* Tailwind's gray-200 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Target text and icons inside the header for color change */
.site-header .header-text-icon {
    color: white;
    transition: color 0.3s ease-in-out;
}
.site-header--scrolled .header-text-icon {
    color: #4b5563; /* Tailwind's gray-600 */
}

/* Target SVG strokes for color change */
.site-header .header-text-icon svg {
    stroke: white;
    transition: stroke 0.3s ease-in-out;
}
.site-header--scrolled .header-text-icon svg {
    stroke: #4b5563;
}


/* Add top margin for anchor links to not be hidden by the fixed header */
section[id] {
    scroll-margin-top: 6rem; /* Must match header height */
}

/* Animation for fade-in effect */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

/* Lazy load animation */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Lớp phủ cho Hero Banner để tăng độ tương phản cho văn bản */
.hero-banner {
    position: relative;
    z-index: 1;
    height: 100vh;
    /* Các thuộc tính background đã được xử lý inline, nhưng để đây để đảm bảo */
    background-size: cover;
    background-position: center;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    /* Gradient từ trong suốt ở trên xuống hơi đen ở dưới để làm nổi bật chữ */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
}

/* === NÚT ZALO NỔI (FLOATING ZALO BUTTON) - ĐÃ CHỈNH SỬA === */

/* Định nghĩa hiệu ứng lắc lư mạnh hơn */
@keyframes shake-animation-strong {
   0%   { transform: rotate(0deg); }
   10%  { transform: rotate(-25deg); }
   20%  { transform: rotate(25deg); }
   30%  { transform: rotate(-15deg); }
   40%  { transform: rotate(15deg); }
   50%  { transform: rotate(0deg); }
   100% { transform: rotate(0deg); }
}
/* === ZALO WIDGET STYLES (RESTRUCTURED) === */

/* New container for positioning, it does NOT animate */
.zalo-container {
   position: fixed;
   bottom: 20px;
   left: 20px;
   z-index: 1000;
   /* Set dimensions to help position the tooltip */
   width: 50px;
   height: 50px;
}

/* The widget itself, which now sits inside the container and animates */
.zalo-chat-widget {
   /* This element now only handles the appearance and animation of the icon */
   position: relative; /* Important for positioning the <img> inside */
   display: block;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #0068ff;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
   animation: shake-animation-strong 1.5s infinite;
   animation-delay: 2s;
   transition: transform 0.2s ease-in-out;
}

.zalo-chat-widget:hover {
   transform: scale(1.25);
   animation-play-state: paused;
}

.zalo-chat-widget img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 25px;
   height: auto;
}

/* === ZALO WIDGET TOOLTIP STYLES (NOW POSITIONS RELATIVE TO .zalo-container) === */

.zalo-tooltip {
    position: absolute;
    left: 65px; 
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    background-color: white;
    color: #333;
    padding: 12px 35px 12px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    
    /* THAY ĐỔI: Đặt chiều rộng cố định để bằng với hotline */
    width: 260px; 
    box-sizing: border-box; /* Đảm bảo padding không làm thay đổi kích thước */

    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}


.zalo-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}

.zalo-tooltip.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.zalo-tooltip-close {
    position: absolute;
    top: 4px;
    right: 7px;
    background: none;
    border: none;
    font-size: 22px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}

.zalo-tooltip-close:hover {
    color: #333;
}


/* === HOTLINE WIDGET STYLES === */


/* Container định vị cho nút Hotline */
.hotline-container {
   position: fixed;
   /* SỬA LỖI: Giảm giá trị bottom từ 85px xuống 80px để nút cân đối hơn */
   bottom: 80px; 
   left: 20px;
   z-index: 999;
   width: 50px;
   height: 50px;
}

/* Icon Hotline, đồng bộ hiệu ứng với Zalo */
.hotline-widget {
   position: relative;
   display: block;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #25D366; 
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
   animation: shake-animation-strong 1.5s infinite;
   animation-delay: 2s; /* Đồng bộ thời gian với Zalo */
   transition: transform 0.2s ease-in-out;
}

.hotline-widget:hover {
   transform: scale(1.25);
   animation-play-state: paused;
}

/* Căn chỉnh icon SVG bên trong nút tròn */
.hotline-widget svg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 24px;
   height: 24px;
   stroke: white; /* Màu của icon */
}

/* Tooltip cho Hotline */
.hotline-tooltip {
    position: absolute;
    left: 65px; 
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    background-color: white;
    color: #333;
    padding: 12px 35px 12px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    /* THAY ĐỔI: Đặt chiều rộng cố định để bằng với Zalo */
    width: 260px;
    box-sizing: border-box; /* Đảm bảo padding không làm thay đổi kích thước */

    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.hotline-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}

/* Lớp 'show' để hiện tooltip */
.hotline-tooltip.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

/* Nút đóng tooltip */
.hotline-tooltip-close {
    position: absolute;
    top: 4px;
    right: 7px;
    background: none;
    border: none;
    font-size: 22px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}

.hotline-tooltip-close:hover {
    color: #333;
}