/**
Theme Name: gpc-child-theme
Author: GPC
Text Domain: gpc-child-theme
Template: kadence
*/

:root {
    --sp-primary: #2d7a3e;
    --sp-secondary: #5cb85c;
    --sp-accent: #f39c12;
    --sp-dark: #1d2023;
    --sp-gray: #6c757d;
    --sp-light-bg: #f8f9fa;
    --sp-white: #ffffff;
    --sp-border-radius: 12px;
    --sp-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --sp-box-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    --sp-transition: all 0.3s ease;
    --sp-spacing-sm: 1rem;
    --sp-spacing-md: 2rem;
    --sp-spacing-lg: 3rem;
    --sp-spacing-xl: 5rem;
}

/*=============================================
=            Header            =
=============================================*/
/*#region */

.site-main-header-wrap {
    box-shadow: 0px 4px 5px rgba(39, 70, 248, 0.15);
}

/* Menu */
#primary-menu .kadence-menu-mega-enabled > .sub-menu {
    min-width: max-content;
    padding: 30px;
    border-radius: 4px;
}

#primary-menu .kadence-menu-mega-enabled > .sub-menu .menu-item > a {
    padding: 0;
    font-weight: normal;
}

#primary-menu .kadence-menu-mega-enabled > .sub-menu > .menu-item > a {
    position: relative;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
}

#primary-menu .kadence-menu-mega-enabled > .sub-menu > .menu-item > a:after {
    position: absolute;
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    bottom: 0;
    left: 0;
    background: #1d2023;
}

#primary-menu .kadence-menu-mega-enabled > .sub-menu .sub-menu > .menu-item + .menu-item {
    margin-top: .5rem;
}

/*#endregion*/

/*=============================================
=            Footer            =
=============================================*/
/*#region */

.wp-classic-menu-block>.menu li {
    display: block;
}

#footer h4.wp-block-heading {
    font-size: 16px;
    margin-bottom: 8px;
}

#footer .menu-item a {
    color: var(--color-text);
    font-size: 15px;
}

/*#endregion*/

/*=============================================
=            Homepage            =
=============================================*/

/*---------- Section title ---------- */
.wp-block-kadence-advancedheading.is-style-section-title,
.wp-block-kadence-advancedheading.is-style-section-title-border-left {
    font-size: 48px;
    font-weight: 700;
    color: var(--global-palette4);
    position: relative;
    line-height: 1.1;
}

.wp-block-kadence-advancedheading.is-style-section-title-border-left::after {
    left: 0;
    transform: translateX(0);
}

/*=============================================
=            Blog            =
=============================================*/
.grid-cols.post-archive {
    column-gap: 1.5rem;
    row-gap: 1.5rem;
}

.loop-entry.type-post .entry-taxonomies,
.loop-entry.type-post .entry-taxonomies a {
    font-weight: normal;
    color: #475569;
    font-size: 12px;
}

/*=============================================
=            Single post            =
=============================================*/
.entry-related-inner-content.alignwide {
    padding: 3rem 1rem;
}
.entry-related-carousel h3.entry-title {
    font-size: 18px;
}
.entry-related-carousel .loop-entry .entry-content-wrap {
    padding: 10px 0;
}


/*=============================================
=            Widget            =
=============================================*/
/*#region */

.has-sidebar .content-container {
    grid-gap: 2rem;
}

.primary-sidebar .widget {
    background: #f5f9ff;
    padding: 1.5rem;
    border-radius: 4px;
}

.primary-sidebar .widget-title {
    margin-bottom: 40px;
    font-size: 24px;
    position: relative;
}

.primary-sidebar .widget-title:before {
    position: absolute;
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    bottom: -16px;
    border-radius: 2px;
    background: #00AD50
}

.primary-sidebar.widget-area ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*---------- Popular posts ---------- */
.wpp-list li {
    line-height: 1.5;
}

/*---------- categories ---------- */
.wp-block-categories-list li:before {
    content: "\203A";
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
}

/*---------- images ---------- */
.primary-sidebar .widget.widget_media_image {
    padding: 0;
}
/*#endregion*/

/*=============================================
=            home            =
=============================================*/
.flip-card{
	width: 100%;
	height: 280px;
	perspective: 1000px;
	position: relative;
}
.flip-card .kt-inside-inner-col{
	position: relative;
  	width: 100%;
  	height: 100%;
  	position: relative;
  	transition: transform 0.8s ease;
  	transform-style: preserve-3d;
	transform-origin: center;
}
.flip-card:hover .kt-inside-inner-col {
  transform: rotateY(180deg);

}
.flip-card .wp-block-kadence-image, .flip-card .wp-block-kadence-infobox {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card .wp-block-kadence-infobox {
   transform: rotateY(180deg);
}
.flip-card .wp-block-kadence-image img{
	height: 280px;
	object-fit: cover;
}


/*=============================================
=            Single post            =
=============================================*/
.entry-related-inner-content.alignwide {
    padding: 3rem 1rem;
}
.entry-related-carousel h3.entry-title {
    font-size: 18px;
}
.entry-related-carousel .loop-entry .entry-content-wrap {
    padding: 10px 0;
}
.archive .loop-entry .entry-content-wrap{
    padding: 10px 5px !important;
}
.sidebar-inner-wrap .widget_block{
    background-color: #fff;
}

/*=====  End of home  ======*/

/* ========================================
   HERO SECTION - Banner đẹp với background
   ======================================== */
.sp-hero {
    position: relative;
    color: var(--sp-white);
    padding: 100px 20px;
    text-align: center;
    overflow: hidden;
    margin-bottom: 0;
}

.sp-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M50 10 L60 30 L80 30 L65 42 L70 62 L50 50 L30 62 L35 42 L20 30 L40 30 Z" fill="rgba(255,255,255,0.05)"/></svg>');
    opacity: 0.3;
    z-index: 0;
}

.sp-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.sp-hero h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    text-shadow: 2px 3px 1px rgb(255 255 255);
}

.sp-hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 35px;
    line-height: 1.6;
    opacity: 0.95;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Hero color variants */
.sp-hero.sp-hero-green {
    background: linear-gradient(135deg, rgba(45, 122, 62, 0.92), rgba(92, 184, 92, 0.92))
}

.sp-hero.sp-hero-blue {
    background: linear-gradient(135deg, rgba(39, 70, 248, 0.92), rgba(59, 130, 246, 0.92));
}

.sp-hero.sp-hero-orange {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.92), rgba(230, 126, 34, 0.92));
}

/* ========================================
   BUTTONS - CTA hài hòa với theme
   ======================================== */
.sp-btn-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.sp-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sp-btn-primary {
    background: var(--sp-white);
    color: var(--sp-primary);
    border-color: var(--sp-white);
}

.sp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: var(--sp-primary);
    text-decoration: none;
    background: rgba(255,255,255,0.95);
}

.sp-btn-secondary {
    background: rgba(45, 122, 62, 0.2);
    color: var(--sp-white);
    border-color: var(--sp-white);
    backdrop-filter: blur(10px);
}

.sp-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: rgba(45, 122, 62, 0.3);
    color: var(--sp-white);
    text-decoration: none;
}

.sp-btn-success {
    background: rgba(37, 211, 102, 0.9);
    color: white;
    border-color: rgba(37, 211, 102, 0.9);
}

.sp-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    background: rgba(37, 211, 102, 1);
    color: white;
    text-decoration: none;
}

.sp-btn-outline {
    background: transparent;
    color: var(--sp-white);
    border: 2px solid var(--sp-white);
}

.sp-btn-outline:hover {
    background: var(--sp-white);
    color: var(--sp-primary);
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255,255,255,0.3);
}

/* Button với icon - căn chỉnh vertical */
.sp-btn i,
.sp-btn .icon {
    margin-right: 6px;
    vertical-align: middle;
}

/* ========================================
   CARDS - Thẻ đẹp với hiệu ứng
   ======================================== */
.sp-card {
    background: var(--sp-white);
    padding: 30px;
    border-radius: var(--sp-border-radius);
    box-shadow: var(--sp-box-shadow);
    transition: var(--sp-transition);
    height: 100%;
}

.sp-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sp-box-shadow-hover);
}

.sp-card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.sp-card h3 {
    font-size: 1.5rem;
    color: var(--sp-dark);
    margin-bottom: 15px;
    font-weight: 700;
}

.sp-card p {
    color: var(--sp-gray);
    line-height: 1.7;
}

.sp-card ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
}

.sp-card li {
    padding-left: 30px; /* Đã khớp với bản mobile fix */
    position: relative;
    list-style: none;
    margin-bottom: 8px;
}

.sp-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0px; /* Căn chỉnh lại cho ngang hàng với dòng đầu tiên của text */
    color: var(--sp-secondary, #5cb85c); /* Sử dụng biến màu hoặc màu xanh lá */
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.5; /* Khớp với line-height của text */
}

/* Card variants */
.sp-card-warning {
    border-left: 4px solid var(--sp-accent);
}

.sp-card-success {
    border-top: 4px solid var(--sp-secondary);
}

.sp-card-primary {
    border-left: 4px solid var(--sp-primary);
}

/* Featured card */
.sp-card-featured {
    border: 2px solid var(--sp-secondary);
    position: relative;
}

.sp-card-featured::before {
    content: '⭐ PHỔ BIẾN';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sp-secondary);
    color: var(--sp-white);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ========================================
   GRID SYSTEM - Layout responsive
   ======================================== */
.sp-grid {
    display: grid;
    gap: var(--sp-spacing-md);
}

.sp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.sp-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sp-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ========================================
   SECTION - Khoảng cách và background
   ======================================== */
.sp-section {
    padding: var(--sp-spacing-xl) 0;
}

.sp-section-alt {
    background: var(--sp-light-bg);
}

.sp-section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sp-dark);
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 20px;
}

.sp-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--sp-primary), var(--sp-secondary));
    border-radius: 2px;
}

.sp-section-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    color: var(--sp-gray);
    line-height: 1.7;
}

/* ========================================
   IMAGES - Ảnh tròn, vuông với hiệu ứng
   ======================================== */
.sp-img-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.sp-img-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-img-rounded {
    border-radius: var(--sp-border-radius);
    overflow: hidden;
    box-shadow: var(--sp-box-shadow);
}

.sp-img-featured {
    width: 100%;
    max-width: 1000px;
    height: 400px;
    margin: 30px auto;
    display: block;
    box-shadow: var(--box-shadow);
    object-fit: cover;
}

/* ========================================
   COMPARISON - Before/After
   ======================================== */
.sp-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-spacing-md);
    margin: var(--sp-spacing-md) 0;
}

.sp-comparison-item {
    background: var(--sp-white);
    border-radius: var(--sp-border-radius);
    overflow: hidden;
    box-shadow: var(--sp-box-shadow);
    transition: var(--sp-transition);
}

.sp-comparison-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--sp-box-shadow-hover);
}

.sp-comparison-label {
    padding: 15px;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
}

.sp-comparison-label.before {
    background: #e74c3c;
    color: var(--sp-white);
}

.sp-comparison-label.after {
    background: var(--sp-secondary);
    color: var(--sp-white);
}

.sp-comparison-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.sp-comparison-text {
    padding: 20px;
    text-align: center;
    font-weight: 600;
}

/* ========================================
   PROCESS STEPS - Quy trình với số thứ tự
   ======================================== */
.sp-step {
    background: var(--sp-white);
    padding: 50px 30px 30px;
    border-radius: var(--sp-border-radius);
    box-shadow: var(--sp-box-shadow);
    position: relative;
    text-align: center;
    transition: var(--sp-transition);
    margin-top: 30px; /* Khoảng cách để số không bị đụng gradient phía trên */
}

.sp-step:hover {
    transform: translateY(-8px);
    box-shadow: var(--sp-box-shadow-hover);
}

.sp-step-number {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
    color: var(--sp-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(45, 122, 62, 0.3);
    z-index: 1; /* Đảm bảo số hiển thị trên cùng */
}

.sp-step h3 {
    font-size: 1.4rem;
    color: var(--sp-dark);
    margin: 20px 0 15px;
    font-weight: 700;
}

.sp-step-img {
    width: 100%;
    max-width: 250px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--sp-border-radius);
    margin: 20px auto;
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ========================================
   TESTIMONIALS - Đánh giá khách hàng
   ======================================== */
.sp-testimonial {
    background: var(--sp-white);
    padding: 30px;
    border-radius: var(--sp-border-radius);
    box-shadow: var(--sp-box-shadow);
    position: relative;
    border-left: 4px solid var(--sp-secondary);
    transition: var(--sp-transition);
}

.sp-testimonial:hover {
    transform: translateY(-5px);
    box-shadow: var(--sp-box-shadow-hover);
}

.sp-testimonial::before {
    content: '"';
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 4rem;
    color: var(--sp-secondary);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

.sp-testimonial-avatar {
	width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 10px;
    display: block;
    border: 3px solid var(--sp-secondary); /* Viền xanh lá */
    padding: 2px; /* Khoảng hở giữa ảnh và viền */
    background: #fff;
}

.sp-testimonial p {
    color: var(--sp-dark);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Style cho 5 ngôi sao vàng */
.sp-stars {
    color: #f1c40f; /* Màu vàng kim loại */
    font-size: 1.2rem;
    margin-bottom: 15px;
    letter-spacing: 2px; /* Khoảng cách giữa các ngôi sao */
}

/* Phần thông tin người dùng (Tên & Địa chỉ) */
.sp-testimonial-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee; /* Đường kẻ mờ ngăn cách */
}

.sp-testimonial-info strong {
    font-size: 1.1rem;
    color: var(--sp-dark);
}

.sp-testimonial-info span {
    font-size: 0.9rem;
    font-weight: 500;
}

/* ========================================
   PRICING CARDS - Bảng giá
   ======================================== */
.sp-pricing-card {
    background: var(--sp-white);
    border-radius: var(--sp-border-radius);
    box-shadow: var(--sp-box-shadow);
    padding: 40px 30px;
    text-align: center;
    transition: var(--sp-transition);
    position: relative;
    overflow: hidden;
}

.sp-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--sp-primary), var(--sp-secondary));
}

.sp-pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(45, 122, 62, 0.2);
}

.sp-pricing-card.featured {
    border: 2px solid var(--sp-secondary);
    transform: scale(1.05);
}

.sp-pricing-card h3 {
    font-size: 1.6rem;
    color: var(--sp-dark);
    margin-bottom: 15px;
    font-weight: 700;
}

.sp-pricing-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sp-primary);
    margin: 20px 0;
}

.sp-pricing-price small {
    font-size: 1rem;
    color: var(--sp-gray);
    font-weight: 400;
}

/* Đảm bảo dấu tick xanh hiển thị đúng trong mọi thẻ Card, không chỉ bảng giá */
.sp-pricing-features {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    text-align: left; /* Căn trái list */
}

.sp-pricing-features li {
    padding: 6px 0 6px 30px; /* Chừa chỗ bên trái cho dấu tick */
    position: relative;
    line-height: 1.5;
    color: var(--sp-gray, #666);
}

.sp-pricing-features li::before {
    content: '✔';
    position: absolute;
    left: 0; /* Dính sát mép trái của padding */
    top: 6px; /* Căn chỉnh với dòng đầu tiên của text */
    color: var(--sp-secondary, #2d7a3e);
    font-weight: bold;
    font-size: 1.1rem;
}

.sp-pricing-note {
    margin-top: 25px;
    padding: 15px;
    background: var(--sp-light-bg);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--sp-dark);
    font-weight: 500;
}

/* ========================================
   FAQ - Câu hỏi thường gặp
   ======================================== */
.sp-faq-item {
    background: var(--sp-white);
    margin-bottom: 20px;
    border-radius: var(--sp-border-radius);
    box-shadow: var(--sp-box-shadow);
    overflow: hidden;
    transition: var(--sp-transition);
}

.sp-faq-item:hover {
    box-shadow: var(--sp-box-shadow-hover);
}

.sp-faq-question {
    padding: 25px 30px;
    background: linear-gradient(135deg, rgba(45, 122, 62, 0.05), rgba(92, 184, 92, 0.05));
    font-weight: 600;
    color: var(--sp-dark);
    font-size: 1.1rem;
    margin: 0;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.sp-faq-question::before {
    content: '→';
    color: var(--sp-secondary);
    font-weight: 700;
    margin-right: 12px;
    font-size: 1.3rem;
}

.sp-faq-question::after {
    content: '+';
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    color: var(--sp-primary);
    font-weight: 700;
    transition: var(--sp-transition);
}

.sp-faq-question:hover {
    background: linear-gradient(135deg, rgba(45, 122, 62, 0.08), rgba(92, 184, 92, 0.08));
}

.sp-faq-answer {
    padding: 25px 30px;
    color: var(--sp-gray);
    line-height: 1.7;
    border-top: 1px solid var(--sp-light-bg);
}

.sp-faq-answer::before {
    content: '';
    /* Bỏ mũi tên trước câu trả lời */
}

.sp-faq-answer p {
    margin-bottom: 15px;
}

.sp-faq-answer p:last-child {
    margin-bottom: 0;
}

.sp-faq-answer ul {
    margin: 10px 0;
    padding-left: 20px;
}

.sp-faq-answer li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.sp-faq-answer strong {
    color: var(--sp-dark);
    font-weight: 600;
}

/* ========================================
   HIGHLIGHTS - Box nổi bật
   ======================================== */
.sp-highlight {
    padding: 25px;
    background: linear-gradient(135deg, rgba(45, 122, 62, 0.1), rgba(92, 184, 92, 0.1));
    border-radius: var(--sp-border-radius);
    border-left: 4px solid var(--sp-secondary);
    margin: var(--sp-spacing-md) 0;
}

.sp-highlight-warning {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(230, 126, 34, 0.1));
    border-left-color: var(--sp-accent);
}

.sp-highlight-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
    border-left-color: #3b82f6;
}

/* ========================================
   ICON BOXES - Target audience, features
   ======================================== */
.sp-icon-box {
    background: var(--sp-white);
    padding: 25px 20px;
    border-radius: var(--sp-border-radius);
    box-shadow: var(--sp-box-shadow);
    text-align: center;
    transition: var(--sp-transition);
}

.sp-icon-box:hover {
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
    color: var(--sp-white);
    transform: scale(1.05);
}

.sp-icon-box-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.sp-icon-box p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ========================================
   RESPONSIVE - Mobile friendly (HOÀN TOÀN TỐI ƯU)
   ======================================== */

/* ===== EXTRA SMALL PHONES (< 360px) ===== */
@media (max-width: 359px) {
    .sp-hero {
        padding: 40px 15px;
    }
    
    .sp-hero h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .sp-card,
    .sp-step,
    .sp-pricing-card {
        padding: 15px;
    }
    
    .sp-btn {
        font-size: 0.9rem;
        padding: 14px 20px;
    }
}

/* ===== ALL MOBILE (< 768px) ===== */
@media (max-width: 768px) {
    /* Hero Section */
    .sp-hero {
        padding: 50px 20px;
        background-position: center;
        background-size: cover;
    }
    
    .sp-hero h1 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    .sp-hero-subtitle {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* Section Titles */
    .sp-section-title {
        font-size: 1.75rem;
        margin-bottom: 30px;
        padding-bottom: 15px;
    }
    
    .sp-section-title::after {
        width: 60px;
        height: 3px;
    }
    
    .sp-section-subtitle {
        font-size: 1rem;
    }
    
    /* Sections Spacing */
    .sp-section {
        padding: 40px 0;
    }
    
    /* Buttons - TOUCH FRIENDLY */
    .sp-btn-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 0 20px;
    }
    
    .sp-btn {
        width: 100%;
        max-width: 100%;
        padding: 16px 24px;  /* Min 48px height */
        font-size: 1rem;
    }
    
    /* Grid - 1 cột mặc định */
    .sp-grid,
    .sp-comparison {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Images */
    .sp-img-featured {
        border-radius: 8px;
        margin: 20px 0;
    }
    
    .sp-img-rounded {
        border-radius: 8px;
    }
    
    .sp-comparison-image {
        height: 280px;
        object-fit: cover;
    }
    
    /* Cards */
    .sp-card {
        padding: 20px;
        margin-bottom: 15px;
    }
    
    .sp-card h3 {
        font-size: 1.3rem;
    }
    
    .sp-card p,
    .sp-card li {
        font-size: 0.95rem;
    }
    
    /* Steps - FIX ABSOLUTE POSITION */
    .sp-step {
        margin-top: 0;
        padding: 20px;
        position: relative;
    }
    
    .sp-step-number {
        position: relative;
        top: 0;
        left: 0;
        margin: 0 auto 15px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 1.8rem;
    }
    
    .sp-step h3 {
        font-size: 1.2rem;
        margin-top: 0;
    }
    
    /* Pricing Cards */
    .sp-pricing-card {
        margin: 15px auto;
        max-width: 100%;
        padding: 25px 20px;
    }
    
    .sp-pricing-card.featured {
        transform: scale(1);
        margin: 15px auto;
    }
    
    .sp-pricing-header h3 {
        font-size: 1.5rem;
    }
    
    .sp-pricing-price {
        font-size: 2rem;
    }
    
    .sp-pricing-period {
        font-size: 0.9rem;
    }
    
    /* Icon Boxes */
    .sp-icon-box {
        padding: 20px 15px;
    }
    
    .sp-icon-box-icon {
        font-size: 2rem;
    }
    
    .sp-icon-box p {
        font-size: 0.95rem;
    }
    
    /* Testimonials - Ẩn 3 cái cuối */
    .sp-testimonial:nth-child(n+4) {
        display: none;
    }
    
    .sp-testimonial {
        padding: 20px;
    }
    
    .sp-testimonial-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .sp-testimonial-author {
        font-size: 0.9rem;
    }
    
    /* FAQ */
    .sp-faq-question {
        font-size: 1rem;
        padding: 15px 50px 15px 15px;
    }
    
    .sp-faq-question::before {
        font-size: 1.1rem;
        margin-right: 8px;
    }
    
    .sp-faq-question::after {
        font-size: 1.5rem;
        right: 15px;
    }
    
    .sp-faq-answer {
        padding: 15px;
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    /* Highlight boxes */
    .sp-highlight {
        padding: 20px;
        font-size: 1rem;
    }
    
    /* Spacers */
    div[style*="height: 70px"],
    div[style*="height: 50px"] {
        height: 40px !important;
    }
}

/* ===== SMALL TO LARGE PHONES (360px - 767px) ===== */
@media (min-width: 360px) and (max-width: 767px) {
    /* Grid 2 cột cho cards nhiều */
    .sp-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    /* Grid 2 giữ nguyên 2 cột */
    .sp-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .sp-grid-2 .sp-card {
        padding: 15px;
        font-size: 0.9rem;
    }
    
    .sp-grid-2 .sp-card h3 {
        font-size: 1.1rem;
    }
}

/* ===== LARGE PHONES (480px - 767px) ===== */
@media (min-width: 480px) and (max-width: 767px) {
    /* Grid 4 → 2 cột */
    .sp-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Steps 2 cột */
    .sp-step {
        padding: 20px;
    }
}

/* ===== TABLETS (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .sp-hero {
        padding: 80px 30px;
    }
    
    .sp-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sp-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sp-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sp-btn-group {
        gap: 15px;
    }
}

/* ========================================
   UTILITIES - Helper classes
   ======================================== */
.sp-text-center {
    text-align: center;
}

.sp-text-primary {
    color: var(--sp-primary);
}

.sp-text-secondary {
    color: var(--sp-secondary);
}

.sp-bg-light {
    background: var(--sp-light-bg);
}

.sp-mb-0 { margin-bottom: 0; }
.sp-mb-sm { margin-bottom: var(--sp-spacing-sm); }
.sp-mb-md { margin-bottom: var(--sp-spacing-md); }
.sp-mb-lg { margin-bottom: var(--sp-spacing-lg); }

.sp-mt-0 { margin-top: 0; }
.sp-mt-sm { margin-top: var(--sp-spacing-sm); }
.sp-mt-md { margin-top: var(--sp-spacing-md); }
.sp-mt-lg { margin-top: var(--sp-spacing-lg); }

/* ==========================================================================
   MOBILE UX/UI OPTIMIZATION (Thêm vào cuối file style.css)
   ========================================================================== */

/* 1. TẠO THANH CUỘN NGANG (SWIPE) CHO MOBILE
   Giúp trang không bị quá dài, tạo cảm giác như App */
@media (max-width: 767px) {
    .sp-scroll-mobile {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 20px; /* Chừa chỗ cho thanh cuộn ảo */
        margin-right: -15px; /* Tràn viền phải một chút cho đẹp */
        padding-right: 15px;
        -webkit-overflow-scrolling: touch; /* Mượt mà trên iOS */
    }

    .sp-scroll-mobile > * {
        flex: 0 0 85%; /* Mỗi thẻ chiếm 85% chiều rộng màn hình */
        scroll-snap-align: center;
        margin-bottom: 0 !important;
    }

    /* Ẩn thanh cuộn mặc định xấu xí */
    .sp-scroll-mobile::-webkit-scrollbar {
        height: 4px;
    }
    .sp-scroll-mobile::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }
}

/* 2. TỐI ƯU HÓA GRID TRÊN MOBILE (Tránh 1 cột dài lê thê) */
@media (max-width: 767px) {
    /* Grid 2 cột cho các icon nhỏ (Vấn đề, Đối tượng) */
    .sp-grid-mobile-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Tinh chỉnh card nhỏ trong grid 2 cột */
    .sp-grid-mobile-2 .sp-card, 
    .sp-grid-mobile-2 .sp-icon-box {
        padding: 15px 10px;
        font-size: 0.85rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    .sp-grid-mobile-2 .sp-card-icon,
    .sp-grid-mobile-2 .sp-icon-box-icon {
        font-size: 1.8rem; /* Giảm size icon chút cho cân đối */
        margin-bottom: 8px;
    }
    
    /* Căn giữa text trong các box nhỏ */
    .sp-grid-mobile-2 strong, 
    .sp-grid-mobile-2 p {
        text-align: center;
        line-height: 1.3;
    }
}

/* 3. TỐI ƯU CÁC THÀNH PHẦN KHÁC */
@media (max-width: 767px) {
    /* Hero: Tăng độ tối nền để chữ trắng dễ đọc hơn */
    .sp-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgb(166 241 83 / 84%));
        z-index: 0;
    }
    .sp-hero-content { z-index: 1; position: relative; }

    /* Spacer: Ghi đè các div style="height: 70px" */
    div[style*="height: 70px"], 
    div[style*="height: 50px"] {
        height: 35px !important; /* Giảm khoảng trắng thừa */
    }

    /* Steps: Chuyển sang layout ngang (Icon trái - Chữ phải) để tiết kiệm dọc */
    .sp-step {
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        padding: 20px 15px;
        align-items: center;
    }
    .sp-step-number {
        position: static; /* Bỏ absolute */
        transform: none;
        margin: 0 15px 0 0;
        width: 40px; height: 40px;
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    .sp-step-img {
        display: none; /* Ẩn ảnh minh họa step trên mobile để đỡ rối, hoặc để nhỏ lại */
    }
    .sp-step h3 {
        margin: 0;
        font-size: 1.1rem;
        width: calc(100% - 60px); /* Chừa chỗ cho số */
    }
    /* Nội dung step xuống dòng */
    .sp-step > *:not(h3):not(.sp-step-number) {
        width: 100%;
        margin-top: 10px;
        font-size: 0.95rem;
    }

    /* Comparison: Đặt side-by-side (cạnh nhau) thay vì trên dưới */
    .sp-comparison {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
    .sp-comparison-item { box-shadow: none; border: 1px solid #eee; }
    .sp-comparison-label { font-size: 0.8rem; padding: 5px; }
    .sp-comparison-image { height: 120px; }
    .sp-comparison-text { font-size: 0.8rem; padding: 10px 5px; min-height: 60px; }

    /* Buttons: Full width cho dễ bấm */
    .sp-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* =========================================
   NEW PRICING TABLE DESIGN
   ========================================= */
.sp-pricing-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Base Card Style */
.sp-price-card {
    flex: 1;
    min-width: 300px;
    max-width: 360px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sp-price-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Header */
.sp-price-header {
    padding: 30px 20px 10px;
    text-align: center;
}

.sp-price-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.sp-price-card h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d2023;
}

.sp-price-sub {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 5px 0 0;
}

/* Frequency/Price Highlight */
.sp-price-freq {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--sp-primary);
    padding: 10px 0 20px;
    border-bottom: 1px solid #f0f0f0;
}

.sp-freq-small {
    font-size: 1rem;
    font-weight: 400;
    color: #888;
}

/* Body Content */
.sp-price-body {
    padding: 25px;
    flex-grow: 1;
}

.sp-price-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.sp-price-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.95rem;
    color: #555;
    position: relative;
    padding-left: 25px;
    line-height: 1.5;
}

.sp-price-list li:last-child {
    border-bottom: none;
}

.sp-price-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--sp-secondary);
    font-weight: bold;
}

.sp-price-target {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.4;
}

.sp-price-target span {
    font-weight: 700;
    color: var(--sp-primary);
    display: block;
    margin-bottom: 4px;
}

/* Footer & Buttons */
.sp-price-footer {
    padding: 0 25px 30px;
    text-align: center;
}

.sp-btn-outline-green {
    display: block;
    width: 100%;
    padding: 12px;
    border: 2px solid var(--sp-primary);
    color: var(--sp-primary);
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.sp-btn-outline-green:hover {
    background: var(--sp-primary);
    color: #fff;
}

/* =========================================
   POPULAR CARD (GÓI TIÊU CHUẨN)
   ========================================= */
.sp-price-popular {
    transform: scale(1.05); /* Laptop: To hơn chút */
    border: none;
    background: linear-gradient(145deg, #2d7a3e, #4CAF50); /* Màu xanh đậm thương hiệu */
    color: #fff;
    box-shadow: 0 10px 30px rgba(45, 122, 62, 0.3);
    z-index: 2;
}

.sp-price-popular:hover {
    transform: scale(1.08); /* Hover thì to hơn nữa */
    box-shadow: 0 20px 40px rgba(45, 122, 62, 0.4);
}

.sp-price-popular h3,
.sp-price-popular .sp-price-sub,
.sp-price-popular .sp-price-freq,
.sp-price-popular .sp-freq-small,
.sp-price-popular .sp-price-list li,
.sp-price-popular .sp-price-target {
    color: #fff !important;
}

.sp-price-popular .sp-price-freq {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}

.sp-price-popular .sp-price-list li {
    border-bottom: 1px dashed rgba(255,255,255,0.2);
}

.sp-price-popular .sp-price-list li::before {
    color: #FFD700; /* Dấu tick màu vàng kim */
}

.sp-price-popular .sp-price-target {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(5px);
}

.sp-price-popular .sp-price-target span {
    color: #FFD700;
}

.sp-btn-white {
    display: block;
    width: 100%;
    padding: 12px;
    background: #fff;
    color: var(--sp-primary);
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-decoration: none;
    transition: all 0.3s;
}

.sp-btn-white:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    color: var(--sp-primary);
}

/* Ribbon Badge */
.sp-ribbon {
    position: absolute;
    top: 15px;
    right: -30px;
    background: #f39c12; /* Màu cam nổi bật */
    color: #fff;
    padding: 5px 30px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
    /* Tablet: Bỏ scale để tránh đè nhau */
    .sp-price-popular {
        transform: scale(1);
    }
    .sp-price-popular:hover {
        transform: translateY(-5px);
    }
}

@media (max-width: 767px) {
    .sp-pricing-wrapper {
        flex-direction: column; /* Xếp dọc trên mobile */
        align-items: center;
        gap: 25px;
    }

    .sp-price-card {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }

    /* Gói popular trên mobile nổi bật hơn bằng shadow, không cần scale to */
    .sp-price-popular {
        transform: scale(1);
        margin: 5px 0;
        box-shadow: 0 8px 25px rgba(45, 122, 62, 0.25);
    }
    
    .sp-price-header {
        padding-top: 20px;
    }
}

/* --------------------------------------------------------
   1. GLOBAL STYLES (Áp dụng cho cả Máy tính & Mobile)
   -------------------------------------------------------- */

/* --- Tinh chỉnh Ribbon "Bán Chạy Nhất" --- */
.sp-ribbon {
    top: 22px !important;
    right: -32px !important;
    padding: 5px 35px !important;
    font-size: 0.65rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* --- Bộ Nút Bấm: Hiện đại, Vuông vắn (Bo 6px) --- */
.sp-btn-group {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    margin-top: 30px !important;
}

.sp-btn {
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    min-width: unset !important;
    height: auto !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
}

.sp-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Màu sắc các nút */
.sp-btn-primary { /* Đăng ký */
    background: #ffffff !important;
    color: #2d7a3e !important;
    border: 1px solid #ffffff !important;
}

.sp-btn-secondary { /* Hotline - Màu Cam Vàng Nổi Bật */
    background: #f39c12 !important;
    border: 1px solid #f39c12 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.4) !important;
}
.sp-btn-secondary:hover {
    background: #e67e22 !important;
    border-color: #e67e22 !important;
}

.sp-btn-success { /* Zalo - Xanh chuẩn */
    background: #0068FF !important;
    color: #ffffff !important;
    border: 1px solid #0068FF !important;
}


/* --------------------------------------------------------
   2. MOBILE FIXES (Chỉ áp dụng màn hình < 768px)
   -------------------------------------------------------- */
@media (max-width: 767px) {
    
    /* --- A. Sửa lỗi Vùng Giải Pháp (4 bảng Grid) bị lệch --- */
    .sp-grid-2 {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sp-grid-2 .sp-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 20px 10px !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    /* Thu nhỏ ảnh tròn để không đẩy khung */
    .sp-img-circle {
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto 15px !important;
    }

    /* Sửa lỗi dấu check xanh bị đè lên chữ */
    .sp-card ul {
        display: inline-block !important;
        text-align: left !important;
        margin: 0 auto !important;
        width: fit-content !important;
    }
    .sp-card li {
        padding-left: 30px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .sp-card li::before {
        left: 0 !important;
        top: 5px !important;
        font-size: 1.1rem !important;
    }

    /* --- B. Sửa lỗi Bảng Giá (Pricing) bị hẹp & Mất chữ --- */
    .sp-pricing-wrapper {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .sp-price-card {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        margin: 0 0 25px 0 !important;
    }
    
    .sp-price-popular {
        transform: scale(1) !important;
        margin: 0 0 25px 0 !important;
    }

    /* Tăng diện tích hiển thị nội dung giá */
    .sp-price-header, .sp-price-body, .sp-price-footer {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* [FIX] Sửa lỗi chữ "Trọn gói" bị mất một bên */
    .sp-price-freq {
        font-size: 1.8rem !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        /* Quan trọng: Cho phép rớt dòng để không bị cắt chữ */
        flex-wrap: wrap !important; 
        white-space: normal !important;
        text-align: center !important;
    }

    /* --- C. Sửa lỗi Nút Bấm Mobile (Tràn viền & Liền khối) --- */
    .sp-btn-group {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 15px !important; /* Lề an toàn sát mép màn hình */
        box-sizing: border-box !important;
        gap: 8px !important; /* Khoảng cách nút khít lại */
        margin-top: 15px !important;
    }

    .sp-btn {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .sp-btn i, .sp-btn .icon {
        margin-right: 8px !important;
    }

    /* Tinh chỉnh nhỏ cho Ribbon trên mobile */
    .sp-ribbon {
        top: 20px !important;
        right: -30px !important;
        font-size: 0.6rem !important;
    }
}
/* ========================================================
   HIỆU ỨNG CHỮ PHÁT SÁNG (GLOW) CHO ĐOẠN CUỐI TRANG
   ======================================================== */
#contact h2 {
    text-shadow: 0 0 3px rgb(255 255 255), 2px 2px 1px rgb(255 255 255) !important;
	font-size: 1.9rem !important;
    letter-spacing: 0.5px !important;
}

/* Custom list style cho phần "Nông nghiệp hóa học" để hiện dấu X đỏ */
.sp-list-cross {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
}

.sp-list-cross li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 8px;
    color: var(--sp-gray); /* Giữ màu chữ chuẩn */
}

/* Ghi đè dấu check mặc định bằng dấu X */
.sp-list-cross li::before {
    content: '❌'; /* Icon X */
    position: absolute;
    left: 0;
    top: 2px; /* Căn chỉnh lại vị trí top cho cân đối */
    font-size: 1rem;
    color: #e74c3c; /* Màu đỏ cảnh báo */
    font-weight: normal; /* Reset font-weight của dấu check cũ */
}

/* Đảm bảo grid 4 cột hiển thị tốt trên máy tính cho phần 4 Giai đoạn */
@media (min-width: 1024px) {
    .sp-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* CSS RIÊNG: Đảm bảo trên mobile xếp dọc 1 cột và vừa khít màn hình */
    .sp-grid-smart-stack {
        display: grid;
        gap: 20px;
    }
/* Màn hình máy tính: 3 cột */
@media (min-width: 768px) {
	.sp-grid-smart-stack {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* Màn hình điện thoại: 1 cột duy nhất (1fr = 100% khung hình) */
@media (max-width: 767px) {
	.sp-grid-smart-stack {
		grid-template-columns: 1fr !important; 
		width: 100% !important;
		margin: 0 auto !important;
	}
	/* Căn chỉnh lại thẻ Card để không bị sát lề quá */
	.sp-grid-smart-stack .sp-card, 
	.sp-grid-smart-stack .sp-testimonial {
		width: 100% !important; 
		box-sizing: border-box !important; /* Tính cả viền vào độ rộng để không tràn */
	}
}

.sp-step-icon-custom {
	width: 80px !important;
	height: 80px !important;
	object-fit: contain !important;
	margin: 0 auto 15px !important;
	box-shadow: none !important; 
	border-radius: 0 !important; 
	display: block !important; 
}

/* --- CSS MỚI CHO TRANG FARMSTAY --- */

/* List gạch chéo cho các mục "Không..." */
.sp-list-cross {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
}

.sp-list-cross li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 8px;
    color: var(--sp-gray);
}

.sp-list-cross li::before {
    content: '❌'; /* Hoặc dùng icon '⛔' */
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1rem;
    color: #e74c3c; /* Màu đỏ */
    font-weight: normal;
}

/* Tùy chỉnh ảnh trong card zigzag để đẹp hơn */
.sp-img-rounded img {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.sp-img-rounded:hover img {
    transform: scale(1.02);
}

/* Đảm bảo nút trong Pricing Card full width */
.sp-pricing-card .sp-btn {
    margin-top: 15px;
    text-align: center;
}

/* --- FIX LỖI HIỂN THỊ MOBILE (Phần Farmstay) --- */
@media (max-width: 767px) {
    /* Đảo ngược thứ tự: Đưa ảnh lên trên, Text xuống dưới */
    .sp-mobile-reverse {
        display: flex !important;
        flex-direction: column-reverse; /* Đảo chiều dọc */
        gap: 20px; /* Tạo khoảng cách an toàn giữa Ảnh và Text */
    }
    
    /* Xử lý margin thừa của Card khi bị đảo xuống dưới */
    .sp-mobile-reverse .sp-card {
        margin-bottom: 0 !important;
    }
}

    /* CSS Bổ sung cục bộ để giả lập style Info Box của Kadence mà không cần cài plugin */
    .sp-card-solid {
        color: #fff !important;
        border: none;
        border-radius: 15px; /* Bo góc theo mẫu cite:84 */
        transition: transform 0.3s ease;
    }
    .sp-card-solid h3, .sp-card-solid p, .sp-card-solid li {
        color: #fff !important;
    }
    .sp-card-solid:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }
    /* Các biến thể màu lấy từ file mẫu */
    .bg-green-1 { background-color: var(--sp-primary, #2d7a3e); }
    .bg-green-2 { background-color: #008d25; } /* cite:85 */
    .bg-green-3 { background-color: #7ab800; } 
    .bg-green-4 { background-color: #9fc610; } /* cite:86 */
    
    /* Style cho tiêu đề lớn cite:84 */
    .sp-heading-style-2 {
        text-transform: uppercase;
        color: var(--sp-primary);
        font-weight: 700;
        font-size: clamp(1.8rem, 4vw, 2.2rem);
        margin-bottom: 10px;
}
		
/* 	header */
#main-header .search-field {
	border-radius: 20px;
    padding: 8px 15px;
}
#main-header .contact-button {
	background: #E60709;
    padding: 5px 15px;
    border-radius: 20px;
}
#main-header .contact-button .kadence-svg-iconset, 
#main-header .contact-button .contact-label{
	color: white;
}

.woocommerce div.product .button.single_add_to_cart_button{
	line-height: normal !important;
}