/* Theme Name: Flatsome Child Theme URI: http://flatsome.uxthemes.com/ Description: Child theme for Flatsome - Tetehome Project Author: UX Themes & Tetehome Team Author URI: https://tetehome.vn Template: flatsome Version: 3.1 */ /* ========================================================================== 1. GLOBAL FONTS & TYPOGRAPHY SYSTEM - TETEHOME (MODERN LUXURY DARK) ========================================================================== */ :root { --primary-color: #dfb74a !important; --fs-color-primary: #dfb74a !important; --fs-color-secondary: #b8860b !important; --fs-color-success: #10b981 !important; --fs-color-alert: #ef4444 !important; --fs-color-base: #f1f5f9 !important; --fs-experimental-link-color: #dfb74a !important; --fs-experimental-link-color-hover: #f5d061 !important; } :root { /* Typography Variables - Inter Modern Font Stack */ --tete-font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --tete-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --tete-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Font Weights */ --tete-fw-light: 300; --tete-fw-normal: 400; --tete-fw-medium: 500; --tete-fw-semibold: 600; --tete-fw-bold: 700; --tete-fw-extrabold: 800; --tete-fw-black: 900; /* Line Heights */ --tete-lh-none: 1; --tete-lh-tight: 1.25; --tete-lh-snug: 1.375; --tete-lh-normal: 1.5; --tete-lh-relaxed: 1.625; /* Letter Spacing Tracking */ --tete-ls-tightest: -0.035em; --tete-ls-tighter: -0.025em; --tete-ls-tight: -0.015em; --tete-ls-normal: 0em; --tete-ls-wide: 0.025em; --tete-ls-wider: 0.05em; --tete-ls-widest: 0.1em; /* Brand Palette */ --tete-primary: #dfb74a; --tete-primary-dark: #b8860b; --tete-secondary: #f59e0b; --tete-accent: #f5d061; --tete-bg-dark: #0a0b0e; --tete-bg-card: #12141a; --tete-text-dark: #ffffff; --tete-text-main: #e2e8f0; --tete-text-muted: #94a3b8; --tete-border: rgba(223, 183, 74, 0.2); } /* 1.1. Universal Font Smoothing & Base Typography */ html { font-family: var(--tete-font-main); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1; } body { font-family: var(--tete-font-main); font-weight: var(--tete-fw-normal); line-height: var(--tete-lh-relaxed); letter-spacing: var(--tete-ls-normal); color: var(--tete-text-main); background-color: #0a0b0e !important; background-image: radial-gradient(at 10% 10%, rgba(212, 175, 55, 0.08) 0px, transparent 40%), radial-gradient(at 90% 90%, rgba(168, 85, 247, 0.08) 0px, transparent 40%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 1.2. Headings & Title Hierarchy */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading-font, .section-title, .entry-title { font-family: var(--tete-font-heading) !important; color: #ffffff; line-height: var(--tete-lh-tight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1 { font-weight: var(--tete-fw-extrabold) !important; letter-spacing: var(--tete-ls-tightest) !important; } h2, .h2 { font-weight: var(--tete-fw-bold) !important; letter-spacing: var(--tete-ls-tighter) !important; } h3, .h3 { font-weight: var(--tete-fw-bold) !important; letter-spacing: var(--tete-ls-tight) !important; } h4, .h4 { font-weight: var(--tete-fw-semibold) !important; letter-spacing: var(--tete-ls-normal) !important; } h5, .h5 { font-weight: var(--tete-fw-semibold) !important; } h6, .h6 { font-weight: var(--tete-fw-medium) !important; } /* 1.3. Flatsome Elements, Navigation & Header Typography Unification */ .nav, .nav > li > a, .nav-dropdown, .header-nav, .header-bottom-nav, .top-bar, .mobile-sidebar-levels-1, .breadcrumbs, .alt-font { font-family: var(--tete-font-main) !important; } /* 1.3.1. Hide unused top-bar & WooCommerce placeholders in Header */ #top-bar, .header-top, .header .element-error, .element-error { display: none !important; } /* 1.4. Form Elements & Interactive Controls */ input, button, select, textarea, optgroup, .button, .btn, .searchform input, .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { font-family: var(--tete-font-main) !important; -webkit-font-smoothing: antialiased; } .button, .btn { font-weight: var(--tete-fw-semibold) !important; letter-spacing: var(--tete-ls-wide); } /* 1.5. Room Cards, Modals, Badges & Prices Unification */ .room-card, .room-card *:not(i):not(svg):not(path):not([class*="fa-"]), .room-modal, .room-modal *:not(i):not(svg):not(path):not([class*="fa-"]), .badge, .badge-inner, .price, .amount, .room-price-val, .room-tag { font-family: var(--tete-font-main); } /* Font Awesome Protection across all cards and widgets */ .room-card i, .room-card [class*="fa-"], .room-modal i, .room-modal [class*="fa-"], .amenity-tag i, .amenity-tag [class*="fa-"] { font-family: "Font Awesome 6 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; display: inline-block; } /* Tabular figures for numbers and financial values */ .price, .amount, .room-price-val, .room-modal-price, .stat-number, .count { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1; } /* ========================================================================== 2. HOMEPAGE & GLOBAL LAYOUT (MODERN LUXURY DARK) ========================================================================== */ #wrapper { background-color: #0a0b0e !important; } #main, #content, .page-wrapper, .section { background-color: transparent !important; } /* Header Flatsome Dark Glassmorphism */ #header, .header-wrapper, #masthead { background: rgba(10, 11, 14, 0.95) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(223, 183, 74, 0.15) !important; } .top-bar { background: #07080a !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; color: #94a3b8 !important; } .nav > li > a { color: #e2e8f0 !important; font-weight: 700 !important; font-size: 0.88rem !important; text-transform: uppercase !important; letter-spacing: 0.8px; transition: all 0.3s ease; } .nav > li > a:hover, .nav > li.active > a, .nav > li.current-menu-item > a { color: #f5d061 !important; text-shadow: 0 0 12px rgba(223, 183, 74, 0.6); } .header-icons i, .header-nav a { color: #cbd5e1 !important; } /* Flatsome Mobile Off-Canvas Drawer Dark Theme */ .mfp-content .sidebar-menu, .off-canvas-left, .off-canvas-right, .off-canvas, .mfp-content, #main-menu { background: #0a0b0e !important; color: #f1f5f9 !important; min-height: 100vh !important; } .sidebar-menu ul.nav > li > a { color: #e2e8f0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 14px 20px !important; } .sidebar-menu ul.nav > li.active > a, .sidebar-menu ul.nav > li.current-menu-item > a { color: #f5d061 !important; background: rgba(223, 183, 74, 0.08) !important; } .mfp-close { color: #ffffff !important; } /* Hero Banner Styling */ .home .section:first-of-type { position: relative; overflow: hidden; border-radius: 0 0 32px 32px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7); margin-bottom: 20px; } .home .section:first-of-type .bg { filter: brightness(0.85) contrast(1.05); } /* Section 1: Hero Banner Badge (Clean BEM, Zero Inline CSS) */ .home-banner__badge-wrap { text-align: center; } .home-banner__badge { display: inline-block; padding: 24px 44px; background: rgba(10, 11, 14, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px rgba(212, 175, 55, 0.2); } .home-banner__badge h2, .home-banner__title { font-size: 2.6rem !important; font-weight: 900 !important; letter-spacing: 1px; text-transform: uppercase; color: #ffffff !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 0 25px rgba(223, 183, 74, 0.5) !important; margin: 0 0 8px 0 !important; } .home-banner__badge p, .home-banner__subtitle { font-size: 1.25rem !important; font-weight: 600 !important; color: #fcd34d !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important; margin: 0 !important; letter-spacing: 0.5px; } /* Section 2: Room Slider Header & Container */ .home-rooms__header-row, .home-rooms__slider-row { max-width: 1260px; margin-left: auto; margin-right: auto; width: 100%; } .home-rooms__title.section-title-container { text-align: center !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 8px !important; } .home-rooms__title .section-title { justify-content: center !important; text-align: center !important; } .home-rooms__title .section-title b { display: block !important; flex: 1 !important; border-top-color: rgba(223, 183, 74, 0.3) !important; } .home-rooms__title .section-title-main { font-size: 2.2rem !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; background: linear-gradient(135deg, #f5d061 0%, #fcd34d 50%, #ffffff 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 30px rgba(223, 183, 74, 0.35) !important; padding: 0 20px !important; } .home-rooms__subtitle-wrap { text-align: center; margin-bottom: 16px; } .home-rooms__subtitle-wrap p, .home-rooms__subtitle-text { color: #f5d061; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 6px; } .home-rooms__arrow { display: inline-block; color: #f5d061; animation: tetehome-bounce 1.5s infinite; font-size: 1.2rem; margin-top: 4px; } @keyframes tetehome-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } } /* Section 3: Rapid Booking Header & Container */ .home-booking__header-row, .home-booking__grid-row { max-width: 1260px; margin-left: auto; margin-right: auto; width: 100%; } .home-booking__badge-wrap { text-align: center; margin-bottom: 24px; } .home-booking__badge { display: inline-block; background: linear-gradient(135deg, rgba(37, 99, 235, 0.4), rgba(147, 51, 234, 0.4), rgba(219, 39, 119, 0.4)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; padding: 20px 36px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(223, 183, 74, 0.2); } .home-booking__badge h2, .home-booking__title { margin: 0; font-size: 1.75rem; font-weight: 900; text-transform: uppercase; line-height: 1.3; background: linear-gradient(90deg, #fde047 0%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); } .home-booking__badge h2 i, .home-booking__title i { color: #facc15; -webkit-text-fill-color: initial; margin-right: 8px; } .home-booking__badge p, .home-booking__subtitle { margin: 6px 0 0 0; color: rgba(255, 255, 255, 0.85); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.85rem; } /* Footer Styling */ #footer, .footer-wrapper, .absolute-footer { background: #07080a !important; border-top: 1px solid rgba(223, 183, 74, 0.2) !important; color: #64748b !important; } .absolute-footer a { color: #94a3b8 !important; transition: color 0.2s ease; } .absolute-footer a:hover { color: #f5d061 !important; } /* ========================================================================== 3. TETEHOME ROOM CARD COMPONENT (CYBERPUNK / MODERN DARK) ========================================================================== */ .room-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 340px)); gap: 24px; justify-content: center; padding: 20px 0; width: 100%; } .room-card { background: rgba(18, 20, 26, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 13px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; box-sizing: border-box; max-width: 360px; margin: 0 auto; font-family: var(--tete-font-main); } .room-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); transition: left 0.6s ease; pointer-events: none; } .room-card:hover::before { left: 100%; } .room-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 50px rgba(212, 175, 55, 0.25); border-color: rgba(212, 175, 55, 0.4); } .room-card img { width: 100%; height: 240px; object-fit: cover; border-radius: 14px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; display: block; margin-bottom: 10px; } .room-card:hover img { transform: scale(1.02); } .room-card h3 { font-size: 1.05rem !important; color: #f5d061 !important; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin: 3px 0 8px 0 !important; padding-bottom: 6px; border-bottom: 1px solid rgba(223, 183, 74, 0.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-card .amenities { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 4px 0 10px 0; align-content: flex-start; } .room-card .amenity-tag { background: rgba(0, 130, 200, 0.2); border: 1px solid rgba(212, 175, 55, 0.4); padding: 3px 8px; border-radius: 6px; font-size: 0.72rem; color: #ffffff; display: inline-flex; align-items: center; gap: 4px; transition: all 0.25s ease; line-height: 1.35; } .room-card .amenity-tag:hover { background: rgba(212, 175, 55, 0.3); border-color: rgba(223, 183, 74, 0.8); transform: translateY(-1px); box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); } .room-card-footer { margin-top: auto; display: flex; flex-direction: column; } .room-card .price { font-size: 0.82rem; font-weight: 600; margin: 4px 0 10px 0; padding: 8px 10px; background: rgba(0, 0, 0, 0.35); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); line-height: 1.5; color: #e2e8f0; } .room-card .price .flex { display: flex; } .room-card .price .items-center { align-items: center; } .room-card .price .gap-2 { gap: 0.35rem; } .room-card .price .mb-1 { margin-bottom: 0.2rem; } .room-card .price .w-5 { width: 1.15rem; text-align: center; } .room-card .price .ml-auto { margin-left: auto; font-weight: 700; color: #ffffff; } .room-card .price .font-bold { font-weight: 700; } .text-\[\#fa0000\] { color: #fa0000 !important; } .text-\[\#f5c944\] { color: #f5c944 !important; } .text-\[\#4dff00\] { color: #4dff00 !important; } .room-card button { width: 100%; padding: 9px 14px; background: linear-gradient(135deg, #dfb74a 0%, #b8860b 100%); color: #0a0b0e; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); font-size: 0.80rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35); display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; } .room-card button::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: rotate(45deg); transition: 0.6s; pointer-events: none; } .room-card button:hover { background: linear-gradient(135deg, #f5d061 0%, #dfb74a 100%); transform: scale(1.02); box-shadow: 0 10px 25px rgba(212, 175, 55, 0.5); } .room-card button:hover::after { left: 100%; } .room-card button:active { transform: scale(0.98); } .room-card-btn { display: block; width: 100%; text-decoration: none !important; } .room-card .amenity-tag.amenity-gift { background: rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.6); color: #fef08a; font-weight: 600; } /* Amenity Icons & Badges (Zero Inline Style) */ .amenity-tag i { font-family: "Font Awesome 6 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; display: inline-block !important; margin-right: 4px; font-size: 11px; opacity: 0.9; } .amenity-tag .amenity-netflix-wrap { width: 1.1em; height: 1.1em; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; opacity: 0.9; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } .amenity-tag .amenity-netflix-svg { width: 100%; height: 100%; display: block; } .amenity-icon-orange { color: #fb923c !important; } .amenity-icon-rose { color: #f43f5e !important; } .amenity-icon-yellow { color: #fbbf24 !important; } .amenity-icon-sky { color: #fcd34d !important; } .amenity-icon-cyan { color: #06b6d4 !important; } .amenity-icon-blue { color: #e5b842 !important; } .amenity-icon-indigo { color: #818cf8 !important; } .amenity-icon-purple { color: #c084fc !important; } .amenity-icon-fuchsia { color: #e879f9 !important; } .amenity-icon-green { color: #34d399 !important; } .amenity-icon-red { color: #ef4444 !important; } .amenity-icon-slate { color: #94a3b8 !important; } .single-room-card-wrapper { display: flex; justify-content: center; padding: 10px 0; } /* ========================================================================== 4. BRANCH FILTER TABS ========================================================================== */ .tetehome-branch-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 15px auto 35px auto; max-width: 960px; padding: 0 10px; } .branch-filter-btn { padding: 8px 18px; border-radius: 9999px; background: rgba(18, 20, 26, 0.85); border: 1px solid rgba(212, 175, 55, 0.3); color: #cbd5e1; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; outline: none; } .branch-filter-btn:hover { background: rgba(212, 175, 55, 0.2); border-color: #f5d061; color: #ffffff; transform: translateY(-2px); } .branch-filter-btn.active { background: linear-gradient(135deg, #dfb74a 0%, #b8860b 100%) !important; border-color: #f5d061 !important; color: #0a0b0e !important; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.45); } /* ========================================================================== 5. HORIZONTAL ROOM SLIDER (CHUẨN TETEHOME) ========================================================================== */ .tetehome-room-slider-wrapper { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 10px 24px 30px 24px; box-sizing: border-box; } .room-slider-box { position: relative; width: 100%; display: flex; align-items: center; } .room-slider-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; padding: 20px 2px 30px 2px; width: 100%; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .room-slider-track::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* Chuẩn 4 thẻ trên 1 hàng (Desktop) */ .room-slider-track .room-card { flex: 0 0 calc((100% - 3 * 14px) / 4); width: calc((100% - 3 * 14px) / 4); max-width: calc((100% - 3 * 14px) / 4); min-width: 0; scroll-snap-align: start; margin: 0 !important; } /* 2 nút điều hướng: Mặc định ẩn, hover vào slider mới hiển thị, cách xa nhau */ .slider-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: rgba(18, 20, 26, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px solid rgba(223, 183, 74, 0.6); color: #f5d061 !important; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.35); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; outline: none; opacity: 0; visibility: hidden; pointer-events: none; } /* Cách xa 2 bên mép slider */ .slider-btn-prev { left: -18px; } .slider-btn-next { right: -18px; } /* Khi rê chuột vào vùng slider: hiển thị 2 nút điều hướng */ .room-slider-box:hover .slider-nav-btn { opacity: 1; visibility: visible; pointer-events: auto; } .slider-nav-btn:hover { background: linear-gradient(135deg, #dfb74a 0%, #b8860b 100%); color: #ffffff !important; border-color: #ffffff; transform: translateY(-50%) scale(1.12); box-shadow: 0 10px 35px rgba(212, 175, 55, 0.7); } .slider-nav-btn:active { transform: translateY(-50%) scale(0.95); } @media (max-width: 1200px) { .room-slider-track .room-card { flex: 0 0 calc((100% - 2 * 16px) / 3); width: calc((100% - 2 * 16px) / 3); max-width: calc((100% - 2 * 16px) / 3); } } @media (max-width: 850px) { .room-slider-track .room-card { flex: 0 0 calc((100% - 16px) / 2); width: calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); } .slider-btn-prev { left: -10px; width: 42px; height: 42px; font-size: 1.1rem; } .slider-btn-next { right: -10px; width: 42px; height: 42px; font-size: 1.1rem; } .room-slider-box .slider-nav-btn { opacity: 0.9; visibility: visible; pointer-events: auto; } } @media (max-width: 550px) { .room-slider-track .room-card { flex: 0 0 85%; width: 85%; max-width: 85%; } } /* ========================================================================== TETEHOME ROOM DETAIL POPUP MODAL (CHUẨN TETEHOME.VN) ========================================================================== */ .room-card img, .room-card h3, .room-card .room-card-btn button { cursor: pointer; } .room-card-link { display: block; text-decoration: none; color: inherit; } .room-empty-notice { color: #e2e8f0; text-align: center; padding: 30px; } .single-room-card-wrapper { margin: 25px auto 35px auto; max-width: 380px; display: flex; justify-content: center; } .room-intro-section { max-width: 900px; margin: 0 auto 30px auto; text-align: center; } .room-intro-section p { font-size: 1.05rem; color: #475569; } .room-intro-section strong { color: #1e3a8a; } .tetehome-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .tetehome-modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } .tetehome-modal-dialog { background: rgba(18, 20, 26, 0.98); border: 1px solid rgba(212, 175, 55, 0.28); border-radius: 20px; width: 100%; max-width: 980px; max-height: 94vh; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(212, 175, 55, 0.22); overflow: hidden; position: relative; transform: scale(0.94); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .tetehome-modal-overlay.active .tetehome-modal-dialog { transform: scale(1); } .modal-content-scroll { overflow-y: auto; max-height: 94vh; width: 100%; display: flex; flex-direction: column; } .custom-scrollbar, .timeslot-table-container { scrollbar-width: thin; scrollbar-color: rgba(223, 183, 74, 0.35) rgba(18, 20, 26, 0.6); } .custom-scrollbar::-webkit-scrollbar, .timeslot-table-container::-webkit-scrollbar { width: 6px; height: 6px; } .custom-scrollbar::-webkit-scrollbar-track, .timeslot-table-container::-webkit-scrollbar-track { background: rgba(18, 20, 26, 0.6); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb, .timeslot-table-container::-webkit-scrollbar-thumb { background: rgba(223, 183, 74, 0.35); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover, .timeslot-table-container::-webkit-scrollbar-thumb:hover { background: rgba(223, 183, 74, 0.65); } .modal-header-row, .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(18, 18, 35, 0.85); width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; } .modal-header-row .modal-title-col, .modal-header-row .modal-close-col { padding-bottom: 0 !important; padding-top: 0 !important; } .modal-title-wrap h2, .modal-title { color: #ffffff; font-size: 1.3rem; font-weight: 700; margin: 0; line-height: 1.3; } .modal-close-wrap { display: flex; justify-content: flex-end; } .close-modal { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #e2e8f0; width: 36px; height: 36px; min-width: 36px; max-width: 36px; min-height: 36px; max-height: 36px; border-radius: 50%; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; padding: 0; flex-shrink: 0; margin-left: auto; } .close-modal:hover { background: rgba(239, 68, 68, 0.85); color: #ffffff; border-color: #ef4444; transform: rotate(90deg); } .modal-grid-row, .modal-grid { padding: 24px; box-sizing: border-box; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; } .modal-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; } .modal-grid-row .modal-image-col { padding-left: 0 !important; padding-right: 14px !important; padding-bottom: 0 !important; } .modal-grid-row .modal-info-col { padding-left: 14px !important; padding-right: 0 !important; padding-bottom: 0 !important; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; } /* Image Slider */ .modal-image-section { display: flex; flex-direction: column; } .modal-image-slider { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #0d0d1a; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); user-select: none; } .modal-image-container { display: flex; width: 100%; position: relative; z-index: 1; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); } .modal-image { width: 100%; min-width: 100%; flex-shrink: 0; height: 360px; object-fit: cover; display: block; } .modal-slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: #ffffff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 20; padding: 0; } .modal-slider-nav:hover { background: #dfb74a; border-color: #dfb74a; transform: translateY(-50%) scale(1.1); } .modal-slider-prev { left: 12px; } .modal-slider-next { right: 12px; } .modal-image-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 10; } .modal-image-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.25s ease; } .modal-image-dot.active { width: 22px; border-radius: 5px; background: #dfb74a; box-shadow: 0 0 10px rgba(212, 175, 55, 0.7); } /* Info Section */ .modal-info-col .col-inner, .modal-info-section { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; } #modalBranchBadge, .modal-branch-wrap > span, .modal-branch-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(212, 175, 55, 0.12); color: #00d2ff; border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 999px; padding: 6px 16px; font-size: 0.88rem; font-weight: 600; line-height: 1.2; width: fit-content; box-sizing: border-box; } #modalBranchBadge > span:first-child, .modal-branch-badge > span:first-child { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } #modalBranchBadge img.emoji, .modal-branch-wrap img.emoji, .modal-branch-badge img.emoji, .modal-branch-badge i, .modal-branch-badge svg { width: 14px !important; height: 14px !important; margin: 0 !important; vertical-align: middle !important; display: inline-block !important; flex-shrink: 0; } .modal-amenities { display: flex; flex-wrap: wrap; gap: 8px; } .modal-amenities .amenity-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 7px; padding: 5px 11px; font-size: 0.82rem; color: #e2e8f0; } .modal-amenities .amenity-tag i, .modal-amenities .amenity-tag svg { color: #dfb74a; width: 14px; height: 14px; } .modal-amenities .amenity-gift { background: rgba(250, 0, 0, 0.12); border-color: rgba(250, 0, 0, 0.3); color: #ff6b6b; } .modal-amenities .amenity-gift i { color: #fa0000; } .modal-price-card { background: rgba(13, 13, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 14px 18px; } .modal-price-rows { display: flex; flex-direction: column; gap: 10px; } .modal-price-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.92rem; } .modal-price-row .price-label { font-weight: 600; display: flex; align-items: center; gap: 8px; } .modal-price-row .price-label.combo { color: #fa0000; } .modal-price-row .price-label.overnight { color: #f5c944; } .modal-price-row .price-label.fullday { color: #4dff00; } .modal-price-row .price-val { font-weight: 700; color: #ffffff; font-size: 1.05rem; } .modal-info-footer { margin-top: 6px; } .modal-book-btn { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 13px 20px; background: linear-gradient(135deg, #f5d061 0%, #dfb74a 50%, #b89025 100%); color: #080c16 !important; border-radius: 10px; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); text-decoration: none !important; transition: all 0.25s ease; } .modal-book-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212, 175, 55, 0.65); background: linear-gradient(135deg, #ffe082 0%, #f5d061 50%, #dfb74a 100%); } .modal-book-btn:active { transform: translateY(0); } /* Modal Responsive */ @media (max-width: 768px) { .tetehome-modal-overlay { padding: 10px; } .modal-grid { grid-template-columns: 1fr; gap: 16px; padding: 16px; } .modal-grid-row { padding: 16px; } .modal-grid-row .modal-image-col { padding-right: 0 !important; margin-bottom: 16px; } .modal-grid-row .modal-info-col { padding-left: 0 !important; gap: 14px; } .modal-image { height: 260px; } .modal-header-row, .modal-header { padding: 12px 16px; } .modal-title-wrap h2, .modal-title { font-size: 1.15rem; } } /* ========================================================================== TETEHOME CONFIRMATION CONTAINER (EXACT MATCH TETEHOME.VN) ========================================================================== */ /* 1. Container & Card (Equal Height with Timeslot Matrix Card) */ .confirmation-container, .tetehome-booking-sidebar { width: 100% !important; max-width: 380px !important; flex-shrink: 0 !important; background: linear-gradient(180deg, #181b22 0%, #0e1015 100%) !important; border: 1px solid rgba(223, 183, 74, 0.2) !important; border-radius: 20px !important; padding: 22px !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 35px rgba(223, 183, 74, 0.08) !important; color: #e2e8f0 !important; box-sizing: border-box !important; z-index: 10; margin: 0 auto; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: auto !important; min-height: 0 !important; } /* 2. Header */ .confirmation-card-title, .confirmation-container h4, .tetehome-booking-sidebar h4 { font-size: 1.2rem !important; font-weight: 900 !important; color: #ffffff !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding-bottom: 12px !important; margin-bottom: 14px !important; display: flex !important; align-items: center !important; gap: 0.6rem !important; font-family: var(--tete-font-heading) !important; line-height: 1.3 !important; text-transform: none !important; } .confirmation-container h4 i, .confirmation-card-title i, .confirmation-container .text-primary, .text-primary { color: #f5d061 !important; } .confirmation-container .text-secondary, .text-secondary { color: #ff00ff !important; } .confirmation-container .text-green-400, .text-green-400 { color: #4ade80 !important; } .confirmation-container .text-yellow-400, .text-yellow-400 { color: #facc15 !important; } .confirmation-container .text-pink-500, .text-pink-500 { color: #ec4899 !important; } .confirmation-container .text-orange-500, .text-orange-500 { color: #f97316 !important; } .confirmation-container .text-red-500, .text-red-500 { color: #ef4444 !important; } /* 3. Form & Detail Rows (Even Spacing) */ .confirmation-container #confirmation-form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; justify-content: space-between !important; margin: 0 !important; } .confirmation-rows { display: flex !important; flex-direction: column !important; gap: 11px !important; margin-bottom: 14px !important; } .confirmation-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; padding-bottom: 9px !important; font-size: 13.5px !important; line-height: 1.4 !important; } .confirmation-row .row-label { font-weight: 700 !important; color: rgba(255, 255, 255, 0.65) !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; flex-shrink: 0 !important; } .confirmation-row .row-label i { width: 16px !important; text-align: center !important; } .confirmation-row .row-val { font-weight: 800 !important; color: #ffffff !important; text-align: right !important; word-break: break-word !important; max-width: 220px !important; } .confirmation-row .row-val.time-val { color: #f5d061 !important; font-size: 13px !important; font-weight: 800 !important; text-align: right !important; } .confirmation-row .row-val .time-slots-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 2px !important; } .confirmation-row .row-val .time-slot-item { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; } .confirmation-row .row-val .slot-delimiter { display: none !important; } .confirmation-row .row-val .slot-date-prefix { color: #4ade80 !important; font-size: 11px !important; font-weight: 700 !important; margin-right: 4px !important; } .confirmation-row .row-val .time-slot-count { display: block !important; color: #fbbf24 !important; font-size: 11px !important; font-weight: 700 !important; margin-top: 2px !important; text-align: right !important; } .confirmation-row .row-val .time-start { color: #f5d061 !important; font-weight: 800 !important; } .confirmation-row .row-val .time-end { color: #fbbf24 !important; font-weight: 800 !important; } .confirmation-row .row-val .time-arrow, .confirmation-row .row-val .date-arrow { margin: 0 4px !important; color: #f5d061 !important; font-size: 11px !important; opacity: 0.8 !important; } /* Backward compatibility for utility classes */ .confirmation-container .space-y-4 > * + * { margin-top: 0.85rem; } .confirmation-container .mb-6 { margin-bottom: 1.25rem; } .confirmation-container .text-sm { font-size: 0.875rem; } .confirmation-container .text-gray-300 { color: #d1d5db; } .confirmation-container .border-b { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .confirmation-container .border-white\/5 { border-color: rgba(255, 255, 255, 0.05) !important; } .confirmation-container .border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; } .confirmation-container .pb-3 { padding-bottom: 0.65rem; } .confirmation-container .pb-4 { padding-bottom: 0.85rem; } .confirmation-container .mb-4 { margin-bottom: 0.85rem; } .confirmation-container .flex { display: flex !important; } .confirmation-container .justify-between { justify-content: space-between !important; } .confirmation-container .items-start { align-items: flex-start !important; } .confirmation-container .items-center { align-items: center !important; } .confirmation-container .w-5 { width: 1.25rem !important; } .confirmation-container .text-center { text-align: center !important; } .confirmation-container .text-right { text-align: right !important; } .confirmation-container .font-bold { font-weight: 700 !important; } .confirmation-container .font-black { font-weight: 900 !important; } .confirmation-container .text-white { color: #ffffff !important; } .confirmation-container .text-white\/60 { color: rgba(255, 255, 255, 0.6) !important; } .confirmation-container .text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; } /* 4. Price Container (#selectedPrice) */ #selectedPrice { margin-top: auto !important; padding-top: 6px !important; } .price-hint-empty { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 12px 14px !important; background: rgba(223, 183, 74, 0.05) !important; border: 1px dashed rgba(223, 183, 74, 0.25) !important; border-radius: 12px !important; color: rgba(255, 255, 255, 0.7) !important; font-size: 12px !important; font-weight: 600 !important; text-align: center !important; margin: 6px 0 !important; } .price-hint-empty i { color: #f5d061 !important; font-size: 13px !important; } #selectedPrice .price-summary-line { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 13px !important; margin-bottom: 6px !important; } #selectedPrice .price-summary-line .price-label { color: rgba(255, 255, 255, 0.65) !important; font-weight: 600 !important; } #selectedPrice .price-summary-line .price-val { color: #ffffff !important; font-weight: 800 !important; } #selectedPrice .price-summary-line.discount-line .price-val { color: #facc15 !important; font-weight: 900 !important; } #selectedPrice .price-summary-line.holiday-line .price-val { color: #fbbf24 !important; font-weight: 900 !important; } #selectedPrice .price-summary-total { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 10px !important; margin-top: 8px !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; } #selectedPrice .total-label { color: #00ffae !important; font-weight: 800 !important; font-size: 14px !important; } #selectedPrice .total-val { color: #00ffae !important; font-weight: 900 !important; font-size: 1.25rem !important; text-shadow: 0 0 12px rgba(0, 255, 174, 0.45) !important; font-variant-numeric: tabular-nums !important; } /* 5. CTA Button */ .confirmation-container #confirmButton, .btn-confirm-booking { width: 100% !important; padding: 13px 18px !important; margin-top: 12px !important; background: linear-gradient(90deg, #f5d061 0%, #b8860b 100%) !important; color: #0a0b0e !important; font-family: var(--tete-font-heading) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border-radius: 12px !important; border: none !important; box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4) !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: block !important; text-align: center !important; font-size: 0.95rem !important; line-height: normal !important; } .confirmation-container #confirmButton:hover:not(:disabled), .btn-confirm-booking:hover:not(:disabled) { background: linear-gradient(90deg, #f5d061 0%, #f5d061 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 14px 30px rgba(212, 175, 55, 0.6) !important; } .confirmation-container #confirmButton:disabled, .btn-confirm-booking:disabled { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* 6. Footer: Legend & Promos */ .confirmation-footer { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .confirmation-legend-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 12px !important; font-size: 11px !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.65) !important; } .confirmation-legend-grid .legend-item { display: flex !important; align-items: center !important; gap: 7px !important; } .confirmation-legend-grid .legend-dot { width: 24px !important; height: 12px !important; border-radius: 999px !important; flex-shrink: 0 !important; box-sizing: border-box !important; } .confirmation-legend-grid .legend-dot.bg-white { background: #ffffff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } .confirmation-legend-grid .legend-dot.bg-yellow-400 { background: #facc15 !important; border: 1px solid #eab308 !important; box-shadow: 0 0 5px rgba(250, 204, 21, 0.7) !important; } .confirmation-legend-grid .legend-dot.bg-red-600 { background: #b91c1c !important; border: 1px solid #991b1b !important; } .confirmation-legend-grid .legend-dot.bg-sky-300 { background: #7dd3fc !important; border: 1px solid #0284c7 !important; } .confirmation-promos { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 2px !important; } .promo-badge { position: relative !important; overflow: hidden !important; border-radius: 8px !important; padding: 6px 10px !important; text-align: center !important; } .promo-badge-pink { background: linear-gradient(90deg, rgba(236, 72, 153, 0.12), rgba(168, 85, 247, 0.12)) !important; border: 1px solid rgba(236, 72, 153, 0.25) !important; } .promo-badge-orange { background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(249, 115, 22, 0.12)) !important; border: 1px solid rgba(239, 68, 68, 0.25) !important; } .promo-badge-text { margin: 0 !important; font-size: 10.5px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.85) !important; line-height: 1.35 !important; } /* Fallback for legacy grid-cols-2 classes */ .confirmation-container .grid-cols-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; } .confirmation-container .border-t { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .confirmation-container .mt-6 { margin-top: 1rem !important; } .confirmation-container .pt-5 { padding-top: 1rem !important; } .confirmation-container .text-xs { font-size: 0.75rem !important; } .confirmation-container .gap-2 { gap: 0.5rem !important; } .confirmation-container .gap-3 { gap: 0.75rem !important; } .confirmation-container .flex-col { flex-direction: column !important; } .confirmation-container .w-7 { width: 26px !important; } .confirmation-container .h-3\.5, .confirmation-container .h-3\\.5, .confirmation-container [class*="h-3.5"] { height: 12px !important; } .confirmation-container .rounded-full { border-radius: 9999px !important; display: inline-block !important; flex-shrink: 0 !important; width: 26px !important; height: 12px !important; } .confirmation-container .bg-white { background-color: #ffffff !important; } .confirmation-container .bg-yellow-400 { background-color: #facc15 !important; } .confirmation-container .bg-\[\#e74c3c\] { background-color: #b91c1c !important; } .confirmation-container .border-red-700 { border-color: #991b1b !important; } .confirmation-container .bg-\[\#bae6fd\] { background-color: #7dd3fc !important; } .confirmation-container .border-\[\#0ea5e9\] { border-color: #0284c7 !important; } /* 7. Shimmer Discount Badges */ @keyframes shimmer { 0% { transform: translateX(-200%); } 100% { transform: translateX(200%); } } .confirmation-container [class*="animate-[shimmer_4s_infinite]"], .animate-shimmer-4s { animation: shimmer 4s infinite !important; } .confirmation-container [class*="animate-[shimmer_4s_infinite_2s]"], .animate-shimmer-4s-2s { animation: shimmer 4s infinite 2s !important; } .confirmation-container .relative { position: relative !important; } .confirmation-container .overflow-hidden { overflow: hidden !important; } .confirmation-container .rounded-md { border-radius: 0.375rem !important; } .confirmation-container .border-primary\/20 { border-color: rgba(223, 183, 74, 0.2) !important; } .confirmation-container .border-red-500\/20 { border-color: rgba(239, 68, 68, 0.2) !important; } .confirmation-container .bg-gradient-to-r.from-primary\/10, .confirmation-container [class*="from-primary/10"] { background: linear-gradient(90deg, rgba(223, 183, 74, 0.1) 0%, rgba(255, 0, 255, 0.1) 100%) !important; border: 1px solid rgba(223, 183, 74, 0.2) !important; } .confirmation-container .bg-gradient-to-r.from-red-500\/10, .confirmation-container [class*="from-red-500/10"] { background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%) !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; } .confirmation-container .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .confirmation-container .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .confirmation-container .mt-2 { margin-top: 0.5rem !important; } .confirmation-container .text-\[9px\] { font-size: 9px !important; } .confirmation-container .text-\[8px\] { font-size: 8px !important; } .confirmation-container .leading-tight { line-height: 1.25 !important; } .confirmation-container .inset-0 { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; } .confirmation-container .via-white\/10 { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important; } .confirmation-container .mr-0\.5, .confirmation-container .mr-0\\.5, .confirmation-container [class*="mr-0.5"] { margin-right: 0.125rem !important; } @media (max-width: 849px) { .confirmation-container, .tetehome-booking-sidebar { max-width: 100% !important; position: static !important; top: auto !important; } } /* 8. CF7 Notifications, Alert Boxes & Validation Tips */ .wpcf7-response-output, .wpcf7 form.wpcf7-form .wpcf7-response-output { margin: 14px 0 0 0 !important; padding: 12px 16px !important; border-radius: 12px !important; font-size: 0.88rem !important; line-height: 1.45 !important; box-sizing: border-box !important; } .wpcf7 form.sent .wpcf7-response-output { background: rgba(34, 197, 94, 0.15) !important; border: 1px solid #22c55e !important; color: #86efac !important; box-shadow: 0 0 15px rgba(34, 197, 94, 0.2) !important; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid #ef4444 !important; color: #fca5a5 !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.2) !important; } span.wpcf7-not-valid-tip { color: #fca5a5 !important; background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.35) !important; border-radius: 8px !important; padding: 4px 10px !important; font-size: 0.8rem !important; font-weight: 500 !important; margin-top: 6px !important; display: inline-block !important; width: auto !important; position: relative !important; top: auto !important; left: auto !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; } span.wpcf7-not-valid-tip::before, span.wpcf7-not-valid-tip::after { display: none !important; } .wpcf7-form-control.wpcf7-not-valid { border-color: #ef4444 !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important; } .wpcf7-spinner { margin: 10px auto 0 auto !important; display: block !important; filter: drop-shadow(0 0 6px #f5d061); } /* 9. Section Centering, Perks Box & Colocated Responsive Breakpoints */ .section[label="section-chi-tiet-phong"], section.section:has(.booking-form-fields), section.section:has(.tetehome-booking-sidebar) { padding: 50px 0 !important; background: radial-gradient(circle at 80% 20%, rgba(223, 183, 74, 0.05) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.04) 0%, transparent 50%), #07080a !important; } .booking-section-row { max-width: 1260px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; align-items: flex-start; } /* Timeslot Booking Unified Component (Grid & Confirmation Container Side-by-Side) */ .tetehome-booking-unified-wrap { display: flex; flex-direction: row; align-items: stretch !important; justify-content: center; gap: 24px; width: 100%; max-width: 1260px; margin: 0 auto; box-sizing: border-box; } .tetehome-booking-unified-wrap > .timeslot-grid-card { flex: 1 1 auto; min-width: 0; width: 100%; max-width: calc(100% - 384px); margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-sizing: border-box !important; background: rgba(18, 20, 26, 0.85); border: 1px solid rgba(223, 183, 74, 0.15); border-radius: 20px; padding: 18px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(223, 183, 74, 0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; } .tetehome-booking-unified-wrap > .confirmation-container { width: 360px !important; max-width: 360px !important; flex-shrink: 0 !important; position: relative !important; top: 0 !important; margin: 0 !important; z-index: 10; align-self: stretch !important; height: auto !important; min-height: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } @media (max-width: 991px) { .tetehome-booking-unified-wrap { flex-direction: column; align-items: stretch !important; gap: 20px; } .tetehome-booking-unified-wrap > .timeslot-grid-card { max-width: 100%; padding: 14px; border-radius: 16px; } .tetehome-booking-unified-wrap > .confirmation-container { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: auto !important; position: relative !important; top: 0 !important; padding: 18px !important; border-radius: 16px !important; } } /* Timeslot Booking Grid Component (Tetehome Rapid Matrix) */ .tetehome-timeslot-section-widget { width: 100%; margin-bottom: 25px; } .rapid-booking-badge { display: inline-block; background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(147, 51, 234, 0.25), rgba(219, 39, 119, 0.25)); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 14px 28px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); margin-bottom: 12px; } .rapid-title { font-family: var(--tete-font-heading); font-size: 1.35rem !important; font-weight: 900 !important; color: #ffffff !important; margin: 0 !important; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; } .rapid-subtitle { margin: 4px 0 0 0 !important; font-size: 0.78rem !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.8) !important; text-transform: uppercase; letter-spacing: 1px; } /* Branch Selector Tabs */ .timeslot-branch-selector-wrapper { width: 100%; margin-bottom: 20px; } .timeslot-branch-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 2px 0; } .ts-branch-tab-btn { background: rgba(18, 20, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); color: #cbd5e1; font-size: 0.82rem; font-weight: 700; padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); outline: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ts-branch-tab-btn:hover { color: #ffffff; background: rgba(223, 183, 74, 0.15); border-color: rgba(223, 183, 74, 0.4); transform: translateY(-1px); } .ts-branch-tab-btn.active { background: linear-gradient(135deg, #f5d061, #b8860b) !important; color: #07080a !important; font-weight: 800 !important; border-color: #0a0b0e !important; box-shadow: 0 0 16px rgba(223, 183, 74, 0.5) !important; transform: translateY(-1px); } @media (max-width: 991px) { .timeslot-branch-selector-wrapper { overflow: hidden; margin-left: -10px; margin-right: -10px; padding: 0 10px; } .timeslot-branch-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; justify-content: flex-start !important; gap: 8px !important; padding-bottom: 8px !important; scrollbar-width: none; } .timeslot-branch-tabs::-webkit-scrollbar { display: none; } .ts-branch-tab-btn { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 0.8rem !important; padding: 6px 14px !important; } } /* Timeslot Grid Card & Table */ .timeslot-grid-card { background: rgba(18, 20, 26, 0.85); border: 1px solid rgba(223, 183, 74, 0.15); border-radius: 20px; padding: 18px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(223, 183, 74, 0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; max-width: 100%; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .timeslot-branch-panel { display: none; width: 100%; } .timeslot-branch-panel.is-active { display: block; } .timeslot-grid { width: 100%; max-width: 100%; } .timeslot-table-container { flex: 1 1 auto; max-height: 500px; overflow: auto; position: relative; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); } .timeslot-table { border-collapse: separate !important; border-spacing: 0 !important; text-align: center; font-size: 10px; width: max-content; margin: 0; padding: 0; background-color: #181b22; color: #ffffff; } .timeslot-table th, .timeslot-table td { border-right: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: none !important; border-left: none !important; padding: 6px 4px !important; vertical-align: middle !important; text-align: center !important; white-space: nowrap !important; box-sizing: border-box !important; } .timeslot-table tr { border-bottom: none !important; } .timeslot-table thead { position: sticky; top: 0; z-index: 20; } .timeslot-table .first-header-row th { background-color: #181b22; padding: 8px 6px !important; height: 36px !important; box-sizing: border-box !important; position: sticky; top: 0; z-index: 21; } .timeslot-table .second-header-row th { background-color: #0e1015; border-bottom: 2px solid #f5d061 !important; padding: 6px 4px !important; position: sticky; top: 36px; z-index: 21; } .timeslot-table .room-col-header { min-width: 326px !important; border-right: 2px solid rgba(223, 183, 74, 0.45) !important; } .timeslot-table .room-name-text { font-size: 12.5px; font-weight: 800; color: #fcd34d; letter-spacing: 0.3px; text-transform: uppercase; } .timeslot-table .slot-header, .timeslot-table td.slot-cell { width: 80px !important; min-width: 80px !important; max-width: 80px !important; font-size: 9px; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } .timeslot-table .slot-header-overnight, .timeslot-table td.slot-cell-overnight { width: 86px !important; min-width: 86px !important; max-width: 86px !important; border-right: 2px solid rgba(223, 183, 74, 0.45) !important; } .timeslot-table .slot-sun { color: #fcd34d; font-weight: 700; font-size: 9.5px; display: block; margin-bottom: 2px; } .timeslot-table .slot-moon { color: #c084fc; font-weight: 700; font-size: 9.5px; display: block; margin-bottom: 2px; } .timeslot-table .slot-price-val { font-size: 9px; color: #00ffae; background: rgba(0, 255, 174, 0.1); border: 1px solid rgba(0, 255, 174, 0.25); border-radius: 4px; padding: 1px 4px; font-weight: 800; display: inline-block; letter-spacing: 0.2px; } .timeslot-table .slot-header-overnight .slot-price-val { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.25); } /* Sticky First & Second Columns */ .timeslot-table .sticky-col { position: sticky !important; background-color: #181b22 !important; z-index: 15 !important; } .timeslot-table th.sticky-col-th, .timeslot-table td.sticky-col-th { width: 38px !important; min-width: 38px !important; max-width: 38px !important; left: 0 !important; } .timeslot-table th.sticky-col-day, .timeslot-table td.sticky-col-day { width: 58px !important; min-width: 58px !important; max-width: 58px !important; left: 38px !important; } .timeslot-table td.sticky-col { background-color: #0e1015 !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; z-index: 15 !important; } .timeslot-table .first-header-row th.sticky-col { background-color: #181b22 !important; z-index: 30 !important; } .timeslot-table .second-header-row th.sticky-col { background-color: #0e1015 !important; z-index: 30 !important; } .day-cell-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; } .day-num { font-weight: 700; font-size: 10px; } .today-chip { font-size: 7px; font-weight: 800; color: #f5d061; background: rgba(223, 183, 74, 0.15); border-radius: 4px; padding: 1px 3px; line-height: 1; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.3px; } .today-highlight { background-color: rgba(223, 183, 74, 0.18) !important; color: #f5d061 !important; font-weight: 800 !important; } .today-row { border-top: 1px solid rgba(223, 183, 74, 0.4) !important; border-bottom: 1px solid rgba(223, 183, 74, 0.4) !important; } /* Slot Box Pills (Pure Minimalist Color Capsules) */ .timeslot-table .available-box, .timeslot-table .booked-box, .timeslot-table .selected-box { display: inline-block; width: 60px; height: 18px; border-radius: 999px; cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); user-select: none; -webkit-user-select: none; box-sizing: border-box; vertical-align: middle; } .timeslot-table .available-box { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.3); } .timeslot-table .available-box:hover { transform: translateY(-2px) scale(1.08); background: #f5d061; box-shadow: 0 0 14px rgba(223, 183, 74, 0.85); border-color: #f5d061; } .timeslot-table .selected-box { background: linear-gradient(135deg, #fde047, #facc15) !important; border: 1px solid #eab308 !important; box-shadow: 0 0 14px rgba(250, 204, 21, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; transform: scale(1.08) translateY(-1px) !important; z-index: 10; } .timeslot-table .booked-box { background: #b91c1c !important; border: 1px solid #7f1d1d !important; cursor: not-allowed; opacity: 0.85; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } /* Selected Room Cell Highlight */ .timeslot-table td.selected-room-cell { background-color: rgba(223, 183, 74, 0.08) !important; box-shadow: inset 0 0 12px rgba(223, 183, 74, 0.15); transition: background-color 0.25s ease; } /* Legend Bar under Table */ .timeslot-legend-bar { display: none; /* Hide on desktop to avoid duplicate with card */ } .legend-unit { display: flex; align-items: center; gap: 6px; } .legend-pill { width: 22px; height: 10px; border-radius: 999px; display: inline-block; } .legend-pill.available { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .legend-pill.selected { background: #facc15; box-shadow: 0 0 6px rgba(250, 204, 21, 0.8); } .legend-pill.booked { background: #b91c1c; } .legend-pill.discount { background: #bae6fd; border: 1px solid #0ea5e9; } @media (max-width: 991px) { .timeslot-legend-bar { display: flex; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, 0.7); } .confirmation-legend-grid { display: none !important; /* Hide inside confirmation card on mobile/tablet */ } } /* Timeslot Alert Toast Notification */ .timeslot-toast-notification { position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-25px); background: linear-gradient(135deg, rgba(220, 38, 38, 0.96), rgba(185, 28, 28, 0.96)); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.5); color: #ffffff; font-size: 13.5px; font-weight: 700; padding: 12px 24px; border-radius: 999px; z-index: 99999; pointer-events: none; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 10px; text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .timeslot-toast-notification.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Perks / Features Companion Box */ .tetehome-perks-container { padding: 10px 24px 10px 0; color: #e2e8f0; } .perks-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(223, 183, 74, 0.1); border: 1px solid rgba(223, 183, 74, 0.3); border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #f5d061; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 16px; box-shadow: 0 0 15px rgba(223, 183, 74, 0.2); } .perks-title { font-family: var(--tete-font-heading); font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.25 !important; margin-bottom: 14px !important; } .perks-title .text-cyan-glow { background: linear-gradient(135deg, #f5d061 0%, #fcd34d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 25px rgba(223, 183, 74, 0.3); } .perks-desc { font-size: 0.95rem; color: #94a3b8; line-height: 1.6; margin-bottom: 24px; max-width: 580px; } .perks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .perk-card { display: flex; align-items: flex-start; gap: 14px; background: rgba(18, 20, 26, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 16px; transition: all 0.3s ease; } .perk-card:hover { border-color: rgba(223, 183, 74, 0.35); background: rgba(18, 20, 26, 0.85); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(223, 183, 74, 0.1); } .perk-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(223, 183, 74, 0.15), rgba(212, 175, 55, 0.05)); border: 1px solid rgba(223, 183, 74, 0.3); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #f5d061; flex-shrink: 0; box-shadow: 0 0 12px rgba(223, 183, 74, 0.2); } .perk-content h4 { margin: 0 0 5px 0 !important; font-size: 0.98rem !important; font-weight: 700 !important; color: #ffffff !important; font-family: var(--tete-font-heading); } .perk-content p { margin: 0 !important; font-size: 0.83rem !important; color: #94a3b8 !important; line-height: 1.4 !important; } .perks-gift-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(223, 183, 74, 0.08), rgba(34, 197, 94, 0.08)); border: 1px dashed rgba(223, 183, 74, 0.35); border-radius: 16px; padding: 14px 18px; font-size: 0.88rem; color: #cbd5e1; line-height: 1.45; } .perks-gift-banner .gift-icon { font-size: 1.4rem; color: #f5c944; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(245, 201, 68, 0.4)); } .perks-gift-banner strong { color: #f5d061; } /* Modal Price Row Interactive Selection */ .modal-price-row { cursor: pointer !important; transition: all 0.2s ease !important; padding: 8px 12px !important; border-radius: 10px !important; border: 1px solid transparent !important; } .modal-price-row:hover { background: rgba(223, 183, 74, 0.06) !important; border-color: rgba(223, 183, 74, 0.2) !important; } .modal-price-row.selected { background: rgba(223, 183, 74, 0.12) !important; border-color: #f5d061 !important; box-shadow: 0 0 12px rgba(223, 183, 74, 0.25) !important; } @media (max-width: 849px) { .tetehome-perks-container { padding: 0 0 25px 0; } .perks-title { font-size: 1.6rem !important; } .perks-grid { grid-template-columns: 1fr; gap: 12px; } .tetehome-booking-sidebar, .booking-form-fields { max-width: 100% !important; } } @media (max-width: 550px) { .tetehome-booking-sidebar, .booking-form-fields { padding: 20px 16px !important; border-radius: 18px !important; } .booking-row-2col { grid-template-columns: 1fr; gap: 12px; } .booking-sidebar-title { font-size: 1.1rem !important; } .btn-booking-submit { padding: 13px 20px !important; font-size: 0.92rem !important; } } /* ========================================================================== TETEHOME FOOTER (UX BLOCK 358) - PURE SEMANTIC FLATSOME UX BUILDER ========================================================================== */ .sec-footer-main { background-color: #080c16 !important; border-top: 1px solid rgba(223, 183, 74, 0.15); } .sec-footer-main .row { max-width: 1260px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } @media (min-width: 850px) { .sec-footer-main .row { display: flex !important; align-items: stretch !important; } .footer-contact-column { flex: 0 0 35% !important; max-width: 35% !important; display: flex !important; flex-direction: column !important; } .footer-branches-column { flex: 0 0 65% !important; max-width: 65% !important; display: flex !important; flex-direction: column !important; } .footer-contact-column > .col-inner { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; justify-content: center !important; padding: 6px 15px !important; } .footer-branches-column > .col-inner { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; justify-content: center !important; padding-bottom: 0 !important; } } /* -------------------------------------------------------------------------- Left Column: Evenly Distributed Vertical Rhythm -------------------------------------------------------------------------- */ .footer-contact-column { padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box; text-align: center !important; } .footer-contact-column .gap-element { display: none !important; } /* 1. Logo */ .footer-contact-column .img, .footer-contact-column .ux-image-wrapper { max-width: 230px !important; margin: 0 auto 8px auto !important; } .footer-contact-column img { max-width: 230px !important; width: 100% !important; height: auto !important; margin: 0 auto !important; display: block !important; filter: drop-shadow(0 4px 12px rgba(223, 183, 74, 0.25)); } /* 2. Brand Description */ .footer-brand-info { margin: 0 auto 20px auto !important; } .footer-brand-info p { color: #94a3b8; font-size: 0.88rem; line-height: 1.55; margin: 0 auto !important; text-align: center !important; max-width: 420px; } /* 3. Hotline Group */ .footer-hotline-wrap { text-align: center !important; margin: 0 auto 6px auto !important; } .footer-hotline-wrap p { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: #94a3b8; letter-spacing: 0.05em; margin: 0 !important; text-align: center !important; } .footer-main-hotline-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px; padding: 8px 24px !important; background: linear-gradient(135deg, rgba(223, 183, 74, 0.15), rgba(120, 80, 255, 0.15)) !important; border: 1px solid rgba(223, 183, 74, 0.4) !important; border-radius: 999px !important; color: #f5d061 !important; text-decoration: none !important; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.5px; box-shadow: 0 0 20px rgba(223, 183, 74, 0.2); transition: all 0.3s ease; margin: 0 auto 22px auto !important; } .footer-main-hotline-btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(223, 183, 74, 0.45); border-color: rgba(223, 183, 74, 0.8) !important; background: linear-gradient(135deg, rgba(223, 183, 74, 0.25), rgba(120, 80, 255, 0.25)) !important; color: #ffffff !important; } .footer-main-hotline-btn i { color: #f5d061 !important; font-size: 1rem; } /* 4. Social Group */ .footer-social-wrap { margin: 0 auto 8px auto !important; text-align: center !important; } .footer-social-wrap h4 { color: #f5d061 !important; font-size: 1.15rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.3 !important; margin: 0 !important; text-align: center !important; white-space: normal !important; } /* Social Buttons Row (Native Flatsome Row Inner) */ .footer-contact-column .row-inner, .footer-social-buttons-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; margin: 0 auto 18px auto !important; width: 100% !important; max-width: 420px !important; } .footer-contact-column .row-inner > .col, .footer-social-buttons-row > .col { flex: 1 !important; width: 50% !important; max-width: 50% !important; padding: 0 4px !important; margin: 0 !important; box-sizing: border-box !important; } .footer-contact-column .row-inner > .col > .col-inner, .footer-social-buttons-row > .col > .col-inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; display: block !important; } .footer-contact-column .row-inner .button, .footer-btn-fb, .footer-btn-tiktok { width: 100% !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 8px 12px !important; border-radius: 12px !important; font-size: 0.85rem !important; font-weight: 800 !important; letter-spacing: 0.3px !important; transition: all 0.25s ease !important; box-sizing: border-box !important; white-space: nowrap !important; } /* Facebook Button */ .footer-contact-column .row-inner > [class*="col"]:first-child .button, .footer-btn-fb { background: rgba(24, 119, 242, 0.15) !important; border: 1px solid rgba(24, 119, 242, 0.5) !important; color: #ffffff !important; } .footer-contact-column .row-inner > [class*="col"]:first-child .button:hover, .footer-btn-fb:hover { background: rgba(24, 119, 242, 0.35) !important; border-color: rgba(24, 119, 242, 0.9) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(24, 119, 242, 0.35) !important; color: #ffffff !important; } .footer-contact-column .row-inner > [class*="col"]:first-child .button::before, .footer-btn-fb::before { content: ""; display: inline-block; width: 16px; height: 16px; background-color: #1877f2; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='currentColor' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='currentColor' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E") no-repeat center / contain; flex-shrink: 0; } /* TikTok Button */ .footer-contact-column .row-inner > [class*="col"]:last-child .button, .footer-btn-tiktok { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; } .footer-contact-column .row-inner > [class*="col"]:last-child .button:hover, .footer-btn-tiktok:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.6) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important; color: #ffffff !important; } .footer-contact-column .row-inner > [class*="col"]:last-child .button::before, .footer-btn-tiktok::before { content: ""; display: inline-block; width: 15px; height: 15px; background-color: #ffffff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25V349.38A162.55 162.55 0 1 1 185 188.31V278.2a74.62 74.62 0 1 0 52.23 71.18V0l88 0a121.18 121.18 0 0 0 1.86 22.17h.06A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25V349.38A162.55 162.55 0 1 1 185 188.31V278.2a74.62 74.62 0 1 0 52.23 71.18V0l88 0a121.18 121.18 0 0 0 1.86 22.17h.06A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E") no-repeat center / contain; flex-shrink: 0; } /* 5. Notice Box */ .footer-notice-box { margin: 0 auto !important; padding: 8px 14px !important; border-radius: 12px !important; background: rgba(253, 224, 71, 0.08) !important; border: 1px dashed rgba(253, 224, 71, 0.3) !important; text-align: center !important; max-width: 420px !important; width: 100% !important; box-sizing: border-box !important; } .footer-notice-box p { margin: 0 !important; font-size: 0.76rem !important; color: #fde047 !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: center !important; } /* -------------------------------------------------------------------------- Right Column: Evenly Spaced Branches Grid -------------------------------------------------------------------------- */ .footer-branches-header { text-align: center !important; margin: 0 auto 16px auto !important; } .footer-branches-header h3 { color: #ffffff !important; font-size: 1.22rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 0 6px 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; } .footer-branches-header h3 span { color: #f5d061 !important; background: rgba(223, 183, 74, 0.1) !important; border: 1px solid rgba(223, 183, 74, 0.3) !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; } .footer-branches-header p { color: #94a3b8 !important; font-size: 0.85rem !important; margin: 0 !important; text-align: center !important; } /* Right Column: Centered in row & Evenly Spaced */ .footer-branches-column { display: flex !important; flex-direction: column !important; justify-content: center !important; } .footer-branches-column > .col-inner { display: flex !important; flex-direction: column !important; justify-content: center !important; width: 100% !important; height: 100% !important; } /* Branch Cards Grid: Even gaps & Full Stretch */ .footer-branches-grid { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; margin-left: -8px !important; margin-right: -8px !important; row-gap: 16px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .footer-branch-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding-left: 8px !important; padding-right: 8px !important; margin-bottom: 0 !important; } .footer-branch-card .col-inner { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 18px 20px !important; transition: all 0.3s ease !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-height: 172px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 0 !important; } .footer-branch-card:last-child > .col-inner { justify-content: center !important; align-items: center !important; padding: 14px !important; } .footer-branch-card .col-inner:hover { background: rgba(223, 183, 74, 0.06) !important; border-color: rgba(223, 183, 74, 0.35) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(223, 183, 74, 0.12) !important; } .footer-branch-card h4 { font-size: 1.05rem !important; font-weight: 800 !important; color: #ffffff !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; line-height: 1.35 !important; margin: 0 0 6px 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: normal !important; min-height: auto !important; } .footer-branch-card h4::before, .footer-branch-card h4 i { content: ""; display: inline-block; width: 16px; height: 16px; margin-top: 0; background-color: #f5d061; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E") no-repeat center / contain; flex-shrink: 0; } .footer-branch-card p { color: #94a3b8 !important; font-size: 0.85rem !important; line-height: 1.45 !important; margin: 0 0 14px 0 !important; text-align: left !important; } /* Branch Card Buttons: side-by-side */ .footer-branch-card .row-collapse { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; width: 100% !important; } .footer-branch-card .row-collapse > .col { padding: 0 !important; margin: 0 !important; flex: 1 !important; max-width: none !important; width: auto !important; } .footer-branch-card .row-collapse > .col:first-child { flex: 1.25 !important; } .footer-branch-card .row-collapse > .col:last-child { flex: 1 !important; } .footer-branch-card .row-collapse .col-inner { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; transform: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; display: block !important; } .footer-branch-card .button { margin: 0 !important; width: 100% !important; border-radius: 999px !important; font-size: 0.86rem !important; font-weight: 700 !important; padding: 8px 14px !important; min-height: 40px !important; line-height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-transform: none !important; letter-spacing: 0.02em !important; box-sizing: border-box !important; transition: all 0.25s ease !important; white-space: nowrap !important; } .footer-branch-card .button:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.2); } .footer-branch-card .row-collapse > .col:first-child .button, .footer-branch-card .button.success { background: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.45) !important; color: #4ade80 !important; } .footer-branch-card .row-collapse > .col:first-child .button i, .footer-branch-card .button.success i { color: #4ade80 !important; font-size: 0.88rem !important; order: -1 !important; margin-right: 4px !important; margin-left: 0 !important; } .footer-branch-card .row-collapse > .col:last-child .button, .footer-branch-card .button.secondary { background: rgba(223, 183, 74, 0.15) !important; border: 1px solid rgba(223, 183, 74, 0.45) !important; color: #e5b842 !important; } .footer-branch-card .row-collapse > .col:last-child .button::before, .footer-branch-card .button.secondary::before { content: ""; display: inline-block; width: 14px; height: 14px; background-color: #e5b842; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C46 397.7 28.5 436.3 27.6 438.3c-2.9 6.4-.3 13.9 6.1 17.2 2.7 1.4 5.6 2 8.5 2 4.1 0 8.2-1.3 11.6-3.8 28.7-21.2 60.1-32.5 86.8-39 34.3 16.3 73.6 25.3 115.4 25.3 141.4 0 256-93.1 256-208S397.4 32 256 32z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C46 397.7 28.5 436.3 27.6 438.3c-2.9 6.4-.3 13.9 6.1 17.2 2.7 1.4 5.6 2 8.5 2 4.1 0 8.2-1.3 11.6-3.8 28.7-21.2 60.1-32.5 86.8-39 34.3 16.3 73.6 25.3 115.4 25.3 141.4 0 256-93.1 256-208S397.4 32 256 32z'/%3E%3C/svg%3E") no-repeat center / contain; flex-shrink: 0; } /* Facebook Iframe inside Right Card */ .footer-branch-card iframe { width: 340px !important; max-width: 100% !important; height: 130px !important; border: none !important; border-radius: 10px !important; display: block !important; margin: 0 auto !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } /* -------------------------------------------------------------------------- Copyright Row -------------------------------------------------------------------------- */ .footer-copyright-wrap p { color: rgba(255, 255, 255, 0.4) !important; font-size: 0.76rem !important; letter-spacing: 0.05em !important; margin: 0 !important; text-align: center !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- Colocated Responsive for Footer (Mobile & Tablet) -------------------------------------------------------------------------- */ @media (max-width: 849px) { .footer-contact-column { margin-bottom: 35px !important; } .footer-contact-column .row-inner .button, .footer-btn-fb, .footer-btn-tiktok { font-size: 0.74rem !important; padding: 7px 6px !important; gap: 5px !important; letter-spacing: 0 !important; } .footer-contact-column .row-inner > [class*="col"]:first-child .button::before, .footer-btn-fb::before { width: 14px !important; height: 14px !important; } .footer-contact-column .row-inner > [class*="col"]:last-child .button::before, .footer-btn-tiktok::before { width: 13px !important; height: 13px !important; } .footer-brand-info { margin-bottom: 16px !important; } .footer-main-hotline-btn { margin-bottom: 18px !important; } .footer-contact-column .row-inner, .footer-social-buttons-row { margin-bottom: 14px !important; } .footer-branches-grid { row-gap: 14px !important; } .footer-branch-card { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 0 !important; } .footer-branch-card > .col-inner { min-height: auto !important; padding: 16px 18px !important; } .footer-branch-card:last-child > .col-inner { padding: 14px !important; } } @media (max-width: 480px) { .footer-branch-card:last-child { padding-left: 0 !important; padding-right: 0 !important; } .footer-branch-card:last-child > .col-inner { padding: 12px 2px !important; } .footer-branch-card iframe { border-radius: 8px !important; } } @media (max-width: 360px) { .footer-branch-card iframe { transform: scale(0.92) !important; transform-origin: center center !important; } } /* Hide default Flatsome absolute footer since custom UX block includes copyright section */ .absolute-footer { display: none !important; } /* ========================================================================== 10. Native Flatsome Pages: Tra Cứu, Hướng Dẫn & Quy Định, Chi Nhánh ========================================================================== */ /* Shared Page Container Centering */ .tra-cuu-hero__row, .tra-cuu-search__row, .tra-cuu-result__row, .tra-cuu-hero-row, .huong-dan-hero__row, .huong-dan-steps__row, .huong-dan-details__row, .guide-hero-row, .guide-steps-row, .guide-details-row, .chi-nhanh-hero__row, .chi-nhanh-cards__row, .branch-hero-row, .branch-cards-row, .home-rooms__header-row, .home-rooms__slider-row { max-width: 1260px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } .home-booking__title-row, .home-booking__header-row, .home-booking__grid-row { max-width: 1260px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } .tetehome-page-section { background-color: transparent !important; padding-top: 40px !important; padding-bottom: 60px !important; } /* Guide & Subpage Hero Badge */ .guide-hero-badge { display: inline-block; margin-bottom: 16px; text-align: center; } .guide-hero-badge p { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 18px; background: rgba(223, 183, 74, 0.08); border: 1px solid rgba(223, 183, 74, 0.35); border-radius: 9999px; color: #f5d061; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin: 0 auto; box-shadow: 0 0 15px rgba(223, 183, 74, 0.15); line-height: 1.5; } .guide-hero-badge p::before, .guide-hero-badge p i { content: "\f518"; font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome"; font-weight: 900; margin-right: 8px; color: #f5d061; font-size: 0.85rem; } .tra-cuu-badge h2 { font-family: var(--tete-font-heading); background: linear-gradient(90deg, #f5d061 0%, #ff00ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 24px; text-align: center; } .tra-cuu-badge h2::before { content: "\f688"; font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome"; font-weight: 900; margin-right: 10px; color: #f5d061; -webkit-text-fill-color: #f5d061; } @media (max-width: 767px) { .tra-cuu-badge h2 { font-size: 1.35rem; margin-bottom: 16px; } } .section-title-gradient, .guide-hero-title-wrap h2 { font-family: var(--tete-font-heading); background: linear-gradient(90deg, #f5d061 0%, #ff00ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; text-align: center; } /* Hide unwanted Flatsome divider lines, underlines, and b tags on gradient titles */ .tra-cuu-hero__title, .tra-cuu-hero__title .section-title, .tra-cuu-hero__title .section-title-main, .tra-cuu-hero__title span, .section-title-gradient, .section-title-gradient .section-title, .section-title-gradient .section-title-main, .section-title-gradient span, .guide-hero-title-wrap h2 span { border: none !important; border-bottom: none !important; } .tra-cuu-hero__title b, .tra-cuu-hero__title .is-divider, .huong-dan-hero__row b, .huong-dan-hero__row .is-divider, .chi-nhanh-hero__row b, .chi-nhanh-hero__row .is-divider, .section-title-gradient b, .section-title-gradient .is-divider, .guide-hero-title-wrap b, .guide-hero-title-wrap .is-divider { display: none !important; } .section-subtitle, .guide-hero-title-wrap p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; max-width: 680px; margin: 0 auto 32px auto; text-align: center; } @media (max-width: 767px) { .section-title-gradient, .guide-hero-title-wrap h2 { font-size: 1.35rem; line-height: 1.3; margin-bottom: 10px; } .section-subtitle, .guide-hero-title-wrap p { font-size: 0.88rem; line-height: 1.55; margin-bottom: 24px; padding: 0 10px; } .guide-hero-badge p { font-size: 0.76rem; padding: 5px 14px; } } /* --- Tra Cứu Components --- */ .tra-cuu-card { max-width: 680px; margin: 0 auto; background: rgba(18, 20, 26, 0.85); border: 1px solid rgba(223, 183, 74, 0.25); border-radius: 20px; padding: 30px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 35px rgba(223, 183, 74, 0.1); } .tra-cuu-search-form { display: flex; gap: 12px; } .tra-cuu-input-wrapper { position: relative; flex: 1; display: flex; align-items: center; } .tra-cuu-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #f5d061; font-size: 1rem; pointer-events: none; z-index: 2; line-height: 1; } #traCuuInput { width: 100% !important; height: 50px !important; padding: 0 16px 0 46px !important; margin: 0 !important; background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 12px !important; color: #ffffff !important; font-size: 0.95rem !important; outline: none !important; transition: all 0.25s ease; box-sizing: border-box; } #traCuuInput:focus { border-color: #f5d061 !important; box-shadow: 0 0 15px rgba(223, 183, 74, 0.3) !important; } #traCuuBtn { height: 50px !important; padding: 0 28px !important; background: linear-gradient(135deg, #f5d061 0%, #b8860b 100%) !important; border: none !important; border-radius: 12px !important; color: #ffffff !important; font-weight: 900 !important; font-size: 0.88rem !important; text-transform: uppercase !important; letter-spacing: 0.5px; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 20px rgba(223, 183, 74, 0.35); } #traCuuBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(223, 183, 74, 0.5); } .lookup-hints-wrapper { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 0.8rem; color: #94a3b8; } .quick-chip { background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(223, 183, 74, 0.2) !important; color: #f5d061 !important; padding: 4px 12px !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 0.75rem !important; cursor: pointer; transition: all 0.2s ease; } .quick-chip:hover { background: rgba(223, 183, 74, 0.2) !important; border-color: #f5d061 !important; transform: translateY(-1px); } .tra-cuu-card br, .tra-cuu-ticket-wrap br { display: none !important; } /* Ticket Details Card */ .tra-cuu-ticket-wrap { max-width: 680px; margin: 15px auto 0 auto; animation: fadeInTicket 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ticket-inner-card { background: linear-gradient(180deg, #181b22 0%, #0e1015 100%); border: 1px solid rgba(223, 183, 74, 0.3); border-radius: 24px; padding: 30px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(223, 183, 74, 0.15); position: relative; overflow: hidden; text-align: left; } .ticket-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 20px; margin-bottom: 24px; } .ticket-brand-subtitle { color: #f5d061; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .ticket-main-title { color: #ffffff !important; font-size: 1.35rem !important; font-weight: 900 !important; margin: 0 !important; text-transform: uppercase; } .ticket-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); color: #34d399; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; } .ticket-code-tag { font-size: 0.75rem; color: #94a3b8; margin-top: 6px; text-align: right; } .ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .ticket-box { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .ticket-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; } .ticket-label { color: #94a3b8; display: flex; align-items: center; gap: 8px; } .ticket-val { color: #ffffff; font-weight: 700; text-align: right; } .ticket-qr-banner { background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(223, 183, 74, 0.2); border-radius: 16px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .ticket-qr-image { background: #ffffff; padding: 8px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); flex-shrink: 0; } .ticket-qr-image img { display: block; width: 90px; height: 90px; } .ticket-actions-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .ticket-actions-row br { display: none !important; } .ticket-code-val { color: #ffffff !important; } .ticket-row-icon--map { color: #f5d061 !important; } .ticket-row-icon--door { color: #ff00ff !important; } .ticket-row-icon--calendar { color: #34d399 !important; } .ticket-row-icon--clock { color: #fbbf24 !important; } .ticket-row-icon--user { color: #e5b842 !important; } .ticket-row-icon--phone { color: #f472b6 !important; } .ticket-row-icon--key { color: #fbbf24 !important; } .ticket-row-icon--coins { color: #f5d061 !important; } .ticket-val--cyan { color: #f5d061 !important; } .ticket-val--yellow { color: #fbbf24 !important; } .ticket-val--passcode { color: #fef08a !important; font-size: 1.1rem !important; letter-spacing: 1px !important; } .ticket-val--total { color: #f5d061 !important; font-size: 1.1rem !important; } .ticket-row--bordered { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 6px; } .ticket-qr-title { color: #ffffff; margin: 0 0 6px 0; font-weight: 900; font-size: 0.95rem; } .ticket-qr-title i { color: #f5d061; } .ticket-qr-desc { color: #94a3b8; font-size: 0.78rem; margin: 0; max-width: 340px; line-height: 1.5; } .ticket-qr-notice { color: #34d399; font-size: 0.75rem; font-weight: 700; margin-top: 8px; } /* Unified Action Buttons in Ticket */ .ticket-actions-row .btn-ticket-print, .ticket-actions-row .btn-ticket-zalo, .ticket-actions-row .btn-ticket-book { height: 42px !important; padding: 0 16px !important; border-radius: 10px !important; font-size: 0.82rem !important; font-weight: 800 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; white-space: nowrap !important; box-sizing: border-box !important; line-height: 1 !important; margin: 0 !important; text-decoration: none !important; } .btn-ticket-print { background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; cursor: pointer; transition: all 0.2s ease; } .btn-ticket-print:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: #f5d061 !important; color: #f5d061 !important; } .btn-ticket-zalo { background: rgba(0, 136, 204, 0.15) !important; border: 1px solid rgba(0, 136, 204, 0.4) !important; color: #f5d061 !important; cursor: pointer; transition: all 0.2s ease; } .btn-ticket-zalo:hover { background: rgba(0, 136, 204, 0.3) !important; } .btn-ticket-book { background: linear-gradient(135deg, #f5d061 0%, #b8860b 100%) !important; border: none !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(223, 183, 74, 0.3); cursor: pointer; transition: all 0.2s ease; } .btn-ticket-book:hover { box-shadow: 0 6px 20px rgba(223, 183, 74, 0.5); transform: translateY(-1px); } @keyframes fadeInTicket { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* Not Found State (Tra Cứu) */ .tra-cuu-notfound-wrap:has(.is-hidden), .tra-cuu-result-wrap:has(.is-hidden) { display: none !important; } .tra-cuu-notfound-wrap { margin-top: 24px; } .tra-cuu-notfound-box { background: rgba(18, 20, 26, 0.9); border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 20px; padding: 36px 32px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 40px rgba(239, 68, 68, 0.15), 0 0 30px rgba(0, 0, 0, 0.7); text-align: center; animation: fadeInTicket 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .tra-cuu-notfound-box.is-hidden { display: none !important; } .tra-cuu-notfound-wrap br { display: none !important; } .notfound-icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: rgba(239, 68, 68, 0.12); border: 2px solid rgba(239, 68, 68, 0.45); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; color: #f87171; font-size: 1.8rem; box-shadow: 0 0 25px rgba(239, 68, 68, 0.25); } .notfound-title { color: #ffffff; font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; letter-spacing: 0.5px; } .notfound-desc { color: #94a3b8; font-size: 0.95rem; max-width: 620px; margin: 0 auto 24px auto; line-height: 1.6; } .notfound-keyword { color: #f87171; background: rgba(239, 68, 68, 0.15); padding: 2px 8px; border-radius: 6px; font-family: monospace; font-size: 1rem; border: 1px solid rgba(239, 68, 68, 0.3); } .notfound-tips-box { background: rgba(10, 16, 30, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 20px 24px; text-align: left; max-width: 680px; margin: 0 auto 28px auto; } .notfound-tips-box h5 { color: #fcd34d; font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .notfound-tips-box ul { margin: 0; padding-left: 20px; color: #cbd5e1; font-size: 0.88rem; line-height: 1.65; } .notfound-tips-box li { margin-bottom: 8px; } .notfound-tips-box li strong { color: #f5d061; } .notfound-actions-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .notfound-actions-row button, .notfound-actions-row a { height: 42px !important; padding: 0 18px !important; border-radius: 10px !important; font-size: 0.85rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-decoration: none !important; transition: all 0.25s ease !important; box-sizing: border-box !important; line-height: 1 !important; margin: 0 !important; } .btn-notfound-try { background: rgba(223, 183, 74, 0.15) !important; border: 1px solid rgba(223, 183, 74, 0.4) !important; color: #f5d061 !important; cursor: pointer; } .btn-notfound-try:hover { background: rgba(223, 183, 74, 0.25) !important; box-shadow: 0 0 15px rgba(223, 183, 74, 0.3) !important; } .btn-notfound-zalo { background: rgba(0, 136, 204, 0.2) !important; border: 1px solid rgba(0, 136, 204, 0.45) !important; color: #fcd34d !important; } .btn-notfound-zalo:hover { background: rgba(0, 136, 204, 0.35) !important; box-shadow: 0 0 15px rgba(0, 136, 204, 0.3) !important; } .btn-notfound-hotline { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #f87171 !important; } .btn-notfound-hotline:hover { background: rgba(239, 68, 68, 0.25) !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.3) !important; } /* Colocated Responsive for Tra Cứu */ @media (max-width: 767px) { .tra-cuu-card { padding: 20px 16px !important; } .tra-cuu-search-form { flex-direction: column; } .ticket-grid { grid-template-columns: 1fr; } .ticket-qr-banner { flex-direction: column; text-align: center; } .ticket-actions-row { flex-direction: column !important; width: 100% !important; gap: 10px !important; } .ticket-actions-row .btn-ticket-print, .ticket-actions-row .btn-ticket-zalo, .ticket-actions-row .btn-ticket-book { width: 100% !important; height: 44px !important; } .notfound-actions-row { flex-direction: column !important; width: 100% !important; gap: 10px !important; } .notfound-actions-row button, .notfound-actions-row a { width: 100% !important; height: 44px !important; } } /* --- Huong Dan & Quy Dinh Components --- */ .huong-dan-steps__row, .guide-steps-row { max-width: 1260px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; margin-bottom: 28px !important; } /* Step Column Container */ .huong-dan-steps__row > .col, .guide-steps-row > .col, .col.guide-step-card { background: transparent !important; border: none !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; } /* Step Card Base */ .huong-dan-steps__row > .col > .col-inner, .guide-steps-row > .col > .col-inner, .guide-step-card > .col-inner { position: relative !important; background: rgba(18, 20, 26, 0.85) !important; border: 1px solid rgba(223, 183, 74, 0.2) !important; border-radius: 18px !important; padding: 24px 20px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important; transition: all 0.3s ease !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; box-sizing: border-box !important; flex: 1 1 auto !important; width: 100% !important; } /* Step Card Hover */ .huong-dan-steps__row > .col:hover > .col-inner, .guide-steps-row > .col:hover > .col-inner, .guide-step-card:hover > .col-inner { transform: translateY(-4px) !important; } .huong-dan-steps__row > .col:nth-child(1):hover > .col-inner, .guide-steps-row > .col:nth-child(1):hover > .col-inner, .guide-step-card.step-1:hover > .col-inner { border-color: rgba(223, 183, 74, 0.5) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(223, 183, 74, 0.18) !important; } .huong-dan-steps__row > .col:nth-child(2):hover > .col-inner, .guide-steps-row > .col:nth-child(2):hover > .col-inner, .guide-step-card.step-2:hover > .col-inner { border-color: rgba(255, 0, 255, 0.5) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 0, 255, 0.18) !important; } .huong-dan-steps__row > .col:nth-child(3):hover > .col-inner, .guide-steps-row > .col:nth-child(3):hover > .col-inner, .guide-step-card.step-3:hover > .col-inner { border-color: rgba(52, 211, 153, 0.5) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(52, 211, 153, 0.18) !important; } .huong-dan-steps__row > .col:nth-child(4):hover > .col-inner, .guide-steps-row > .col:nth-child(4):hover > .col-inner, .guide-step-card.step-4:hover > .col-inner { border-color: rgba(251, 191, 36, 0.5) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(251, 191, 36, 0.18) !important; } /* ========================================================================== Step Typography: 3 Separate [ux_text] Blocks (No Hardcoded Icons) Text 1: Step Number (.step-num) Text 2: Step Content (.step-body) Text 3: Step Badge (.step-badge) ========================================================================== */ /* Text 1: Step Number */ .huong-dan-steps__row .step-num, .guide-steps-row .step-num, .huong-dan-steps__row > .col .col-inner > .text:nth-of-type(1), .guide-steps-row > .col .col-inner > .text:nth-of-type(1), .huong-dan-steps__row > .col .col-inner > p:nth-of-type(1), .guide-steps-row > .col .col-inner > p:nth-of-type(1) { font-family: var(--tete-font-heading, "Cinzel", serif) !important; font-size: 2.2rem !important; font-weight: 900 !important; line-height: 1 !important; display: block !important; margin: 0 0 14px 0 !important; letter-spacing: -0.5px !important; } .huong-dan-steps__row .step-num p, .guide-steps-row .step-num p, .huong-dan-steps__row > .col .col-inner > .text:nth-of-type(1) p, .guide-steps-row > .col .col-inner > .text:nth-of-type(1) p { margin: 0 !important; line-height: 1 !important; font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; } .huong-dan-steps__row > .col:nth-child(1) .step-num, .guide-steps-row > .col:nth-child(1) .step-num, .huong-dan-steps__row > .col:nth-child(1) .step-num p, .guide-steps-row > .col:nth-child(1) .step-num p, .huong-dan-steps__row > .col:nth-child(1) .col-inner > .text:nth-of-type(1), .guide-steps-row > .col:nth-child(1) .col-inner > .text:nth-of-type(1) { color: rgba(223, 183, 74, 0.85) !important; } .huong-dan-steps__row > .col:nth-child(2) .step-num, .guide-steps-row > .col:nth-child(2) .step-num, .huong-dan-steps__row > .col:nth-child(2) .step-num p, .guide-steps-row > .col:nth-child(2) .step-num p, .huong-dan-steps__row > .col:nth-child(2) .col-inner > .text:nth-of-type(1), .guide-steps-row > .col:nth-child(2) .col-inner > .text:nth-of-type(1) { color: rgba(255, 0, 255, 0.85) !important; } .huong-dan-steps__row > .col:nth-child(3) .step-num, .guide-steps-row > .col:nth-child(3) .step-num, .huong-dan-steps__row > .col:nth-child(3) .step-num p, .guide-steps-row > .col:nth-child(3) .step-num p, .huong-dan-steps__row > .col:nth-child(3) .col-inner > .text:nth-of-type(1), .guide-steps-row > .col:nth-child(3) .col-inner > .text:nth-of-type(1) { color: rgba(52, 211, 153, 0.85) !important; } .huong-dan-steps__row > .col:nth-child(4) .step-num, .guide-steps-row > .col:nth-child(4) .step-num, .huong-dan-steps__row > .col:nth-child(4) .step-num p, .guide-steps-row > .col:nth-child(4) .step-num p, .huong-dan-steps__row > .col:nth-child(4) .col-inner > .text:nth-of-type(1), .guide-steps-row > .col:nth-child(4) .col-inner > .text:nth-of-type(1) { color: rgba(251, 191, 36, 0.85) !important; } /* Text 2: Step Content */ .huong-dan-steps__row .step-body, .guide-steps-row .step-body, .huong-dan-steps__row > .col .col-inner > .text:nth-of-type(2), .guide-steps-row > .col .col-inner > .text:nth-of-type(2) { color: #cbd5e1 !important; font-size: 0.88rem !important; line-height: 1.6 !important; margin: 0 0 16px 0 !important; flex-grow: 1 !important; } .huong-dan-steps__row .step-body p, .guide-steps-row .step-body p, .huong-dan-steps__row > .col .col-inner > .text:nth-of-type(2) p { color: #cbd5e1 !important; font-size: 0.88rem !important; line-height: 1.6 !important; margin: 0 !important; } .huong-dan-steps__row .step-body strong, .guide-steps-row .step-body strong, .huong-dan-steps__row > .col .col-inner > .text:nth-of-type(2) strong { color: #ffffff !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.35 !important; display: block !important; margin-bottom: 6px !important; } /* Text 3: Step Badge (No Hardcoded Pseudo Icon) */ .huong-dan-steps__row .step-badge, .guide-steps-row .step-badge, .huong-dan-steps__row > .col .col-inner > .text:nth-of-type(3), .guide-steps-row > .col .col-inner > .text:nth-of-type(3) { font-style: normal !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding-top: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; font-size: 0.76rem !important; font-weight: 700 !important; margin: 0 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; width: 100% !important; } .huong-dan-steps__row .step-badge p, .guide-steps-row .step-badge p, .huong-dan-steps__row > .col .col-inner > .text:nth-of-type(3) p { margin: 0 !important; font-size: inherit !important; font-weight: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important; color: inherit !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .huong-dan-steps__row > .col:nth-child(1) .step-badge, .guide-steps-row > .col:nth-child(1) .step-badge, .huong-dan-steps__row > .col:nth-child(1) .col-inner > .text:nth-of-type(3) { color: #f5d061 !important; } .huong-dan-steps__row > .col:nth-child(2) .step-badge, .guide-steps-row > .col:nth-child(2) .step-badge, .huong-dan-steps__row > .col:nth-child(2) .col-inner > .text:nth-of-type(3) { color: #ff00ff !important; } .huong-dan-steps__row > .col:nth-child(3) .step-badge, .guide-steps-row > .col:nth-child(3) .step-badge, .huong-dan-steps__row > .col:nth-child(3) .col-inner > .text:nth-of-type(3) { color: #34d399 !important; } .huong-dan-steps__row > .col:nth-child(4) .step-badge, .guide-steps-row > .col:nth-child(4) .step-badge, .huong-dan-steps__row > .col:nth-child(4) .col-inner > .text:nth-of-type(3) { color: #fbbf24 !important; } /* --- Detail Box Panels (Row 3) --- */ .huong-dan-details__row, .guide-details-row { max-width: 1260px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; align-items: stretch !important; margin-top: 20px !important; margin-bottom: 24px !important; } .huong-dan-details__row > .col, .guide-details-row > .col, .col.guide-detail-box { background: transparent !important; border: none !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; } .huong-dan-details__row > .col > .col-inner, .guide-details-row > .col > .col-inner, .guide-detail-box > .col-inner { background: rgba(18, 20, 26, 0.85) !important; border-radius: 20px !important; padding: 28px 24px !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5) !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; height: 100% !important; box-sizing: border-box !important; transition: all 0.3s ease !important; flex: 1 1 auto !important; width: 100% !important; } /* Col 1 Left Box: Gold */ .huong-dan-details__row > .col:nth-child(1) > .col-inner, .guide-details-row > .col:nth-child(1) > .col-inner, .guide-detail-box.amenity-box > .col-inner { border: 1px solid rgba(223, 183, 74, 0.25) !important; } .huong-dan-details__row > .col:nth-child(1):hover > .col-inner, .guide-details-row > .col:nth-child(1):hover > .col-inner, .guide-detail-box.amenity-box:hover > .col-inner { box-shadow: 0 14px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(223, 183, 74, 0.12) !important; } /* Col 2 Right Box: Magenta */ .huong-dan-details__row > .col:nth-child(2) > .col-inner, .guide-details-row > .col:nth-child(2) > .col-inner, .guide-detail-box.rules-box > .col-inner { border: 1px solid rgba(255, 0, 255, 0.25) !important; } .huong-dan-details__row > .col:nth-child(2):hover > .col-inner, .guide-details-row > .col:nth-child(2):hover > .col-inner, .guide-detail-box.rules-box:hover > .col-inner { box-shadow: 0 14px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 0, 255, 0.15) !important; } /* Detail Box Headers */ .huong-dan-details__row .guide-box-header, .guide-details-row .guide-box-header, .guide-box-header, .huong-dan-details__row > .col > .col-inner > .row:first-child, .guide-details-row > .col > .col-inner > .row:first-child, .huong-dan-details__row .row-collapse:first-child, .guide-details-row .row-collapse:first-child, .guide-detail-box .guide-box-header-row, .guide-box-header-row { border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; padding-bottom: 18px !important; margin-bottom: 22px !important; width: 100% !important; box-sizing: border-box !important; } .huong-dan-details__row > .col:nth-child(1) .guide-box-header, .guide-details-row > .col:nth-child(1) .guide-box-header { border-bottom: 1px solid rgba(223, 183, 74, 0.3) !important; box-shadow: 0 1px 0 rgba(223, 183, 74, 0.15) !important; } .huong-dan-details__row > .col:nth-child(2) .guide-box-header, .guide-details-row > .col:nth-child(2) .guide-box-header { border-bottom: 1px solid rgba(255, 0, 255, 0.3) !important; box-shadow: 0 1px 0 rgba(255, 0, 255, 0.15) !important; } .huong-dan-details__row h3, .guide-details-row h3, .guide-detail-box h3, .guide-box-header h3 { font-family: var(--tete-font-heading, "Cinzel", serif) !important; font-size: 1.25rem !important; font-weight: 800 !important; margin: 0 0 8px 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.35 !important; } /* Col 1 Left Box (Rules / Nội Quy) - Gold Accent */ .huong-dan-details__row > .col:nth-child(1) h3, .guide-details-row > .col:nth-child(1) h3, .guide-detail-box.rules-box h3, .guide-detail-box:first-child h3 { color: #f5d061 !important; text-shadow: 0 0 14px rgba(245, 208, 97, 0.25) !important; } /* Col 2 Right Box (Amenities / Tiện Ích) - Neon Magenta Accent */ .huong-dan-details__row > .col:nth-child(2) h3, .guide-details-row > .col:nth-child(2) h3, .guide-detail-box.amenity-box h3, .guide-detail-box:last-child h3 { color: #ff00ff !important; text-shadow: 0 0 14px rgba(255, 0, 255, 0.25) !important; } .huong-dan-details__row h3::before, .guide-details-row h3::before, .guide-box-header h3::before { content: none !important; display: none !important; } .huong-dan-details__row .guide-box-header p, .guide-details-row .guide-box-header p, .guide-box-header p, .huong-dan-details__row > .col > .col-inner > .row:first-child p, .guide-details-row > .col > .col-inner > .row:first-child p, .huong-dan-details__row .row-collapse:first-child p, .guide-details-row .row-collapse:first-child p, .guide-detail-box .guide-box-header-row p, .guide-box-header-row p { color: #cbd5e1 !important; font-size: 0.9rem !important; margin: 0 !important; line-height: 1.55 !important; font-weight: 400 !important; } /* Featured Box modular items inside Detail Boxes (With Luxury Icons) */ .huong-dan-details__row .featured-box, .guide-details-row .featured-box, .guide-detail-box .featured-box { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; margin-bottom: 12px !important; } .huong-dan-details__row .featured-box:last-child, .guide-details-row .featured-box:last-child, .guide-detail-box .featured-box:last-child { margin-bottom: 0 !important; } .huong-dan-details__row .featured-box .icon-box-img, .guide-details-row .featured-box .icon-box-img { flex-shrink: 0 !important; margin-bottom: 0 !important; width: 48px !important; max-width: 48px !important; } .huong-dan-details__row .featured-box .icon-box-img img, .guide-details-row .featured-box .icon-box-img img { width: 48px !important; height: 48px !important; object-fit: contain !important; display: block !important; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)); } .huong-dan-details__row .featured-box .icon-box-text, .guide-details-row .featured-box .icon-box-text, .guide-detail-box .featured-box .icon-box-text { flex: 1 !important; background: rgba(30, 41, 59, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; padding: 14px 18px !important; transition: all 0.25s ease !important; position: relative !important; min-height: auto !important; } .huong-dan-details__row > .col:nth-child(1) .featured-box:hover .icon-box-text, .guide-details-row > .col:nth-child(1) .featured-box:hover .icon-box-text, .guide-detail-box.amenity-box .featured-box:hover .icon-box-text { background: rgba(30, 41, 59, 0.7) !important; border-color: rgba(223, 183, 74, 0.35) !important; transform: translateX(3px) !important; } .huong-dan-details__row > .col:nth-child(2) .featured-box:hover .icon-box-text, .guide-details-row > .col:nth-child(2) .featured-box:hover .icon-box-text, .guide-detail-box.rules-box .featured-box:hover .icon-box-text { background: rgba(30, 41, 59, 0.7) !important; border-color: rgba(255, 0, 255, 0.4) !important; transform: translateX(3px) !important; } .huong-dan-details__row .featured-box ul, .guide-details-row .featured-box ul, .guide-detail-box .featured-box ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .huong-dan-details__row .featured-box li, .guide-details-row .featured-box li, .guide-detail-box .featured-box li { color: #cbd5e1 !important; font-size: 0.86rem !important; line-height: 1.6 !important; margin: 0 !important; } .huong-dan-details__row .featured-box li strong, .guide-details-row .featured-box li strong, .guide-detail-box .featured-box li strong { color: #ffffff !important; display: block !important; font-size: 0.92rem !important; margin-bottom: 3px !important; } /* Also support semantic .guide-items-list fallback */ .guide-items-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } .guide-items-list li { background: rgba(30, 41, 59, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; padding: 14px 18px !important; color: #cbd5e1 !important; font-size: 0.86rem !important; line-height: 1.6 !important; position: relative !important; transition: all 0.25s ease !important; margin: 0 !important; } .guide-items-list li:hover { background: rgba(30, 41, 59, 0.7) !important; border-color: rgba(223, 183, 74, 0.3) !important; transform: translateX(3px) !important; } .guide-detail-box.rules-box .guide-items-list li:hover { border-color: rgba(255, 0, 255, 0.4) !important; } .guide-items-list li strong { color: #ffffff !important; display: block !important; font-size: 0.92rem !important; margin-bottom: 3px !important; } /* Colocated Responsive for Huong Dan & Quy Dinh */ @media (max-width: 992px) { .huong-dan-steps__row > .col, .guide-steps-row > .col, .guide-step-card { margin-bottom: 20px !important; } .huong-dan-details__row > .col, .guide-details-row > .col, .guide-detail-box { margin-bottom: 20px !important; } } @media (max-width: 767px) { .huong-dan-steps__row > .col, .guide-steps-row > .col, .guide-step-card { margin-bottom: 16px !important; } .huong-dan-details__row > .col, .guide-details-row > .col, .guide-detail-box { margin-bottom: 20px !important; } .huong-dan-details__row > .col > .col-inner, .guide-details-row > .col > .col-inner, .guide-detail-box > .col-inner { padding: 22px 18px !important; } .huong-dan-details__row .featured-box .icon-box-text, .guide-details-row .featured-box .icon-box-text, .guide-detail-box .featured-box .icon-box-text { padding: 12px 14px !important; } .guide-items-list li { padding: 12px 14px !important; font-size: 0.83rem !important; } } /* --- Chi Nhánh Components --- */ .chi-nhanh-cards__row br, .branch-cards-row br, .branch-card br, .branch-buttons-grid br { display: none !important; } .col.branch-card { background: transparent !important; border: none !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; } .branch-card > .col-inner, .branch-card:not(.col) { background: rgba(18, 20, 26, 0.85); border: 1px solid rgba(223, 183, 74, 0.2); border-radius: 20px; padding: 24px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; flex: 1 1 auto !important; width: 100% !important; box-sizing: border-box !important; } .branch-card > .col-inner > div:first-child { flex: 1 1 auto; display: flex; flex-direction: column; } .branch-card:hover > .col-inner, .branch-card:not(.col):hover { transform: translateY(-4px); border-color: rgba(223, 183, 74, 0.5); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(223, 183, 74, 0.15); } .branch-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .branch-tag-city { background: rgba(223, 183, 74, 0.15); border: 1px solid rgba(223, 183, 74, 0.35); color: #f5d061; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; } .branch-status-live { font-size: 0.75rem; font-weight: 700; color: #34d399; display: flex; align-items: center; gap: 6px; } .branch-name { color: #ffffff !important; font-size: 1.15rem !important; font-weight: 900 !important; margin: 0 0 8px 0 !important; } .branch-address { color: #94a3b8 !important; font-size: 0.8rem !important; line-height: 1.45; margin: 0 0 12px 0 !important; display: flex; align-items: flex-start; gap: 8px; min-height: 40px; } .branch-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; min-height: 52px; align-content: flex-start; } .branch-amenity-chip { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(255, 255, 255, 0.08); color: #cbd5e1; padding: 3px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; } .branch-card-footer { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .branch-hotline-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .branch-hotline-link { font-family: var(--tete-font-mono); color: #f5d061 !important; font-weight: 900 !important; font-size: 0.88rem !important; text-decoration: none; } .branch-buttons-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .btn-branch-zalo { background: rgba(0, 136, 204, 0.15) !important; border: 1px solid rgba(0, 136, 204, 0.4) !important; color: #f5d061 !important; border-radius: 10px !important; padding: 0 8px !important; height: 40px !important; font-size: 0.78rem !important; font-weight: 800 !important; text-align: center; text-decoration: none; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; box-sizing: border-box !important; transition: all 0.2s ease; } .btn-branch-zalo:hover { background: rgba(0, 136, 204, 0.3) !important; transform: translateY(-1px); } .btn-branch-book { background: linear-gradient(135deg, #f5d061 0%, #b8860b 100%) !important; border: none !important; color: #ffffff !important; border-radius: 10px !important; padding: 0 8px !important; height: 40px !important; font-size: 0.78rem !important; font-weight: 900 !important; text-align: center; text-decoration: none; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; box-sizing: border-box !important; box-shadow: 0 4px 15px rgba(223, 183, 74, 0.3); transition: all 0.2s ease; } .btn-branch-book:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(223, 183, 74, 0.5); } .branch-status-dot { font-size: 8px; } .branch-marker-icon { color: #f5d061; margin-top: 2px; } .branch-marker-icon--pink { color: #ff00ff; margin-top: 2px; } .branch-hotline-label { color: #94a3b8; } .branch-tag-city--pink { color: #ff00ff !important; border-color: rgba(255, 0, 255, 0.35) !important; background: rgba(255, 0, 255, 0.15) !important; } .branch-hotline-link--pink { color: #ff00ff !important; } .btn-branch-zalo--pink { color: #ff00ff !important; border-color: rgba(255, 0, 255, 0.35) !important; } .btn-branch-book--pink { background: linear-gradient(135deg, #ff00ff 0%, #a21caf 100%) !important; } /* Colocated Responsive for Chi Nhánh */ @media (max-width: 992px) { .branch-card { margin-bottom: 20px; } } @media (max-width: 767px) { .branch-card { margin-bottom: 18px; } } /* Subpages: Khám Phá & Đặt Phòng (Zero Inline CSS) */ .page-kham-pha__badge { margin-bottom: 25px; } .page-kham-pha__badge h2, .page-kham-pha__title { font-size: 2.2rem; font-weight: 900; background: linear-gradient(90deg, #f5d061 0%, #ff00ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; margin-bottom: 8px; } .page-kham-pha__badge p, .page-kham-pha__subtitle { color: #cbd5e1; font-weight: 600; font-size: 1.1rem; margin-top: 8px; } .sec-page-dat-phong .row { max-width: 1260px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } .sec-page-dat-phong h2, .page-dat-phong__title { color: #ffffff; font-weight: 700; margin-bottom: 8px; } .sec-page-dat-phong p, .page-dat-phong__desc { color: #94a3b8; max-width: 600px; margin: 0 auto 30px auto; } /* Hide default Flatsome absolute footer since custom UX block includes copyright section */ .absolute-footer { display: none !important; } /* ========================================================================== 11. Contact Form 7 - Booking Form Styles (Tra Cứu & Liên Hệ) ========================================================================== */ .booking-form-lookup, .booking-form-contact, .booking-form-wrap, .tete-cf7-lookup-wrap, .tete-cf7-contact-wrap { background: rgba(18, 20, 26, 0.85); border: 1px solid rgba(223, 183, 74, 0.25); border-radius: 20px; padding: 30px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 35px rgba(223, 183, 74, 0.1); max-width: 720px; margin: 0 auto; box-sizing: border-box; } .booking-form-header, .tete-cf7-header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .booking-form-title, .tete-cf7-title { font-family: var(--tete-font-heading); color: #ffffff; font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6px 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .booking-form-title i, .tete-cf7-title i { color: #f5d061; } .booking-form-desc, .tete-cf7-desc { color: #94a3b8; font-size: 0.85rem; margin: 0; line-height: 1.5; } .booking-form-grid-2col, .tete-cf7-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .booking-form-group, .tete-cf7-group { margin-bottom: 18px; } .booking-form-label, .tete-cf7-label { display: flex; align-items: center; gap: 6px; color: #cbd5e1; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .booking-form-label i, .tete-cf7-label i { color: #f5d061; font-size: 0.9rem; } .booking-form-label .required, .tete-cf7-label .required { color: #f43f5e; font-weight: 900; } /* Ensure CF7 span wrappers take full width */ .booking-form-wrap .wpcf7-form-control-wrap, .booking-form-lookup .wpcf7-form-control-wrap, .booking-form-contact .wpcf7-form-control-wrap, .tete-cf7-lookup-wrap .wpcf7-form-control-wrap, .tete-cf7-contact-wrap .wpcf7-form-control-wrap { display: block; width: 100%; position: relative; } /* CF7 Inputs, Select & Textarea */ .booking-form-wrap .booking-form-input, .booking-form-wrap .booking-form-select, .booking-form-wrap .booking-form-textarea, .booking-form-wrap input[type="text"], .booking-form-wrap input[type="tel"], .booking-form-wrap input[type="email"], .booking-form-wrap select, .booking-form-wrap textarea, .tete-cf7-input, .tete-cf7-select, .tete-cf7-textarea { width: 100%; background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: #ffffff; font-size: 0.9rem; padding: 0 16px; height: 48px; outline: none; margin: 0; box-sizing: border-box; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .booking-form-wrap .booking-form-textarea, .booking-form-wrap textarea, .tete-cf7-textarea { height: 110px; padding: 12px 16px; resize: vertical; line-height: 1.5; } .booking-form-wrap .booking-form-select, .booking-form-wrap select, .tete-cf7-select { cursor: pointer; } .booking-form-wrap select option, .booking-form-select option, .tete-cf7-select option { background: #0e1015; color: #ffffff; } .booking-form-wrap .booking-form-input:focus, .booking-form-wrap .booking-form-select:focus, .booking-form-wrap .booking-form-textarea:focus, .booking-form-wrap input[type="text"]:focus, .booking-form-wrap input[type="tel"]:focus, .booking-form-wrap input[type="email"]:focus, .booking-form-wrap select:focus, .booking-form-wrap textarea:focus, .tete-cf7-input:focus, .tete-cf7-select:focus, .tete-cf7-textarea:focus { border-color: #f5d061; box-shadow: 0 0 15px rgba(223, 183, 74, 0.3); } .booking-form-wrap input::placeholder, .booking-form-wrap textarea::placeholder, .tete-cf7-input::placeholder, .tete-cf7-textarea::placeholder { color: #64748b; font-size: 0.85rem; } /* Submit Button */ .booking-form-submit-wrap, .tete-cf7-submit-wrap { margin-top: 10px; } .booking-form-wrap .booking-form-btn-submit, .booking-form-wrap input[type="submit"], .tete-cf7-btn-submit { width: 100%; height: 50px; background: linear-gradient(135deg, #f5d061 0%, #b8860b 100%); border: none; border-radius: 12px; color: #ffffff; font-weight: 800; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 4px 20px rgba(223, 183, 74, 0.35); display: flex; align-items: center; justify-content: center; } .booking-form-wrap .booking-form-btn-submit:hover, .booking-form-wrap input[type="submit"]:hover, .tete-cf7-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(223, 183, 74, 0.5); } /* Quick 1-Line Search Bar */ .booking-form-quick-search, .tete-cf7-quick-search { display: flex; gap: 12px; max-width: 680px; margin: 0 auto; background: rgba(18, 20, 26, 0.85); border: 1px solid rgba(223, 183, 74, 0.25); border-radius: 16px; padding: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5); box-sizing: border-box; } .booking-form-search-input-wrap, .tete-cf7-search-input-wrap { position: relative; flex: 1; display: flex; align-items: center; } .booking-form-search-icon, .tete-cf7-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #f5d061; font-size: 1rem; pointer-events: none; z-index: 2; line-height: 1; } .booking-form-quick-input, .tete-cf7-quick-input { width: 100%; height: 48px; padding: 0 16px 0 46px; margin: 0; background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; color: #ffffff; font-size: 0.92rem; outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .booking-form-quick-input:focus, .tete-cf7-quick-input:focus { border-color: #f5d061; box-shadow: 0 0 15px rgba(223, 183, 74, 0.3); } .booking-form-quick-submit, .tete-cf7-quick-submit { height: 48px; padding: 0 24px; background: linear-gradient(135deg, #f5d061 0%, #b8860b 100%); border: none; border-radius: 10px; color: #ffffff; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 15px rgba(223, 183, 74, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .booking-form-quick-submit:hover, .tete-cf7-quick-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223, 183, 74, 0.5); } /* CF7 Validation & Status Messages */ .wpcf7 form.sent .wpcf7-response-output { border-color: #10b981; background: rgba(16, 185, 129, 0.15); color: #34d399; border-radius: 10px; padding: 12px 16px; margin-top: 16px; font-size: 0.85rem; font-weight: 600; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { border-color: #f43f5e; background: rgba(244, 63, 94, 0.15); color: #fb7185; border-radius: 10px; padding: 12px 16px; margin-top: 16px; font-size: 0.85rem; font-weight: 600; } .wpcf7-not-valid-tip { color: #fb7185; font-size: 0.75rem; margin-top: 4px; display: block; } /* Disable and hide CF7 AJAX spinner completely for custom lookup form */ .wpcf7 form .wpcf7-spinner, .booking-form-wrap ~ .wpcf7-spinner, .booking-form-wrap .wpcf7-spinner, .tete-cf7-lookup-wrap ~ .wpcf7-spinner, .tete-cf7-lookup-wrap .wpcf7-spinner { display: none; visibility: hidden; opacity: 0; } /* Inline Alert Inside Form (Replaces Browser Alert) */ .booking-form-alert, .tete-cf7-alert { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.45); border-radius: 12px; padding: 12px 18px; margin-bottom: 18px; color: #fca5a5; font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 10px; animation: fadeInResult 0.25s ease; box-sizing: border-box; line-height: 1.5; } .booking-form-alert i, .tete-cf7-alert i { color: #f87171; font-size: 1.15rem; flex-shrink: 0; } /* State Toggle Class (Zero inline style) */ .is-hidden { display: none !important; } /* Page Tra Cứu Clean Hero Badge */ .tra-cuu-badge { display: inline-block; margin-bottom: 24px; } .tra-cuu-badge h2 { font-family: var(--tete-font-heading); font-size: 1.85rem; font-weight: 800; text-transform: uppercase; background: linear-gradient(135deg, #f5d061 0%, #ffffff 50%, #b8860b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; margin: 0; display: inline-flex; align-items: center; gap: 12px; } .tra-cuu-badge h2 i { color: #f5d061; -webkit-text-fill-color: #f5d061; } /* CF7 Result Box */ .tra-cuu-result-box { margin-top: 24px; animation: fadeInResult 0.35s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes fadeInResult { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* CF7 Result Actions Row */ .booking-form-actions-wrap, .tete-cf7-actions-wrap { display: flex; gap: 12px; margin-top: 20px; } .booking-form-btn-zalo, .booking-form-btn-book, .tete-cf7-btn-zalo, .tete-cf7-btn-book { flex: 1; height: 48px; font-size: 0.88rem; font-weight: 700; justify-content: center; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-radius: 12px; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; box-sizing: border-box; line-height: 1; } .booking-form-btn-zalo, .tete-cf7-btn-zalo { background: rgba(0, 136, 204, 0.2); border: 1px solid rgba(0, 136, 204, 0.45); color: #fcd34d; } .booking-form-btn-zalo:hover, .tete-cf7-btn-zalo:hover { background: rgba(0, 136, 204, 0.35); box-shadow: 0 0 15px rgba(0, 136, 204, 0.3); } .booking-form-btn-book, .tete-cf7-btn-book { background: linear-gradient(135deg, #f5d061 0%, #b8860b 100%); border: none; color: #ffffff; box-shadow: 0 4px 15px rgba(223, 183, 74, 0.35); } .booking-form-btn-book:hover, .tete-cf7-btn-book:hover { box-shadow: 0 6px 20px rgba(223, 183, 74, 0.5); transform: translateY(-2px); } /* CF7 Not Found Box */ .tra-cuu-notfound-box { background: rgba(18, 20, 26, 0.9); border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 20px; padding: 36px 32px; margin-top: 24px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 40px rgba(239, 68, 68, 0.15), 0 0 30px rgba(0, 0, 0, 0.7); text-align: center; animation: fadeInResult 0.35s cubic-bezier(0.16, 1, 0.3, 1); max-width: 720px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .btn-notfound-rebook { background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; } .btn-notfound-rebook:hover { background: rgba(255, 255, 255, 0.1); border-color: #f5d061; color: #f5d061; } /* Colocated Responsive for CF7 Forms */ @media (max-width: 600px) { .booking-form-lookup, .booking-form-contact, .booking-form-wrap, .tete-cf7-lookup-wrap, .tete-cf7-contact-wrap { padding: 20px 16px; border-radius: 16px; } .booking-form-grid-2col, .tete-cf7-grid-2col { grid-template-columns: 1fr; gap: 0; } .booking-form-quick-search, .tete-cf7-quick-search { flex-direction: column; padding: 14px; } .booking-form-quick-submit, .tete-cf7-quick-submit { width: 100%; } .booking-form-actions-wrap, .tete-cf7-actions-wrap { flex-direction: column; gap: 10px; } .booking-form-btn-zalo, .booking-form-btn-book, .tete-cf7-btn-zalo, .tete-cf7-btn-book { width: 100%; } .tra-cuu-badge h2 { font-size: 1.35rem; } } /* ========================================================================== PAGE: LIÊN HỆ & ĐỊA CHỈ CHI NHÁNH (From tetehome.vn/contacts, Zero Inline Style) ========================================================================== */ .sec-page-contacts { min-height: calc(100vh - 80px); background-color: #0a0b0e !important; padding: 40px 0 !important; } .tetehome-contacts-box { width: 100%; max-width: 900px; background-color: #2a2f45; padding: 30px; border-radius: 16px; margin: 20px auto; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); text-align: left; } .tetehome-contacts-box h1 { font-size: 26px; font-weight: 800; margin-bottom: 25px; color: #f5d061; text-align: center; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 10px; } .tetehome-contacts-box h1 i { color: #f5d061; } .branch-select { display: block; width: 100%; max-width: 560px; height: auto; min-height: 48px; margin: 0 auto 30px; padding: 11px 44px 11px 18px; background-color: #3b4260; border: 1px solid #4a527c; border-radius: 8px; color: #ffffff; font-size: 15px; font-weight: 500; line-height: 1.5; cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.3s ease; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300c4ff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; box-sizing: border-box; } .branch-select:focus { outline: none; border-color: #f5d061; box-shadow: 0 0 12px rgba(0, 196, 255, 0.3); } .branch-select option { background-color: #2b3046; color: #ffffff; font-size: 15px; padding: 8px 12px; } .is-hidden { display: none !important; } .no-branch-selected { text-align: center; padding: 40px 20px; color: #b0b3c1; } .no-branch-selected.is-hidden { display: none !important; } .no-branch-selected i { font-size: 3rem; color: #f5d061; margin-bottom: 15px; display: block; opacity: 0.6; } .no-branch-selected p { font-size: 1rem; color: #b0b3c1; margin: 0; } .branch-card { background-color: #3a3f5a; border-radius: 12px; padding: 24px; margin-bottom: 20px; border: 1px solid rgba(0, 196, 255, 0.15); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .branch-card.is-hidden { display: none !important; } .branch-card h2 { color: #f5d061; margin-bottom: 15px; font-size: 20px; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 10px; } .branch-info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .branch-details { display: grid; grid-template-columns: 1fr; gap: 14px; } .branch-details p { margin: 2px 0; } .branch-details .label { color: #b0b3c1; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 2px; } .branch-details .value { color: #ffffff; font-weight: 600; font-size: 15px; margin: 0; } .branch-details .value i { color: #f5d061; margin-right: 5px; } .hotline-wrapper { display: inline-flex; align-items: center; gap: 10px; } .hotline-wrapper a { color: #f5d061; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; } .hotline-wrapper a i { margin-right: 5px; } .copy-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; height: 30px; background: linear-gradient(135deg, rgba(0, 196, 255, 0.15), rgba(0, 196, 255, 0.05)); border: 1px solid rgba(0, 196, 255, 0.4); border-radius: 8px; color: #f5d061; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; transition: all 0.25s ease; flex-shrink: 0; outline: none; white-space: nowrap; } .copy-btn:hover { background: linear-gradient(135deg, rgba(0, 196, 255, 0.3), rgba(0, 196, 255, 0.15)); border-color: #f5d061; transform: scale(1.05); box-shadow: 0 0 10px rgba(0, 196, 255, 0.35); } .copy-btn.copied { background: linear-gradient(135deg, rgba(0, 224, 118, 0.25), rgba(0, 224, 118, 0.1)) !important; border-color: #00e076 !important; color: #00e076 !important; } .maps-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 14px; background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(139, 92, 246, 0.08)); border: 1px solid rgba(167, 139, 250, 0.45); border-radius: 8px; color: #a78bfa; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-decoration: none; transition: all 0.25s ease; white-space: nowrap; } .maps-btn i { margin-right: 4px; } .maps-btn:hover { background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.15)); border-color: #a78bfa; color: #c4b5fd; transform: scale(1.05); box-shadow: 0 0 12px rgba(167, 139, 250, 0.35); text-decoration: none; } .map-container { width: 100%; height: 260px; border-radius: 10px; overflow: hidden; background-color: #2a2f45; border: 1px solid rgba(255, 255, 255, 0.05); } .map-container iframe { width: 100%; height: 100%; border: 0; } @media (max-width: 768px) { .tetehome-contacts-box { padding: 20px; margin: 10px auto; } .tetehome-contacts-box h1 { font-size: 20px; } .branch-select { font-size: 13.5px; min-height: 44px; padding: 10px 38px 10px 14px; } .branch-select option { font-size: 13.5px; } .branch-info { grid-template-columns: 1fr; gap: 16px; } .map-container { height: 220px; } } /* ========================================================================== TẮT TRIỆT ĐỂ KHỐI VÀ FORM BÌNH LUẬN TRÊN TOÀN BỘ CÁC TRANG (PAGE) ========================================================================== */ #comments, #respond, .comments-area, .comment-respond, .commentform, #commentform { display: none !important; } /* Target offset cho nút Đặt phòng ngay trên header */ .anh_dat_phong, #anh_dat_phong { scroll-margin-top: 110px !important; } /* ========================================================================== HEADER DỒN MENU & BUTTON SANG PHẢI (CHUẨN TETEHOME) ========================================================================== */ #masthead .header-inner.container, .header-main .header-inner.container { max-width: 100% !important; width: 100% !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box !important; } @media (max-width: 1199px) { #masthead .header-inner.container, .header-main .header-inner.container { padding-left: 20px !important; padding-right: 20px !important; } } .header-nav.nav-right .element-error, .header-nav.nav-right .header-divider { display: none !important; } /* Nút Đặt phòng ngay trên header (Luxury Gold Gradient & High Contrast) */ .header-nav.nav-right .header-button-1 { margin-left: 20px !important; display: flex !important; align-items: center !important; } .header-button-1 .button, .header-button-1 a.button, .header-nav.nav-right .header-button-1 a { background: linear-gradient(135deg, #fce588 0%, #dfb74a 45%, #b88a1e 100%) !important; color: #0b0d14 !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; border-radius: 999px !important; padding: 0 24px !important; height: 38px !important; line-height: 36px !important; font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; box-shadow: 0 4px 16px rgba(223, 183, 74, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } .header-button-1 a.button span, .header-nav.nav-right .header-button-1 a span { color: #0b0d14 !important; font-weight: 800 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; transition: color 0.3s ease !important; } .header-button-1 a.button:hover, .header-nav.nav-right .header-button-1 a:hover { transform: translateY(-2px) !important; background: linear-gradient(135deg, #fff0a8 0%, #eab846 45%, #c89622 100%) !important; box-shadow: 0 6px 24px rgba(223, 183, 74, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important; color: #000000 !important; } .header-button-1 a.button:hover span, .header-nav.nav-right .header-button-1 a:hover span { color: #000000 !important; } .header-button-1 a.button:active, .header-nav.nav-right .header-button-1 a:active { transform: translateY(0px) !important; box-shadow: 0 2px 10px rgba(223, 183, 74, 0.35) !important; } @media (max-width: 849px) { .header-main .hide-for-medium, .header-main .flex-col.hide-for-medium { display: none !important; } .header-main .show-for-medium, .header-main .flex-col.show-for-medium { display: flex !important; } } @media (min-width: 850px) { #masthead #logo, .header-main #logo { margin-left: 50px !important; } .header-main .flex-col.hide-for-medium.flex-left { display: none !important; width: 0 !important; flex: 0 0 0 !important; } .header-main .flex-col.show-for-medium { display: none !important; width: 0 !important; flex: 0 0 0 !important; } .header-main .flex-col.hide-for-medium.flex-right { flex-grow: 1 !important; display: flex !important; justify-content: flex-end !important; } .header-nav.nav-right { display: flex !important; justify-content: flex-end !important; align-items: center !important; } }