/*
Theme Name: FispGeneratePress
Theme URI: https://generatepress.com
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Version: 3.6.1
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fispgeneratepress
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, e-commerce, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, rtl-language-support, featured-images, theme-options

GeneratePress, Copyright 2014-2025 EDGE22 Studios LTD.
GeneratePress is distributed under the terms of the GNU GPL

GeneratePress is based on Underscores http://underscores.me/, (C) 2012-2025 Automattic, Inc.

Actual CSS can be found in /assets/css/ folder.
*/

.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #f3f4f6;

    transition: all 0.3s ease;
}

.admin-bar .site-header {
    top: 32px;
}

.inside-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 2rem !important;

}

.inside-header>* {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.main-navigation {
    background-color: transparent !important;
}

.main-navigation ul ul {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    padding: 10px 0;
    width: auto !important;

    min-width: 150px;

}

.main-navigation ul ul li a {
    white-space: nowrap !important;
    width: auto !important;
}

.fisp-homepage-wrapper {
    margin-top: 80px;
}

.main-navigation .main-nav ul li a {
    font-size: 18px !important;

    font-weight: 500;
}

#site-navigation {
    z-index: 1000;
}

#main_effect {
    height: 400px;
}

.site-logo .header-image {
    width: auto;
    height: 2.1rem;
}

#qe_actived {
    display: none;
}

html {
    scroll-behavior: smooth;
}

#app {
    height: 100%;
    font-family: \"Montserrat\", serif;
}

#app a {
    text-decoration: none;
    color: #fff;
}

#app .hero {
    position: relative;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#app h1,
#app h2,
#app p {
    margin: 0;
    padding: 0;
    color: white;
    text-shadow: 0 0 20px rgba(0, 0, 0, 1);
    line-height: 100%;
    user-select: none;
}

#app h1 {
    font-size: 80px;
    font-weight: 700;
    text-transform: uppercase;
}

#app h2 {
    font-size: 60px;
    font-weight: 500;
    text-transform: uppercase;
}

#app p {
    font-size: 35px;
    font-weight: 500;
}

#app #canvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.main-navigation .main-nav ul li:last-child a {
    padding-right: 0 !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 768px) {
    .fisp-homepage-wrapper {
        margin-top: 64px;
    }

    .main-navigation.toggled .main-nav {
        background: white !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #f3f4f6;
    }

    .main-navigation.toggled .main-nav ul li a {
        border-bottom: 1px solid #f9fafb;
        text-align: left;
        color: #374151 !important;

        font-size: 16px;
    }

    .main-navigation ul ul {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background-color: #f9fafb !important;

        padding: 0 !important;
    }

    .main-navigation .main-nav ul li.sfHover ul {
        display: block !important;
    }
}

.menu-toggle {
    background: transparent !important;
    color: #374151 !important;
    font-size: 24px;
    padding: 0 10px;
}

.fisp-content-wrapper {
    max-width: 800px;
    margin: 120px auto 40px auto;

    padding: 0 20px;
    font-family: "Noto Sans TC", sans-serif;
}

.fisp-clean-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fisp-clean-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

.fisp-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.fisp-feature-list li {
    position: relative;
    padding: 12px 0 12px 28px;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
}

.fisp-feature-list li:last-child {
    border-bottom: none;
}

.fisp-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1E40AF;

    font-weight: bold;
}

.fisp-feature-list li strong {
    color: #111827;
    margin-right: 4px;
}

.fisp-button-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.fisp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 160px;
    cursor: pointer;
    border: none;
}

.fisp-btn-primary {
    background-color: #1E40AF;
    color: #ffffff !important;
}

.fisp-btn-primary:hover {
    background-color: #1e3a8a;
    box-shadow: 0 10px 15px -3px rgba(30, 64, 175, 0.3);
}

.fisp-btn-secondary {
    background-color: #0D9488;
    color: #ffffff !important;
}

.fisp-btn-secondary:hover {
    background-color: #0f766e;
    box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.3);
}

@media (max-width: 640px) {
    .fisp-button-group {
        flex-direction: column;
    }

    .fisp-action-btn {
        width: 100%;
    }
}

.fisp-page-intro {
    text-align: center;
    margin-bottom: 3rem;
}

.fisp-page-intro h1 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 1rem !important;
    background: linear-gradient(135deg, #1E40AF 0%, #0D9488 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2 !important;
}

.fisp-page-intro p {
    color: #6b7280;
    font-size: 1.125rem;
    margin: 0;
}

.fisp-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.fisp-feature-card {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.fisp-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
    border-color: rgba(30, 64, 175, 0.2);
}

.fisp-feature-icon {
    width: 48px;
    height: 48px;
    background: #eff6ff;
    color: #1E40AF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.fisp-feature-card h3 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    color: #111827 !important;
    border: none !important;
    padding: 0 !important;
}

.fisp-feature-card p {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.fisp-portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.fisp-portal-card {
    position: relative;
    padding: 3rem 2rem;
    border-radius: 24px;
    text-align: center;
    color: white !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fisp-portal-card.teacher {
    background: linear-gradient(135deg, #1E40AF 0%, #3b82f6 100%);
}

.fisp-portal-card.student {
    background: linear-gradient(135deg, #0D9488 0%, #14b8a6 100%);
}

.fisp-portal-card:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.fisp-portal-card h2 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.5rem !important;
    color: white !important;
    line-height: 1.2 !important;
}

.fisp-portal-card span {
    font-size: 1rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .fisp-portal-grid {
        grid-template-columns: 1fr;
    }
}

.fisp-premium-wrapper {
    max-width: 950px;
    margin: 100px auto 60px auto;
    padding: 0 20px;
    font-family: "Noto Sans TC", sans-serif;
}

.fisp-elite-card.transparent {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    min-height: auto;
    align-items: flex-start;
    gap: 3rem;
}

.fisp-elite-side-title {
    flex: 0 0 35%;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.fisp-elite-side-title h1 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.1 !important;
}

.fisp-elite-side-title p {
    color: #4b5563;
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.8;
}

.fisp-elite-banner {
    display: none;
}

.fisp-elite-content {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: transparent;
}

.fisp-elite-header {
    margin-bottom: 2rem;
}

.fisp-elite-header h1 {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin: 0 0 0.5rem 0 !important;
    letter-spacing: -0.025em;
    line-height: 1.1 !important;
}

.fisp-elite-header p {
    color: #4b5563;
    font-size: 1rem;
    margin: 0;
    opacity: 0.8;
}

.fisp-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.fisp-compact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.fisp-compact-icon {
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    color: #111827;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fisp-compact-text h4 {
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin: 0 0 0.25rem 0 !important;
    color: #111827 !important;
    border: none !important;
    padding: 0 !important;
}

.fisp-compact-text p {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.fisp-elite-footer {
    display: flex;
    gap: 1rem;
}

.fisp-elite-btn {
    flex: 1;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.2s ease;
    background-color: #1E40AF;

    color: white !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.fisp-elite-btn:hover {
    background-color: #1e3a8a;
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2);
}

.fisp-elite-btn.teacher,
.fisp-elite-btn.student {
    background-color: #1E40AF;
    color: white !important;
}

.inside-article {
    background-color: transparent !important;
}

@media (max-width: 850px) {
    .fisp-elite-card.transparent {
        flex-direction: column;
        gap: 2rem;
    }

    .fisp-elite-side-title {
        flex: none;
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .fisp-compact-grid {
        grid-template-columns: 1fr;
    }

    .fisp-elite-footer {
        flex-direction: column;
    }
}

.aligncenter,
.align-center {
    display: block;
    margin: 20px auto;
    text-align: center;
}

.font-bold {
    font-weight: bold;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-container.space-around {
    justify-content: space-around;
}

.flex-container .flex-item {
    flex: 1 1 auto;
    margin: 10px;
    padding: 0;
}

.flex-50 {
    flex: 0 0 calc(50% - 20px) !important;
}

.formated-container {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.formated-container h2 {
    margin-top: 0 !important;
    font-size: 1.5rem !important;
    color: #1E40AF !important;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 10px;
}

.formated-container ul {
    margin: 15px 0 0 0 !important;
    padding-left: 20px !important;
}

.formated-container ul li {
    margin-bottom: 8px;
}

.formated-container ul li a {
    color: #1E40AF !important;
    text-decoration: none;
    transition: color 0.2s;
}

.formated-container ul li a:hover {
    color: #0D9488 !important;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .flex-50 {
        flex: 0 0 100% !important;
    }
}

.flex-container .flex-item img {
    width: 100%;
    height: auto;
    display: block;
}

.bg {
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

.bg.qe-t {
    background-image: url('wp-content/uploads/shape-03.svg');
}

.bg.qe-s {
    background-image: url('wp-content/uploads/shape-02.svg');
}

#video_wrapper {
    margin: 40px 0;
    padding: 30px;
    background: #f9fafb;
    border-radius: 20px;
    border: 1px solid #f3f4f6;
}

#video_wrapper h2 {
    font-size: 1.5rem !important;
    margin-bottom: 2rem !important;
    color: #111827 !important;
    line-height: 1.5 !important;
}

#video_wrapper a {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    margin: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

#video_wrapper a:hover {
    background: #111827;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

#video_wrapper a::before {
    content: "▶";
    margin-right: 8px;
    font-size: 0.8rem;
}

.book {
    display: inline-block;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: 0%;
    transform: perspective(1000px) rotateY(-15deg);
}

.book:hover {
    transform: perspective(1000px) rotateY(0deg) translateZ(10px);
}

.book img {
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1), 10px 0px 20px rgba(0, 0, 0, 0.1);
}

.separate-containers .inside-article {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 40px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.separate-containers .inside-article:has(.fisp-premium-wrapper) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1rem !important;
}

@media (max-width: 768px) {
    .separate-containers .inside-article {
        padding: 1.5rem !important;
    }
}

.fisp-maker-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #e8e8e8 0%, #f3f4f6 100%);
    border-radius: 2rem;
    box-sizing: border-box;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.fisp-maker-header {
    display: flex;
    gap: 4rem;
    align-items: center;
    margin-bottom: 2.5rem;
    padding: 0;
    width: 100%;
}

.fisp-maker-books {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.fisp-maker-books img {
    width: 220px;
    height: auto;
    box-shadow: 10px 20px 40px -10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: all 0.4s ease;
    transform: perspective(1000px) rotateY(-5deg);
}

.fisp-maker-books img:hover {
    transform: perspective(1000px) rotateY(0deg) translateY(-10px);
    box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.3);
}

.fisp-maker-intro {
    flex: 1;
    text-align: left;
}

.fisp-maker-intro h4 {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0 !important;
    color: #111827 !important;
    line-height: 1.3 !important;
    background: linear-gradient(135deg, #1e40af 0%, #0d9488 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fisp-maker-intro p {
    font-size: 1.25rem !important;
    color: #4b5563;
    margin: 0;
    font-weight: 500;
}

.fisp-maker-tag {
    display: inline-block;
    background: #1e40af;
    color: white;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 25px 0 12px 0;
}

.fisp-maker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.fisp-kit-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.5rem;
    padding: 35px;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.fisp-kit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1e40af, #0d9488);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fisp-kit-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
    border-color: #1e40af33;
}

.fisp-kit-card:hover::before {
    opacity: 1;
}

.fisp-kit-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.fisp-kit-title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fisp-kit-name {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.fisp-kit-id-group {
    border-left: 3px solid #e5e7eb;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fisp-kit-id {
    color: #7c3aed;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
}

.fisp-kit-price {
    color: #1e40af;
    font-weight: 800;
    font-size: 1.1rem;
}

.fisp-kit-qr {
    width: 85px;
    height: 85px;
    border: 1px solid #e5e7eb;
    padding: 6px;
    background: white;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.fisp-kit-qr:hover {
    transform: scale(1.1);
}

.fisp-kit-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    min-height: 220px;
}

.fisp-kit-image img {
    max-height: 220px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.5s ease;
}

.fisp-kit-card:hover .fisp-kit-image img {
    transform: scale(1.05);
}

.fisp-kit-features {
    list-style: none;
    padding: 0;
    margin: 25px 0 0 0;
}

.fisp-kit-features li {
    position: relative;
    padding: 10px 0 10px 30px;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.5;
    border-top: 1px solid #f3f4f6;
}

.fisp-kit-features li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #0d9488;
    font-weight: 1000;
    font-size: 1.1rem;
}

.fisp-maker-footer {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    color: white;
    padding: 50px;
    border-radius: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    box-shadow: 0 20px 40px -10px rgba(30, 64, 175, 0.3);
}

.fisp-maker-footer-left {
    flex: 1;
    text-align: left;
}

.fisp-maker-footer-left div:first-child {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.fisp-maker-footer a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.fisp-maker-footer a:hover {
    color: white !important;
    border-bottom-style: solid;
}

.fisp-maker-tel-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 50px;
}

@media (max-width: 850px) {
    .fisp-maker-wrapper {
        padding: 60px 30px;
    }

    .fisp-maker-grid {
        grid-template-columns: 1fr;
    }

    .fisp-maker-header {
        flex-direction: column;
        text-align: center;
        gap: 2.5rem;
    }

    .fisp-maker-intro {
        text-align: center;
    }

    .fisp-maker-footer {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }

    .fisp-maker-footer-left {
        text-align: center;
        width: 100%;
    }

    .fisp-maker-tel-stack {
        border-left: none;
        padding-left: 0;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 30px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .fisp-maker-wrapper {
        padding: 20px;
    }

    .fisp-kit-card {
        padding: 25px;
    }

    .fisp-maker-books img {
        width: 45%;
        max-width: 180px;
    }
}

.fisp-single-main .flex-row {
    min-height: 500px;
}

.prose .fisp-premium-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.prose .fisp-elite-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.fisp-single-main .fisp-elite-side-title {
    display: none !important;
}

.fisp-single-main .fisp-elite-main-content {
    padding-left: 0 !important;
}

.fisp-subject-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2rem 0;
}

.fisp-subject-card {
    flex: 1 1;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.fisp-subject-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.fisp-subject-header h3 {
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    border: none !important;
    padding: 0 !important;
}

.fisp-subject-card ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
}

.fisp-subject-card ul li {
    padding: 0 !important;
    border: none !important;
}

.fisp-subject-card ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 24px;
    color: black !important;
    text-decoration: none !important;
    font-size: 1rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.fisp-subject-card ul li a:hover {
    color: #1E40AF !important;
}

.fisp-subject-card ul li a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231E40AF' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' /%3E%3C/svg%3E");
    background-color: #eff6ff;
}

/* 懸停狀態下的影片圖示顏色 */
.fisp-subject-card ul li a[href*="youtube.com"]:hover::before,
.fisp-subject-card ul li a[href*="youtu.be"]:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231E40AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z' /%3E%3Crect width='14' height='12' x='2' y='6' rx='2' ry='2' /%3E%3C/svg%3E");
}



.fisp-subject-card ul li a::before {
    content: "";
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: #f1f5f9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' /%3E%3C/svg%3E");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    margin-right: 12px;
    order: -1;
}

/* 針對影片連結 (YouTube) 的影音圖示自動切換 */
.fisp-subject-card ul li a[href*="youtube.com"]::before,
.fisp-subject-card ul li a[href*="youtu.be"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z' /%3E%3Crect width='14' height='12' x='2' y='6' rx='2' ry='2' /%3E%3C/svg%3E");
}

.fisp-subject-card ul li a::after {
    content: "";
    width: 3px;
    height: 18px;
    background-color: #e2e8f0;
    margin-right: 12px;
    order: -1;
}



@media (max-width: 768px) {
    .fisp-subject-card {
        flex: 0 0 100%;
    }
}

.fisp-subject-layout-compact .fisp-subject-grid {
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
}

.fisp-subject-layout-compact .fisp-subject-card {
    display: block;
    width: 100%;
}

.fisp-subject-layout-compact .fisp-subject-card ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 18px !important;
}

.fisp-subject-layout-compact .fisp-subject-card ul li {
    margin: 0 !important;
}

.fisp-subject-layout-compact .fisp-subject-card ul li a {
    padding: 10px 15px !important;
    background: #fcfdfe;
    border: 1px solid #f1f5f9;
}

.fisp-subject-layout-compact .fisp-subject-card ul li a:hover {
    background: #eff6ff;
    border-color: #dbeafe;
}

@media (max-width: 600px) {
    .fisp-subject-layout-compact .fisp-subject-card ul {
        grid-template-columns: 1fr 1fr;
    }
}


/* --- Slide Anything 1910 - 書本輪播內容客製化 --- */
#slider_1910 .owl-item .slide-book {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 20px;
    gap: 30px;
    text-align: left;
}

#slider_1910 .owl-item .slide-book .book {
    flex: 0 0 auto;
    width: 220px;
    /* 固定寬度以對齊圖片 */
    transform: none !important;
    /* 移除 3D 效果恢復平面感 */
    transition: transform 0.3s ease;
}

#slider_1910 .owl-item .slide-book .book:hover {
    transform: translateY(-5px) !important;
    /* 改為簡單的垂直拉起效果 */
}

#slider_1910 .owl-item .slide-book .book img {
    border-radius: 4px;
    box-shadow: 8px 8px 25px rgba(0, 0, 0, 0.12);
}

#slider_1910 .owl-item .slide-book ul {
    flex: 1;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #1f2937;
    font-size: 1.1rem;
    line-height: 1.8;
}

#slider_1910 .owl-item .slide-book ul li {
    margin-bottom: 6px;
    font-weight: 500;
}

/* 針對 GIF 或示意小圖的樣式 */
#slider_1910 .owl-item .slide-book ul li img {
    margin-top: 15px;
    max-width: 140px;
    border: 1px solid #e5e7eb;
    background: white;
    padding: 2px;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
}

/* RWD: 手機版改為垂直排列 */
@media (max-width: 768px) {
    #slider_1910 .owl-item .slide-book {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    #slider_1910 .owl-item .slide-book .book {
        width: 180px;
    }

    #slider_1910 .owl-item .slide-book ul {
        font-size: 1rem;
    }
}