/* Theme Name: Tân Sơn Nhất Hotel Group — Guest Info Theme URI: https://congnghesaigon.vn Author: CNSG - Công Nghệ Sài Gòn Author URI: https://congnghesaigon.vn Description: Theme WordPress cho trang landing "Guest Information" quét QR trong phòng khách sạn. Tối ưu mobile, có trình quản lý tài liệu PDF với hiệu ứng lật trang (flipbook) quản lý ngay trong admin. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: tsn-guestinfo */ /* ========================================================================== 0. DESIGN TOKENS Bảng màu tông khách sạn: xanh rừng thông (pine) làm chủ đạo, sương sớm (mist) làm nền, điểm nhấn mái ngói (terracotta) và ánh đồng thau (brass). ========================================================================== */ :root{ --pine-900:#16281f; --pine-700:#1f3a2e; --pine-500:#2c5240; --mist-50:#f6f1e4; --mist-100:#efe7d3; --ink-900:#2b2a28; --ink-600:#5b564c; --brass-500:#b8863b; --brass-300:#d8ad6c; --terracotta-500:#a8503a; --white:#fffdf8; /* Màu cấu hình được trong Customize → "Màu sắc & Font" (giá trị dưới đây là fallback mặc định — functions.php sẽ in đè giá trị thật ở ) */ --gi-header-bg:#2B241D; --gi-overlay:#2B241D; --gi-footer-bg:#2B241D; --gi-page-bg:#b8863b; --gi-icon-bg:#b8863b; --gi-text-color:#2b2a28; /* Đồng bộ token màu chữ hiện có với màu cấu hình được, để mọi nơi dùng --ink-900 trong theme đều tự đổi theo khi admin đổi "Màu chữ chính" */ --ink-900:var(--gi-text-color); --font-display:'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body:'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; --radius-lg:22px; --radius-md:14px; --radius-sm:8px; --shadow-soft:0 10px 30px -12px rgba(22,40,31,0.35); --shadow-tile:0 6px 18px -8px rgba(22,40,31,0.28); } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;width:100%;overflow-x:hidden;} body{ margin:0; font-family:var(--font-body); color:var(--ink-900); background:var(--mist-50); line-height:1.5; width:100%; overflow-x:hidden; /* chặn tràn ngang trên mobile nếu 1 phần tử con lỡ rộng hơn viewport */ } img{max-width:100%;display:block;} button,input,textarea,select{max-width:100%;} /* tránh input/textarea làm vỡ layout trên màn hình hẹp */ a{text-decoration:none;color:inherit;} button{font-family:inherit;cursor:pointer;} :focus-visible{outline:3px solid var(--brass-500);outline-offset:2px;} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;} } /* ========================================================================== 1. LAYOUT KHUNG TRANG ========================================================================== */ .gi-wrap{width:100%;max-width:520px;margin:0 auto;min-height:100vh;position:relative;background:var(--mist-50);} .gi-hero{ position:relative; padding:28px 20px 46px; background:var(--gi-header-bg); color:var(--white); overflow:hidden; text-align:center; } .gi-hero::after{ /* đường cong mềm ở đáy header, thay cho hình răng cưa nhọn trước đó */ content:""; position:absolute;left:0;right:0;bottom:-1px;height:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V18C40 4 80 4 120 14C160 24 200 28 240 20C280 12 320 4 360 10C380 13 392 16 400 18V34Z' fill='%23f6f1e4'/%3E%3C/svg%3E"); background-size:100% 100%; } .gi-lang-switch{ position:absolute;top:16px;right:16px; display:flex;gap:4px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); border-radius:999px;padding:3px; z-index:5; } .gi-lang-switch a{ padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:.04em; border-radius:999px;color:rgba(255,255,255,0.75); } .gi-lang-switch a.is-active{background:var(--brass-500);color:var(--pine-900);} .gi-logo{max-width:150px;margin:6px auto 18px;} .gi-logo img{margin:0 auto;} /* Ảnh banner (toà nhà/cổng khách sạn) hiển thị ngay dưới logo, có lớp phủ gradient ở đáy để hoà mượt vào nền header phía dưới nó. */ .gi-hero-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; margin:0 auto 20px; box-shadow:0 14px 28px -14px rgba(0,0,0,0.45); } .gi-hero-photo img{ width:100%;aspect-ratio:16/9;object-fit:cover;display:block; } .gi-hero-photo::after{ content:""; position:absolute;inset:0; background:linear-gradient(180deg, transparent 45%, var(--gi-overlay) 100%); pointer-events:none; } .gi-hotel-name{ font-family:var(--font-display); font-size:22px;font-weight:600;letter-spacing:.01em; margin:0 0 6px; } .gi-hotel-address{ font-size:13px;color:rgba(255,253,248,0.75);margin:0; max-width:320px;margin-inline:auto; } .gi-eyebrow{ display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--brass-300);font-weight:600;margin-bottom:10px; } /* ========================================================================== 2. LƯỚI DỊCH VỤ (Hotel Directory / Room Service / Guest Comment / Tivi List) ========================================================================== */ .gi-services{ padding:0 16px 28px;margin-top:-30px;position:relative;z-index:4; display:grid;grid-template-columns:repeat(2,1fr);gap:12px; } .gi-tile{ background:var(--white); border-radius:var(--radius-lg); padding:20px 14px 16px; box-shadow:var(--shadow-tile); text-align:center; display:flex;flex-direction:column;align-items:center;gap:10px; border:1px solid rgba(184,134,59,0.14); transition:transform .18s ease, box-shadow .18s ease; } .gi-tile:active{transform:scale(.97);} @media(hover:hover){ .gi-tile:hover{transform:translateY(-3px);box-shadow:0 14px 26px -10px rgba(22,40,31,0.3);} } .gi-tile-icon{ width:52px;height:52px;border-radius:50%; background:var(--gi-icon-bg); display:flex;align-items:center;justify-content:center; color:var(--white);flex-shrink:0; } .gi-tile-icon img{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);} .gi-tile-icon svg{width:26px;height:26px;} .gi-tile-label{ font-size:13.5px;font-weight:600;color:var(--pine-900);line-height:1.3; } /* ========================================================================== 3. NÚT GỌI ĐIỆN NỔI ========================================================================== */ .gi-call-fab{ position:fixed;right:18px;bottom:18px;z-index:40; width:56px;height:56px;border-radius:50%; background:var(--terracotta-500);color:var(--white); display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-soft); animation:gi-pulse 2.4s ease-in-out infinite; } .gi-call-fab svg{width:24px;height:24px;} @keyframes gi-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(168,80,58,0.45), var(--shadow-soft);} 50%{box-shadow:0 0 0 10px rgba(168,80,58,0), var(--shadow-soft);} } /* ========================================================================== 4. FOOTER ========================================================================== */ .gi-footer{ padding:22px 20px 58px;text-align:center;font-size:12px; background:var(--gi-footer-bg);color:rgba(255,253,248,0.65); } .gi-footer .gi-brand-mark{ font-family:var(--font-display);color:var(--brass-300);font-weight:600;font-size:14px;margin-bottom:4px; } /* ========================================================================== 5. TRANG FLIPBOOK (xem tài liệu PDF dạng lật trang) ========================================================================== */ .gi-book-header{ padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px; background:var(--gi-header-bg);color:var(--white); } .gi-book-header-row{ display:flex;align-items:center;gap:10px; } .gi-book-header-logo{ height:28px;width:auto;max-width:110px;object-fit:contain; } .gi-book-header-actions{ margin-left:auto;display:flex;align-items:center;gap:8px; } .gi-header-call-btn{ width:34px;height:34px;border-radius:50%;background:var(--terracotta-500);color:var(--white); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .gi-header-call-btn svg{width:16px;height:16px;} .gi-lang-switch-inline{ position:static;top:auto;right:auto; /* ghi đè kiểu định vị tuyệt đối của .gi-lang-switch gốc (dùng cho hero) */ } .gi-back-btn{ width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.14); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .gi-back-btn svg{width:18px;height:18px;} .gi-book-title{font-family:var(--font-display);font-size:17px;font-weight:600;} .gi-book-stage{ padding:16px; } .gi-book-frame{ position:relative; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); overflow:hidden; aspect-ratio:3/4; perspective:1600px; } .gi-book-loading{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;color:var(--ink-600);font-size:13px; } .gi-spinner{ width:26px;height:26px;border-radius:50%; border:3px solid var(--mist-100);border-top-color:var(--brass-500); animation:gi-spin 0.8s linear infinite; } @keyframes gi-spin{to{transform:rotate(360deg);}} .gi-page-slot{ position:absolute;inset:0;transform-style:preserve-3d; transition:transform .25s ease; /* dùng cho zoom scale */ } .gi-page{ position:absolute;inset:0; transform-origin:left center; transition:transform .6s cubic-bezier(.4,.05,.2,1), box-shadow .6s; background:var(--white); will-change:transform; backface-visibility:hidden; } .gi-page canvas{width:100%;height:100%;object-fit:contain;display:block;} .gi-page.is-turned{transform:rotateY(-170deg);box-shadow:-18px 0 30px -10px rgba(0,0,0,0.25);} .gi-page-corner{ position:absolute;right:0;bottom:0;width:34px;height:34px; background:linear-gradient(135deg,transparent 50%, rgba(184,134,59,0.35) 50%); border-radius:0 0 var(--radius-md) 0;pointer-events:none; } .gi-book-controls{ display:flex;align-items:center;justify-content:space-between; padding:14px 6px 0; } .gi-nav-btn{ width:44px;height:44px;border-radius:50%;background:var(--white); box-shadow:var(--shadow-tile);display:flex;align-items:center;justify-content:center; border:1px solid rgba(184,134,59,0.2); } .gi-nav-btn:disabled{opacity:.35;} .gi-nav-btn svg{width:18px;height:18px;color:var(--pine-700);} .gi-page-count{font-size:13px;color:var(--ink-600);font-variant-numeric:tabular-nums;} .gi-book-toolbar{ display:flex;align-items:center;justify-content:center;gap:10px; padding:12px 0 4px; } .gi-tool-btn{ width:38px;height:38px;border-radius:50%;background:var(--white); box-shadow:var(--shadow-tile);display:flex;align-items:center;justify-content:center; border:1px solid rgba(184,134,59,0.16); } .gi-tool-btn svg{width:16px;height:16px;color:var(--pine-700);} .gi-empty-state{ text-align:center;padding:50px 20px;color:var(--ink-600); } /* ========================================================================== 6. QUICK NAV — thanh menu nhanh cố định đáy trang xem PDF / khảo sát ========================================================================== */ .gi-book-stage{padding-bottom:96px;} /* chừa chỗ cho quick-nav cố định phía dưới */ .gi-survey-wrap{padding-bottom:96px;} .gi-quick-nav{ position:fixed;left:0;right:0;bottom:0;z-index:30; max-width:520px;margin:0 auto; background:var(--mist-50); border-top:1px solid rgba(184,134,59,0.25); box-shadow:0 -8px 20px -12px rgba(22,40,31,0.25); display:flex;overflow-x:auto; padding:10px 6px calc(10px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; } .gi-quick-item{ flex:1 0 auto;min-width:64px; display:flex;flex-direction:column;align-items:center;gap:5px; padding:4px 8px;color:var(--ink-600);text-align:center; } .gi-quick-item.is-active{color:var(--brass-500);} .gi-quick-icon{ width:34px;height:34px;border-radius:50%; background:var(--gi-icon-bg); display:flex;align-items:center;justify-content:center;color:var(--white); } .gi-quick-icon svg{width:18px;height:18px;} .gi-quick-icon img{width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(1);} .gi-quick-label{font-size:10.5px;font-weight:600;line-height:1.2;white-space:nowrap;} /* ========================================================================== 7. KHẢO SÁT KHÁCH HÀNG — layout 2 cột (khung chào trái + câu hỏi phải), 1 câu hỏi/màn hình, song ngữ VI/EN — theo đúng mẫu Mường Thanh. ========================================================================== */ body.gi-survey-active .gi-wrap{max-width:960px;background:var(--white);} body.gi-pdf-view-active .gi-wrap{ background:var(--gi-page-bg); } /* Trang PDF: nền vàng đồng, các khối "giấy trắng" (book-frame...) đã tự có nền var(--white) riêng để đọc rõ. Trang khảo sát: nền trắng, khung chào bên trái dùng lại gradient kem mặc định của .gi-survey-intro-panel. */ .gi-survey-shell{ display:flex;min-height:100vh; } .gi-survey-intro-panel{ flex:0 0 38%; min-width:0; background:linear-gradient(160deg,var(--mist-100),var(--mist-50)); border-right:1px solid rgba(184,134,59,0.2); padding:28px 24px; } .gi-survey-home-link{ display:inline-flex;align-items:center;gap:6px; font-size:12.5px;font-weight:600;color:var(--pine-700);margin-bottom:20px; } .gi-survey-home-link svg{width:14px;height:14px;} .gi-survey-logo{max-width:150px;margin-bottom:22px;} .gi-survey-intro-text{ font-size:14.5px;line-height:1.7;color:var(--ink-900);white-space:normal; overflow-wrap:break-word;word-break:break-word; } .gi-survey-intro-en{ margin-top:14px;font-style:italic;color:var(--ink-600);font-size:13px; } .gi-survey-question-panel{ flex:1;padding:28px 24px 24px;display:flex;flex-direction:column;min-width:0; } .gi-survey-progress-bar{ height:3px;background:var(--mist-100);border-radius:2px;overflow:hidden;margin-bottom:26px; } .gi-survey-progress-bar span{ display:block;height:100%;background:var(--brass-500); transition:width .35s ease;width:0%; } .gi-survey-content{flex:1;} .gi-survey-q-number{font-size:12.5px;color:var(--ink-600);margin-bottom:8px;font-variant-numeric:tabular-nums;} .gi-survey-q-label{margin-bottom:20px;} .gi-survey-q-vi{font-weight:600;font-size:16px;color:var(--ink-900);line-height:1.5;overflow-wrap:break-word;word-break:break-word;} .gi-survey-q-en{font-style:italic;color:var(--ink-600);font-size:13.5px;margin-top:6px;line-height:1.5;overflow-wrap:break-word;word-break:break-word;} .gi-survey-q.has-error .gi-survey-q-error{display:block;} .gi-survey-q-error{display:none;color:var(--terracotta-500);font-size:12px;margin-top:10px;} /* Thang điểm 1–10: 5 cột trên mobile, 10 cột (1 hàng) trên màn rộng */ .gi-survey-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:460px;} @media(min-width:640px){ .gi-survey-scale-10{grid-template-columns:repeat(10,1fr);} } .gi-survey-scale-4{grid-template-columns:repeat(4,1fr);max-width:280px;} .gi-survey-scale-btn{ aspect-ratio:1;border-radius:8px;border:1px solid rgba(184,134,59,0.35); background:var(--white);color:var(--ink-900);font-weight:600;font-size:14px; } .gi-survey-scale-btn.is-selected{background:var(--brass-500);border-color:var(--brass-500);color:var(--white);} .gi-survey-scale-hint{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-600);margin-top:8px;max-width:460px;} .gi-survey-scale-hint-4{max-width:280px;} @media(min-width:640px){ .gi-survey-scale-hint-10{max-width:460px;} } .gi-survey-stars{display:flex;gap:8px;} .gi-survey-star{ font-size:30px;line-height:1;color:var(--mist-100);background:none;border:none;padding:0; -webkit-text-stroke:1px rgba(184,134,59,0.4); } .gi-survey-star.is-on{color:var(--brass-500);-webkit-text-stroke:1px var(--brass-500);} /* Chọn 1 đáp án — dạng thanh ngang bo tròn (Có/Không...), giống mẫu gửi */ .gi-survey-bars{display:flex;flex-direction:column;gap:10px;max-width:460px;} .gi-survey-bar{ display:flex;align-items:center;gap:12px; padding:13px 18px;border-radius:10px;border:1px solid rgba(184,134,59,0.3); background:var(--white);color:var(--ink-900);font-size:14px;font-weight:500;text-align:left; width:100%;overflow-wrap:break-word;word-break:break-word; } .gi-survey-bar-dot{ width:16px;height:16px;border-radius:50%;border:2px solid rgba(184,134,59,0.5);flex-shrink:0; } .gi-survey-bar.is-selected{background:var(--pine-700);border-color:var(--pine-700);color:var(--white);} .gi-survey-bar.is-selected .gi-survey-bar-dot{border-color:var(--white);background:var(--brass-300);} .gi-survey-choices{display:flex;flex-wrap:wrap;gap:8px;} .gi-survey-choice{ padding:9px 16px;border-radius:999px;border:1px solid rgba(184,134,59,0.35); background:var(--white);color:var(--ink-900);font-size:13.5px;font-weight:500; } .gi-survey-choice.is-selected{background:var(--pine-700);border-color:var(--pine-700);color:var(--white);} .gi-survey-input,.gi-survey-textarea{ width:100%;max-width:460px;border:1px solid rgba(184,134,59,0.35);border-radius:var(--radius-sm); padding:10px 12px;font-family:var(--font-body);font-size:14px;background:var(--white);color:var(--ink-900); } .gi-survey-textarea{resize:vertical;} /* Màn hình thông tin khách (Tên/Số phòng/Email-SĐT/Ngày đến) */ .gi-survey-field-row{margin-bottom:16px;max-width:460px;} .gi-survey-field-label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--ink-900);} .gi-survey-guestinfo.has-error .gi-survey-field-error{display:block;} .gi-survey-field-error{display:none;color:var(--terracotta-500);font-size:12px;margin-top:8px;} /* Gạch phân cách giữa các câu hỏi khi 1 màn hình gộp nhiều câu */ .gi-survey-q-divider{height:1px;background:rgba(184,134,59,0.22);margin:22px 0;} .gi-survey-q{margin-bottom:4px;} .gi-survey-nav{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:20px 0 4px;margin-top:auto; } .gi-survey-back-btn{ background:var(--mist-100);color:var(--ink-900);border:none; padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px; } .gi-survey-primary-btn{ background:var(--brass-500);color:var(--white);border:none; padding:12px 28px;border-radius:999px;font-weight:600;font-size:14px; box-shadow:var(--shadow-tile); } .gi-survey-primary-btn:disabled{opacity:.6;} .gi-survey-thankyou{ display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:60px 24px;gap:10px;min-height:70vh; } .gi-survey-thankyou-icon{ width:56px;height:56px;border-radius:50%;background:var(--pine-700);color:var(--white); display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:6px; } .gi-survey-thankyou h2{font-family:var(--font-display);color:var(--pine-900);margin:0;} .gi-survey-thankyou p{color:var(--ink-600);margin:0 0 10px;} /* Mobile: xếp dọc — khung chào trên, câu hỏi dưới */ @media(max-width:760px){ body.gi-survey-active .gi-wrap{max-width:520px;} .gi-survey-shell{flex-direction:column;min-height:0;} .gi-survey-intro-panel{flex:0 0 auto;border-right:none;border-bottom:1px solid rgba(184,134,59,0.2);padding:22px 18px;} .gi-survey-logo{margin-bottom:14px;} .gi-survey-question-panel{padding:22px 18px 24px;} /* Từ câu hỏi thứ 2 trở đi: ẩn khung chào (logo + lời chào) trên mobile để đỡ chiếm chỗ, vào thẳng câu hỏi cho gọn. */ body.gi-survey-past-first .gi-survey-intro-panel{display:none;} body.gi-survey-past-first .gi-survey-logo{display:none;} /* phòng hờ, ẩn riêng logo dù panel cha có bị ghi đè cách nào */ } /* Màn hình rất hẹp (điện thoại nhỏ, <380px): thu gọn thêm chữ/khoảng cách */ @media(max-width:380px){ .gi-survey-intro-panel,.gi-survey-question-panel{padding-left:14px;padding-right:14px;} .gi-survey-q-vi{font-size:15px;} .gi-survey-scale{gap:4px;} .gi-survey-scale-btn{font-size:12px;border-radius:6px;} .gi-survey-bar{padding:11px 14px;font-size:13.5px;gap:8px;} .gi-survey-back-btn,.gi-survey-primary-btn{padding:11px 18px;font-size:13.5px;} .gi-survey-stars{gap:5px;} .gi-survey-star{font-size:26px;} } /* ========================================================================== 8. ADMIN — Ô nhập / preview PDF & icon trong metabox ========================================================================== */ .gi-admin-field{margin-bottom:16px;} .gi-admin-field label{display:block;font-weight:600;margin-bottom:6px;} .gi-admin-field input[type="text"], .gi-admin-field input[type="url"]{width:100%;max-width:420px;padding:6px 8px;} .gi-admin-pdf-preview{ display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px; background:#f6f1e4;border:1px solid #e4d8bb;border-radius:8px;max-width:420px; } .gi-admin-pdf-preview .dashicons{color:#a8503a;} .gi-admin-icon-preview img{width:40px;height:40px;object-fit:contain;margin-top:8px;border:1px dashed #ccc;border-radius:6px;padding:4px;}