/*
Theme Name: Flatsome Child by MoodWedding Studio
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
/*************** ADD CUSTOM CSS HERE.   ***************/
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}
/* Section hero làm khung tham chiếu */
.mood-hero-slider {
  position: relative;
}
/* Chỉ bo tròn & chỉnh cho nút trong HERO */
.mood-hero-slider .button,
.mood-hero-slider .more-link {
  border-radius: 999px !important;
  padding: 5px 30px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  border-width: 1px !important; /* viền mỏng 1px */
}
/* TITLE HERO – FREIGHT BIG PRO */
.mood-hero-slider .post-title {
  font-size: 45px;                       /* nhỏ hơn 1 xíu cho gọn */
  letter-spacing: 0.05em;                /* bớt giãn chữ */
  text-transform: uppercase;
  line-height: 1.25;
  margin-bottom: 8px;
}
/* Mũi tên trong nút hero */
.mood-hero-slider .more-link::after,
.mood-hero-slider .button::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
  transform: translateY(1px);
}
/* SOCIAL ICONS: desktop – đáy hero, sát phải 1 chút */
.mood-hero-slider .hero-social {
  position: absolute !important;
  left: 300px;
  bottom: 40px;
  transform: none;
  z-index: 20;
}
/* Style box icon */
.mood-hero-slider .hero-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
}
/* MOBILE TUNING CHO HERO */
@media (max-width: 768px) {

  /* Hero thấp xuống một chút cho đỡ nặng */
  .mood-hero-slider .post-item {
    height: 60vh;
  }
  /* Chữ + nút không dính mép màn hình */
  .mood-hero-slider .box-text {
    padding: 0 20px;
  }
  /* Title nhỏ lại cho vừa màn */
  .mood-hero-slider .post-title {
    font-size: 22px;
    letter-spacing: 0.12em;
    line-height: 1.4;
    margin-bottom: 14px;
  }
  /* Nút XEM ALBUM gọn lại trên mobile */
  .mood-hero-slider .button,
  .mood-hero-slider .more-link {
    padding: 8px 24px !important;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  /* Social icon thu nhỏ & nhích lên một chút */
  .mood-hero-slider .hero-social {
    bottom: 20px;
  }
  .mood-hero-slider .hero-social a {
    width: 26px;
    height: 26px;
  }
  /* Chặn tràn ngang gây mảng xám--------------------------------------- */
  html, body {
    overflow-x: hidden;
  }
}
/* === STORY BLOCK – STYLE RÕ RÀNG THEO CLASS === */

/* Hashtag #MOOD STORIES */
.story-hash {
  margin: 0 0 6px;
}
.story-hash p {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #205c3a;       /* màu xanh thương hiệu, chỉnh nếu khác */
  opacity: 0.9;
}
/* Nút LIÊN HỆ ĐẶT LỊCH------------ */
.story-cta.button {
  margin-top: 6px;
  border-width: 1px !important; /* viền mỏng 1px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 7px 25px;
}
.story-cta.button:after {
    content: "\2192"; /* Mã ký tự mũi tên mảnh */
    font-family: sans-serif; /* Đảm bảo mũi tên hiển thị sắc nét */
    margin-left: 15px;
    font-size: 16px;
    font-weight: 300;
    transform: translateY(-1px); /* Tinh chỉnh vị trí mũi tên */
    transition: transform 0.3s ease;
}

/* Hiệu ứng khi di chuột vào nút: Mũi tên trượt sang phải */
.story-cta.button:hover:after {
    transform: translateX(5px);
}
/* Ẩn icon mặc định của Flatsome (nếu đang bật) để tránh bị trùng 2 mũi tên */
.story-cta.button i,
.story-cta.button .icon {
    display: none !important;
}
/* === STYLE CHO TEXT ELEMENT - MOOD STORY === */
/* Tác động trực tiếp vào thẻ H2 nằm trong class mood-story-title */
.mood-story-title h2, 
.mood-story-title h1 {
    font-family: "Playfair Display", "Baskerville", "Times New Roman", serif !important; /* Font có chân sang trọng */
    color: #2e5c46 !important; /* Màu xanh rêu thương hiệu */
    font-size: 32px !important; /* Kích thước chữ */
    line-height: 1.3;
    font-weight: 400; /* Độ đậm vừa phải */
    text-transform: uppercase;
    letter-spacing: 1px; /* Khoảng cách chữ thoáng hơn chút */
}