/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
/**

/*************** ADD CUSTOM CSS HERE.   ***************/

/* 1. Ép thanh tab dàn hàng ngang và trượt trên Mobile */
/* vùng nội dung thu gọn */

.collapse-content{
position:relative;
max-height:400px; /* tăng chiều cao để thấy gần hết table */
overflow:hidden;
transition:max-height .4s ease;
}

/* gradient mờ */

.collapse-content::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:90px;
background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
pointer-events:none;
}

/* trạng thái mở */

.collapse-content.open{
max-height:7000px;
}

.collapse-content.open::after{
display:none;
}

/* container nút */

.collapse-btn-wrap{
text-align:center;
margin-top:14px;
}

/* nút */

.collapse-toggle{
display:inline-block;
padding:8px 26px;
background:#f3f4f6;
border-radius:8px;
cursor:pointer;
font-size:14px;
font-weight:600;
color:#333;
transition:.2s;
}

.collapse-toggle:hover{
background:#e5e7eb;
}

/* TABLE -> PRICE CARD UI */
.stack-scroll-x{
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
gap:20px;
padding-left:10px;
padding-bottom:10px;
scroll-snap-type:x mandatory;

/* scroll mượt mobile */
-webkit-overflow-scrolling:touch;

/* ẩn scrollbar Firefox */
scrollbar-width:none;
}

.stack-scroll-x::-webkit-scrollbar{
display:none; /* ẩn scrollbar Chrome/Safari */
}

.stack-scroll-x > *{
flex:0 0 auto;
scroll-snap-align:start;
}

.stack-scroll-x .icon-box{
min-width:160px;
}
.stack-scroll-x.dragging{
scroll-snap-type:none;
}

.table-style{
overflow-x:auto;
}

.table-style table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:12px;
min-width:600px;
box-shadow:0 2px 8px rgba(0,0,0,.05);
font-size:15px;
}

.table-style th{
background:#f6f7f9;
padding:14px 16px;
vertical-align:middle;
text-align:left;
font-weight:600;
text-transform:none;
line-height:1.4;
border-bottom:1px solid #e6e6e6;
}

.table-style th *{
margin:0;
}

.table-style td{
padding:14px 16px;
line-height:1.4;
border-bottom:1px solid #eee;
}

.table-style tbody tr:last-child td{
border-bottom:none;
}

.table-style tbody tr:hover{
background:#fafafa;
}

.table-style td:first-child{
color:#1e73be;
font-weight:600;
}

.table-style td:last-child{
font-weight:600;
text-align:right;
}


/* ===== FPT Tabs Premium (Safe Version) ===== */

.tabbed-content .nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 0;
  margin: 0;
  border: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tabbed-content .nav::-webkit-scrollbar {
  display: none;
}

/* Remove underline default */
.tabbed-content .nav > li > a::before,
.tabbed-content .nav > li > a::after {
  display: none;
}

/* Tab item */
.tabbed-content .nav > li {
  flex: 0 0 auto;
}

/* Base tab style */
.tabbed-content .nav > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 18px;
  background: #fff;
  color: #555;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-weight: 600;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: all 0.25s ease;
}

/* Hover */
.tabbed-content .nav > li > a:hover {
  color: #ff6200;
  border-color: #ffb37a;
}

/* ===== ACTIVE (CTA STYLE) ===== */
.tabbed-content .nav > li.active > a,
.tabbed-content .nav > li.current > a {
  background: linear-gradient(135deg, #ff7a00, #ff4d00);
  color: #fff;
  border: none;
  box-shadow: 0 6px 14px rgba(255, 98, 0, 0.25);
}

/* Hover active */
.tabbed-content .nav > li.active > a:hover {
  background: linear-gradient(135deg, #ff8c1a, #ff5a1a);
}

/* Click effect */
.tabbed-content .nav > li.active > a:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(255, 98, 0, 0.2);
}

/* Focus (accessibility) */
.tabbed-content .nav > li > a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 98, 0, 0.15);
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .tabbed-content .nav {
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
  }

  .tabbed-content .nav > li > a {
    min-height: 36px;
    padding: 6px 16px;
    font-size: 14px;
  }
}

/*************** ADD MOBILE ONLY CSS HERE  ***************/