/*
Theme Name: Chấn Kha Phú Quý
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 1.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
#top-bar {
  position: relative;
  z-index: 1 !important;
}

#top-bar .container {
  margin-bottom: 40px !important;
  align-items: end !important;
}

.single-post #header {
    display: none !important;
}

body.blog #main {
    padding-top: 60px !important; 
}

.nav-small.nav > li.html {
  font-size: 0.8em !important;
  padding: 5px 0 !important;
}


.nav-small .nav > li > a,
.nav.nav-small > li > a {
  padding: 0 !important;
  font-weight: 600 !important;
  font-size: 0.65rem !important;
}

body .a:where(:not(.wp-element-button)) {
  text-decoration: none !important;
}

.header-main {
  position: relative;
  z-index: 2 !important;
}

.header-main .header-inner {
  background-color: #fff;
  padding: 0 30px;
  border-radius: 10px;
  margin-top: -45px !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

#main {
  margin-top: -45px !important;
}

.border-1 img {
  border-width: 0.1rem;
  border-style: solid;
}

.border-2 img {
  border-width: 0.25rem;
  border-style: solid;
}

.border-3 .img-inner {
  border-width: 0.5rem;
  border-style: solid;
}

.border-white img {
  border-color: #fff;
}

.rounded-3,
.rounded-3 img {
  border-radius: 1rem;
}

.gradient-overlay.rounded-3 .overlay {
  border-radius: 0 0 1rem 1rem;
}

.box:not(.box-overlay).rounded-3 img {
  border-radius: 1rem 1rem 0 0;
}

.box.box-overlay.rounded-3 img {
  border-radius: 1rem;
}

.gradient-overlay .overlay {
  background: linear-gradient(
    to bottom,
    #fff0 0%,
    #fff0 50%,
    var(--wp--preset--color--black) 100%
  );
}

.news-section .shade {
  opacity: 1;
  background: linear-gradient(
    to bottom,
    #fff0 0%,
    #fff0 50%,
    var(--fs-color-primary) 100%
  );
}

.news-section .box-image .image-cover img {
  transition: all 0.5s;
}

.news-section .box:hover .image-cover img {
  object-position: 45% 50%;
}

.news-section .box:hover .shade {
  opacity: 1 !important;
}

.news-section .is-divider {
  display: none;
}

.news-section .post-meta {
  color: #fff !important;
}

.news-section .post-item:first-child img {
  border-radius: 1rem 0 0 1rem;
}

.news-section .post-item:first-child .shade {
  border-radius: 0 0 0 1rem;
}

.news-section .post-item:nth-child(3) img {
  border-radius: 0 1rem 0 0;
}

.news-section .post-item:last-child img {
  border-radius: 0 0 1rem 0;
}

.news-section .post-item:last-child .shade {
  border-radius: 0 0 1rem 0;
}

.testimonial-section .img .img-inner {
  border: 4px solid #fff;
  border-radius: 18px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.call-to-action img {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);
}

.gioi-thieu-1::before {
  content: "";
  position: absolute;
  top: 32px;
  left: -10px;
  width: 10%;
  height: 80%;
  margin-top: 10%;
  background-color: #008732;
  border-radius: 0 0 0 0;
}

.gioi-thieu-1 img {
  border-radius: 12px;
}

.tai-sao::before {
  content: "";
  position: absolute;
  bottom: 18%;
  left: 15%;
  width: 30%;
  height: 30%;
  background: linear-gradient(
    to bottom right,
    #fff 0%,
    var(--fs-color-primary) 100%
  );
  border-radius: 12px;
}

/* General CSS */
.subtitle {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.text-primary {
  color: var(--fs-color-primary) !important;
}

.text-white {
  color: #fff !important;
}

.text-outline-primary {
  color: white;
  text-shadow:
    -2px -2px 0 var(--fs-color-primary),
    2px -2px 0 var(--fs-color-primary),
    -2px 2px 0 var(--fs-color-primary),
    2px 2px 0 var(--fs-color-primary),
    -2px 0px 0 var(--fs-color-primary),
    2px 0px 0 var(--fs-color-primary),
    0px -2px 0 var(--fs-color-primary),
    0px 2px 0 var(--fs-color-primary);
}

.text-dark-primary {
  color: var(--fs-color-primary) !important;
  filter: brightness(0.65) contrast(1.5);
}

.uppercase {
  text-transform: uppercase !important;
  letter-spacing: 0em !important;
}

.lowercase {
  text-transform: lowercase !important;
}

.capitalize {
  text-transform: capitalize !important;
}

.bold {
  font-weight: 700 !important;
}

.italic {
  font-style: italic !important;
}

.medium {
  font-weight: 600 !important;
}

.regular {
  font-weight: 500 !important;
}

.light {
  font-weight: 400 !important;
}

.thin {
  font-weight: 300 !important;
}

.text-xs {
  font-size: 70% !important;
}

.text-sm {
  font-size: 85% !important;
}

.text-md {
  font-size: 100% !important;
}

.text-lg {
  font-size: 150% !important;
}

.text-xl {
  font-size: 250% !important;
}

.text-xxl {
  font-size: 400% !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-10 {
  opacity: 0.1 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* Footer */
.social-animation a {
  position: relative;
  padding: 5px 9px 2px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
  border-radius: 50%;
  background: #fff;

  &:hover {
    background: var(--fs-color-primary);
    color: #fff;
  }
}

.social-animation a:hover .icon-box-img svg,
.social-animation a:hover .icon-box-img path {
  fill: #fff !important;
}

.social-animation .icon-box .icon-box-img {
  margin: 0 !important;
}

.social-animation a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--fs-color-primary);
  animation: 1.5s linear 0s normal none infinite impulse;
}

/* nền bọc toàn khu vực menu + content */
.lich-tau-outer {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* 2 cột */
.lich-tau-wrap {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* sidebar giờ không cần nền trắng nữa, chỉ cần sticky + scroll */
.lich-tau-nav {
  flex: 0 0 320px;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow: auto;

  padding-right: 8px; /* nhẹ để không sát */
}

/* link */
.lich-tau-nav a {
  display: block;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 10px;
  font-weight: 600;
  color: var(--fs-color-primary);
  text-decoration: none;
}
.lich-tau-nav a:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* content */
.lich-tau-content {
  flex: 1;
  min-width: 0;
}
.lich-tau-item {
  scroll-margin-top: 110px;
  margin-bottom: 40px;
}

/* Css bảng giá vé */
/* --- KHUNG BAO NGOÀI --- */
.pricing-wrap {
    max-width: 100%;
    background: #fff;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* --- TAB ĐIỀU KHIỂN (ẨN) --- */
input[name="tab-ctrl"] { 
    display: none; 
}

.nav-tabs {
    display: flex;
    background: #fff;
    border-bottom: 3px solid var(--fs-color-primary);
}

.nav-tabs label {
    flex: 1;
    padding: 15px;
    text-align: center;
    background: #f1f1f1;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    border-right: 1px solid #ddd;
    text-transform: uppercase;
    font-size: 14px;
    transition: 0.3s;
}
.nav-tabs label:last-child { 
    border-right: none; 
}
.nav-tabs label:hover {
    background: #e9e9e9;
    color: #333;
}

/* --- TAB ACTIVE STATE --- */
#tab1:checked ~ .nav-tabs label[for="tab1"],
#tab2:checked ~ .nav-tabs label[for="tab2"] {
    background: var(--fs-color-primary);
    color: #fff;
}

/* --- HIỂN THỊ NỘI DUNG --- */
.tab-panel { 
    display: none; 
}

#tab1:checked ~ .content-ve,
#tab2:checked ~ .content-xe {
    display: block;
    animation: fadeIn 0.3s;
}

/* --- BẢNG MATRIX (3 CỘT) --- */
.ex-table {
    width: 100%;
    border-collapse: collapse;
}
.ex-table th, .ex-table td {
    border: 1px solid #ddd;
    padding: 12px 10px;
    vertical-align: middle;
}

/* Header Bảng */
.ex-table th {
    background: #e6f7ff;
    color: var(--fs-color-primary);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
}

.fs-primary {
    font-weight: 700;
    color: #333;
    font-size: 15px;
}
.secondary-primary {
    font-weight: 700;
    color: #333; /* Màu đen cho giá thường */
    text-align: right;
    font-size: 15px;
    white-space: nowrap;
}

/* Màu riêng cho cột Thương Gia để nổi bật */
.highlight-vip {
    color: #d32f2f; /* Màu đỏ cho giá VIP */
    font-weight: 800;
}
.note-text{
  color: red;
  font-size: 1.4em;
  font-weight: bold;
  font-style: italic;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



#footer .ux-menu a:hover {
  color: var(--fs-color-primary) !important;
}

#footer .ux-menu a::before {
  content: "•";
  margin-right: 10px;
}

@keyframes impulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  75% {
    transform: scale(1.2);
    opacity: 0.25;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Custom CSS Tablet */
@media (max-width: 849px) {
}

/* Custom CSS Mobile */
@media (max-width: 549px) {
  .news-section .post-item img {
    border-radius: 1rem !important;
  }

  .news-section .post-item .shade {
    border-radius: 1rem !important;
  }

  .text-xs {
    font-size: 50% !important;
  }

  .text-sm {
    font-size: 70% !important;
  }

  .text-md {
    font-size: 90% !important;
  }

  .text-lg {
    font-size: 100% !important;
  }

  .text-xl {
    font-size: 150% !important;
  }

  .text-xxl {
    font-size: 300% !important;
  }

  .header-main .header-inner {
    margin-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
  }

  .call-to-action img {
    clip-path: none !important;
  }

  .lich-tau-wrap {
    flex-direction: column;
  }

  .lich-tau-nav {
    position: relative;
    top: auto;

    max-height: none;
    overflow: visible; /* quan trọng: bỏ overflow auto */
    padding-right: 0;
  }

  /* Chia cột: Tên vé 60% - Giá 40% */
  .ex-table th:first-child,
  .ex-table td:first-child {
    width: 60%;
  }
  .ex-table th:last-child,
  .ex-table td:last-child {
    width: 40%;
  }

  .nav-tabs label {
    font-size: 12px;
    padding: 12px 5px;
  }
  .fs-primary,
  .secondary-primary {
    font-size: 14px;
  }
}