:root {
  --bb-footer-color: #f8f9fa;
  --bb-link-color: rgba(25,135,84,1);
  --christmas-red: #c41e3a;
  --christmas-green: #165b33;
  --christmas-gold: #ffd700;
  --christmas-white: #ffffff;
  --christmas-dark-red: #8b0000;
}

.blink {
  animation: smooth-blink-animation 1.5s ease-in-out infinite;
}
@keyframes smooth-blink-animation {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

h1,h2,h3,h4,h5,h6 {
  text-transform: uppercase;
}
h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

body, html {
  height: 100%; /* Full height to allow the footer to be pushed */
  margin: 0; /* Remove default margins */
}

body {
  padding-top: 56px; /* Adjust top padding to prevent content from hiding behind the navbar */
  display: flex; /* Make body a flex container */
  flex-direction: column; /* Arrange children in a column */
}

a {
  /* default color */
  color: var(--bb-link-color); 
}

.custom-container {
  max-width: 800px;
  flex: 1;
}

a.order-time {
  cursor: pointer;
}

img.zoom-in {
  object-fit: contain; 
  width: 100vw; 
  height: 100vh; 
}

.carousel-caption {
  bottom: 20px; /* Positioning the caption at the bottom */
  left: 20px;   /* Positioning the caption to the left */
  text-align: left; /* Align text to the left */
}
.text-sm {
  font-size: smaller;
}
.text-bold {
  font-weight: bold;
}
.title {
  width: 100%; /* Make it responsive */
  max-width: 400px; /* Optional: Set a maximum width for the title container */
  line-height: 1.5; /* Adjust line spacing */
  max-height: 3em; /* Limit height to two lines (line-height * 2 = 1.5 * 2 = 3em) */
  overflow: hidden; /* Hides the overflow text */
  display: -webkit-box; /* Required for the line clamp to work */
  -webkit-line-clamp: 2; /* Limit the title to 2 lines */
  -webkit-box-orient: vertical; /* Required for the line clamp to work */
  text-overflow: ellipsis; /* Adds "..." to truncated text */
}
.square-container {
  width: 100%; /* Responsive width: full width of parent container */
  max-width: 400px; /* Optional: limits the maximum size */
  aspect-ratio: 1/1; /* Ensures the container stays square */
  overflow: hidden; /* Hides parts of the image that overflow the container */
}

.square-container img {
  width: 100%; /* Ensures the image is responsive */
  height: 100%; /* Matches the height to the container */
  object-fit: cover; /* Makes the image cover the container without distortion */
}

.grid-item {
  /* background-size: cover; Cover the entire container */
  /* background-position: center; Center the background image */
  width: 100%; /* Full width */
  /* padding-top: 100%; Maintain square aspect ratio */
  border-radius: 15px; /* Rounded border */
  position: relative; /* For proper placement of absolute elements */
}

.link-title {
  text-align: left; /* Center the link text */
  margin-top: 10px; /* Space between image and title */
  display: block; /* Make the link take the full width */
  text-decoration: none;
}
.footer {
  margin-top: auto;
  background-color: var(--bb-footer-color); /* Light background color */
  padding: 40px 0; /* Padding for top and bottom */
}
.footer-mobile {
  margin-top: auto;
  background-color: var(--bb-footer-color); /* Light background color */
  padding: 20px 0; /* Padding for top and bottom */
  text-align: center; /* Center the content */
}
/* Full-screen loading overlay */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Background color of loading screen */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* High z-index to overlay on top of other content */
}
/* Style for the loading icon */
.loading-icon {
  font-size: 4rem; /* Adjust icon size */
  color: var(--bb-link-color); /* Icon color */
  animation: zoomInOut 2s ease-in-out infinite; /* Zoom animation */
}
/* Zoom in/out animation */
@keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/* Tag Cloud Container */
.tag-cloud {
  display: flex; /* Use flexbox for alignment */
  flex-wrap: wrap; /* Allow tags to wrap to the next line */
  gap: 15px; /* Space between tags */
  justify-content:flex-start; /* Center align tags */
}

/* Tag Styling */
.tag {
  display: inline-block; /* Display tags inline */
  padding: 8px 15px; /* Padding for better spacing */
  border-radius: 20px; /* Rounded corners */
  background-color: #f0f0f5; /* Soft background color */
  color: #555; /* Soft text color */
  font-weight: 500; /* Semi-bold font */
  transition: all 0.3s ease; /* Smooth transition */
  cursor: pointer; /* Pointer cursor for hover effect */
}

/* Hover Effect for Tags */
.tag:hover {
  background-color: #007bff; /* Change background on hover */
  color: #fff; /* Change text color on hover */
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2); /* Add subtle shadow */
  transform: translateY(-2px); /* Lift effect */
}

/* Custom styles for pagination */
.custom-pagination .page-link {
  color: var(--bb-link-color); /* Change text color */
  background-color: #f8f9fa; /* Change background color */
  border: 1px solid #ddd; /* Change border color */
}

.custom-pagination .page-link:hover {
  color: #fff; /* Hover text color */
  background-color: var(--bb-link-color); /* Hover background color */
  border-color: var(--bb-link-color); /* Hover border color */
}

.custom-pagination .page-item.active .page-link {
  color: #fff; /* Active text color */
  background-color: var(--bb-link-color); /* Active background color */
  border-color: var(--bb-link-color); /* Active border color */
}

.custom-pagination .page-item.disabled .page-link {
  color: #ddd; /* Disabled text color */
  background-color: #fff; /* Disabled background color */
}

.grecaptcha-badge { 
  visibility: hidden !important;
}

/* RAIN OF HEARTS */
.heart {
  color: red;
  font-size: 2rem; /* Size of the heart icon */
  position: absolute;
  animation: fall linear infinite; /* Falling animation */
}
/* Falling animation */
@keyframes fall {
  0% {
      transform: translateY(-100px); /* Start above the container */
      opacity: 1; /* Visible */
  }
  100% {
      transform: translateY(100vh); /* End at the bottom of the container */
      opacity: 0; /* Fade out */
  }
}
.modal-content.thanks-modal {
  position: relative; /* Position relative to contain falling hearts */
  overflow: hidden; /* Prevent overflow */
}

.latest-fb-posts img[src*='tiembanhdunglai'] {
  width: 100%;
}

.square-image {
  width: 100%;
  padding-top: 100%; /* Ratio 1:1 to make it square */
  position: relative;
  background-color: #f8f9fa;
}
.square-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.number-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 2rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow for better readability */
}

/* ======================== */
/*  GIÁNG SINH – HIỆU ỨNG  */
/* ======================== */

/* Bông tuyết rơi – dùng cho các phần tử .snowflake (tạo bằng JS) */
.snowflake {
  position: fixed;
  top: -10vh;
  color: #ffffff;
  opacity: 0.9;
  font-size: 14px;               /* Kích thước mặc định (desktop) */
  pointer-events: none;
  animation-name: snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.35); /* Cho bông tuyết rõ hơn trên nền tối */
  z-index: 998;
}

/* Hoạt ảnh rơi của tuyết (không ảnh hưởng tới .heart vì dùng keyframes khác) */
@keyframes snow-fall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  100% {
    transform: translate3d(0, 110vh, 0) rotate(360deg);
    opacity: 0;
  }
}

/* Trên mobile: bông tuyết to và rõ hơn */
@media (max-width: 575.98px) {
  .snowflake {
    font-size: 20px;               /* Tăng kích thước bông tuyết trên mobile */
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  }
}

/* Lớp tuyết đọng phía dưới cùng màn hình */
.snow-ground {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px; /* Bạn có thể chỉnh theo ý muốn */
  pointer-events: none;
  z-index: 997;

  /* Nếu chưa có ảnh, phần gradient này tạo cảm giác tuyết đọng đơn giản */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.9) 40%,
    rgba(255, 255, 255, 0) 100%
  );

  /* Khi có ảnh tuyết đọng, bỏ comment dòng dưới và cập nhật URL */
  /* background-image: url('/path/to/your/snow-ground.png'); */
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: contain;
}

/* Cây thông hai bên (Bootstrap Icon: bi-tree-fill)
   HTML gợi ý:
   <i class="bi bi-tree-fill christmas-tree christmas-tree-left"></i>
   <i class="bi bi-tree-fill christmas-tree christmas-tree-right"></i>
*/
.christmas-tree {
  position: fixed;
  bottom: 80px;             /* Đứng trên lớp tuyết đọng */
  font-size: 60px;          /* Cỡ cây thông trên desktop */
  color: #198754;           /* Màu xanh Bootstrap success */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  z-index: 999;
  pointer-events: none;     /* Không chặn click vào nội dung */
}

.christmas-tree-left {
  left: 10px;
}

.christmas-tree-right {
  right: 10px;
}

/* Chỉ hiển thị cây thông trên màn hình đủ lớn (desktop) */
@media (max-width: 991.98px) {
  .christmas-tree {
    display: none;
  }
}