/* ========================================================================== CTWELD - BRAND IDENTITY DESIGN SYSTEM (WHITE & ORANGE THEME) Typography: Titles = Phudu (48px / 3rem, FW 600) | Content = Gilroy Max Width: 1440px | SVG Wave Section Dividers & Anti-Orphan Text Wrap Rules ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Phudu:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* LOCAL GILROY FONT FAMILY DECLARATIONS */ @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } :root { /* Official CT WELD Brand Palette */ --color-brand-orange: #F37021; --color-brand-orange-dark: #D95D12; --color-orange-subtle: #FFF5EE; --color-orange-light: #FFECE0; --color-bg-white: #FFFFFF; --color-bg-light: #F8FAFC; --color-bg-subtle: #F1F5F9; --color-bg-gray: #E2E8F0; --color-text-heading: #111112; --color-text-card-title: #2D3748; /* Softened dark heading color for cards */ --color-text-main: #111112; --color-text-muted: #64748B; --color-text-light: #94A3B8; --color-text-white: #FFFFFF; --color-border: #E2E8F0; --color-border-orange: rgba(243, 112, 33, 0.3); /* Typography Specified By User */ --font-heading: 'Phudu', cursive, sans-serif; --font-main: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Layout & Spacing - Max Width 1440px */ --container-max-width: 1440px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-orange: 0 6px 20px rgba(243, 112, 33, 0.25); /* Transition Speeds */ --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Base Reset */ /* box-sizing giữ phạm vi toàn cục: Flatsome cũng dùng border-box nên không lệch. Nhưng margin/padding thì KHÔNG được zero bằng `*` — làm vậy sẽ xoá sạch spacing của mọi nội dung dựng bằng UX Builder (row, col, text block của Flatsome). Vì vậy chỉ reset đúng các thẻ văn bản mà thiết kế này thực sự cần. */ *, *::before, *::after { box-sizing: border-box; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, li, fieldset, legend { margin: 0; padding: 0; } /* Thẻ form: CHỈ zero lề, KHÔNG đụng padding — padding là thứ tạo nên hình dáng nút và ô nhập, xoá đi là bẹp hết. Vì sao cần: Flatsome đặt margin-bottom cho input/button/select/textarea để giãn cách các trường trong form của nó (ô tìm kiếm bị đội thêm 20.8px, nút thêm 14px). Bản demo CTWELD chạy trên reset `*` nên ngầm giả định mọi lề bằng 0. Nếu sau này có block UX Builder chứa form thật, khai báo lại khoảng cách cho riêng block đó. */ input, button, select, textarea, form { margin: 0; } html { /* Flatsome đặt nền xám cho . CTWELD chỉ đặt nền cho , nên phần canvas dưới đáy tài liệu (khi trang ngắn hơn màn hình) bị lộ màu xám. */ background-color: var(--color-bg-white); scroll-behavior: smooth; font-size: 16px; /* `clip` chứ KHÔNG phải `hidden`: overflow-x:hidden khiến overflow-y ngầm thành `auto`, biến phần tử thành vùng cuộn riêng và làm position:sticky bên trong mất tác dụng (section "Giá Trị Cốt Lõi" bị trôi thay vì dính). `clip` chặn tràn ngang mà không tạo vùng cuộn. */ overflow-x: clip; } body { font-family: var(--font-main); background-color: var(--color-bg-white); color: var(--color-text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; /* xem ghi chú ở khối html phía trên */ } /* ANTI-ORPHAN TYPOGRAPHY RULES */ h1, h2, h3, h4, h5, h6, .ctw-section-title, .slide-title, .page-title, .logo-name, .about-title, .footer-heading { font-family: var(--font-heading); text-wrap: balance; /* Khai báo tường minh việc thừa kế: Flatsome có `.h1,.h2,h1,h2{line-height:1.3}` (độ đặc hiệu 0,0,1). CTWELD vốn không nói gì về line-height cho tiêu đề nên chúng thừa kế 1.6 từ body — bản demo chạy như vậy. Khi nạp kèm Flatsome, tiêu đề bị ép về 1.3, mỗi cái sít lại ~4px và cả trang trôi lên. `inherit` giữ đúng hành vi cũ mà vẫn thắng được Flatsome. */ line-height: inherit; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; } button { cursor: pointer; } /* Text Highlight Utility */ .text-orange { color: var(--color-brand-orange); } /* Container Utility (Max Width 1440px) */ .ctw-container { width: 100%; max-width: var(--container-max-width); margin: 0 auto; padding: 0 24px; } /* Section Divider SVG Wave Utility */ .section-divider { width: 100%; overflow: hidden; line-height: 0; margin-top: -1px; margin-bottom: -1px; background: transparent; pointer-events: none; user-select: none; } .section-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 54px; } /* Section Header Utility */ .section-header { text-align: center; max-width: 960px; margin: 0 auto 48px auto; } .section-tag { display: none !important; } .ctw-section-title { font-size: 3rem; /* 48px */ font-weight: 600; /* FW 600 */ color: var(--color-text-heading); letter-spacing: -0.5px; margin-bottom: 14px; line-height: 1.25; text-wrap: balance; } .section-subtitle { font-size: 1.1rem; color: var(--color-text-muted); text-wrap: balance; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; font-weight: 700; font-size: 0.95rem; border-radius: var(--radius-sm); transition: all var(--transition-fast); white-space: nowrap; } .btn-primary { background-color: var(--color-brand-orange); color: var(--color-text-white); box-shadow: none !important; } .btn-primary:hover { background-color: var(--color-brand-orange-dark); transform: none !important; box-shadow: none !important; } .btn-secondary { background-color: var(--color-bg-subtle); color: var(--color-text-heading); border: 1px solid var(--color-border); } .btn-secondary:hover { background-color: var(--color-bg-gray); color: var(--color-brand-orange); border-color: var(--color-brand-orange); transform: translateY(-2px); } .btn-outline { background-color: transparent; color: var(--color-brand-orange); border: 2px solid var(--color-brand-orange); } .btn-outline:hover { background-color: var(--color-brand-orange); color: var(--color-text-white); } .btn-sm { padding: 8px 16px; font-size: 0.875rem; } /* ========================================================================== HEADER DESIGN (3 TIERS - IMAGE LOGO logoweld.png & NAV DROPDOWNS RADIUS 2PX) ========================================================================== */ .site-header { width: 100%; position: relative; z-index: 1000; background-color: var(--color-bg-white); box-shadow: var(--shadow-sm); } .top-announcement-bar { background-color: var(--color-bg-light); font-size: 0.825rem; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); padding: 6px 0; } .top-announcement-bar .ctw-container { display: flex; justify-content: space-between; align-items: center; } .announcement-left { display: flex; align-items: center; gap: 8px; } .announcement-left i { color: var(--color-brand-orange); } .announcement-left .help-link { color: var(--color-brand-orange); font-weight: 700; text-decoration: underline; margin-left: 4px; } .announcement-right { display: flex; align-items: center; gap: 20px; } .quick-links { display: flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; } .quick-links a:hover { color: var(--color-brand-orange); } .quick-links .sep { color: var(--color-border); } .flags-lang { display: flex; align-items: center; gap: 8px; } .flag-btn { background: transparent !important; border: 1.5px solid transparent !important; border-radius: 3px; cursor: pointer; opacity: 0.65; transition: all var(--transition-fast); padding: 2px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .flag-icon { display: block; border-radius: 2px; overflow: hidden; } .flag-btn:hover { opacity: 0.95; background: transparent !important; } .flag-btn.active { opacity: 1; border: 1.5px solid var(--color-brand-orange) !important; background: transparent !important; } /* Middle Header Bar */ .middle-header-bar { padding: 14px 0; background-color: var(--color-bg-white); } .middle-header-bar .ctw-container { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .brand-logo { display: flex; align-items: center; min-width: 180px; flex-shrink: 0; } .logo-img { height: 52px; max-height: 58px; width: auto; object-fit: contain; display: block; } .header-search-bar { flex: 1; max-width: 520px; position: relative; display: flex; align-items: center; background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 30px; padding: 4px 6px 4px 18px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .header-search-bar:focus-within { border-color: var(--color-brand-orange); box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.15); } .search-input { width: 100%; background: transparent; font-size: 0.875rem; color: var(--color-text-heading); } .search-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand-orange); color: var(--color-text-white); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background-color var(--transition-fast); flex-shrink: 0; } .search-btn:hover { background: var(--color-brand-orange-dark); } .header-contact-blocks { display: flex; align-items: center; gap: 28px; flex-shrink: 0; } .contact-block { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .contact-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--color-orange-subtle); color: var(--color-brand-orange); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 1px solid var(--color-border-orange); flex-shrink: 0; } .contact-info { display: flex; flex-direction: column; } .contact-val { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; color: var(--color-brand-orange); line-height: 1.2; } .contact-lbl { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; } /* Tier 3: Main Navigation Bar */ .main-navbar { background-color: var(--color-brand-orange); position: sticky; top: 0; left: 0; width: 100%; z-index: 999; box-shadow: var(--shadow-md); } .main-navbar .ctw-container { display: flex; align-items: center; justify-content: space-between; height: 52px; } .nav-links-list { display: flex; align-items: center; gap: 10px; height: 100%; } .nav-links-list li { height: 100%; display: flex; align-items: center; } .nav-links-list a { display: flex; align-items: center; height: 100%; padding: 0 18px; color: var(--color-text-white); font-size: 0.975rem; font-weight: 500; position: relative; letter-spacing: 0.2px; white-space: nowrap; transition: background-color var(--transition-fast), font-weight var(--transition-fast); } .nav-links-list li.active a, .nav-links-list a:hover { background-color: rgba(0, 0, 0, 0.12); font-weight: 600; } .nav-links-list li.active a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: var(--color-text-white); border-radius: 2px 2px 0 0; } /* NAV DROPDOWN SUBMENUS (RADIUS 2PX - CLEAN WITHOUT ICONS) */ .nav-links-list li.has-dropdown { position: relative; } .nav-arrow { font-size: 0.72rem; margin-left: 6px; transition: transform var(--transition-fast); } .nav-links-list li.has-dropdown:hover .nav-arrow { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 270px; background: var(--color-bg-white); border-radius: 2px; border: 1px solid var(--color-border); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15); padding: 4px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition-fast); z-index: 1000; display: block; } .nav-links-list li.has-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu li { width: 100%; height: auto; display: block; } .dropdown-menu a { display: block; padding: 10px 18px; color: var(--color-text-heading); font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: all var(--transition-fast); height: auto; border-bottom: 1px solid var(--color-bg-subtle); background: transparent !important; } .dropdown-menu li.active a, .dropdown-menu li:hover a { background-color: var(--color-orange-subtle) !important; color: var(--color-brand-orange) !important; padding-left: 22px; } .dropdown-menu li:last-child a { border-bottom: none; } .btn-consult-pill { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.2); color: var(--color-text-white); border: 1px solid rgba(255, 255, 255, 0.6); padding: 8px 18px; border-radius: 20px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: all var(--transition-fast); } .btn-consult-pill:hover { background: var(--color-bg-white); color: var(--color-brand-orange); border-color: var(--color-bg-white); } .mobile-toggle { display: none; background: transparent; color: var(--color-text-heading); font-size: 1.6rem; padding: 8px; } /* ========================================================================== 2. HERO SLIDE BANNER (PURE MEDIA ONLY - NO OVERLAY, MANUAL SLIDE) ========================================================================== */ .hero-slider { position: relative; height: 640px; background-color: #000; overflow: hidden; } .slide-track { display: flex; height: 100%; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); } .slide-item { min-width: 100%; height: 100%; position: relative; display: flex; align-items: center; background-size: cover; background-position: center; overflow: hidden; } .slide-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .slider-controls { position: absolute; bottom: 24px; left: 0; width: 100%; z-index: 10; } .slider-controls .ctw-container { display: flex; justify-content: space-between; align-items: center; } .slider-dots { display: flex; align-items: center; gap: 12px; } .dot-item { width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-md); cursor: pointer; position: relative; transition: all var(--transition-fast); } .dot-item.active { background: var(--color-brand-orange); border-color: var(--color-brand-orange); transform: scale(1.35); box-shadow: var(--shadow-orange); } .slider-arrows { display: flex; gap: 10px; } .arrow-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--color-text-heading); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: all var(--transition-fast); } .arrow-btn:hover { background: var(--color-brand-orange); color: var(--color-text-white); border-color: var(--color-brand-orange); } /* ========================================================================== 3. ABOUT US SECTION (INTERACTIVE GALLERY MATCHED HEIGHT WITH TEXT CONTENT BOX) ========================================================================== */ .about-section { padding: 80px 0 96px 0; background-color: var(--color-bg-white); } .about-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 24px; } .about-text { display: flex; flex-direction: column; align-items: flex-start; } .about-title { font-family: var(--font-heading); font-size: 2.75rem; /* ~44px */ font-weight: 600; color: var(--color-text-heading); margin-bottom: 20px; line-height: 1.25; text-wrap: balance; } .about-title-highlight { color: var(--color-brand-orange); font-weight: 600; display: block; margin-top: 4px; } .about-sapo { font-size: 1.05rem; color: var(--color-text-main); font-weight: 500; margin-bottom: 18px; padding-left: 16px; border-left: 4px solid var(--color-brand-orange); } .about-body { color: var(--color-text-muted); margin-bottom: 0; font-size: 0.95rem; line-height: 1.6; } .about-stats-row { padding-top: 0; border-top: none !important; } .about-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; } .stat-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px; background: var(--color-bg-light); border-radius: var(--radius-md); } .stat-number { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; color: var(--color-brand-orange); line-height: 1; } .stat-label { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 8px; font-weight: 600; white-space: nowrap; } .stat-box-highlight { background: var(--color-brand-orange) !important; color: #FFFFFF !important; } .stat-box-highlight .stat-number { color: #FFFFFF !important; } .stat-box-highlight .stat-label { color: rgba(255, 255, 255, 0.95) !important; } .about-cta-center { margin-top: 32px; text-align: center; } .about-media { display: flex; flex-direction: column; } .media-wrapper { position: relative; height: 380px; /* Increased height to balance with left text content box */ background-color: var(--color-bg-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); } .media-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } .play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: var(--color-brand-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text-white); font-size: 1.6rem; box-shadow: var(--shadow-orange); transition: transform var(--transition-fast); cursor: pointer; } .about-media:hover .play-badge { transform: translate(-50%, -50%) scale(1.1); } /* 3 Rectangular Gallery Thumbnails Row Underneath Main Image (Height Increased to 96px) */ .about-thumbs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; } .about-thumb { position: relative; height: 96px; /* Increased thumbnail height */ border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--color-border); cursor: pointer; transition: all var(--transition-fast); background-color: var(--color-bg-subtle); } .about-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-fast); } .about-thumb:hover { border-color: var(--color-brand-orange-dark); } .about-thumb:hover img { transform: scale(1.06); } .about-thumb.active { border-color: var(--color-brand-orange); box-shadow: 0 0 0 2px rgba(243, 112, 33, 0.3); } /* ========================================================================== 3 PILLARS SECTION: TẦM NHÌN - SỨ MỆNH - GIÁ TRỊ CỐT LÕI (3 CARDS WITH ALWAYS ON BOX-SHADOW) ========================================================================== */ .pillars-section-box { background: transparent; border: none; padding: 0; margin-top: 60px; } .pillars-header { text-align: center; margin-bottom: 40px; } .pillars-title { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; color: var(--color-text-heading); text-transform: uppercase; letter-spacing: 0.5px; } .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .pillar-card { background: var(--color-bg-white); padding: 32px 28px; border-radius: var(--radius-md); border: none; /* No border as requested */ box-shadow: 0 0 126px -92px rgba(0, 0, 0, 0.35); /* Persistent box-shadow always visible without hover */ transition: transform var(--transition-fast); display: flex; flex-direction: column; align-items: center; } .pillar-card:hover { transform: translateY(-2px); border: none; box-shadow: 0 0 126px -92px rgba(0, 0, 0, 0.35); /* Keeps exact same shadow on hover */ } .pillar-icon-box { width: 56px; height: 56px; background: var(--color-orange-subtle); /* #FFF5EE - Nền màu nhạt */ border-radius: 5px; /* Radius 5px as requested by user */ display: flex; align-items: center; justify-content: center; color: var(--color-brand-orange); font-size: 1.5rem; margin-bottom: 18px; border: none; /* Removed orange border as requested by user */ } .pillar-card-title { font-family: var(--font-main); /* Gilroy font as requested by user */ font-size: 20px; /* Reduced to 20px as requested by user */ font-weight: 700; color: var(--color-text-heading); margin-bottom: 12px; text-align: center; text-transform: none; /* No uppercase as requested by user */ width: 100%; } .pillar-card-desc { font-size: 0.95rem; /* Larger text size as requested by user */ color: var(--color-text-muted); text-align: justify; text-justify: inter-word; line-height: 1.6; width: 100%; } /* ========================================================================== 4. PRODUCT CATEGORIES (CARD HOVER: LIFT 2PX, NO BORDER COLOR CHANGE, NO SHADOW) ========================================================================== */ .categories-section { padding: 80px 0 96px 0; background-color: var(--color-bg-light); } /* 2 danh mục sản phẩm theo cấu trúc chốt trong file Excel (3.1, 3.2) */ .category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .category-card { background: var(--color-bg-white); border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; transition: transform var(--transition-fast); display: flex; flex-direction: column; } .category-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--color-border); } .cat-thumb { position: relative; background-color: var(--color-bg-subtle); } .cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .category-card:hover .cat-thumb img { transform: scale(1.05); } .cat-badge { position: absolute; top: 12px; left: 12px; background: var(--color-brand-orange); color: var(--color-text-white); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm); white-space: nowrap; } .cat-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; } .cat-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--color-text-card-title); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .cat-desc { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 20px; flex-grow: 1; } .cat-link { font-weight: 600; font-size: 0.9rem; color: var(--color-brand-orange); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .category-card:hover .cat-link i { transform: translateX(4px); } /* ========================================================================== 5. FEATURED MACHINES (CARD HOVER: LIFT 2PX, NO BORDER COLOR CHANGE, NO SHADOW) ========================================================================== */ .featured-section { padding: 80px 0 96px 0; background-color: var(--color-bg-white); } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card { background-color: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition-fast); display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--color-border); } .product-thumb { position: relative; height: 220px; background-color: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-thumb img { width: 100%; height: 100%; object-fit: cover; } .prod-tag { position: absolute; top: 12px; right: 12px; background: var(--color-brand-orange); color: var(--color-text-white); font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: 2px; text-transform: uppercase; white-space: nowrap; } .product-info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; } .prod-code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-brand-orange); font-weight: 700; margin-bottom: 6px; white-space: nowrap; } .prod-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--color-text-card-title); margin-bottom: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .prod-specs { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; background: var(--color-bg-subtle); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .spec-item { display: flex; justify-content: space-between; } .spec-key { font-weight: 500; white-space: nowrap; } .spec-val { font-weight: 600; color: var(--color-text-heading); white-space: nowrap; } .prod-action { margin-top: auto; } /* ========================================================================== PRODUCT PAGE SIDEBAR & SEARCH/STATS TOOLBAR LAYOUT ========================================================================== */ .product-page-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; } .product-sidebar { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 24px; } .sidebar-widget-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--color-text-heading); padding-bottom: 10px; border-bottom: 2px solid var(--color-brand-orange); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .sidebar-cat-list { display: flex; flex-direction: column; gap: 4px; } .sidebar-cat-item > a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.925rem; font-weight: 600; color: var(--color-text-heading); transition: all var(--transition-fast); } .sidebar-cat-item > a:hover, .sidebar-cat-item.active > a { background-color: var(--color-orange-subtle); color: var(--color-brand-orange); } .cat-count { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; background: rgba(243, 112, 33, 0.12); color: var(--color-brand-orange); padding: 2px 8px; border-radius: 12px; } .sidebar-subcat-list { padding-left: 14px; margin-top: 4px; display: flex; flex-direction: column; gap: 2px; } .sidebar-subcat-list a { display: block; padding: 6px 10px; font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; transition: all var(--transition-fast); } .sidebar-subcat-list a:hover { color: var(--color-brand-orange); } .brand-filter-list { display: flex; flex-direction: column; gap: 8px; } .brand-filter-item { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--color-text-heading); cursor: pointer; user-select: none; } .brand-filter-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--color-border); border-radius: 4px; background-color: var(--color-bg-white); cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); flex-shrink: 0; } .brand-filter-item input[type="checkbox"]:checked { background-color: var(--color-brand-orange); border-color: var(--color-brand-orange); } .brand-filter-item input[type="checkbox"]:checked::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #FFFFFF; font-size: 0.72rem; display: block; } .product-toolbar { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 24px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; box-shadow: var(--shadow-sm); } .toolbar-stats { font-size: 0.925rem; color: var(--color-text-muted); white-space: nowrap; } .toolbar-stats strong { color: var(--color-brand-orange); font-weight: 700; } .toolbar-controls { display: flex; align-items: center; gap: 14px; flex-grow: 1; justify-content: flex-end; } .toolbar-search { position: relative; max-width: 320px; width: 100%; } .toolbar-search-input { width: 100%; padding: 8px 14px 8px 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 0.875rem; background: var(--color-bg-light); } .toolbar-search-input:focus { border-color: var(--color-brand-orange); background: var(--color-bg-white); } .toolbar-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 0.85rem; } .toolbar-sort-select { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 0.875rem; font-weight: 600; color: var(--color-text-heading); background: var(--color-bg-light); cursor: pointer; } .toolbar-sort-select:focus { border-color: var(--color-brand-orange); } .product-grid-3cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* ========================================================================== NEWS PAGE SIDEBAR & LAYOUT STYLES (MATCHING REFERENCE IMAGE) ========================================================================== */ .news-page-layout { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; } .news-main-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .news-sidebar { display: flex; flex-direction: column; gap: 24px; } .sidebar-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } .sidebar-search-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-sm); } .sidebar-search-box { position: relative; width: 100%; } .sidebar-search-input { width: 100%; padding: 12px 42px 12px 18px; border-radius: 30px; border: 1px solid var(--color-border); background: var(--color-bg-light); font-size: 0.9rem; color: var(--color-text-heading); transition: all var(--transition-fast); } .sidebar-search-input:focus { border-color: var(--color-brand-orange); background: var(--color-bg-white); outline: none; } .sidebar-search-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: transparent; color: var(--color-text-muted); font-size: 0.95rem; } .sidebar-title-bar { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-text-heading); margin-bottom: 20px; } .sidebar-title-bar::before { content: ''; display: block; width: 4px; height: 20px; background: var(--color-brand-orange); border-radius: 2px; } .news-cat-list { display: flex; flex-direction: column; gap: 2px; } .news-cat-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--color-border); font-size: 0.925rem; color: var(--color-text-heading); font-weight: 500; transition: color var(--transition-fast); } .news-cat-item:last-child { border-bottom: none; } .news-cat-item:hover { color: var(--color-brand-orange); } .news-cat-badge { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); background: var(--color-bg-light); padding: 2px 10px; border-radius: 12px; border: 1px solid var(--color-border); } .recent-articles-list { display: flex; flex-direction: column; gap: 18px; } .recent-article-item { display: flex; align-items: center; gap: 14px; } .recent-article-thumb { width: 68px; height: 68px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--color-bg-subtle); } .recent-article-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-fast); } .recent-article-item:hover .recent-article-thumb img { transform: scale(1.08); } .recent-article-info { display: flex; flex-direction: column; gap: 4px; } .recent-article-title { font-size: 0.925rem; font-weight: 600; color: var(--color-text-heading); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--transition-fast); } .recent-article-item:hover .recent-article-title { color: var(--color-brand-orange); } .recent-article-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); } /* ========================================================================== 6. FEATURED PROJECTS CAROUSEL (3.5 CARDS PER VIEW) ========================================================================== */ .projects-section { padding: 80px 0 96px 0; background-color: var(--color-bg-light); color: var(--color-text-heading); overflow: hidden; } .projects-slider-wrapper { position: relative; width: 100%; margin-top: 40px; } .projects-track { display: flex; gap: 24px; transition: transform 0.5s ease-out; padding: 10px 0; } .project-card { flex: 0 0 calc(28.5% - 18px); min-width: 320px; background-color: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition-fast); } .project-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--color-border); } .proj-thumb { position: relative; height: 220px; overflow: hidden; } .proj-thumb img { width: 100%; height: 100%; object-fit: cover; } .proj-status { position: absolute; bottom: 12px; left: 12px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(4px); color: var(--color-brand-orange); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-orange); white-space: nowrap; } .proj-body { padding: 24px; } .proj-meta { font-size: 0.825rem; color: var(--color-text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; } .proj-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--color-text-card-title); margin-bottom: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .proj-desc { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; } .featured-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .featured-projects-grid .project-card { flex: none; min-width: 0; width: 100%; } /* ========================================================================== 7. STRATEGIC PARTNERS MARQUEE ========================================================================== */ .partners-section { padding: 60px 0; background-color: var(--color-bg-white); } .marquee-container { overflow: hidden; user-select: none; display: flex; gap: 40px; position: relative; } .marquee-container::before, .marquee-container::after { content: ''; position: absolute; top: 0; width: 120px; height: 100%; z-index: 2; pointer-events: none; } .marquee-container::before { left: 0; background: linear-gradient(to right, #FFFFFF, transparent); } .marquee-container::after { right: 0; background: linear-gradient(to left, #FFFFFF, transparent); } .marquee-content { flex-shrink: 0; display: flex; justify-content: space-around; gap: 60px; min-width: 100%; animation: scrollMarquee 30s linear infinite; } @keyframes scrollMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } .partner-logo { height: 50px; display: flex; align-items: center; justify-content: center; filter: none; opacity: 1; transition: all var(--transition-fast); } .partner-logo:hover { filter: grayscale(0%); opacity: 1; } .partner-logo font { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 800; color: var(--color-text-heading); letter-spacing: 1px; } /* ========================================================================== 8. NEWS SECTION (MATCHED WITH PROJECTS SECTION - 3.5 CARDS PER VIEW) ========================================================================== */ .news-section { padding: 80px 0 96px 0; background-color: var(--color-bg-light); overflow: hidden; } .news-slider-wrapper { position: relative; width: 100%; margin-top: 40px; } .news-track { display: flex; gap: 24px; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); padding: 10px 0; } .news-card { flex: 0 0 calc(28.5% - 18px); min-width: 320px; background-color: var(--color-bg-white); border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; transition: transform var(--transition-fast); display: flex; flex-direction: column; } .news-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--color-border); } .news-thumb { height: 220px; overflow: hidden; } .news-thumb img { width: 100%; height: 100%; object-fit: cover; } .news-body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; } .news-date { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-brand-orange); font-weight: 700; margin-bottom: 8px; white-space: nowrap; } .news-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--color-text-card-title); margin-bottom: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .news-excerpt { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 20px; line-height: 1.5; } .news-link { margin-top: auto; font-size: 0.875rem; font-weight: 600; color: var(--color-text-heading); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .news-card:hover .news-link { color: var(--color-brand-orange); } /* ========================================================================== STICKY SCROLL HORIZONTAL TIMELINE (QUÁ TRÌNH HÌNH THÀNH CTWELD) ========================================================================== */ .ctw-core-values.history-sticky-section { position: relative; height: 260vh; background-color: var(--color-bg-light); border-top: 1px solid var(--color-border); } .ctw-core-values .history-sticky-container { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 30px 0; } .ctw-core-values .timeline-slider-wrap { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; } .ctw-core-values .timeline-viewport { position: relative; width: 100%; overflow: hidden; padding: 20px 0; } .ctw-core-values .timeline-track { display: flex; position: relative; width: max-content; padding: 0 140px; gap: 80px; transition: transform 0.1s cubic-bezier(0.1, 0.2, 0.1, 1); will-change: transform; } .ctw-core-values .timeline-line-bg { position: absolute; top: 50%; left: 140px; right: 140px; height: 2px; background: #E2E8F0; transform: translateY(-50%); z-index: 1; } .ctw-core-values .timeline-line-active { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--color-brand-orange); transition: width 0.1s linear; } .ctw-core-values .timeline-col { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 280px; flex-shrink: 0; } .ctw-core-values .slot-top, .ctw-core-values .slot-bottom { width: 100%; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .ctw-core-values .slot-top { justify-content: flex-end; padding-bottom: 16px; } .ctw-core-values .slot-bottom { justify-content: flex-start; padding-top: 16px; } .ctw-core-values .timeline-img { width: 260px; height: 155px; object-fit: cover; border-radius: 16px; display: block; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } .ctw-core-values .date-text { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; color: var(--color-brand-orange); line-height: 1; margin-bottom: 8px; letter-spacing: -0.5px; } .ctw-core-values .cv-value-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-text-heading); line-height: 1.3; margin: 0 0 6px; } .ctw-core-values .desc-text { font-size: 0.925rem; color: var(--color-text-muted); max-width: 250px; line-height: 1.45; font-weight: 500; } .ctw-core-values .node-circle { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #CBD5E1; background: #FFFFFF; color: #94A3B8; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; flex-shrink: 0; cursor: pointer; } .ctw-core-values .node-circle.active { border-color: var(--color-brand-orange); background: var(--color-brand-orange); color: #FFFFFF; transform: scale(1.15); box-shadow: 0 0 0 5px rgba(243, 112, 33, 0.2); } .ctw-core-values .timeline-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; z-index: 10; cursor: pointer; transition: all var(--transition-fast); } .ctw-core-values .timeline-arrow:hover { background: var(--color-brand-orange); color: #FFFFFF; border-color: var(--color-brand-orange); } .ctw-core-values .timeline-arrow.prev { left: 24px; } .ctw-core-values .timeline-arrow.next { right: 24px; } /* ========================================================================== SUBPAGE CONNECT WITH US CTA SECTION (DIAGONAL 50/50 SPLIT ORANGE & LIGHT BG) ========================================================================== */ .connect-section { padding: 56px 0; background: linear-gradient(110deg, var(--color-brand-orange) 50%, var(--color-bg-light) 50.1%); border-top: 1px solid var(--color-border); position: relative; overflow: hidden; } .connect-card { background: var(--color-bg-white); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: 36px 44px; display: flex; justify-content: space-between; align-items: center; gap: 36px; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12); } .connect-title { font-family: var(--font-heading); font-size: 1.85rem; font-weight: 600; color: var(--color-text-heading); margin-bottom: 6px; } .connect-desc { font-size: 0.95rem; color: var(--color-text-muted); } .connect-action { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 480px; } .connect-form { display: flex; width: 100%; gap: 8px; } .connect-input { flex-grow: 1; padding: 12px 18px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 0.9rem; background: var(--color-bg-light); color: var(--color-text-heading); } .connect-input:focus { border-color: var(--color-brand-orange); outline: none; background: var(--color-bg-white); } .connect-hotline { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--color-text-muted); } .connect-hotline i { color: var(--color-brand-orange); font-size: 1rem; } .connect-hotline strong { color: var(--color-brand-orange); font-family: var(--font-mono); font-size: 0.95rem; } /* ========================================================================== 9. FOOTER (CLEAN LOGO NO BACKGROUND NO SHADOW) ========================================================================== */ .main-footer { background-color: var(--color-bg-subtle); color: var(--color-text-main); padding-top: 60px; border-top: 1px solid var(--color-border); } .footer-top { display: grid; grid-template-columns: 2.2fr 1.2fr 1.4fr 1.6fr; gap: 36px; padding-bottom: 50px; border-bottom: 1px solid var(--color-border); } .footer-logo-box { background: transparent; padding: 0; border-radius: 0; display: inline-block; box-shadow: none; border: none; margin-bottom: 16px; } .footer-logo-box .logo-img { height: 52px; width: auto; display: block; } .footer-desc-text { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 18px; } .footer-contact-list { display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; color: var(--color-text-heading); margin-bottom: 20px; } .footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; } .footer-contact-list i { color: var(--color-brand-orange); margin-top: 3px; flex-shrink: 0; font-size: 0.9rem; } .footer-social-circle { display: flex; gap: 10px; } .social-circle-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand-orange); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all var(--transition-fast); } .social-circle-btn:hover { background: var(--color-brand-orange-dark); transform: translateY(-2px); } .footer-heading { font-family: var(--font-heading); color: var(--color-text-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; position: relative; display: inline-block; } .footer-heading::after { content: ''; display: block; width: 40px; height: 3px; background: var(--color-brand-orange); margin-top: 8px; border-radius: 2px; } .footer-dash-links li { margin-bottom: 12px; } .footer-dash-links a { color: var(--color-text-muted); font-size: 0.9rem; font-weight: 500; transition: all var(--transition-fast); display: inline-block; } .footer-dash-links a:hover { color: var(--color-brand-orange); transform: translateX(4px); } .footer-map-box { width: 100%; height: 190px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .footer-map-box iframe { width: 100%; height: 100%; border: 0; } .footer-bottom { padding: 20px 0; font-size: 0.85rem; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; } .back-to-top-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand-orange); color: #FFF; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; transition: all var(--transition-fast); } .back-to-top-btn:hover { background: var(--color-brand-orange-dark); transform: translateY(-2px); } /* ========================================================================== 10. FLOATING QUICK CONTACT BAR ========================================================================== */ .quick-contact-bar { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 12px; z-index: 999; } .qc-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 1.3rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); position: relative; transition: transform var(--transition-fast); } .qc-btn:hover { transform: scale(1.1); } .qc-zalo { background-color: #0084FF; } .qc-phone { background-color: #4CAF50; } .qc-mess { background-color: #0084FF; } .qc-form { background-color: var(--color-brand-orange); } .qc-tooltip { position: absolute; right: 64px; background: var(--color-text-heading); color: var(--color-text-white); font-size: 0.8rem; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--transition-fast); pointer-events: none; } .qc-btn:hover .qc-tooltip { opacity: 1; visibility: visible; } /* ========================================================================== CONSULTATION MODAL FORM ========================================================================== */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: all var(--transition-fast); } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-card { background: var(--color-bg-white); width: 100%; max-width: 540px; border-radius: var(--radius-md); padding: 36px; box-shadow: var(--shadow-lg); position: relative; border: 1px solid var(--color-border); } .modal-close { position: absolute; top: 16px; right: 16px; background: transparent; font-size: 1.4rem; color: var(--color-text-muted); } .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-text-heading); margin-bottom: 6px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.95rem; background: var(--color-bg-white); color: var(--color-text-heading); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-brand-orange); outline: none; } /* ========================================================================== SUBPAGE HERO BANNER (SUBPAGE HERO WITH ORANGE GRADIENT OVERLAY & END ALIGNED IMAGE) ========================================================================== */ .page-banner { position: relative; background-image: linear-gradient(90deg, rgba(243, 112, 33, 0.96) 0%, rgba(243, 112, 33, 0.78) 55%, rgba(243, 112, 33, 0.45) 100%), url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?auto=format&fit=crop&w=1200&q=80'); background-size: cover; background-position: right center; background-repeat: no-repeat; color: var(--color-text-white); padding: 68px 0; border-bottom: none; box-shadow: inset 0 -4px 12px rgba(0, 0, 0, 0.1); } .page-banner .page-title { font-family: var(--font-heading); font-size: 3rem; /* 48px */ font-weight: 600; /* FW 600 */ margin-bottom: 12px; color: #FFFFFF !important; line-height: 1.2; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .page-banner p { color: rgba(255, 255, 255, 0.92) !important; font-size: 1.05rem; max-width: 820px; line-height: 1.6; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .page-banner .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85) !important; font-weight: 500; white-space: nowrap; margin-bottom: 14px; } .page-banner .breadcrumb a { color: #FFFFFF !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .page-banner .breadcrumb a:hover { opacity: 0.85; } .page-banner .breadcrumb span { color: rgba(255, 255, 255, 0.8) !important; } .filter-bar { display: flex; justify-content: space-between; align-items: center; background: var(--color-bg-white); padding: 16px 24px; border-radius: var(--radius-md); border: 1px solid var(--color-border); margin-bottom: 36px; } .filter-group { display: flex; gap: 10px; } .filter-btn { padding: 8px 16px; background: var(--color-bg-subtle); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; color: var(--color-text-main); transition: all var(--transition-fast); white-space: nowrap; } .filter-btn.active, .filter-btn:hover { background: var(--color-brand-orange); color: var(--color-text-white); } /* Technical Specifications Table */ .specs-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.925rem; } .specs-table th, .specs-table td { padding: 12px 16px; border: 1px solid var(--color-border); } .specs-table th { background-color: var(--color-bg-subtle); color: var(--color-brand-orange); font-weight: 800; text-align: left; font-family: var(--font-heading); white-space: nowrap; } .specs-table tr:nth-child(even) { background-color: var(--color-bg-light); } /* Pagination */ .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .page-num { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #FFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-weight: 600; color: var(--color-text-heading); } .page-num.active { background: var(--color-brand-orange); color: #FFF; border-color: var(--color-brand-orange); } /* ========================================================================== PHẦN BỔ SUNG — KHỚP 39 ẢNH MOCKUP TRONG FILE EXCEL (17/08/2026) Xem đối chiếu chi tiết: docs/audit-mockup.md Gồm: component mới cho trang chủ / archive / article + TOÀN BỘ RESPONSIVE ========================================================================== */ /* -------------------------------------------------------------------------- 1. TIỆN ÍCH DÙNG CHUNG -------------------------------------------------------------------------- */ .ctw-container-narrow { max-width: 1080px; } /* Hàng tiêu đề section: title bên trái + CTA/điều khiển bên phải (mockup 5.0, 8.0) */ .section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; } /* Hàng điều hướng nằm bên dưới list card: Next/Prev bên trái, Xem tất cả bên phải */ .slider-bottom-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; width: 100%; } /* Tiêu đề có gạch chân ngắn dưới chữ đầu (mockup automech.vn) */ .ctw-section-title-underline { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; color: var(--color-text-heading); line-height: 1.25; position: relative; padding-bottom: 12px; margin: 0; } .ctw-section-title-underline::after { content: ''; position: absolute; left: 0; bottom: 0; width: 88px; height: 3px; background: var(--color-brand-orange); border-radius: 2px; } /* Nút viền tròn (mockup "XEM TẤT CẢ", "Xem thêm về chúng tôi") */ .btn-pill-outline { display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px; border: 1.5px solid var(--color-brand-orange); border-radius: 999px; background: transparent; color: var(--color-brand-orange); font-family: var(--font-main); font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: all var(--transition-fast); } .btn-pill-outline:hover { background: var(--color-brand-orange); color: var(--color-text-white); box-shadow: var(--shadow-orange); } .btn-pill-solid { border-radius: 999px; padding: 14px 40px; } /* Link mũi tên dạng chữ */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--color-brand-orange); font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: gap var(--transition-fast); } .link-arrow:hover { gap: 14px; } .head-row-actions { display: flex; align-items: center; gap: 20px; } /* Dấu * bắt buộc trong form */ .req { color: #DC2626; font-weight: 700; } /* Thanh breadcrumb sáng (thay page-banner tối — mockup không có banner tối) */ .breadcrumb-bar { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); padding: 14px 0; } .breadcrumb-bar .breadcrumb { font-size: 0.85rem; color: var(--color-text-muted); } .breadcrumb-bar .breadcrumb a { color: var(--color-brand-orange); text-decoration: none; } .breadcrumb-bar .breadcrumb a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 2. TRANG CHỦ MỤC 3.0 — 4 ô số liệu 2x2 (nhãn trên, kẻ ngang, số lớn dưới) -------------------------------------------------------------------------- */ .stat-box { display: flex; flex-direction: column; gap: 10px; } .stat-box .stat-label { order: 1; font-size: 0.9rem; color: var(--color-text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--color-border); } .stat-box .stat-number { order: 2; font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--color-brand-orange); } /* -------------------------------------------------------------------------- 3. TRANG CHỦ MỤC 4.0 — card danh mục có DANH SÁCH SẢN PHẨM bên trong -------------------------------------------------------------------------- */ .category-card { display: flex; flex-direction: column; overflow: hidden; } .category-card .cat-thumb { aspect-ratio: 16 / 10; } .category-card .cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cat-head { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); padding: 16px 20px; } .cat-head .cat-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-brand-orange); margin: 0; } .cat-product-list { list-style: none; margin: 0; padding: 0; } .cat-product-list li { border-bottom: 1px solid var(--color-border); } .cat-product-list li a { display: block; padding: 13px 20px; font-size: 0.925rem; color: var(--color-text-main); text-decoration: none; transition: all var(--transition-fast); } .cat-product-list li a:hover { background: var(--color-orange-subtle); color: var(--color-brand-orange); padding-left: 26px; } .cat-more { display: block; padding: 15px 20px; font-size: 0.9rem; font-weight: 800; color: var(--color-text-heading); text-decoration: none; margin-top: auto; } .cat-more span { color: var(--color-brand-orange); margin-left: 4px; } .cat-more:hover { color: var(--color-brand-orange); } /* -------------------------------------------------------------------------- 4. THẺ SẢN PHẨM (mockup 5.0 + trang sản phẩm cấp 1) Cấu trúc: ảnh → tên → excerpt → bullet Hãng sản xuất / Model -------------------------------------------------------------------------- */ .prod-card { display: flex; flex-direction: column; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: all var(--transition-normal); } .prod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .prod-card-thumb { aspect-ratio: 4 / 3; background: var(--color-bg-white); } .prod-card-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px; } .prod-card-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .prod-card-title { font-size: 1rem; font-weight: 700; line-height: 1.45; margin: 0; } .prod-card-title a { color: var(--color-text-card-title); text-decoration: none; } .prod-card-title a:hover { color: var(--color-brand-orange); } .prod-card-excerpt { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prod-card-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .prod-card-meta li { position: relative; padding-left: 14px; font-size: 0.85rem; color: var(--color-text-muted); } .prod-card-meta li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-brand-orange); } .prod-card-meta strong { color: var(--color-text-heading); font-weight: 700; } .prod-card .btn { margin-top: auto; align-self: flex-start; } /* Carousel sản phẩm — mũi tên tròn đè hai bên + dot dưới */ .prod-carousel { position: relative; } .prod-carousel-viewport { overflow: hidden; } .prod-carousel-track { display: flex; gap: 28px; transition: transform var(--transition-normal); } .prod-carousel-track > .prod-card { flex: 0 0 calc((100% - 56px) / 3); min-width: 0; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--color-brand-orange); color: var(--color-text-white); font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-md); transition: all var(--transition-fast); } .carousel-arrow:hover { background: var(--color-brand-orange-dark); } .carousel-arrow:disabled { opacity: 0.35; cursor: not-allowed; } .carousel-prev { left: -22px; } .carousel-next { right: -22px; } .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; } .carousel-dots button { width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px; background: var(--color-bg-gray); cursor: pointer; transition: all var(--transition-fast); } .carousel-dots button.active { width: 28px; background: var(--color-text-heading); } /* Nhóm sản phẩm theo danh mục (trang sản phẩm cấp 1) */ .prod-group { margin-bottom: 52px; } .prod-group-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--color-brand-orange); letter-spacing: 0.02em; margin: 0 0 22px; } .prod-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* -------------------------------------------------------------------------- 5. TRANG CHỦ MỤC 6.0 — tab + thẻ dự án (bỏ badge/địa điểm) -------------------------------------------------------------------------- */ .tab-switcher { display: flex; gap: 28px; } .tab-btn { background: none; border: none; padding: 0 0 10px; font-family: var(--font-main); font-size: 1.05rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; position: relative; transition: color var(--transition-fast); } .tab-btn::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 2px; background: transparent; transition: background var(--transition-fast); } .tab-btn.active { color: var(--color-text-heading); } .tab-btn.active::after { background: var(--color-brand-orange); } .tab-btn:hover { color: var(--color-text-heading); } .tab-panel { display: none; } .tab-panel.active { display: block; } .tab-empty { text-align: center; padding: 72px 24px; background: var(--color-bg-white); border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); } .tab-empty i { font-size: 2rem; color: var(--color-bg-gray); margin-bottom: 14px; display: block; } .tab-empty p { margin-bottom: 12px; } .projects-track { display: flex; gap: 28px; transition: transform var(--transition-normal); } .proj-card { position: relative; flex: 0 0 calc((100% - 3 * 28px) / 3.5); min-width: 0; background: transparent; } .proj-card-thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; } .proj-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-normal); } .proj-card:hover .proj-card-thumb img { transform: scale(1.05); } .proj-card-arrow { display: inline-block; color: var(--color-brand-orange); font-size: 0.85rem; margin-bottom: 8px; text-decoration: none; } .proj-card-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; } .proj-card-title a { color: var(--color-text-heading); text-decoration: none; } .proj-card-title a:hover { color: var(--color-brand-orange); } .proj-card-desc { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.65; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* -------------------------------------------------------------------------- 6. TRANG CHỦ MỤC 7.0 — băng logo có mũi tên hai bên -------------------------------------------------------------------------- */ .marquee-container.has-arrows { display: flex; align-items: center; gap: 16px; padding: 0 24px; } .marquee-viewport { flex: 1; overflow: hidden; display: flex; gap: 40px; scroll-behavior: smooth; } /* has-arrows dùng viewport riêng nên tắt gap của container ngoài */ .marquee-container.has-arrows { gap: 16px; } .marquee-arrow { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg-white); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); } .marquee-arrow:hover { border-color: var(--color-brand-orange); color: var(--color-brand-orange); } /* -------------------------------------------------------------------------- 7. TRANG CHỦ MỤC 8.0 — grid tin tức 3 thẻ, chỉ hiện ngày -------------------------------------------------------------------------- */ .news-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .news-grid-3 .news-card { background: transparent; border: none; box-shadow: none; display: flex; flex-direction: column; } .news-grid-3 .news-thumb { aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; } .news-grid-3 .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-grid-3 .news-body { padding: 0; display: flex; flex-direction: column; gap: 10px; } .news-grid-3 .news-date { font-size: 0.8rem; color: var(--color-text-light); } .news-grid-3 .news-title { font-size: 1rem; font-weight: 700; line-height: 1.5; margin: 0; } .news-grid-3 .news-title a { color: var(--color-text-heading); text-decoration: none; } .news-grid-3 .news-title a:hover { color: var(--color-brand-orange); } .news-grid-3 .news-link { font-size: 0.85rem; font-style: italic; } /* Neutral card frame for real posts that do not have a featured image. */ .ctw-missing-media { display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: #F1F5F9; color: var(--color-text-muted); text-align: center; } /* Bộ lọc chuyên mục dạng pill (thay sidebar tin tức đã bỏ) */ .cat-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; justify-content: center; } .cat-pill { padding: 9px 20px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.875rem; color: var(--color-text-muted); text-decoration: none; transition: all var(--transition-fast); } .cat-pill:hover { border-color: var(--color-brand-orange); color: var(--color-brand-orange); } .cat-pill.active { background: var(--color-brand-orange); border-color: var(--color-brand-orange); color: var(--color-text-white); font-weight: 700; } /* -------------------------------------------------------------------------- 8. TRANG VỀ CHÚNG TÔI — khối zig-zag Tầm nhìn / Sứ mệnh + Giá trị cốt lõi -------------------------------------------------------------------------- */ .vm-section { padding: 80px 0; background: var(--color-bg-light); overflow: hidden; } .vm-creative-card { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; background: transparent; border-radius: var(--radius-lg); padding: 0; } .vm-card-reverse { grid-template-columns: 1.15fr 1fr; } .vm-media-wrap { border-radius: var(--radius-md); overflow: hidden; height: 100%; min-height: 340px; } .vm-media-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .vm-badge-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(243, 112, 33, 0.1); color: var(--color-brand-orange); font-family: var(--font-main); font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; } .vm-title-main { font-family: var(--font-main); font-size: 1.45rem; font-weight: 700; color: var(--color-text-heading); margin-bottom: 16px; } .vm-quote-box { background: var(--color-bg-light); border-left: 4px solid var(--color-brand-orange); padding: 16px 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.975rem; font-weight: 600; color: var(--color-text-main); line-height: 1.6; margin-bottom: 16px; } .vm-desc-text { font-size: 0.925rem; color: var(--color-text-muted); line-height: 1.65; } .mission-pillars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; } .mission-pillar-card { background: #FFFFFF; border-radius: var(--radius-md); padding: 22px 20px; transition: all var(--transition-fast); } .mission-pillar-card:hover { background: #FFFFFF; transform: translateY(-2px); } .pillar-icon { width: 44px; height: 44px; border-radius: 10px; background: #F8FAFC; color: var(--color-brand-orange); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 14px; } .pillar-title { font-family: var(--font-main); font-size: 20px; font-weight: 600; color: #334155; margin-bottom: 6px; } .pillar-desc { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; } @media (max-width: 992px) { .vm-creative-card, .vm-card-reverse { grid-template-columns: 1fr; padding: 24px; } .mission-pillars-grid { grid-template-columns: 1fr; } } /* Core Values Horizontal Timeline Slider (With Connecting Line & Top/Bottom Cards) */ .cv-timeline-section { padding: 80px 0; background: var(--color-bg-white); overflow: hidden; position: relative; } .cv-timeline-viewport { position: relative; width: 100%; overflow: hidden; margin-top: 36px; } .cv-timeline-track { display: flex; position: relative; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 10px 40px 10px 10px; gap: 40px; width: max-content; user-select: none; } .cv-timeline-track::-webkit-scrollbar { display: none; } .cv-line-bg { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #CBD5E1; transform: translateY(-50%); z-index: 1; } .cv-line-active { position: absolute; top: 0; left: 0; height: 100%; background: var(--color-brand-orange); width: 100%; } .cv-timeline-col { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 320px; flex-shrink: 0; } .cv-slot-top, .cv-slot-bottom { width: 100%; height: 210px; display: flex; flex-direction: column; } .cv-slot-top { justify-content: flex-end; padding-bottom: 14px; } .cv-slot-bottom { justify-content: flex-start; padding-top: 14px; } .cv-node-circle { width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; border: 2.5px solid var(--color-brand-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 3; } .cv-node-inner { width: 12px; height: 12px; border-radius: 50%; background: var(--color-brand-orange); } .cv-timeline-card { width: 100%; background: #F8FAFC; border-radius: 16px; padding: 22px 20px; transition: all var(--transition-fast); border: 1px solid #EEF2F6; text-align: left; } .cv-timeline-card:hover { background: #FFFFFF; border-color: var(--color-brand-orange); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(243, 112, 33, 0.08); } .cv-icon-box { width: 44px; height: 44px; border-radius: 12px; background: #FFF7ED; color: var(--color-brand-orange); border: 1px solid rgba(243, 112, 33, 0.2); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 12px; } .cv-card-title { font-family: var(--font-main); font-size: 1.05rem; font-weight: 700; color: #1E293B; margin-bottom: 6px; } .cv-card-desc { font-size: 0.85rem; color: #64748B; line-height: 1.5; margin: 0; } .cv-bottom-actions { display: flex; align-items: center; justify-content: flex-start; margin-top: 24px; padding-left: 4px; } .cv-nav-btns { display: flex; gap: 12px; } .cv-arrow-btn { width: 44px; height: 44px; border-radius: 50%; background: #F1F5F9; border: none; color: #334155; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; transition: all var(--transition-fast); } .cv-arrow-btn:hover { background: var(--color-brand-orange); color: #FFFFFF; } @media (max-width: 768px) { .cv-timeline-track { gap: 20px; padding: 10px 20px; } .cv-timeline-col { width: 280px; } .cv-slot-top, .cv-slot-bottom { height: 230px; } } /* -------------------------------------------------------------------------- 9. TRANG ARCHIVE CẤP 1 — tiêu đề canh giữa + intro + grid 3 cột ảnh -------------------------------------------------------------------------- */ .archive-head-section { padding: 48px 0 8px; background: var(--color-bg-white); } .archive-section { padding: 56px 0 80px; background: var(--color-bg-white); } .archive-page-title { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-brand-orange); text-align: center; margin: 0 0 36px; } .archive-sapo { max-width: 900px; margin: 0 auto; text-align: center; font-size: 1rem; color: var(--color-text-muted); line-height: 1.8; } .archive-intro { margin-bottom: 44px; } .archive-intro p { font-size: 0.975rem; color: var(--color-text-muted); line-height: 1.85; margin-top: 18px; } .archive-form-section { padding: 0 0 80px; background: var(--color-bg-white); } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; } .grid3-card { text-decoration: none; display: block; } .grid3-thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .grid3-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-normal); } .grid3-card:hover .grid3-thumb img { transform: scale(1.06); } .grid3-caption { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-heading); text-align: center; margin: 0; transition: color var(--transition-fast); } .grid3-card:hover .grid3-caption { color: var(--color-brand-orange); } /* -------------------------------------------------------------------------- 10. TRANG BÀI VIẾT CẤP 2 — văn xuôi + ảnh caption + meta tác giả/share -------------------------------------------------------------------------- */ .article-section { padding: 56px 0 80px; background: var(--color-bg-white); } .article-page-title { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; color: var(--color-brand-orange); text-align: center; margin: 0 0 32px; } .article-section p { font-size: 1rem; color: var(--color-text-main); line-height: 1.85; margin-bottom: 20px; text-align: justify; } .article-figure { margin: 36px 0; text-align: center; } .article-figure img { max-width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: block; margin: 0 auto 12px; } .article-figure figcaption { font-size: 0.875rem; font-style: italic; color: var(--color-text-muted); } /* Badge ngày canh giữa trên đường kẻ ngang (mockup tin tức cấp 2) */ .article-date-badge { position: relative; text-align: center; margin-bottom: 22px; } .article-date-badge::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-border); } .article-date-badge span { position: relative; display: inline-block; padding: 5px 18px; background: var(--color-brand-orange); color: var(--color-text-white); font-size: 0.8rem; font-weight: 700; border-radius: var(--radius-sm); } .article-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; font-size: 0.85rem; color: var(--color-text-muted); } .article-author i { color: var(--color-text-light); margin-right: 4px; } .article-share { display: flex; align-items: center; gap: 10px; } .article-share a { width: 30px; height: 30px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.8rem; text-decoration: none; transition: all var(--transition-fast); } .article-share a:hover { background: var(--color-brand-orange); border-color: var(--color-brand-orange); color: var(--color-text-white); } /* Form tư vấn cuối bài */ .article-form { margin-top: 52px; padding: 40px; background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-textarea { width: 100%; font-family: var(--font-main); font-size: 0.925rem; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-white); resize: vertical; } .form-textarea:focus { outline: none; border-color: var(--color-brand-orange); box-shadow: 0 0 0 3px var(--color-orange-light); } /* -------------------------------------------------------------------------- 11. TRANG SẢN PHẨM CẤP 2 — ảnh chính có nút zoom + bảng 2 cột -------------------------------------------------------------------------- */ .prod-gallery-main { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; } .prod-gallery-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; background: var(--color-bg-white); } .prod-zoom-btn { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.92); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); } .prod-zoom-btn:hover { background: var(--color-brand-orange); border-color: var(--color-brand-orange); color: var(--color-text-white); } .prod-desc-heading { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--color-text-heading); margin: 0 0 20px; } /* Lightbox xem ảnh lớn */ .img-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, 0.9); display: none; align-items: center; justify-content: center; padding: 40px; } .img-lightbox.open { display: flex; } .img-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); } .img-lightbox-close { position: absolute; top: 24px; right: 28px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.1rem; cursor: pointer; } .img-lightbox-close:hover { background: var(--color-brand-orange); } /* -------------------------------------------------------------------------- 12. TRANG LIÊN HỆ -------------------------------------------------------------------------- */ .contact-hero { padding: 32px 0 0; background: var(--color-bg-white); } .contact-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-lg); display: block; } .contact-form-block { max-width: 1080px; margin: 0 auto; } .contact-form-lead { font-size: 0.9rem; font-weight: 700; color: var(--color-text-heading); margin: 18px 0 26px; } .contact-submit-row { text-align: center; margin-top: 32px; margin-bottom: 56px; } .contact-address-section { padding: 0 0 48px; background: var(--color-bg-white); } .contact-address-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: flex; flex-direction: column; gap: 14px; } .contact-address-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.925rem; color: var(--color-text-main); line-height: 1.6; } .contact-address-list li i { color: var(--color-brand-orange); margin-top: 4px; flex: none; width: 18px; text-align: center; } .contact-address-list li a { color: var(--color-text-main); text-decoration: none; } .contact-address-list li a:hover { color: var(--color-brand-orange); } .contact-map-section { line-height: 0; } .contact-map-section iframe { display: block; border: 0; } /* -------------------------------------------------------------------------- 13. MENU MOBILE — drawer trượt từ trái, accordion (mockup home-M-1.0) -------------------------------------------------------------------------- */ .mobile-drawer-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: all var(--transition-normal); } .mobile-drawer-overlay.open { opacity: 1; visibility: visible; } .mobile-drawer { position: fixed; top: 0; left: 0; z-index: 99999; width: 320px; max-width: 86vw; height: 100vh; height: 100dvh; background: #181B1E; box-shadow: 10px 0 35px rgba(0, 0, 0, 0.45); transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } .mobile-drawer.open { transform: translateX(0); } .mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #22262A; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobile-drawer-head span { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; } .mobile-drawer-close { background: rgba(255, 255, 255, 0.08); border: none; color: #cbd5e1; font-size: 1.15rem; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all var(--transition-fast); } .mobile-drawer-close:hover { background: var(--color-brand-orange); color: #fff; } .mobile-nav { list-style: none; margin: 0; padding: 0; flex: 1; } .mobile-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .mobile-nav-row { display: flex; align-items: stretch; } .mobile-nav-row > a { flex: 1; padding: 14px 20px; font-size: 0.925rem; color: #d7dadd; text-decoration: none; transition: all var(--transition-fast); } .mobile-nav-row > a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } .mobile-sub-toggle { flex: none; width: 48px; background: none; border: none; border-left: 1px solid rgba(255, 255, 255, 0.07); color: #9aa0a6; font-size: 0.8rem; cursor: pointer; transition: all var(--transition-fast); } .mobile-sub-toggle i { transition: transform var(--transition-fast); } .mobile-nav li.open > .mobile-nav-row .mobile-sub-toggle i { transform: rotate(180deg); } .mobile-sub-toggle:hover { color: var(--color-brand-orange); } .mobile-subnav { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; background: rgba(0, 0, 0, 0.22); transition: max-height var(--transition-normal); } .mobile-nav li.open > .mobile-subnav { max-height: 420px; } .mobile-subnav li { border-bottom: none; } .mobile-subnav a { display: block; padding: 12px 20px 12px 36px; font-size: 0.875rem; color: #a9aeb3; text-decoration: none; } .mobile-subnav a:hover { color: var(--color-brand-orange); } .mobile-drawer-lang { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); background: #181B1E; } .mobile-drawer-lang .flag-btn { background: transparent !important; border: 1.5px solid transparent !important; border-radius: 3px; padding: 2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); opacity: 0.6; line-height: 1; } .mobile-drawer-lang .flag-btn:hover { background: transparent !important; opacity: 1; } .mobile-drawer-lang .flag-btn.active { border: 1.5px solid var(--color-brand-orange) !important; background: transparent !important; opacity: 1; box-shadow: none; } .mobile-drawer-lang .flag-icon { display: block; border-radius: 2px; } body.drawer-open { overflow: hidden; } /* ========================================================================== 14. RESPONSIVE — Sheet 2 của Excel (Cấu trúc trang chủ Mobile) Trước đây file CSS này KHÔNG có một câu @media nào. ========================================================================== */ /* ---------- ≤1280px: thu gọn khoảng cách, carousel 3 -> vẫn 3 ---------- */ @media (max-width: 1280px) { .ctw-container { padding-left: 24px; padding-right: 24px; } .carousel-prev { left: 8px; } .carousel-next { right: 8px; } .core-values-grid { grid-template-columns: repeat(3, 1fr); } .vm-block { gap: 36px; } } /* ---------- ≤1024px: tablet & mobile header ---------- */ @media (max-width: 1024px) { html { font-size: 15px; } /* Header: ẩn topbar & nav ngang, hiện logo + nút hamburger gọn gàng */ .top-announcement-bar { display: none !important; } .main-navbar { display: none !important; } .header-search-bar { display: none !important; } .header-contact-blocks { display: none !important; } .middle-header-bar { padding: 10px 0; background: var(--color-bg-white); } .middle-header-bar .ctw-container { display: flex; align-items: center; justify-content: space-between; } .brand-logo .logo-img { height: 38px; width: auto; max-width: 170px; object-fit: contain; } .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-orange-subtle); color: var(--color-brand-orange); border: 1px solid var(--color-border-orange); font-size: 1.25rem; cursor: pointer; transition: all var(--transition-fast); } .mobile-toggle:hover { background: var(--color-brand-orange); color: #fff; } /* Grid chung 3 -> 2 cột */ .prod-grid-3, .news-grid-3, .featured-projects-grid, .grid3 { grid-template-columns: repeat(2, 1fr); } .core-values-grid { grid-template-columns: repeat(2, 1fr); } /* Carousel: 3 -> 2 thẻ; dự án 3.5 -> 2.2 thẻ */ .prod-carousel-track > .prod-card { flex-basis: calc((100% - 28px) / 2); } .proj-card { flex-basis: calc((100% - 28px) / 2.2); } /* About: xếp dọc, ảnh lên trên */ .about-top-grid { grid-template-columns: 1fr; gap: 36px; } .about-top-grid .about-media { order: -1; } .about-top-grid .media-wrapper { height: 340px; } .about-title { font-size: 2.1rem; } .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } /* Tầm nhìn / Sứ mệnh: xếp dọc, ảnh luôn lên trên */ .vm-block, .vm-block-reverse { grid-template-columns: 1fr; gap: 24px; } .vm-block .vm-media { order: -1; } /* Trang sản phẩm: sidebar lọc xuống dưới nội dung */ .product-page-layout, .news-page-layout { grid-template-columns: 1fr; } .product-sidebar { order: 2; } /* Connect CTA Card Tablet */ .connect-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 28px; } .connect-action { min-width: 100%; width: 100%; align-items: flex-start; } /* Sticky Timeline Tablet */ .ctw-core-values .timeline-track { padding: 0 60px; gap: 48px; } .ctw-core-values .timeline-line-bg { left: 60px; right: 60px; } .ctw-core-values .timeline-col { width: 250px; } .ctw-core-values .slot-top, .ctw-core-values .slot-bottom { height: 180px; } .ctw-core-values .date-text { font-size: 2.2rem; } /* Footer tablet */ .footer-top { grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; } .footer-top > div:last-child { grid-column: 1 / -1; } .footer-map-box { height: 200px; } .section-head-row { flex-wrap: wrap; } .contact-hero img { aspect-ratio: 16 / 9; } .hero-slider { height: 46vw; min-height: 300px; } } /* ---------- ≤768px: mobile ---------- */ @media (max-width: 768px) { html { font-size: 14px; } .ctw-container { padding-left: 18px; padding-right: 18px; } /* Giảm padding dọc, nhưng KHÔNG áp cho hero banner và bản đồ (2 khối này không có padding) */ section:not(.hero-slider):not(.contact-map-section):not(.partners-section):not(.parallax-band) { padding-top: 48px !important; padding-bottom: 48px !important; } /* About section mobile */ .about-top-grid { grid-template-columns: 1fr; gap: 24px; } .about-top-grid .about-media { order: -1; } .about-top-grid .media-wrapper { height: 240px; } .about-title { font-size: 1.65rem !important; line-height: 1.3; } .about-sapo { font-size: 0.95rem; padding-left: 12px; margin-bottom: 14px; } .about-body { font-size: 0.9rem; line-height: 1.55; } .about-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } .stat-box { padding: 14px 10px; } .stat-number { font-size: 1.9rem; } .stat-label { font-size: 0.775rem; white-space: normal; } .about-cta-center { margin-top: 24px; } .about-cta-center .btn { width: 100%; justify-content: center; } /* Topbar chỉ giữ cờ ngôn ngữ */ .quick-links { display: none; } /* Banner: giảm chiều cao, ẩn mũi tên (chỉ swipe + dot) */ .hero-slider { height: 44vw; min-height: 220px; } .slider-arrows { display: none; } .hero-slider .slider-controls { bottom: 12px; } /* Tất cả grid về 1 cột */ .category-grid, .prod-grid-3, .news-grid-3, .featured-projects-grid, .grid3, .core-values-grid, .form-row-2 { grid-template-columns: 1fr !important; } /* Trên Mobile chỉ hiện 4 thẻ dự án tiêu biểu */ .featured-projects-grid > .project-card:nth-child(n+5) { display: none !important; } .featured-projects-grid .proj-thumb { height: 190px; } .featured-projects-grid .proj-body { padding: 18px 16px; } .featured-projects-grid .proj-title { white-space: normal; font-size: 1.05rem; line-height: 1.35; } /* Sticky Timeline Mobile (Giá trị cốt lõi CTWELD) -> Thu gọn không gian, vuốt chạm mượt mà */ .ctw-core-values.history-sticky-section { height: auto !important; padding: 44px 0 48px !important; background-color: var(--color-bg-light); } .ctw-core-values .history-sticky-container { position: static !important; height: auto !important; padding: 0 !important; display: block !important; } .ctw-core-values .section-header { margin-bottom: 24px !important; padding: 0 12px; text-align: center; } .ctw-core-values .ctw-section-title { font-size: 1.6rem !important; margin-bottom: 8px; } .ctw-core-values .section-subtitle { font-size: 0.875rem; line-height: 1.5; } .ctw-core-values .timeline-slider-wrap { position: relative; width: 100%; overflow: visible; } .ctw-core-values .timeline-viewport { padding: 10px 0; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ctw-core-values .timeline-viewport::-webkit-scrollbar { display: none; } .ctw-core-values .timeline-track { padding: 0 44px; gap: 20px; width: max-content; } .ctw-core-values .timeline-line-bg { left: 44px; right: 44px; height: 2px; } .ctw-core-values .timeline-col { width: 220px; } .ctw-core-values .slot-top, .ctw-core-values .slot-bottom { height: 110px; padding: 2px 0; } .ctw-core-values .slot-top { justify-content: flex-end; padding-bottom: 6px; } .ctw-core-values .slot-bottom { justify-content: flex-start; padding-top: 6px; } .ctw-core-values .date-text { font-size: 1.65rem; margin-bottom: 2px; } .ctw-core-values .desc-text { font-size: 0.8rem !important; line-height: 1.35; max-width: 195px; } .ctw-core-values .node-circle { width: 36px; height: 36px; font-size: 0.85rem; } .ctw-core-values .timeline-arrow { display: flex !important; position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid var(--color-brand-orange); color: var(--color-brand-orange); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); z-index: 60; cursor: pointer; align-items: center; justify-content: center; font-size: 0.9rem; transition: all var(--transition-fast); } .ctw-core-values .timeline-arrow:hover, .ctw-core-values .timeline-arrow:active { background: var(--color-brand-orange); color: #FFFFFF; } .ctw-core-values .timeline-arrow.prev { left: 4px; } .ctw-core-values .timeline-arrow.next { right: 4px; } /* Carousel: 1 thẻ / khung; dự án 1.15 thẻ để lộ mép thẻ sau */ .prod-carousel-track > .prod-card { flex-basis: 100%; } .proj-card { flex-basis: 86%; } .prod-carousel-track, .projects-track { gap: 16px; } .carousel-arrow { width: 36px; height: 36px; font-size: 0.85rem; } /* Tiêu đề */ .ctw-section-title { font-size: 1.65rem !important; } .ctw-section-title-underline { font-size: 1.5rem; } .archive-page-title { font-size: 1.75rem; } .article-page-title { font-size: 1.5rem; } /* Hàng tiêu đề + CTA: xếp dọc */ .section-head-row { flex-direction: column; align-items: flex-start; gap: 18px; } .head-row-actions { width: 100%; justify-content: space-between; } .tab-switcher { gap: 18px; overflow-x: auto; width: 100%; } .tab-btn { font-size: 0.925rem; white-space: nowrap; } /* Bài viết: bỏ canh đều hai bên cho dễ đọc trên màn hẹp */ .article-section p { text-align: left; } .article-form { padding: 24px; } .article-meta-row { flex-direction: column; align-items: flex-start; gap: 12px; } /* Bảng thông số: cho phép cuộn ngang trong khung riêng */ .specs-table { display: block; overflow-x: auto; white-space: nowrap; } /* Trang sản phẩm cấp 2: gallery và thông tin xếp dọc */ .product-detail-grid { grid-template-columns: 1fr !important; } /* Liên hệ */ .contact-hero img { aspect-ratio: 4 / 3; } .contact-map-section iframe { height: 320px; } /* Connect CTA Card Mobile */ .connect-section { padding: 36px 0; background: var(--color-brand-orange); } .connect-card { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 18px; border-radius: var(--radius-md); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } .connect-title { font-size: 1.45rem !important; line-height: 1.3; margin-bottom: 8px; white-space: normal; text-wrap: balance; } .connect-desc { font-size: 0.875rem; line-height: 1.55; } .connect-action { min-width: 0 !important; width: 100%; align-items: stretch; gap: 12px; } .connect-form { flex-direction: column; width: 100%; gap: 10px; } .connect-input { width: 100%; padding: 12px 14px; font-size: 0.875rem; border-radius: var(--radius-sm); } .connect-form .btn { width: 100%; justify-content: center; padding: 12px 20px; } .connect-hotline { justify-content: center; font-size: 0.85rem; margin-top: 4px; } /* Footer Mobile */ .main-footer { padding-top: 40px; padding-bottom: 20px; } .footer-top { grid-template-columns: 1fr !important; gap: 28px; padding-bottom: 30px; } .footer-top > div:last-child { grid-column: auto; } .footer-logo-box .logo-img { height: 42px; } .footer-desc-text { font-size: 0.875rem; line-height: 1.6; margin-bottom: 16px; } .footer-contact-list { font-size: 0.85rem; gap: 10px; margin-bottom: 18px; } .footer-heading { font-size: 1rem; margin-bottom: 12px; } .footer-heading::after { margin-top: 6px; width: 32px; } .footer-dash-links li { margin-bottom: 8px; } .footer-dash-links a { font-size: 0.875rem; } .footer-map-box { height: 200px; width: 100%; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 16px 0 10px; font-size: 0.8rem; line-height: 1.5; } .footer-bottom > div { display: flex; flex-direction: column; align-items: center; gap: 6px; } .back-to-top-btn { margin: 6px auto 0; } .quick-contact-bar { bottom: 12px; right: 12px; } .qc-tooltip { display: none; } /* Modal tư vấn */ .modal-card { padding: 24px 20px; max-height: 88vh; overflow-y: auto; } .modal-card form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } /* ---------- ≤480px: màn hẹp ---------- */ @media (max-width: 480px) { .logo-img { max-height: 40px; } .archive-page-title { font-size: 1.5rem; } .cv-icon { width: 46px; height: 46px; font-size: 1.05rem; } .marquee-container.has-arrows { padding: 0 8px; } .marquee-arrow { width: 30px; height: 30px; } .partner-logo { font-size: 1.1rem; } .cat-pills { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; } .cat-pill { white-space: nowrap; } } /* ---------- In ấn ---------- */ @media print { .site-header, .quick-contact-bar, .modal-overlay, .mobile-drawer, .mobile-drawer-overlay, .connect-section, .article-form { display: none !important; } .article-section p { text-align: left; } } /* ========================================================================== CREATIVE SOLUTION PAGE CUSTOM STYLES (GIAI-PHAP.HTML) ========================================================================== */ .sol-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; } .sol-metric-card { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-md); padding: 20px; display: flex; align-items: center; gap: 16px; color: #FFFFFF; transition: transform var(--transition-fast), background var(--transition-fast); } .sol-metric-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.22); } .sol-metric-icon { width: 50px; height: 50px; border-radius: 50%; background: #FFFFFF; color: var(--color-brand-orange); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.15); } .sol-metric-val { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; line-height: 1.1; color: #FFFFFF; } .sol-metric-lbl { font-size: 0.825rem; color: rgba(255, 255, 255, 0.9); margin-top: 2px; } /* Solution Tabs Navigation (Folder Tag Style - No Border, No Box-Shadow, No Text Drop) */ .sol-tab-nav { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 0; position: relative; z-index: 2; border: none !important; box-shadow: none !important; padding-bottom: 2px; } .sol-tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #F1F5F9; border: none !important; box-shadow: none !important; border-radius: 10px 10px 0 0; /* 2 cạnh trên bo góc, 2 cạnh dưới không có */ font-family: var(--font-main); font-weight: 700; font-size: 0.95rem; color: var(--color-text-heading); cursor: pointer; white-space: nowrap; /* Đứng rớt chữ */ flex-shrink: 0; transition: all var(--transition-fast); } .sol-tab-btn i { color: var(--color-brand-orange); font-size: 1.05rem; } .sol-tab-btn:hover { background: #E2E8F0; color: var(--color-brand-orange); } .sol-tab-btn.active { background: var(--color-brand-orange); color: #FFFFFF; } .sol-tab-btn.active i { color: #FFFFFF; } /* Solution Tab Content Panes (No Border, No Box-Shadow) */ .sol-tab-pane { display: none; animation: fadeIn 0.4s ease; } .sol-tab-pane.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .sol-pane-card { background: var(--color-bg-white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); border: none !important; box-shadow: none !important; padding: 40px; } .sol-pane-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; } .sol-feature-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 28px 0; } .sol-feature-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: var(--color-text-main); line-height: 1.45; } .sol-feature-item i { color: var(--color-brand-orange); font-size: 1.1rem; margin-top: 3px; flex-shrink: 0; } .sol-pane-media { position: relative; border-radius: var(--radius-md); overflow: hidden; border: none !important; box-shadow: none !important; } .sol-pane-media img { width: 100%; height: 340px; object-fit: cover; display: block; } .sol-media-tag { position: absolute; bottom: 16px; left: 16px; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(6px); color: #FFFFFF; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; } .sol-pane-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 24px; } .prod-detail-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; } /* 5-Step Bento Grid Process Section (100% Matching Screenshot Design) */ .pipeline-flow-section { padding: 80px 0; background: var(--color-bg-white); } .pipeline-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; } .bento-card { background: #F5F6F8; border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 250px; transition: all var(--transition-fast); } .bento-card:hover { background: #EEF0F4; } .bento-card-w2 { grid-column: span 2; } .bento-card-w1 { grid-column: span 1; } .bento-icon-circle { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--color-brand-orange); display: flex; align-items: center; justify-content: center; color: var(--color-brand-orange); font-size: 1.3rem; background: #FFFFFF; flex-shrink: 0; } .bento-header-row { display: flex; align-items: center; gap: 16px; width: 100%; margin-bottom: 20px; } .bento-footer-row { display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 20px; } /* Dot Matrix Trail Graphic Pattern */ .dot-matrix-pattern { flex: 1; height: 28px; background-image: radial-gradient(circle, rgba(243, 112, 33, 0.45) 1.5px, transparent 1.5px); background-size: 10px 10px; mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 85%); -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 85%); } .dot-matrix-pattern.fade-left { mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 85%); -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 85%); } .bento-title { font-family: var(--font-main); font-size: 1.25rem; font-weight: 600; color: #334155; margin-bottom: 10px; } .bento-desc { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; } @media (max-width: 1024px) { .pipeline-bento-grid { grid-template-columns: 1fr; } .bento-card-w2, .bento-card-w1 { grid-column: span 1; } } /* ROI & Efficiency Comparison Matrix Table */ .roi-section { padding: 80px 0; background: var(--color-bg-light); } .roi-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 36px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .roi-compare-table { width: 100%; min-width: 650px; border-collapse: separate; border-spacing: 0; background: var(--color-bg-white); margin-top: 0; } .roi-compare-table th, .roi-compare-table td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; } .roi-compare-table th { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; background: var(--color-bg-subtle); color: var(--color-text-heading); } .roi-compare-table th.ctweld-col { background: var(--color-brand-orange); color: #FFFFFF; text-align: center; } .roi-compare-table td.ctweld-val { background: rgba(243, 112, 33, 0.05); font-weight: 700; color: var(--color-brand-orange); text-align: center; } .roi-compare-table tr:last-child td { border-bottom: none; } .badge-winner { display: inline-flex; align-items: center; gap: 6px; background: rgba(243, 112, 33, 0.12); color: var(--color-brand-orange); padding: 4px 10px; border-radius: 12px; font-size: 0.825rem; font-weight: 700; } @media (max-width: 1024px) { .sol-metrics-grid { grid-template-columns: repeat(2, 1fr); } .sol-pane-grid { grid-template-columns: 1fr; gap: 24px; min-width: 0; width: 100%; } .sol-pane-card { padding: 24px 20px; overflow: hidden; } .pipeline-flow-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sol-metrics-grid { grid-template-columns: 1fr; } .sol-tab-nav { flex-direction: column; } .sol-tab-btn { width: 100%; justify-content: center; } .sol-pane-card { padding: 20px 14px; } .sol-pane-actions, .prod-detail-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; } .sol-pane-actions .btn, .prod-detail-actions .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; } } /* -------------------------------------------------------------------------- 15. BỔ SUNG 18/08/2026 — nội dung chính thức trang Về chúng tôi Google Docs mở được (trước đó 401): 6 giá trị cốt lõi thay vì 5, sứ mệnh dạng gạch đầu dòng, và có thêm mục "Lịch sử hình thành". -------------------------------------------------------------------------- */ /* Tiêu đề mục trong bài viết (1. Lịch sử hình thành...) */ .article-h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--color-text-heading); margin: 36px 0 18px; } /* Sứ mệnh: 4 gạch đầu dòng thay cho 1 đoạn văn */ .vm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .vm-list li { position: relative; padding-left: 26px; font-size: 0.975rem; color: var(--color-text-muted); line-height: 1.75; } .vm-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; font-size: 0.8rem; color: var(--color-brand-orange); } /* Doc có 6 giá trị (mockup weldcom.vn có 5) -> 3 cột x 2 hàng cho cân */ .core-values-grid.cv-grid-6 { grid-template-columns: repeat(3, 1fr); gap: 24px; } .cv-text { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; } @media (max-width: 1024px) { .core-values-grid.cv-grid-6 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .core-values-grid.cv-grid-6 { grid-template-columns: 1fr; } .article-h2 { font-size: 1.25rem; } } /* ========================================================================== 16. PARALLAX BAND — TRANG CHỦ (18/08/2026) Ảnh nền cuộn chậm hơn nội dung, tạo chiều sâu giữa mục 6.0 và 7.0. Vì sao KHÔNG dùng `background-attachment: fixed`: - iOS Safari bỏ qua hoàn toàn (render thành scroll) -> mobile mất hiệu ứng - Trình duyệt phải repaint cả vùng nền mỗi frame -> giật khi cuộn Thay bằng lớp ảnh riêng dịch chuyển bằng transform (GPU compositing), JS chỉ chạy khi section nằm trong viewport. ========================================================================== */ .parallax-band { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: 520px; padding: 96px 0; background: #0E1216; /* nền dự phòng khi ảnh chưa tải */ } /* Lớp ảnh cao hơn section (overscan trên + dưới) để khi dịch chuyển không bao giờ lòi mép trống ra. */ .parallax-layer { position: absolute; left: 0; right: 0; top: -14%; bottom: -14%; z-index: -2; will-change: transform; } .parallax-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Lớp phủ để chữ trắng luôn đủ tương phản dù ảnh sáng hay tối */ .parallax-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(14, 18, 22, 0.94) 0%, rgba(14, 18, 22, 0.82) 42%, rgba(14, 18, 22, 0.45) 100%), linear-gradient(to bottom, rgba(14, 18, 22, 0.55) 0%, transparent 30%, transparent 70%, rgba(14, 18, 22, 0.55) 100%); } .parallax-inner { max-width: 760px; margin-right: auto; } .parallax-kicker { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-brand-orange); padding-bottom: 14px; margin-bottom: 18px; position: relative; } .parallax-kicker::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; background: var(--color-brand-orange); } .parallax-title { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 700; line-height: 1.2; color: #fff; margin: 0 0 20px; } .parallax-desc { font-size: 1.05rem; line-height: 1.8; color: rgba(255, 255, 255, 0.82); margin: 0 0 32px; } .parallax-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* Nút viền sáng, dùng riêng trên nền tối */ .btn-ghost-light { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-sm); background: transparent; color: #fff; font-family: var(--font-main); font-size: 0.925rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: all var(--transition-fast); } .btn-ghost-light:hover { background: #fff; border-color: #fff; color: var(--color-text-heading); } /* Divider ngay dưới dải parallax: phải có nền tối, nếu để trong suốt thì phần chưa tô của SVG sẽ lòi nền trắng của body ra. */ .section-divider-on-dark { background: #0E1216; } /* ========================================================================== GLOBAL CREATIVE SCROLL REVEAL & PROGRESSIVE LOAD ENGINE (HIGH-IMPACT V2) ========================================================================== */ .reveal-fade-up, [data-reveal="fade-up"], [data-reveal] { opacity: 0; transform: translateY(48px); filter: blur(8px); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--stagger-i, 0) * 0.12s); will-change: opacity, transform, filter; } .reveal-fade-up.is-revealed, [data-reveal="fade-up"].is-revealed, [data-reveal].is-revealed { opacity: 1; transform: translateY(0); filter: blur(0); } /* Card Spring & Float Reveal (Rất nổi bật, đàn hồi tự nhiên - Không đổ bóng) */ .reveal-card-spring { opacity: 0; transform: translateY(56px) scale(0.92) rotateX(4deg); filter: blur(10px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--stagger-i, 0) * 0.12s); will-change: opacity, transform, filter; transform-origin: center bottom; box-shadow: none; } .reveal-card-spring.is-revealed { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0); box-shadow: none; } .reveal-scale, [data-reveal="scale"] { opacity: 0; transform: scale(0.88) translateY(24px); filter: blur(8px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--stagger-i, 0) * 0.12s); will-change: opacity, transform, filter; } .reveal-scale.is-revealed, [data-reveal="scale"].is-revealed { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } .reveal-slide-left, [data-reveal="left"] { opacity: 0; transform: translateX(-56px) scale(0.96); filter: blur(8px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform, filter; } .reveal-slide-left.is-revealed, [data-reveal="left"].is-revealed { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } .reveal-slide-right, [data-reveal="right"] { opacity: 0; transform: translateX(56px) scale(0.96); filter: blur(8px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform, filter; } .reveal-slide-right.is-revealed, [data-reveal="right"].is-revealed { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } @media (max-width: 768px) { .reveal-slide-left, [data-reveal="left"], .reveal-slide-right, [data-reveal="right"] { transform: translateY(24px) scale(0.98); } .reveal-slide-left.is-revealed, [data-reveal="left"].is-revealed, .reveal-slide-right.is-revealed, [data-reveal="right"].is-revealed { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .parallax-layer { transform: none !important; } [data-parallax-reveal], .reveal-fade-up, .reveal-card-spring, .reveal-scale, .reveal-slide-left, .reveal-slide-right, [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- 17. BỔ SUNG 18/08/2026 — data thật + ẩn data mẫu -------------------------------------------------------------------------- */ /* Tên pháp nhân đầy đủ + MST ở footer (Excel Sheet 1 mục 9.0) */ .footer-legal-name { font-size: 0.8rem; line-height: 1.5; color: var(--color-text-heading); margin-bottom: 10px; } .footer-legal-name .footer-tax { font-weight: 400; color: var(--color-text-muted); } /* Trang chi tiết sản phẩm — nội dung chính thức từ tài liệu khách hàng */ .prod-detail-section { padding: 56px 0 72px; background: var(--color-bg-white); } .prod-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 56px; } .prod-detail-title { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; line-height: 1.3; color: var(--color-text-heading); margin: 0 0 12px; } .prod-detail-code { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--color-brand-orange); margin-bottom: 20px; } .prod-detail-sapo { font-size: 0.975rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 24px; } .prod-highlight-box { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px 22px; margin-bottom: 24px; } .prod-highlight-box h4 { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-heading); margin: 0 0 14px; } .prod-highlight-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .prod-highlight-box li { position: relative; padding-left: 15px; font-size: 0.875rem; color: var(--color-text-muted); } .prod-highlight-box li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-brand-orange); } .prod-highlight-box strong { color: var(--color-text-heading); } .prod-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; } .prod-article { margin: 0 auto; } .prod-article p { font-size: 1rem; line-height: 1.85; color: var(--color-text-main); margin-bottom: 18px; } .prod-article ul { list-style: disc; margin: 0 0 18px; padding-inline-start: 1.5em; } .prod-article ol { list-style: decimal; margin: 0 0 18px; padding-inline-start: 1.7em; } .prod-article li { display: list-item; font-size: 1rem; line-height: 1.85; color: var(--color-text-main); } .prod-article li + li { margin-top: 6px; } .prod-article > h3 { margin-left: 18px; } .prod-article > h3 + p { margin-left: 18px; } .prod-article > h3 + ul { margin-left: 18px; } .prod-article > h3 + ol { margin-left: 18px; } .prod-article > h3 + table { max-width: calc(100% - 18px); margin-left: 18px; } .prod-article ul ul { list-style: circle; margin: 6px 0 0; } .prod-article ol ul { list-style: circle; margin: 6px 0 0; } .prod-article ol ol { list-style: lower-alpha; margin: 6px 0 0; } .prod-article ul ol { list-style: lower-alpha; margin: 6px 0 0; } .prod-article .article-h2 { font-size: 1.4rem; margin: 38px 0 16px; } .prod-article .article-h3 { font-family: var(--font-main); font-size: 1.05rem; font-weight: 700; color: var(--color-text-heading); margin: 24px 0 10px; } .prod-bullets { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; } .prod-bullets li { font-size: 0.975rem; line-height: 1.75; color: var(--color-text-main); } .specs-note { font-size: 0.85rem; font-style: italic; color: var(--color-text-muted); margin-top: -6px; } /* FAQ dạng accordion gốc của trình duyệt — không cần JS */ .faq-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-white); } .faq-item summary { cursor: pointer; padding: 15px 18px; font-size: 0.95rem; font-weight: 700; color: var(--color-text-heading); list-style: none; position: relative; padding-right: 44px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; font-weight: 400; color: var(--color-brand-orange); } .faq-item[open] summary::after { content: '−'; } .faq-item p { padding: 0 18px 16px; margin: 0; font-size: 0.925rem; color: var(--color-text-muted); } .prod-cta-box { background: var(--color-bg-subtle); border-left: 3px solid var(--color-brand-orange); border-radius: var(--radius-sm); padding: 22px 24px; margin-top: 32px; } .prod-cta-box p { margin-bottom: 6px; font-size: 0.95rem; } .prod-cta-box p:last-child { margin-bottom: 0; color: var(--color-text-muted); } .prod-cta-box a { color: var(--color-brand-orange); text-decoration: none; } .prod-form-section { padding: 0 0 80px; background: var(--color-bg-white); } @media (max-width: 1024px) { .prod-detail-grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 768px) { .prod-detail-title { font-size: 1.45rem; } .prod-article .article-h2 { font-size: 1.2rem; } .prod-detail-actions .btn { width: 100%; justify-content: center; } } /* ========================================================================== 18. THEO TÀI LIỆU YÊU CẦU SỬA WEB (18/08/2026) ========================================================================== */ /* --- YC#5: băng nhà cung cấp dùng ẢNH LOGO tách nền --- Chưa có file logo thật -> JS sẽ ẩn hỏng và hiện lại tên chữ, nên không bao giờ thấy icon ảnh vỡ. Thả file vào images/logos/.png là logo tự động hiện lên, không cần sửa code. */ .partner-logo { display: flex; align-items: center; justify-content: center; min-width: 150px; } .partner-logo-img { max-height: 46px; max-width: 150px; width: auto; object-fit: contain; filter: none; opacity: 1; transition: all var(--transition-fast); } .partner-logo:hover .partner-logo-img { filter: none; opacity: 1; } .partner-logo-text { display: none; } /* mặc định ẩn, JS bật lại nếu ảnh lỗi */ .partner-logo.no-logo .partner-logo-img { display: none; } .partner-logo.no-logo .partner-logo-text { display: inline; } /* --- Ghi chú khi một khối chưa có dữ liệu thật --- */ .empty-note { text-align: center; padding: 48px 24px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 0.925rem; } .empty-note i { display: block; font-size: 1.75rem; color: var(--color-bg-gray); margin-bottom: 12px; } .empty-note p { margin: 0; } /* Ẩn ghi chú nếu carousel đã có thẻ thật */ .prod-carousel:has(.proj-card) ~ .empty-note, .prod-carousel:has(.prod-card) ~ .empty-note { display: none; } /* --- YC#10: cho phép VUỐT carousel trên mobile --- */ .prod-carousel-viewport { touch-action: pan-y; } .prod-carousel-track, .projects-track { will-change: transform; } @media (max-width: 768px) { /* YC#9: đẩy TIÊU ĐỀ lên lấp khoảng trống giữa banner và video. Thứ tự mobile: tiêu đề -> video -> đoạn giới thiệu -> nội dung. Dùng display:contents để các con của .about-text thành item trực tiếp của .about-top-grid, nhờ vậy chèn được .about-media vào GIỮA chúng. */ .about-top-grid { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; } .about-top-grid > .about-text { display: contents; } .about-top-grid .about-title { order: 1; margin-bottom: 0; } .about-top-grid .about-media { order: 2; } .about-top-grid .about-sapo { order: 3; } .about-top-grid .about-body { order: 4; } .about-section { padding-top: 24px !important; } /* YC#11: trang danh mục / giải pháp bị tràn ngang trên mobile */ .product-page-layout, .news-page-layout { grid-template-columns: 1fr !important; gap: 24px; } .product-sidebar { width: 100%; max-width: 100%; } .prod-grid-3, .grid3 { grid-template-columns: 1fr !important; } .product-toolbar { flex-wrap: wrap; gap: 12px; } .product-toolbar > * { min-width: 0; } .toolbar-stats { flex: 1 1 100%; } /* chặn tràn ngang — dùng clip để không phá position:sticky */ html, body { overflow-x: clip; } .ctw-container { width: 100%; max-width: 100%; } img, table, iframe { max-width: 100%; } } /* --- YC#12: bộ lọc sản phẩm thành nút ghim, bấm mới mở --- */ .filter-toggle-btn { display: none; align-items: center; gap: 10px; padding: 12px 20px; margin-bottom: 20px; border: 1px solid var(--color-brand-orange); border-radius: var(--radius-sm); background: var(--color-bg-white); color: var(--color-brand-orange); font-family: var(--font-main); font-size: 0.925rem; font-weight: 700; cursor: pointer; width: 100%; justify-content: center; } .filter-toggle-btn:hover { background: var(--color-orange-subtle); } .filter-drawer-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 23, 42, 0.5); opacity: 0; visibility: hidden; transition: all var(--transition-normal); } .filter-drawer-overlay.open { opacity: 1; visibility: visible; } .filter-drawer-close { display: none; position: sticky; top: 0; width: 100%; padding: 14px 18px; border: none; border-bottom: 1px solid var(--color-border); background: var(--color-bg-white); font-family: var(--font-main); font-size: 0.95rem; font-weight: 700; color: var(--color-text-heading); text-align: left; cursor: pointer; } @media (max-width: 1024px) { /* Sidebar lọc: từ khối bị đẩy xuống chân trang -> drawer trượt từ TRÁI */ .filter-toggle-btn { display: flex; } .filter-drawer-close { display: block; } .product-sidebar { position: fixed; top: 0; left: 0; z-index: 1201; width: 320px; max-width: 86vw; height: 100%; background: var(--color-bg-white); box-shadow: var(--shadow-lg); overflow-y: auto; padding: 0 18px 24px; transform: translateX(-100%); transition: transform var(--transition-normal); order: 0; } .product-sidebar.open { transform: translateX(0); } body.filter-open { overflow: hidden; } } /* -------------------------------------------------------------------------- 20. Contact Form 7 — khớp giao diện theme CF7 bọc mỗi field trong , mặc định là inline nên input không ăn width:100%. Ép về block để layout giữ nguyên. -------------------------------------------------------------------------- */ .wpcf7-form-control-wrap { display: block; width: 100%; } .wpcf7 .form-input, .wpcf7 .form-textarea { width: 100%; } .wpcf7 .form-group { margin-bottom: 16px; } /* Thông báo lỗi/thành công của CF7 */ .wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 0.8rem; color: #DC2626; } .wpcf7 .wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 0.9rem; } .wpcf7 form.sent .wpcf7-response-output { border-color: #16A34A; background: #F0FDF4; color: #15803D; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #DC2626; background: #FEF2F2; color: #B91C1C; } .wpcf7 .wpcf7-spinner { margin: 0 0 0 10px; } /* ===== Tương thích shortcode theme cũ matbaows ===== Xem inc/compat-mbws-shortcodes.php. Xoá cả khối này khi 4 trang cũ đã dựng lại bằng phần tử Flatsome chuẩn. */ .ctw-compat-align-center { text-align: center; } .ctw-compat-align-right { text-align: right; } .ctw-compat-title { margin-bottom: 24px; } .ctw-compat-eyebrow { display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand-orange); } .ctw-compat-counter { margin-bottom: 20px; } .ctw-compat-counter-label { display: block; margin-bottom: 6px; font-size: 0.9375rem; color: var(--color-text-light); } .ctw-compat-counter-value { display: block; font-size: 2.5rem; font-weight: 700; line-height: 1.1; color: var(--color-brand-orange); } .ctw-compat-skillbar { margin-bottom: 18px; } .ctw-compat-skillbar-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 600; } .ctw-compat-skillbar-track { height: 8px; border-radius: 999px; background: var(--color-bg-gray); overflow: hidden; } .ctw-compat-skillbar-fill { height: 100%; border-radius: 999px; background: var(--color-brand-orange); } /* ===== Bù chiều cao thanh admin của WordPress ===== .main-navbar là position:sticky top:0. Khi người dùng đã đăng nhập, WordPress thêm class .admin-bar vào và hiển thị #wpadminbar position:fixed — thanh sticky sẽ chui xuống dưới nó nếu không bù. Ba mốc dưới đây bám đúng breakpoint trong CSS lõi của WordPress. */ body.admin-bar .main-navbar { top: 32px; } @media screen and (max-width: 782px) { /* WordPress tăng thanh admin lên 46px ở khoảng này. */ body.admin-bar .main-navbar { top: 46px; } } @media screen and (max-width: 600px) { /* Dưới 600px thanh admin chuyển sang position:absolute nên nó cuộn đi mất, không còn che gì — trả sticky về 0. */ body.admin-bar .main-navbar { top: 0; } } /* ============================================================ LỚP BỊT — chống style nền của Flatsome rò vào phần dùng chung ============================================================ Trang nào có nhúng UX Block sẽ nạp cả CSS Flatsome. Flatsome khai báo gần như mọi thuộc tính cho input/button bằng selector kiểu `input[type=text]` (độ đặc hiệu 0,1,1) — CAO HƠN class `.search-input` (0,1,0) của CTWELD. Nên mọi thuộc tính CTWELD im lặng đều bị Flatsome điền vào: ô tìm kiếm mọc khung vuông, nút thành CHỮ HOA, thanh nav cao lên. Quy tắc của khối này: 1. Dùng selector GHÉP (>= 0,2,x) để thắng Flatsome. 2. CHỈ khai báo thuộc tính mà class của CTWELD không đặt — nếu đặt trùng sẽ đè ngược lên chính thiết kế của mình. 3. Giá trị chọn theo mặc định trình duyệt, tức trạng thái mà bản demo tĩnh vốn chạy trên đó. */ /* --- Ô tìm kiếm trên header --- */ .header-search-bar .search-input { width: 100%; /* nhắc lại: Flatsome thắng độ đặc hiệu ở MỌI */ font-size: 0.875rem; /* thuộc tính mà .search-input khai báo, kể cả */ color: var(--color-text-heading); /* font-size — chữ to lên làm ô cao thêm */ background: transparent; /* Flatsome ép #fff */ border: 0; /* Flatsome ép 1px solid #ddd */ border-radius: 0; box-shadow: none; /* Flatsome ép inset shadow */ height: auto; /* Flatsome ép 2.507em */ padding: 0; /* Flatsome ép 0 .75em */ vertical-align: baseline; } .header-search-bar .search-input:focus { background: transparent; box-shadow: none; outline: 0; } /* --- Nút trong header và footer --- Không đụng tới `border`, `background`, `color`, `padding`, `font-size`, `font-weight`: các class .search-btn / .btn-consult-pill tự lo. */ .site-header button, .main-footer button, .quick-contact-bar button, .modal-overlay button { letter-spacing: normal; /* Flatsome ép .03em */ line-height: normal; /* Flatsome ép 2.4em -> nút cao vọt */ margin-top: 0; margin-right: 0; /* Flatsome ép 1em */ min-height: 0; /* Flatsome ép 2.5em */ text-transform: none; /* Flatsome ép uppercase */ text-shadow: none; text-rendering: auto; } /* --- Ẩn phần Flatsome tự chèn vào wp_footer --- Theme cha chèn panel menu mobile `