/*
 Theme Name:   Pencil Group Child
 Theme URI:    https://pencil.vn
 Description:  Child theme cho Pencil Group
 Author:       Chuong Dev
 Author URI:   https://pencil.vn
 Template:     remake
 Version:      1.0.0
*/

/* ================= HEADER =================== */
@media (min-width: 48rem) {
    .btn-header-right.md\:block {
        display: block !important;
    }
}
.btn-header-right {
    float: right;
}
.btn-header-right a {
    padding: 9px 15px;
    border-radius: 30px;
}
.btn-header-right .bg-ink {
    background-color: #0d0d0d;
}
.btn-header-right .bg-ink:hover {
    background: #ffca06;
    color: #000;
}
.btn-header-right .bg-amber {
    background-color: #ffb714;
    margin-left: 10px;
    padding: 1px 5px 3px 5px;
    border-radius: 50%;
}
.btn-header-right .text-paper {
    color: #fdfdfd;
}
.btn-header-right .bg-ink:hover .bg-amber {
    background: #FFF;
}
.btn-header-right .py-2\.5 {
    padding-block: calc(var(.25rem) * 2.5);
}
@media (max-width: 1352px) {
    .btn-header-right .text-paper {
        word-wrap: break-word;
        font-size: 10px;
    }
}
@media (max-width: 1080px) {
    .btn-header-right .text-paper {
        display: none;
        opacity: 0;
    }
}

/* ==========================================================================
   PENCIL GROUP - HOMEPAGE MASTER STYLESHEET
   Description: Optimized CSS for the entire homepage and footer
   ========================================================================== */

/* ---------------------------------------------------
   SECTION 1: HERO
--------------------------------------------------- */
#pencil-hero-01 { font-family: 'Be Vietnam Pro', sans-serif; background-color: #FFFFFF; position: relative; overflow: hidden; border-bottom: 1px solid #E5E7EB; padding: 80px 5% 100px; box-sizing: border-box; min-height: 90vh; display: flex; align-items: center; }
#pencil-hero-01 .hero-container { width: 100%; max-width: 1400px; margin: 0 auto; position: relative; z-index: 10; }
#pencil-hero-01 .hero-content { width: 65%; position: relative; z-index: 2; }
#pencil-hero-01 .hero-eyebrow { font-size: 14px; color: #888; text-transform: unset; letter-spacing: 0.1em; margin: 0 0 30px 0; }
#pencil-hero-01 .hero-heading { font-size: clamp(3rem, 8.5vw, 142px); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; color: #090909; margin: 0; text-transform: none; }
#pencil-hero-01 .highlight-wrapper { display: inline-flex; align-items: flex-end; gap: 15px; margin-top: 5px; }
#pencil-hero-01 .highlight-text { position: relative; display: inline-block; z-index: 1; padding: 0 10px; }
#pencil-hero-01 .highlight-text::after { content: ''; position: absolute; left: 0; bottom: 8%; width: 100%; height: 45%; background-color: #ffb714; z-index: -1; }
#pencil-hero-01 .pencil-brand-logo { vertical-align: top; }
#pencil-hero-01 .pencil-brand-logo img { vertical-align: top; width: 90px; }
#pencil-hero-01 .brand-dot { color: #ffb714; }
#pencil-hero-01 .hero-bottom { margin-top: 60px; display: grid; gap: 40px; align-items: end; max-width: 90%; }
#pencil-hero-01 .hero-desc { font-size: clamp(14px, 1.2vw, 18px); color: #666; line-height: 1.6; margin: 0; max-width: 85%; }
#pencil-hero-01 .hero-actions { display: flex; align-items: center; gap: 20px; position: absolute; right: -30%; }
#pencil-hero-01 .btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #090909; border-radius: 50px; padding: 12px 24px; color: #090909; font-size: 14px; text-decoration: none; transition: all 0.3s ease; }
#pencil-hero-01 .btn-outline:hover { background-color: #090909; color: #FFFFFF; }
#pencil-hero-01 .arrow-icon { transition: transform 0.3s ease; }
#pencil-hero-01 .btn-outline:hover .arrow-icon { transform: translate(3px, -3px); }
#pencil-hero-01 .btn-text { font-size: 14px; color: #666; text-decoration: none; transition: color 0.3s; }
#pencil-hero-01 .btn-text:hover { color: #090909; }
#pencil-hero-01 .hero-visual { position: absolute; top: 5%; right: 0; transform: translateY(-50%); width: 35%; z-index: 1; pointer-events: none; }
#pencil-hero-01 .floating-statue { width: 100%; height: auto; object-fit: contain; /*animation: bubbleFloat 6s ease-in-out infinite;*/ transform-origin: center center; }

@keyframes bubbleFloat { 0% { transform: translateY(0px) scale(1); } 33% { transform: translateY(-15px) scale(1.02); } 66% { transform: translateY(10px) scale(0.99); } 100% { transform: translateY(0px) scale(1); } }
@media (max-width: 768px) { #pencil-hero-01 { padding: 120px 5% 80px; align-items: flex-start; } #pencil-hero-01 .hero-content { width: 100%; } #pencil-hero-01 .hero-heading { font-size: 15vw; } #pencil-hero-01 .hero-bottom { grid-template-columns: 1fr; gap: 30px; max-width: 100%; margin-top: 40px; } #pencil-hero-01 .hero-desc { max-width: 100%; } #pencil-hero-01 .hero-visual { top: auto; bottom: -10%; right: -20%; width: 80%; opacity: 0.3; z-index: 0; } }
@media (max-width: 767px) { #pencil-hero-01 .hero-visual { top: 20%; bottom: auto;} #pencil-hero-01 .hero-actions { right: auto; bottom: -60px;} }

/* ---------------------------------------------------
   SECTION 2: YELLOW BANNER
--------------------------------------------------- */
#pencil-section-02 { font-family: 'Be Vietnam Pro', sans-serif; background-color: #ffb714; color: #090909; padding: 140px 5%; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.05); }
#pencil-section-02 .s2-container { max-width: 1400px; margin: 0 auto; }
#pencil-section-02 .s2-eyebrow { font-size: 14px; letter-spacing: 0.05em; margin: 0 0 50px 0; opacity: 0.8; text-transform: unset; }
#pencil-section-02 .s2-heading { font-size: clamp(2.5rem, 5vw, 5.8rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 100px 0; max-width: 1200px; }
#pencil-section-02 .s2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
#pencil-section-02 .s2-grid-item { border-top: 1px solid rgba(9, 9, 9, 0.2); padding-top: 24px; }
#pencil-section-02 .s2-grid-item h3 { font-size: 24px; font-weight: 400; margin: 0 0 8px 0; color: #090909; }
#pencil-section-02 .s2-grid-item p { font-size: 15px; margin: 0; opacity: 0.7; color: #090909; }
@media (max-width: 1024px) { #pencil-section-02 .s2-grid { grid-template-columns: repeat(2, 1fr); gap: 50px 30px; } }
@media (max-width: 768px) { #pencil-section-02 { padding: 100px 5%; } #pencil-section-02 .s2-heading { margin-bottom: 60px; } #pencil-section-02 .s2-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------------------------------------------------
   SECTION 3: CAPABILITIES GRID
--------------------------------------------------- */
#pencil-section-03 { font-family: 'Be Vietnam Pro', sans-serif; background-color: #FFFFFF; padding: 140px 5%; box-sizing: border-box; }
#pencil-section-03 .s3-container { max-width: 1400px; margin: 0 auto; }
#pencil-section-03 .s3-header { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: flex-start; margin-bottom: 80px; }
#pencil-section-03 .s3-eyebrow { font-size: 14px; color: #6B7280; text-transform: unset; letter-spacing: 0.05em; margin: 0 0 24px 0; }
#pencil-section-03 .s3-heading { font-size: clamp(3rem, 5vw, 6.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: #090909; margin: 0; }
#pencil-section-03 .text-muted { color: #888888; }
#pencil-section-03 .s3-desc { font-size: clamp(18px, 1.5vw, 22px); color: #4B5563; line-height: 1.6; margin: 0; padding-top: 10px; }
#pencil-section-03 .s3-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background-color: #E5E7EB; border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden; }
#pencil-section-03 .practice-card { background-color: #FFFFFF; padding: 50px; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; text-decoration: none; color: #090909; transition: background-color 0.4s ease; box-sizing: border-box; }
#pencil-section-03 .practice-card:hover { background-color: #ffb714; }
#pencil-section-03 .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; color: #6B7280; transition: color 0.4s ease; }
#pencil-section-03 .practice-card:hover .card-top { color: #090909; }
#pencil-section-03 .card-num { font-size: 14px; letter-spacing: 0.1em; font-weight: 500; }
#pencil-section-03 .card-arrow { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
#pencil-section-03 .practice-card:hover .card-arrow { transform: translate(4px, -4px); }
#pencil-section-03 .card-title { font-size: clamp(32px, 4vw, 55px); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 20px 0; color: #090909; max-width: 305px; }
#pencil-section-03 .card-info { font-size: 18px; line-height: 1.5; margin: 0 0 20px 0; color: #090909; }
#pencil-section-03 .card-sub { font-size: 14px; line-height: 1.6; color: #6B7280; margin: 0; transition: color 0.4s ease; max-width: 90%; }
#pencil-section-03 .practice-card:hover .card-sub { color: rgba(0, 0, 0, 0.75); }
@media (max-width: 1024px) { #pencil-section-03 .s3-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 60px; } #pencil-section-03 .s3-desc { padding-top: 0; } }
@media (max-width: 768px) { #pencil-section-03 { padding: 100px 5%; } #pencil-section-03 .s3-grid { grid-template-columns: 1fr; } #pencil-section-03 .practice-card { padding: 32px; min-height: 320px; } }

/* ---------------------------------------------------
   SECTION 4: WHAT WE'VE BUILT
--------------------------------------------------- */
#pencil-section-04 { font-family: 'Be Vietnam Pro', sans-serif; background-color: #FFFFFF; padding: 140px 5%; box-sizing: border-box; border-bottom: 1px solid #E5E7EB; }
#pencil-section-04 .s4-container { max-width: 1400px; margin: 0 auto; }
#pencil-section-04 .s4-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
#pencil-section-04 .s4-eyebrow { font-size: 14px; color: #6B7280; text-transform: unset; letter-spacing: 0.05em; margin: 0 0 24px 0; }
#pencil-section-04 .s4-heading { font-size: clamp(3rem, 6vw, 6rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: #090909; margin: 0; }
#pencil-section-04 .all-cases-link { font-size: 14px; color: #6B7280; text-decoration: none; margin-bottom: 15px; transition: color 0.3s; }
#pencil-section-04 .all-cases-link:hover { color: #090909; }
#pencil-section-04 .s4-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
#pencil-section-04 .built-card { border-radius: 16px; padding: 50px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; text-decoration: none !important; aspect-ratio: 4/3; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s; }
#pencil-section-04 .built-card:hover { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
#pencil-section-04 .span-7 { grid-column: span 7; } #pencil-section-04 .span-5 { grid-column: span 5; }
#pencil-section-04 .bg-yellow { background-color: #ffb714; color: #090909; }
#pencil-section-04 .bg-black { background-color: #0F0F0F; color: #FFFFFF; }
#pencil-section-04 .bg-cyan { background-color: #15D2CD; color: #090909; }
#pencil-section-04 .bg-magenta { background-color: #F1007E; color: #FFFFFF; }
#pencil-section-04 .card-top, #pencil-section-04 .card-bottom { position: relative; z-index: 2; }
#pencil-section-04 .card-top { display: flex; justify-content: space-between; align-items: flex-start; }
#pencil-section-04 .card-meta { font-size: 13px; letter-spacing: 0.1em; text-transform: unset; opacity: 0.8; font-weight: 500; }
#pencil-section-04 .card-arrow { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0.7; }
#pencil-section-04 .built-card:hover .card-arrow { transform: translate(4px, -4px); opacity: 1; }
#pencil-section-04 .card-client { font-size: 15px; opacity: 0.8; margin-bottom: 12px; display: block; }
#pencil-section-04 .card-title { font-size: clamp(28px, 3.5vw, 48px); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
#pencil-section-04 .js-s4-fade h3.card-title { color: #FFF; }
#pencil-section-04 .card-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.15; pointer-events: none; }
#pencil-section-04 .bg-black .card-bg-svg, #pencil-section-04 .bg-magenta .card-bg-svg { opacity: 0.3; filter: none; }
@media (max-width: 1024px) { #pencil-section-04 .built-card { padding: 40px; } }
@media (max-width: 768px) { #pencil-section-04 { padding: 100px 5%; } #pencil-section-04 .s4-header { flex-direction: column; align-items: flex-start; gap: 20px; } #pencil-section-04 .built-card.span-7, #pencil-section-04 .built-card.span-5 { grid-column: span 12; aspect-ratio: auto; min-height: 350px; } }

/* ---------------------------------------------------
   SECTION 5: THE COLLECTIVE ENGINE
--------------------------------------------------- */
#pencil-section-05 { font-family: 'Be Vietnam Pro', sans-serif; background-color: #0F0F0F; color: #FFFFFF; padding: 120px 5%; box-sizing: border-box; overflow: hidden; }
#pencil-section-05 .s5-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: center; }
#pencil-section-05 .s5-eyebrow { font-size: 14px; color: #ffb714; text-transform: unset; letter-spacing: 0.1em; margin: 0 0 30px 0; font-weight: 500; }
#pencil-section-05 .s5-heading { font-size: clamp(3rem, 5vw, 6.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; color: #FFFFFF; margin: 0 0 30px 0; }
#pencil-section-05 .text-muted { color: #555555; }
#pencil-section-05 .s5-desc { font-size: clamp(16px, 1.5vw, 18px); color: #AAAAAA; line-height: 1.6; margin: 0 0 40px 0; max-width: 90%; }
#pencil-section-05 .s5-link { font-size: 16px; color: #ffb714; text-decoration: none; transition: opacity 0.3s ease; }
#pencil-section-05 .s5-link:hover { opacity: 0.7; }
#pencil-section-05 .s5-right { display: flex; justify-content: center; align-items: center; }
#pencil-section-05 .engine-diagram { position: relative; width: 100%; max-width: 700px; aspect-ratio: 1 / 1; }
#pencil-section-05 .engine-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#pencil-section-05 .engine-svg line { stroke: #ffb714; stroke-width: 0.25; stroke-dasharray: 2 2; opacity: 0.5; }
#pencil-section-05 .circle-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160px; height: 160px; background-color: #ffb714; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #090909; z-index: 10; box-shadow: 0 0 0 10px rgba(255, 183, 20, 0.1); }
#pencil-section-05 .circle-center h4 { font-size: 22px; font-weight: 600; margin: 0 0 4px 0; letter-spacing: -0.02em; }
#pencil-section-05 .circle-center p { font-size: 13px; margin: 0; opacity: 0.8; font-weight: 500; }
#pencil-section-05 .circle-node { position: absolute; width: 110px; height: 110px; background-color: #0F0F0F; border: 1px solid #333333; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 5; transition: all 0.3s ease; cursor: pointer; box-sizing: border-box; padding: 10px; }
#pencil-section-05 .circle-node h5 { font-size: 12px; font-weight: 500; margin: 0 0 4px 0; color: #ffffff; line-height: 1.1; transition: color 0.3s ease; }
#pencil-section-05 .circle-node p { font-size: 10px; margin: 0; color: #b1b1b1; line-height: 1.1; transition: color 0.3s ease; }
#pencil-section-05 .circle-node:hover { border-color: #ffb714; background-color: rgba(255, 183, 20, 0.05); transform: translate(-50%, -50%) scale(1.05) !important; z-index: 20; }
#pencil-section-05 .circle-node:hover h5, #pencil-section-05 .circle-node:hover p { color: #ffb714; }
#pencil-section-05 .pos-top { top: 10%; left: 50%; transform: translate(-50%, -50%); } #pencil-section-05 .pos-top-right { top: 20%; left: 80%; transform: translate(-50%, -50%); } #pencil-section-05 .pos-right { top: 50%; left: 90%; transform: translate(-50%, -50%); } #pencil-section-05 .pos-bottom-right { top: 80%; left: 80%; transform: translate(-50%, -50%); } #pencil-section-05 .pos-bottom { top: 90%; left: 50%; transform: translate(-50%, -50%); } #pencil-section-05 .pos-bottom-left { top: 80%; left: 20%; transform: translate(-50%, -50%); } #pencil-section-05 .pos-left { top: 50%; left: 10%; transform: translate(-50%, -50%); } #pencil-section-05 .pos-top-left { top: 20%; left: 20%; transform: translate(-50%, -50%); }
#pencil-section-05 .engine-svg { opacity: 0; transition: opacity 0.8s ease; }
#pencil-section-05 .circle-center { opacity: 0; margin-top: 20px; transform: translate(-50%, -50%) scale(0.5); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
#pencil-section-05 .circle-node { opacity: 0; margin-top: 20px; transform: translate(-50%, -50%) scale(0.8); transition: all 0.5s ease; }
#pencil-section-05.is-animated .circle-center { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); }
#pencil-section-05.is-animated .engine-svg { opacity: 1; transition-delay: 0.3s; }
#pencil-section-05.is-animated .pos-top { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.4s; } #pencil-section-05.is-animated .pos-top-right { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.5s; } #pencil-section-05.is-animated .pos-right { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.6s; } #pencil-section-05.is-animated .pos-bottom-right { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.7s; } #pencil-section-05.is-animated .pos-bottom { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.8s; } #pencil-section-05.is-animated .pos-bottom-left { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.9s; } #pencil-section-05.is-animated .pos-left { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 1.0s; } #pencil-section-05.is-animated .pos-top-left { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 1.1s; }
@media (max-width: 1024px) { #pencil-section-05 .s5-container { grid-template-columns: 1fr; gap: 80px; } #pencil-section-05 .s5-left { text-align: center; } #pencil-section-05 .s5-desc { margin: 0 auto 40px auto; } }
@media (max-width: 768px) { #pencil-section-05 { padding: 100px 5%; } #pencil-section-05 .circle-center { width: 130px; height: 130px; } #pencil-section-05 .circle-node { width: 90px; height: 90px; padding: 5px; } #pencil-section-05 .circle-node h5 { font-size: 10px; } #pencil-section-05 .circle-node p { font-size: 8px; } }

/* ---------------------------------------------------
   SECTION 6: FIELD NOTES
--------------------------------------------------- */
#pencil-section-06 { font-family: 'Be Vietnam Pro', sans-serif; background-color: #FFFFFF; padding: 140px 5%; box-sizing: border-box; border-bottom: 1px solid #E5E7EB; }
#pencil-section-06 .s6-container { max-width: 1400px; margin: 0 auto; }
#pencil-section-06 .s6-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
#pencil-section-06 .s6-eyebrow { font-size: 14px; color: #6B7280; text-transform: unset; letter-spacing: 0.05em; margin: 0 0 24px 0; }
#pencil-section-06 .s6-heading { font-size: clamp(3rem, 5vw, 5rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: #090909; margin: 0; }
#pencil-section-06 .s6-link { font-size: 14px; color: #6B7280; text-decoration: none; margin-bottom: 12px; transition: color 0.3s ease; }
#pencil-section-06 .s6-link:hover { color: #090909; }
#pencil-section-06 .s6-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background-color: #E5E7EB; border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden; }
#pencil-section-06 .article-card { background-color: #FFFFFF; padding: 50px 40px; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; text-decoration: none !important; color: #090909; transition: background-color 0.4s ease; box-sizing: border-box; }
#pencil-section-06 .article-card:hover, #pencil-section-06 .article-card.active-bg { background-color: #f5f0f2; }
#pencil-section-06 .card-eyebrow { font-size: 13px; color: #ffb714; letter-spacing: 0.1em; text-transform: unset; font-weight: 500; margin: 0 0 40px 0; }
#pencil-section-06 .card-title { font-size: clamp(24px, 2vw, 32px); font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; margin: 0; color: #090909; }
#pencil-section-06 .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; color: #6B7280; transition: color 0.3s ease; }
#pencil-section-06 .card-meta { font-size: 13px; }
#pencil-section-06 .card-arrow { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
#pencil-section-06 .article-card:hover .card-arrow { transform: translate(4px, -4px); color: #090909; }
@media (max-width: 1024px) { #pencil-section-06 .s6-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { #pencil-section-06 { padding: 100px 5%; } #pencil-section-06 .s6-header { flex-direction: column; align-items: flex-start; gap: 20px; } #pencil-section-06 .s6-grid { grid-template-columns: 1fr; } #pencil-section-06 .article-card { padding: 40px 30px; min-height: 300px; } }

/* ---------------------------------------------------
   SECTION 7: MARQUEE
--------------------------------------------------- */
#pencil-section-07 { font-family: 'Be Vietnam Pro', sans-serif; background-color: #FFFFFF; padding: 10px 0 50px 0; box-sizing: border-box; border-bottom: 1px solid #E5E7EB; overflow: hidden; }
#pencil-section-07 .s7-eyebrow { text-align: center; font-size: 13px; color: #6B7280; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 60px 0; font-weight: 500; }
#pencil-section-07 .s7-marquee-wrapper { display: flex; width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
#pencil-section-07 .s7-marquee-track { display: flex; align-items: center; width: max-content; animation: marqueeScroll 40s linear infinite; will-change: transform; }
#pencil-section-07 .s7-marquee-track:hover { animation-play-state: paused; }
#pencil-section-07 .s7-marquee-item { display: flex; align-items: center; gap: 60px; padding-right: 60px; }
#pencil-section-07 .s7-marquee-item span { font-size: clamp(32px, 4vw, 56px); color: #333333; font-weight: 400; white-space: nowrap; }
#pencil-section-07 .s7-marquee-item span.star { color: #ffb714; font-size: clamp(20px, 2vw, 30px); line-height: 1; transform: translateY(-4px); }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 768px) { #pencil-section-07 { padding: 80px 0; } #pencil-section-07 .s7-eyebrow { margin-bottom: 40px; } #pencil-section-07 .s7-marquee-item { gap: 40px; padding-right: 40px; } }

/* ---------------------------------------------------
   FOOTER SECTION
--------------------------------------------------- */
#pencil-footer-left { font-family: 'Be Vietnam Pro', sans-serif; background-color: transparent; padding: 20px 0; box-sizing: border-box; }
#pencil-footer-left .footer-eyebrow { font-size: 14px; color: #ffb714; letter-spacing: 0.1em; font-weight: 500; margin: 0 0 30px 0; text-transform: lowercase; }
#pencil-footer-left .footer-heading { font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: #FFFFFF; margin: 0 0 40px 0; }
#pencil-footer-left .highlight-wrapper { display: inline-block; margin-top: 5px; }
#pencil-footer-left .highlight-text { position: relative; display: inline-block; z-index: 1; padding: 0 15px 0 5px; }
#pencil-footer-left .highlight-text::after { content: ''; position: absolute; left: 0; bottom: 8%; width: 100%; height: 45%; background-color: #ffb714; z-index: -1; }
#pencil-footer-left .btn-footer { display: inline-flex; align-items: center; gap: 20px; background-color: #ffb714; color: #090909; font-size: 16px; font-weight: 500; padding: 12px 12px 12px 32px; border-radius: 50px; text-decoration: none; transition: transform 0.3s ease, background-color 0.3s ease; }
#pencil-footer-left .btn-footer:hover { transform: translateY(-3px); background-color: #ffffff; }
#pencil-footer-left .icon-circle { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; background-color: #090909; border-radius: 50%; color: #ffb714; transition: transform 0.3s ease; }
#pencil-footer-left .btn-footer:hover .icon-circle { transform: translateX(4px); }
@media (max-width: 768px) { #pencil-footer-left .footer-heading { font-size: 14vw; margin-bottom: 30px; } }

#pencil-footer-right { font-family: 'Be Vietnam Pro', sans-serif; background-color: transparent; padding: 20px 0; box-sizing: border-box; width: 100%; }
#pencil-footer-right .footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 60px; column-gap: 40px; }
#pencil-footer-right .footer-eyebrow { font-size: 13px; color: #888888; letter-spacing: 0.1em; text-transform: unset; font-weight: 500; margin: 0 0 24px 0; }
#pencil-footer-right .footer-list { list-style: none; padding: 0; margin: 0; }
#pencil-footer-right .footer-list li { margin-bottom: 12px; font-size: 15px; color: #e1ddde; line-height: 1.5; }
#pencil-footer-right .footer-list a { color: #e1ddde; text-decoration: none; transition: color 0.3s ease; }
#pencil-footer-right .footer-list a:hover { color: #ffb714; }
@media (max-width: 768px) { #pencil-footer-right .footer-grid { /*grid-template-columns: 1fr;*/ grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }

#pencil-footer-bottom { font-family: 'Be Vietnam Pro', sans-serif; background-color: transparent; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 40px; overflow: hidden; position: relative; margin-top: 60px; }
#pencil-footer-bottom .fb-container { max-width: 1400px; margin: 0 auto; padding: 0; position: relative; z-index: 10; }
#pencil-footer-bottom .fb-top-bar { display: flex; justify-content: space-between; align-items: flex-start; }
#pencil-footer-bottom .fb-eyebrow { font-size: 13px; color: #888888; letter-spacing: 0.1em; text-transform: unset; font-weight: 500; margin: 0 0 10px 0; }
#pencil-footer-bottom .fb-copyright, #pencil-footer-bottom .fb-logo-wrapper a { font-size: 13px; color: #757575; margin: 0; }
#pencil-footer-bottom .fb-logo { height: 20px; width: auto; object-fit: contain; opacity: 0.8; }
#pencil-footer-bottom .fb-huge-watermark { font-size: 22vw; font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: rgb(255 255 255 / 9%); text-align: center; margin-top: 20px; pointer-events: none; user-select: none; }
@media (max-width: 768px) { #pencil-footer-bottom { margin-top: 40px; padding-top: 30px; } #pencil-footer-bottom .fb-top-bar { flex-direction: column; gap: 20px; padding: 0 10px; } #pencil-footer-bottom .fb-huge-watermark { font-size: 32vw; margin-top: 30px; } }

/* ---------------------------------------------------
   GLOBAL FADE ANIMATION CLASSES
--------------------------------------------------- */
.js-hero-fade, .js-s2-fade, .js-s3-fade, .js-s4-fade, .js-s5-fade, .js-s6-fade, .js-s7-fade, .js-footer-fade, .js-fb-fade, .js-f-right-fade .footer-block {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.is-animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==========================================================================
   PENCIL GROUP - ABOUT PAGE STYLESHEET
   Description: Namespace độc lập (ab-*) đảm bảo tuyệt đối không xung đột
   ========================================================================== */

/* --- CẤU TRÚC CHUNG --- */
#ab-hero, #ab-philosophy, #ab-beliefs, #ab-model, #ab-team {
    font-family: 'Be Vietnam Pro', sans-serif;
    box-sizing: border-box;
}

.ab-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.ab-eyebrow {
    font-size: 14px;
    color: #888888;
    letter-spacing: 0.1em;
    margin: 0 0 24px 0;
}

/* --- SECTION 1: HERO --- */
#ab-hero {
    background-color: #FFFFFF;
    padding: 100px 0 120px 0;
    border-bottom: 1px solid #E5E7EB;
    overflow: hidden;
}

.ab-hero-grid {
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: 60px;
    align-items: center;
}

.ab-hero-heading {
    font-size: clamp(3rem, 7vw, 110px) !important;
    font-weight: 500 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 40px 0;
}

.ab-hero-desc {
    font-size: clamp(16px, 1.3vw, 20px);
    color: #666666;
    line-height: 1.6;
    margin: 0;
    max-width: 90%;
}

/* Hiệu ứng lơ lửng cho hình ảnh bên phải */
.ab-floating-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ab-float-img {
    max-width: 90%;
    height: auto;
    border-radius: 40px; /* Bo góc mềm mại theo thiết kế */
    /*animation: abFloatAnim 6s ease-in-out infinite;*/
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

@keyframes abFloatAnim {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* --- SECTION 2: PHILOSOPHY --- */
#ab-philosophy {
    background-color: #FFFFFF;
    padding: 140px 0;
    border-bottom: 1px solid #E5E7EB;
}

.ab-phil-grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 40px;
}

.ab-phil-heading {
    font-size: clamp(2.5rem, 4.5vw, 45px) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 40px 0;
    max-width: 95%;
}

/* Vạch highlight màu vàng dưới chữ "build" */
.ab-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.ab-highlight::after {
    content: '';
    position: absolute;
    left: -2px;
    bottom: 8%;
    width: calc(100% + 4px);
    height: 40%;
    background-color: #ffb714;
    z-index: -1;
}

.ab-phil-desc {
    font-size: clamp(16px, 1.3vw, 20px);
    color: #555555;
    line-height: 1.6;
    margin: 0;
    max-width: 85%;
}

/* --- SECTION 3: OPERATING BELIEFS --- */
#ab-beliefs {
    background-color: #FFFFFF;
    padding: 140px 0;
}

.ab-beliefs-header {
    margin-bottom: 80px;
}

.ab-heading-large {
    font-size: clamp(3rem, 5vw, 70px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.04em !important;
    margin: 0;
}

/* Lưới 2x2 bọc viền mảnh */
.ab-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: #E5E7EB;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
}

.ab-belief-card {
    background-color: #FFFFFF;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 350px;
}

.ab-card-num {
    font-size: 13px;
    color: #ffb714;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 30px;
}

.ab-card-title {
    font-size: clamp(22px, 2vw, 34px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 20px 0;
}

.ab-card-desc {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* --- SECTION 4: THE MODEL (YELLOW) --- */
#ab-model {
    background-color: #ffb714;
    padding: 140px 0;
    color: #090909;
}

#ab-model .ab-eyebrow {
    color: #090909;
    opacity: 0.7;
}

.ab-model-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 60px;
}

.ab-model-heading {
    font-size: clamp(3rem, 5vw, 65px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin: 0;
}

.ab-model-desc {
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.5;
    margin: 0 0 60px 0;
    font-weight: 400;
}

.ab-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    border-top: 1px solid rgba(9, 9, 9, 0.15);
    padding-top: 30px;
}

.ab-stat-item h4 {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 8px 0;
}

.ab-stat-item p {
    font-size: 13px;
    opacity: 0.75;
    line-height: 1.4;
    margin: 0;
}

/* --- SECTION 5: THE TEAM --- */
#ab-team {
    background-color: #FFFFFF;
    padding: 140px 0;
}

.ab-team-header {
    margin-bottom: 80px;
}

.ab-team-heading {
    font-size: clamp(3rem, 5vw, 75px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 0;
}

.ab-text-muted {
    color: #AAAAAA;
}

.ab-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-bottom: 60px;
    background-color: #e1e1e1;
    border: 1px solid #e1e1e1;
    border-radius: 16px;
    overflow: hidden;
}

.ab-member-card {
    background-color: #FFFFFF;
    padding: 50px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tự động tạo khung viền cam/vàng bọc avatar */
.ab-avatar-wrapper {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    padding: 6px;
    border: 2px solid #ffb714;
    margin-bottom: 24px;
    background-color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(255, 183, 20, 0.15);
}

.ab-avatar-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50% !important;
    background-color: #F4F4F4;
}

.ab-member-name {
    font-size: 20px;
    font-weight: 500;
    color: #090909;
    margin: 0 0 6px 0;
}

.ab-member-role {
    font-size: 13px;
    color: #888888;
    margin: 0;
}

.ab-team-footer {
    text-align: left;
}

.ab-careers-link {
    font-size: 14px;
    color: #ffb714;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

.ab-careers-link:hover {
    opacity: 0.7;
}

/* --- HIỆU ỨNG FADE KHI SCROLL --- */
.js-ab-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-ab-fade.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 1024px) {
    .ab-hero-grid, .ab-model-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ab-phil-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ab-grid-2x2, .ab-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ab-phil-desc {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    #ab-hero, #ab-philosophy, #ab-beliefs, #ab-model, #ab-team {
        padding: 80px 0;
    }
    .ab-grid-2x2, .ab-team-grid, .ab-stats-grid {
        grid-template-columns: 1fr;
    }
    .ab-belief-card {
        padding: 40px 30px;
        min-height: auto;
    }
    .ab-avatar-wrapper {
        width: 110px; height: 110px;
    }
}

/* ==========================================================================
   PENCIL GROUP - CAPABILITIES PAGE STYLESHEET
   Description: Tách biệt hoàn toàn qua namespace (cap-*)
   ========================================================================== */

/* --- CẤU TRÚC CHUNG & BẢNG MÀU --- */
.cap-section {
    font-family: 'Be Vietnam Pro', sans-serif;
    box-sizing: border-box;
    width: 100%;
}

.cap-section * {
    box-sizing: border-box;
}

.cap-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Các Modifier Màu Nền & Màu Chữ Tương Ứng */
.cap-bg-white   { background-color: #FFFFFF; color: #090909; }
.cap-bg-yellow  { background-color: #ffb714; color: #090909; }
.cap-bg-magenta { background-color: #F1007E; color: #FFFFFF; }
.cap-bg-black   { background-color: #0F0F0F; color: #FFFFFF; }
.cap-bg-cyan    { background-color: #15D2CD; color: #090909; }
.cap-bg-violet  { background-color: #8247E5; color: #FFFFFF; }
.cap-bg-lime    { background-color: #A3FF12; color: #090909; }
.cap-bg-orange  { background-color: #FFA200; color: #090909; }

/* Tùy chỉnh màu sắc thẻ con dựa theo nền cha */
.cap-bg-white .cap-eyebrow,
.cap-bg-yellow .cap-eyebrow,
.cap-bg-cyan .cap-eyebrow,
.cap-bg-lime .cap-eyebrow,
.cap-bg-orange .cap-eyebrow {
    color: rgba(9, 9, 9, 0.65);
}

.cap-bg-magenta .cap-eyebrow,
.cap-bg-black .cap-eyebrow,
.cap-bg-violet .cap-eyebrow {
    color: rgba(255, 255, 255, 0.65);
}

/* --- HEADER SECTION --- */
#cap-header {
    padding: 120px 0 80px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cap-eyebrow {
    font-size: 13px;
    letter-spacing: 0.1em;
    margin: 0 0 24px 0;
}

.cap-title-huge {
    font-size: clamp(3rem, 6.5vw, 120px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 30px 0;
}
.text-muted-foreground {
    color: #57554f;
}

.cap-desc-main {
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 1.6;
    max-width: 800px;
    margin: 0;
    opacity: 0.85;
}

/* --- PRACTICE ROWS LAYOUT --- */
.cap-practice-row {
    padding: 120px 0;
    /* Dải line phân cách mờ ở đáy mỗi khối */
    border-bottom: 1px solid rgba(128, 128, 128, 0.15); 
}

.cap-grid-layout {
    display: grid;
    grid-template-columns: 4.5fr 7.5fr;
    gap: 60px;
    align-items: flex-start;
}

.cap-practice-title {
    font-size: clamp(2.5rem, 5vw, 90px) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 30px 0;
}
#cap-p3 h2.cap-practice-title,
#cap-p4 h2.cap-practice-title,
#cap-p6 h2.cap-practice-title {
    color: #FFF;
}

.cap-practice-sub {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0;
}

.cap-practice-intro {
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.55;
    margin: 0 0 50px 0;
    font-weight: 400;
    opacity: 0.95;
}

/* Sub-lists Layout */
.cap-lists-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.cap-list-heading {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    font-weight: 400 !important;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7f7f7f !important;;
}

ul.cap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.cap-list li {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
    position: relative;
    padding-left: 14px;
    opacity: 0.85;
}

ul.cap-list li:last-child {
    margin-bottom: 0;
}

/* Custom Bullet nhỏ tinh tế */
ul.cap-list li::before {
    content: '-';
    position: absolute;
    left: 0;
    top: 0;
    font-size: small;
    opacity: 1;
    background-color: currentColor;
    height: 0;
}

/* --- HIỆU ỨNG FADE KHI SCROLL --- */
.js-cap-fade {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-cap-fade.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 1024px) {
    .cap-grid-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cap-practice-row {
        padding: 80px 0;
    }
    .cap-practice-intro {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    #cap-header {
        padding: 100px 0 60px 0;
    }
    .cap-practice-row {
        padding: 60px 0;
    }
    .cap-lists-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ==========================================================================
   PENCIL GROUP - WORK PAGE STYLESHEET
   Description: Namespace độc lập (wk-*) đảm bảo tuyệt đối không xung đột
   ========================================================================== */

/* --- CẤU TRÚC CHUNG --- */
.wk-section {
    font-family: 'Be Vietnam Pro', sans-serif;
    box-sizing: border-box;
    width: 100%;
}

.wk-section * {
    box-sizing: border-box;
}

.wk-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* --- BẢNG MÀU CHUYÊN BIỆT --- */
.wk-bg-yellow  { background-color: #ffb714; color: #090909; }
.wk-bg-magenta { background-color: #F1007E; color: #FFFFFF; }
.wk-bg-black   { background-color: #0F0F0F; color: #FFFFFF; }
.wk-bg-cyan    { background-color: #15D2CD; color: #090909; }
.wk-bg-lime    { background-color: #A3FF12; color: #090909; }
.wk-bg-violet  { background-color: #8247E5; color: #FFFFFF; }

/* --- HEADER SECTION --- */
#wk-header {
    background-color: #FFFFFF;
    padding: 120px 0 80px 0;
}

.wk-eyebrow {
    font-size: 13px;
    letter-spacing: 0.1em;
    margin: 0 0 24px 0;
    color: #888888;
}

.wk-title-huge {
    font-size: clamp(3rem, 6.5vw, 120px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 30px 0;
}

.wk-text-muted {
    color: #AAAAAA;
}

.wk-desc-main {
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 1.6;
    color: #555555;
    max-width: 800px;
    margin: 0;
}

/* --- DANH SÁCH CASE STUDY CẤU TRÚC LƯỚI --- */
#wk-cases {
    padding-bottom: 140px;
    background-color: #FFFFFF;
}

.wk-cases-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Khoảng cách dọc giữa các thẻ màu */
}

/* Thẻ Case Study cha */
.wk-case-card {
    border-radius: 16px;
    padding: 60px 50px;
    display: grid;
    /* Tỷ lệ 3 cột chuẩn xác theo ảnh: 5 phần - 3.5 phần - 3.5 phần */
    grid-template-columns: 5fr 3.5fr 3.5fr; 
    gap: 50px;
    align-items: flex-start;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.wk-case-card:hover {
    transform: translateY(-4px); /* Nhấc nhẹ thẻ lên khi tương tác */
}

/* Căn chỉnh màu sắc thẻ nhỏ theo nền cha tương ứng */
.wk-bg-yellow .wk-tags, .wk-bg-yellow .wk-year, .wk-bg-yellow .wk-block-label,
.wk-bg-cyan .wk-tags,   .wk-bg-cyan .wk-year,   .wk-bg-cyan .wk-block-label,
.wk-bg-lime .wk-tags,   .wk-bg-lime .wk-year,   .wk-bg-lime .wk-block-label {
    color: rgba(9, 9, 9, 0.65);
}

.wk-bg-magenta .wk-tags, .wk-bg-magenta .wk-year, .wk-bg-magenta .wk-block-label,
.wk-bg-black .wk-tags,   .wk-bg-black .wk-year,   .wk-bg-black .wk-block-label,
.wk-bg-violet .wk-tags,  .wk-bg-violet .wk-year,  .wk-bg-violet .wk-block-label {
    color: rgba(255, 255, 255, 0.65);
}

/* --- CỘT 1 (MAIN HEADER) --- */
.wk-case-col-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 280px;
}

.wk-case-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

.wk-tags { font-weight: 500; }
.wk-year { font-weight: 500; opacity: 0.8; }

.wk-client {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 12px 0;
    opacity: 0.9;
}

.wk-case-title {
    font-size: clamp(26px, 2.5vw, 45px) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 40px 0;
    max-width: 95%;
}

.wk-case-card.wk-bg-magenta .wk-case-title,
.wk-case-card.wk-bg-black .wk-case-title,
.wk-case-card.wk-bg-violet .wk-case-title {
    color: #FFF;
}

.wk-case-link {
    font-size: 13px;
    letter-spacing: 0.02em;
    text-decoration: none;
    font-weight: 500;
    color: currentColor;
    opacity: 0.8;
    transition: opacity 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    width: max-content;
}

.wk-case-link:hover {
    opacity: 1;
}

/* --- CỘT 2 & CỘT 3 (SUB INFO BLOCKS) --- */
.wk-case-col-sub {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Khoảng cách giữa block trên và block dưới */
}

.wk-info-block {
    display: flex;
    flex-direction: column;
}

.wk-block-label {
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    font-weight: 400 !important;
    margin: 0 0 12px 0;
}

.wk-block-text {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    opacity: 0.9;
}

/* Danh sách gạch đầu dòng mục Impact */
ul.wk-impact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.wk-impact-list li {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 10px;
    position: relative;
    padding-left: 14px;
    opacity: 0.9;
}

ul.wk-impact-list li:last-child {
    margin-bottom: 0;
}

ul.wk-impact-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.7;
}

/* --- HIỆU ỨNG FADE KHI SCROLL --- */
.js-wk-fade {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-wk-fade.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 1200px) {
    .wk-case-card {
        grid-template-columns: 1fr; /* Đưa về 1 cột trên màn hình nhỏ */
        gap: 40px;
        padding: 50px 40px;
    }
    .wk-case-col-main {
        min-height: auto;
    }
    .wk-case-title {
        margin-bottom: 24px;
    }
    .wk-case-col-sub {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    #wk-header {
        padding: 100px 0 60px 0;
    }
    #wk-cases {
        padding-bottom: 80px;
    }
    .wk-case-card {
        padding: 40px 30px;
    }
}

/* ==========================================================================
   PENCIL GROUP - ECOSYSTEM PAGE STYLESHEET
   Description: Namespace độc lập (eco-*) đảm bảo tuyệt đối không xung đột
   ========================================================================== */

/* --- CẤU TRÚC CHUNG --- */
.eco-section {
    font-family: 'Be Vietnam Pro', sans-serif;
    box-sizing: border-box;
    width: 100%;
    background-color: #FFFFFF; /* Màu nền trắng chủ đạo của trang này */
}

.eco-section * { box-sizing: border-box; }

.eco-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.eco-eyebrow {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #888888;
    margin: 0 0 24px 0;
}

.eco-text-muted { color: #888888; }

/* --- BẢNG MÀU CHUYÊN BIỆT CHO LƯỚI --- */
.eco-bg-yellow  { background-color: #ffb714; color: #090909; }
.eco-bg-white   { background-color: #FFFFFF; color: #090909; } /* Ô trắng chữ đen */
.eco-bg-magenta { background-color: #F1007E; color: #FFFFFF; }
.eco-bg-black   { background-color: #0F0F0F; color: #FFFFFF; }
.eco-bg-cyan    { background-color: #15D2CD; color: #090909; }
.eco-bg-violet  { background-color: #8247E5; color: #FFFFFF; }
.eco-bg-lime    { background-color: #A3FF12; color: #090909; }
.eco-bg-orange  { background-color: #FFA200; color: #090909; }

/* --- SECTION 1: HERO --- */
#eco-hero {
    padding: 120px 0;
}

.eco-hero-grid {
    display: grid;
    grid-template-columns: 12fr 3fr;
    gap: 60px;
    align-items: center;
}

.eco-hero-heading {
    font-size: clamp(3rem, 6vw, 120px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 30px 0;
}

.eco-hero-desc {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    color: #555555;
    margin: 0;
    max-width: 90%;
}

.eco-visual-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.eco-hero-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    animation: ecoFloat 6s ease-in-out infinite;
}

@keyframes ecoFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* --- SECTION 2: THE SPIDERWEB DIAGRAM (LIGHT) --- */
#eco-diagram-sec {
    padding: 60px 0 120px 0;
    border-bottom: 1px solid #E5E7EB; /* Đường phân cách */
}

.eco-diagram-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.eco-engine-diagram {
    position: relative;
    width: 100%;
    max-width: 700px;
    aspect-ratio: 1 / 1;
}

.eco-engine-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Line vàng đậm nét hơn chút vì nằm trên nền trắng */
.eco-engine-svg line {
    stroke: #ffb714;
    stroke-width: 0.3;
    stroke-dasharray: 2 2;
    opacity: 0.8; 
}

.eco-circle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    background-color: #ffb714;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #090909;
    z-index: 10;
    box-shadow: 0 0 0 8px rgba(255, 183, 20, 0.15); 
}

.eco-circle-center h4 { font-size: 16px; font-weight: 500; margin: 0 0 2px 0; letter-spacing: -0.02em; }
.eco-circle-center p { font-size: 10px; margin: 0; opacity: 0.8; font-weight: 500; }

/* Vệ tinh màu đen, chữ trắng */
.eco-circle-node {
    position: absolute;
    width: 100px; 
    height: 100px;
    background-color: #0F0F0F; 
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    padding: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.eco-circle-node h5 {
    font-size: 11px !important;
    font-weight: 500 !important;
    margin: 0 0 4px 0;
    color: #FFFFFF !important;
    line-height: 1.1 !important;
}
.eco-circle-node p { font-size: 8px; margin: 0; color: #AAAAAA; line-height: 1.1; }

.eco-circle-node:hover {
    background-color: #ffb714;
    transform: translate(-50%, -50%) scale(1.08) !important;
    z-index: 20;
}
.eco-circle-node:hover h5, .eco-circle-node:hover p { color: #090909; }

/* Tọa độ vệ tinh */
.eco-engine-diagram .pos-top { top: 10%; left: 50%; transform: translate(-50%, -50%); }
.eco-engine-diagram .pos-top-right { top: 20%; left: 80%; transform: translate(-50%, -50%); }
.eco-engine-diagram .pos-right { top: 50%; left: 90%; transform: translate(-50%, -50%); }
.eco-engine-diagram .pos-bottom-right { top: 80%; left: 80%; transform: translate(-50%, -50%); }
.eco-engine-diagram .pos-bottom { top: 90%; left: 50%; transform: translate(-50%, -50%); }
.eco-engine-diagram .pos-bottom-left { top: 80%; left: 20%; transform: translate(-50%, -50%); }
.eco-engine-diagram .pos-left { top: 50%; left: 10%; transform: translate(-50%, -50%); }
.eco-engine-diagram .pos-top-left { top: 20%; left: 20%; transform: translate(-50%, -50%); }

/* ANIMATION HỆ THỐNG */
.eco-engine-svg { opacity: 0; transition: opacity 0.8s ease; }
.eco-circle-center { opacity: 0; margin-top: 20px; transform: translate(-50%, -50%) scale(0.5); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.eco-circle-node { opacity: 0; margin-top: 20px; transform: translate(-50%, -50%) scale(0.8); transition: all 0.5s ease; }

#eco-diagram-sec.is-animated .eco-circle-center { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); }
#eco-diagram-sec.is-animated .eco-engine-svg { opacity: 1; transition-delay: 0.3s; }
#eco-diagram-sec.is-animated .pos-top { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.4s; }
#eco-diagram-sec.is-animated .pos-top-right { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.5s; }
#eco-diagram-sec.is-animated .pos-right { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.6s; }
#eco-diagram-sec.is-animated .pos-bottom-right { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.7s; }
#eco-diagram-sec.is-animated .pos-bottom { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.8s; }
#eco-diagram-sec.is-animated .pos-bottom-left { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 0.9s; }
#eco-diagram-sec.is-animated .pos-left { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 1.0s; }
#eco-diagram-sec.is-animated .pos-top-left { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(1); transition-delay: 1.1s; }


/* --- SECTION 3: 8 SPECIALISTS GRID --- */
#eco-grid-sec { padding: 140px 0; }

.eco-grid-header { margin-bottom: 60px; }
.eco-heading-large {
    font-size: clamp(3rem, 5vw, 70px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 0;
}

.eco-specialists-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Gộp thành 1 khối không kẽ hở */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05); /* Bóng đổ tạo khối nổi */
}

.eco-spec-card {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    transition: filter 0.3s;
}

.eco-spec-card:hover {
    filter: brightness(1.05); /* Sáng nhẹ lên khi hover */
}

/* CSS xử lý màu chữ cho thẻ meta (tương tự trang Capabilities) */
.eco-bg-yellow .eco-card-meta, .eco-bg-white .eco-card-meta, .eco-bg-cyan .eco-card-meta, .eco-bg-lime .eco-card-meta, .eco-bg-orange .eco-card-meta { color: rgba(9, 9, 9, 0.6); }
.eco-bg-magenta .eco-card-meta, .eco-bg-black .eco-card-meta, .eco-bg-violet .eco-card-meta { color: rgba(255, 255, 255, 0.6); }

.eco-card-meta { font-size: 11px; letter-spacing: 0.05em; margin: 0 0 24px 0; }
.eco-card-title {
    font-size: clamp(20px, 1.8vw, 28px) !important;
    font-weight: 400 !important;
    margin: 0 0 16px 0;
}
.eco-bg-violet h3.eco-card-title,
.eco-bg-black h3.eco-card-title,
.eco-bg-magenta h3.eco-card-title {
    color: #FFF;
}
.eco-card-desc { font-size: 13px; line-height: 1.5; margin: 0; opacity: 0.9; }

/* --- HIỆU ỨNG FADE KHI SCROLL CHUNG --- */
.js-eco-fade {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.js-eco-fade.is-animated { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 1024px) {
    .eco-hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .eco-hero-desc { margin: 0 auto; }
    .eco-specialists-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    #eco-hero, #eco-diagram-sec, #eco-grid-sec { padding: 80px 0; }
    .eco-specialists-grid { grid-template-columns: 1fr; }
    .eco-circle-center { width: 110px; height: 110px; }
    .eco-circle-node { width: 80px; height: 80px; padding: 4px; }
    .eco-circle-node h5 { font-size: 9px; }
    .eco-circle-node p { font-size: 7px; }
}

/* ==========================================================================
   PENCIL GROUP - CAREERS PAGE STYLESHEET
   Description: Namespace độc lập (cr-*) đảm bảo tuyệt đối không xung đột
   ========================================================================== */

/* --- CẤU TRÚC CHUNG --- */
.cr-section {
    font-family: 'Be Vietnam Pro', sans-serif;
    box-sizing: border-box;
    width: 100%;
    background-color: #FFFFFF;
}

.cr-section * { box-sizing: border-box; }

.cr-container {
    max-width: 1200px; /* Thu gọn khung nội dung để đọc dễ hơn theo thiết kế */
    margin: 0 auto;
    padding: 0 5%;
}

.cr-eyebrow {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #888888;
    margin: 0 0 24px 0;
}

.cr-title-large {
    font-size: clamp(2.5rem, 4vw, 55px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    color: #000 !important;
    margin: 0;
}

/* --- SECTION 1: HERO --- */
#cr-hero {
    padding: 120px 0 80px 0;
}

.cr-title-huge {
    font-size: clamp(3rem, 6vw, 120px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 30px 0;
}

.cr-desc-main {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    color: #555555;
    max-width: 800px;
    margin: 0;
}

/* --- SECTION 2: TRAITS (LƯỚI 2x2) --- */
#cr-traits {
    padding: 80px 0;
}

.cr-traits-layout {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 60px;
}

.cr-traits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: #E5E7EB; /* Kẻ line mờ giữa các ô */
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
}

.cr-trait-card {
    background-color: #FFFFFF;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.cr-bg-gray {
    background-color: #F4F4F4; /* Nền xám nhạt cho ô cuối */
}

.cr-trait-title {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 12px 0;
    color: #090909;
}

.cr-trait-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
}

/* --- SECTION 3: ROLES LIST --- */
#cr-roles {
    padding: 80px 0 120px 0;
}

.cr-roles-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.cr-roles-update {
    font-size: 13px;
    color: #AAAAAA;
    letter-spacing: 0.05em;
    margin-bottom: 8px; /* Căn chỉnh ngang hàng với title */
}

.cr-roles-list {
    border-top: 1px solid #E5E7EB;
}

.cr-role-row {
    display: grid;
    grid-template-columns: 2fr 5fr 4fr 0.5fr; /* Tỷ lệ 4 cột */
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #E5E7EB;
    text-decoration: none;
    color: #090909;
    transition: background-color 0.3s ease, padding-left 0.3s ease;
}

.cr-role-row:hover {
    background-color: #F9F9F9;
    padding-left: 15px; /* Giật lùi nhẹ vào trong khi Hover */
}

.cr-role-col-practice {
    font-size: 13px;
    font-weight: 500;
    color: #ffb714; /* Màu vàng chuẩn */
    letter-spacing: 0.05em;
}

.cr-role-col-title {
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 400;
}

.cr-role-col-meta {
    font-size: 13px;
    color: #888888;
}

.cr-role-col-icon {
    display: flex;
    justify-content: flex-end;
    color: #090909;
    opacity: 0.5;
    transition: transform 0.3s, opacity 0.3s;
}

.cr-role-row:hover .cr-role-col-icon {
    transform: translate(3px, -3px);
    opacity: 1;
}

/* --- SECTION 4: CTA (YELLOW BOX) --- */
#cr-cta {
    padding-bottom: 120px;
}

.cr-cta-box {
    background-color: #ffb714;
    border-radius: 20px;
    padding: 60px;
    color: #090909;
}

.cr-cta-eyebrow {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: rgba(9, 9, 9, 0.6);
    margin: 0 0 24px 0;
}

.cr-cta-heading {
    font-size: clamp(2.5rem, 4vw, 55px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 20px 0;
}

.cr-cta-desc {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 40px 0;
    max-width: 800px;
    opacity: 0.85;
}

.cr-btn-black {
    display: inline-flex;
    align-items: center;
    background-color: #090909;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.cr-btn-black:hover {
    transform: translateY(-3px);
    background-color: #333333;
}

/* --- HIỆU ỨNG FADE KHI SCROLL --- */
.js-cr-fade {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.js-cr-fade.is-animated { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 1024px) {
    .cr-traits-layout { grid-template-columns: 1fr; gap: 40px; }
    .cr-role-row { 
        grid-template-columns: 1fr; 
        gap: 8px; 
        padding: 24px 0;
    }
    .cr-role-col-practice { margin-bottom: 4px; }
    .cr-role-col-icon { display: none; } /* Ẩn mũi tên trên mobile cho gọn */
    .cr-role-row:hover { padding-left: 0; background-color: transparent; }
}

@media (max-width: 768px) {
    #cr-hero, #cr-traits, #cr-roles { padding: 60px 0; }
    #cr-cta { padding-bottom: 60px; }
    .cr-traits-grid { grid-template-columns: 1fr; }
    .cr-trait-card { padding: 30px 20px; }
    .cr-cta-box { padding: 40px 30px; }
    .cr-roles-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}






/* ==========================================================================
   PENCIL GROUP - CONTACT PAGE STYLESHEET
   Description: Namespace độc lập (ct-*) đảm bảo tuyệt đối không xung đột
   ========================================================================== */

.ct-section {
    font-family: 'Be Vietnam Pro', sans-serif;
    box-sizing: border-box;
    width: 100%;
    background-color: #FFFFFF;
    padding: 120px 0;
}

.ct-section * { box-sizing: border-box; }

.ct-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.ct-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 80px;
    align-items: flex-start;
}

/* --- LEFT COLUMN --- */
.ct-eyebrow {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #888888;
    margin: 0 0 24px 0;
}

.ct-heading {
    font-size: clamp(3.5rem, 6vw, 90px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 30px 0;
}

.ct-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.ct-highlight::after {
    content: '';
    position: absolute;
    left: -2px;
    bottom: 8%;
    width: calc(100% + 4px);
    height: 40%;
    background-color: #ffb714;
    z-index: -1;
}

.ct-desc {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    color: #555555;
    margin: 0 0 60px 0;
    max-width: 90%;
}

.ct-info-blocks {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ct-info-item .ct-eyebrow {
    margin-bottom: 8px;
}

.ct-info-text {
    font-size: 16px;
    color: #090909;
    line-height: 1.6;
    margin: 0;
}

.ct-info-text a {
    color: #090909;
    text-decoration: none;
    transition: color 0.3s;
}

.ct-info-text a:hover {
    color: #ffb714;
}

/* --- RIGHT COLUMN (FORM CARD) --- */
.ct-form-card {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 60px 50px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.02);
}

.ct-card-logo {
    position: absolute;
    top: 50px;
    right: 50px;
    height: 18px;
    width: auto;
    opacity: 0.8;
}

.ct-form {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ct-form-group {
    display: flex;
    flex-direction: column;
}

.ct-mt-custom {
    margin-top: 20px;
}

.ct-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #888888;
    margin-bottom: 10px;
}

/* Input Styles */
.ct-input, .ct-textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #E5E7EB;
    padding: 12px 0;
    font-family: inherit;
    font-size: 16px;
    color: #090909;
    background: transparent;
    outline: none;
    transition: border-color 0.3s;
    resize: none;
}

.ct-input::placeholder, .ct-textarea::placeholder {
    color: #CCCCCC;
    font-weight: 300;
}

.ct-input:focus, .ct-textarea:focus {
    border-bottom-color: #ffb714;
}

.ct-textarea {
    min-height: 60px;
    margin-bottom: 30px;
}

/* Checkbox Pills Styles */
.ct-pills-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
}

.ct-pill-item {
    position: relative;
}

/* Ẩn checkbox mặc định đi */
.ct-pill-check {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.ct-pill-label {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 50px;
    font-size: 13px;
    color: #555555;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.ct-pill-label:hover {
    border-color: #090909;
}

/* Trạng thái khi được chọn (Checked) */
.ct-pill-check:checked + .ct-pill-label {
    background-color: #090909;
    color: #FFFFFF;
    border-color: #090909;
}

/* Submit Button */
.ct-submit-wrap {
    margin-top: 10px;
}

.ct-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: #090909;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 10px 10px 24px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    font-family: inherit;
}

.ct-btn-submit:hover {
    transform: translateY(-3px);
    background-color: #333333;
}

.ct-icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background-color: #ffb714;
    border-radius: 50%;
    color: #090909;
    transition: transform 0.3s ease;
}

.ct-btn-submit:hover .ct-icon-circle {
    transform: translateX(3px);
}

/* --- HIỆU ỨNG FADE KHI SCROLL --- */
.js-ct-fade {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.js-ct-fade.is-animated { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 1024px) {
    .ct-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .ct-desc { max-width: 100%; }
}

@media (max-width: 768px) {
    .ct-section { padding: 80px 0; }
    .ct-form-card { padding: 40px 20px; }
    .ct-card-logo { top: 30px; right: 20px; }
    .ct-info-blocks { gap: 30px; }
}