Hệ thiết kế đang chạy trên bản demo v3: màu, chữ, bố cục, thành phần, chuyển động, cách viết và truy cập.
KiGin là công ty sản xuất đồ gỗ nội thất OEM/ODM. Giao diện sạch, nhiều khoảng thở, ảnh thật làm chủ.
Sản xuất bàn, ghế và đôn, tủ, giường từ gỗ tự nhiên và gỗ công nghiệp, theo mẫu, bản vẽ hoặc đơn đặt hàng. Hai dòng KiGin đang làm: Luxury (đường nét gọn, chất liệu gỗ, hoàn thiện kỹ) và Indochine (tông gỗ ấm, họa tiết hình học). Đã xuất khẩu Châu Âu và Mỹ. Không nhận thi công.
[….].| Logo | SVG nền trong input/01-logo-nhan-dien/logo-kigin.svg; chữ KiGin xanh; không đặt trên nền trắng khung, không kéo méo, vùng an toàn bằng chiều cao chữ "i" |
|---|---|
| Font | Tiêu đề Noto Serif Display; chữ thân và mọi nội dung khác Be Vietnam Pro; dự phòng Times New Roman, không dùng Georgia |
| Bo góc | Nút 4 px (mọi trang); ảnh, thẻ ảnh 12 px; ô form 8 px; chip, nhãn, bộ lọc dạng viên thuốc; cụm công cụ header khung 5 px; xem mục Đồng bộ UI/UX |
Bảng màu theo logo (phương án A, xanh). Dùng token, không dùng mã hex rời trong trang.
Chọn ngày 22/10/2026, lấy từ logo KiGin và đang chạy trên toàn bộ demo. Mọi thứ khác chỉ là màu nền, đường kẻ hoặc màu nhấn trên nền tối.
#136F9A--kg-teakNút chính, nút Zalo, liên kết nhấn, số lớn, vòng biểu tượng, chữ gradient (đầu). Chữ trắng trên màu này 5,5 : 1 (AA); màu này trên nền trắng 5,5 : 1.#0A2230--kg-inkChữ chính trên nền sáng (16,3 : 1), nền khối tối và chân trang, cuối gradient, nút đặc tối.#E3F4FA · #F6F9FB--kg-cream-in · --kg-ivoryNền section xen kẽ với trắng; không dùng làm màu chữ.Mỗi ô màu ghi token --kg-* và, nếu Flatsome có biến tương ứng, dòng xanh Flatsome: …. Biến Flatsome chưa có màu nằm ở bảng bên dưới.
#0A2230--kg-inkFlatsome: --fs-color-secondary, --fs-color-baseMÀU PHỤ: chữ chính trên nền sáng, nền tối, chân trang, cuối gradient#0F3248--kg-ink-2Nền ô tối, khung ảnh chờ#164359--kg-ink-3Lớp nền phụ trên nền tối#FFFFFF--kg-paperNền trang, khung form#F6F9FB--kg-ivoryNền section sáng xen kẽ, chữ trên nền tối#E3F4FA--kg-cream-inNền section kem xanh (Indochine), chip, vòng số#3A4D5A--kg-stoneFlatsome: --fs-color-grayChữ phụ trên nền sáng#C7E6F3--kg-mistChữ phụ trên nền tối#E3ECF1--kg-lineĐường kẻ trên nền sáng (đổi từ #D5E1E8, Giám Sát chốt 23/10/2026)#5CC0EA--kg-champagneMàu nhấn trên nền tối: viền focus, dấu tích, chữ nhấn; không dùng làm chữ trên nền sáng#0D4F6D--kg-champagne-inkFlatsome: --fs-experimental-link-colorChữ nhấn và biểu tượng trên nền sáng, liên kết trong đoạn chữ#A8261D--kg-err (đề xuất đặt tên)Flatsome: --fs-color-alertBáo lỗi trong form (nền tối dùng #FF9E96)#136F9A--kg-teakFlatsome: --primary-color, --fs-color-primaryMÀU CHÍNH (xanh logo): nút chính, nút Zalo, liên kết nhấn, số lớn, vòng biểu tượng#0F587B--kg-teak-hover (đề xuất đặt tên)Nền nút chính khi rê chuột (kg-btn--solid:hover, kg-btn--teak), đang ghi mã hex rời trong CSS| Tên biến Flatsome | Giá trị | Ghi chú |
|---|---|---|
--fs-color-success | chưa có | KiGin chưa dùng màu báo thành công; chờ duyệt màu rồi mới điền, chưa dùng trên trang |
--fs-experimental-link-color-hover | #0F587B | Đề xuất: liên kết khi rê chuột, đậm hơn một bậc; chưa duyệt |
Theme là WordPress + Flatsome nên màu chính và màu phụ khai báo bằng tên biến Flatsome đang đọc, không chỉ --kg-*. Ghi ở :root của child theme (hoặc đặt trong Flatsome > Style > Colors). Tên biến lấy từ các dự án Flatsome khác trên máy, chưa kiểm trên Flatsome thật vì chưa có host.
:root{
--primary-color:#136F9A;
--fs-color-primary:#136F9A;
--fs-color-secondary:#0A2230;
--fs-color-base:#0A2230;
--fs-color-gray:#3A4D5A;
--fs-color-alert:#A8261D;
--fs-experimental-link-color:#0D4F6D;
--fs-experimental-link-color-hover:#0F587B;
}Lưu ý: --kg-accent hiện vẫn trỏ về Champagne #5CC0EA (màu nhấn trên nền tối). Nút chính trên demo đang ghi cứng #136F9A trong CSS dùng chung; khi dựng trên Flatsome nên đổi sang var(--fs-color-primary) để một chỗ sửa là đổi cả nút.
Chữ thường cần từ 4,5 : 1 (AA), chữ lớn từ 3 : 1, viền ô nhập từ 3 : 1; đúng cả khi rê chuột, ở nền sáng và nền tối. Mọi cặp bên dưới đều đạt.
| Cặp màu | Tỉ lệ | Mức | Dùng cho |
|---|---|---|---|
| Aa Ink trên Paper | 16.4 : 1 | AAA | chữ thân, tiêu đề |
| Aa Stone trên Paper | 8.8 : 1 | AAA | phụ đề, mô tả |
| Aa Stone trên Ivory | 8.3 : 1 | AAA | phụ đề section ivory |
| Aa Champagne ink trên Cream | 7.9 : 1 | AAA | chip, vòng số |
| Aa Trắng trên Champagne (nút phụ cặp nút, Giám Sát chọn 23/10/2026, KHÔNG đạt AA) | 2.1 : 1 | không đạt | chữ nút phụ cặp nút, 2,06 : 1 dưới 4,5 : 1, đã báo Giám Sát |
| Aa Ink trên Champagne | 7.9 : 1 | AAA | chữ ô Báo giá của thanh dưới kg-mbar (nút chính kg-btn--solid đã đổi sang chữ trắng trên Teak, xem dòng Trắng trên Teak) |
| Aa Ivory trên Ink | 15.5 : 1 | AAA | chữ trên nền tối, nút đặc |
| Aa Mist trên Ink | 12.5 : 1 | AAA | phụ đề trên nền tối |
| Aa Champagne trên Ink | 7.9 : 1 | AAA | dấu tích, liên kết trên nền tối |
| Aa Trắng trên Teak | 5.6 : 1 | AA | nút chính kg-btn--solid, nút Zalo |
| Aa Xanh nhạt trên Ink 72% (cụm công cụ header EN VI) | 9.0 : 1 | AAA | chữ EN, biểu tượng nền sáng/tối trên ảnh sáng |
| Aa Mist 2 trên nền thẻ tối | 8.7 : 1 | AAA | gợi ý trong ô nhập, nền tối |
| Aa Xám xanh trên Paper | 6.3 : 1 | AA | gợi ý trong ô nhập, nền sáng |
| Aa Viền ô nhập trên Paper | 1.6 : 1 | không đạt | viền ô nhập, ô chọn: dưới 3 : 1, ngoại lệ Giám Sát chấp nhận (23/10/2026) |
| Aa Viền ô nhập trên thẻ tối | 5.9 : 1 | AA | viền ô nhập nền tối (cần từ 3 : 1) |
| Aa Lỗi trên Paper | 7.1 : 1 | AAA | thông báo lỗi nền sáng |
| Aa Lỗi trên thẻ tối | 7.3 : 1 | AAA | thông báo lỗi nền tối |
| Aa Ink trên Champagne (hover nút ink nền tối) | 7.9 : 1 | AAA | chữ nút Gửi khi rê chuột, nền tối |
| Aa Champagne ink trên lớp hover nền sáng | 6.8 : 1 | AA | liên kết khi rê chuột, nền sáng |
| Aa EN VI mặc định trong cụm công cụ header | 7.9 : 1 | AAA | ngôn ngữ chưa chọn và biểu tượng trăng, mặt trời |
| Aa Ngôn ngữ đang xem trong cụm công cụ header | 6.0 : 1 | AA | EN hoặc VI đang xem |
| Aa Trắng trong cụm công cụ header (hover) | 10.3 : 1 | AAA | hover chỉ đổi chữ sang trắng |
| Aa Liên kết trong hỏi đáp, nền sáng | 5.6 : 1 | AA | liên kết không gạch chân, màu nhấn |
| Aa Liên kết trong hỏi đáp, nền tối | 8.4 : 1 | AAA | liên kết không gạch chân, nền tối |
| Aa Liên kết hỏi đáp khi rê chuột, nền sáng | 16.4 : 1 | AAA | hover liên kết trong câu trả lời |
| Aa Viền ô tick trên Paper | 8.8 : 1 | AAA | ô đồng ý tự vẽ, viền 2 px (cần từ 3 : 1) |
| Aa Viền ô tick trên thẻ tối | 8.7 : 1 | AAA | ô đồng ý nền tối (cần từ 3 : 1) |
| Aa Dấu tích trên ô đã chọn nền tối | 7.9 : 1 | AAA | dấu tích ink trên nền Champagne |
| Aa Vòng focus ô nhập, nền sáng | 5.6 : 1 | AA | outline 2 px, cách 2 px (cần từ 3 : 1) |
| Aa Vòng focus ô nhập, nền tối | 7.7 : 1 | AAA | outline 2 px kèm bóng 3 px 35% (cần từ 3 : 1) |
| Aa Vòng focus nền tối trên nền Cream tối | 6.5 : 1 | AA | mọi phần tử bấm được trong main, nền sáng nhất của giao diện tối |
| Aa Viền ô nhập báo lỗi, nền tối | 8.1 : 1 | AAA | ô có aria-invalid, nền tối (cần từ 3 : 1) |
| Aa Mục ngôn ngữ trong danh sách | 12.5 : 1 | AAA | danh sách thả xuống, nền Ink (EN, VI chưa chọn) |
| Aa Mục ngôn ngữ đang xem trong danh sách | 9.5 : 1 | AAA | danh sách thả xuống, đậm 700 |
| Aa Mục ngôn ngữ khi rê chuột hoặc focus | 11.9 : 1 | AAA | nền Mist 12% trên Ink, chữ trắng |
Công tắc sáng / tối ở header đổi data-theme="dark" trên <html>, lưu lựa chọn trong trình duyệt. Đã đo tương phản chữ trên 10 trang ở 1440 và 390: không có đoạn nào dưới ngưỡng.
| Nền trang | #0B2433 (thay Paper); section Ivory #0E2C3E; Cream #123246; section Ink #071A26; chân trang #05121B |
|---|---|
| Chữ | Chính #E8F1F6; phụ #B9CCD6 (thay Stone); nhấn #7FD0F0 (thay Champagne ink) |
| Nút | Nút chính giữ nền xanh logo #136F9A chữ trắng (đổi 21/10/2026); nút đặc tối đổi sang nền sáng #E8F1F6; nút viền dùng viền sáng |
| Form | Ô nhập nền #0B2433, viền sáng 45%; chip chọn nền trong, chọn rồi thì Champagne; vòng focus ô nhập #5CC0EA 2 px kèm bóng 3 px rgba(92,192,234,.35); ô báo lỗi viền #FF9E96; mọi vòng focus trong main đổi sang #5CC0EA |
| Ảnh | Giữ nguyên, không đảo màu, không phủ tối thêm |
#136F9A) cho hành động chính của mỗi màn hình; màu phụ là Ink #0A2230.Hai họ chữ: Noto Serif Display cho tiêu đề, Be Vietnam Pro cho nội dung. Tiêu đề và phụ đề mọi section đồng bộ.
Noto Serif Display 600 · 35 đến 54 px · lh 1,06 trang con (đo 20/10: 52 px, lh 55,1 px ở 1440); trang chủ lh 1,04 (đo 20/10: 53,4 px, lh 55,6 px)Noto Serif Display 600 · 32 px · lh 1,14Be Vietnam Pro 400 · 16 đến 18 px · lh 1,65 · StoneBe Vietnam Pro 600 · 18 đến 22 px thẻ trang chủ; 15 đến 16 px thẻ trang Sản phẩm (đổi từ serif 400 ngày 23/10/2026)Be Vietnam Pro 600 · 18 px (đo 23/10/2026) · 8 bướcBe Vietnam Pro 400 · 17 px · lh 1,7Be Vietnam Pro 500 · 14 px (nhỏ nhất)Be Vietnam Pro 600 · 15 px (mobile 16 px)| Căn lề | Chữ trái, không căn đều hai bên; tiêu đề tối đa 2 đến 3 dòng, text-wrap: balance | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Độ rộng dòng | Đoạn văn tối đa 56 đến 68 ký tự | ||||||||||||||||||||
| Số | Số lining, không số kiểu cổ điển; số điện thoại 097 779 43 33 | ||||||||||||||||||||
| Cặp tiêu đề + phụ đề | Cùng cỡ ở mọi section; khối đầu section căn giữa theo chiều dọc | ||||||||||||||||||||
| Độ đậm tiêu đề | H1 và H2 section Noto Serif Display 600 (đổi 23/10/2026 chiều, thay luật "H1 và H2 serif 400" cùng ngày; Giám Sát chọn H1 cũng 600 để khớp độ đậm); H3 thẻ và bước Be Vietnam Pro 600 (luật Hybrid, 23/10/2026); tên dòng Luxury, Indochine nghiêng 300. | ||||||||||||||||||||
| Ba nhóm H3 (đo 24/10/2026) | Noto Serif Display 400 (câu lớn, tiêu đề hiển thị, 133 thẻ trong guide); Be Vietnam Pro 600 (thẻ, bước, tiêu đề form, 69 thẻ); Be Vietnam Pro 400 là tiêu đề mục trang pháp lý (kg-doc h2); H3 Noto Serif Display nghiêng 300 là tên dòng Luxury, Indochine. | ||||||||||||||||||||
| H3 quy trình 8 bước | Be Vietnam Pro 600, 18 px (đo 23/10/2026; trang Yêu cầu báo giá, main .kg-steps8 h3); mô tả dưới mỗi bước 16 px | ||||||||||||||||||||
| Thẻ form (h2) | Cỡ theo token --kg-fs-h3 (26 đến 32 px, class kg-fb-title thay style nội tuyến); từ 760 px trở xuống cố định 32 px (main .kg-formbox h2, !important) | ||||||||||||||||||||
| Câu dẫn hero | 21 px ở desktop (token --kg-fs-lg, 19 đến 21 px; sửa 24/10/2026: giá trị lớn nhất trước đó nhỏ hơn nhỏ nhất nên cố định 19 px): ngoại lệ đã chốt, lớn hơn mốc phụ đề 16 đến 18 px của đầu section; xem mục Nút và liên kết | ||||||||||||||||||||
| Token cỡ chữ (đồng bộ 23/10/2026, bản sao, chờ duyệt) |
Token cũ trong |
Luật chung cho font heading, bo góc nút và đầu section, áp cho trang chủ và mọi trang con.
Đã duyệt 23/10/2026 và đã áp vào CSS nguồn (home-sua-17-10.css và các CSS trang), không còn bản thử. Backup trước khi áp: backup/xnv3-truoc-ap-dong-bo-20261023-0904.
--kg-fs-h2 = 2rem) ở mọi trang; H3 thẻ, nhãn, nút, form là Be Vietnam Pro 600.is-left). Chữ gradient chỉ cho một từ nhấn.kg-ledger h3 trang chủ, tiêu đề hộp form) giữ serif 400 dù là H3.kg-doc h2) là Be Vietnam Pro 400: tài liệu dài, chưa đổi theo luật H2 serif.Noto Serif Display 400 · 35 đến 54 px · mọi trangNoto Serif Display 600 · 32 px cố định (--kg-fs-h2 = 2rem) · lh 1,14 · mọi trang, một luật .kg-sec h2 (đổi 23/10/2026 chiều: trước là 400 và co giãn 32 đến 44 px)Be Vietnam Pro 600 · 15 đến 16 px ở trang Sản phẩm và trang nhóm; 18 đến 22 px ở thẻ trang chủ (.kg-card[data-tags] h3)Be Vietnam Pro 600 · 16 đến 18 px (quy trình 8 bước, thẻ ô, khối công đoạn)Be Vietnam Pro 600 · 13 px · chữ hoaBe Vietnam Pro 600 · 15 px (mobile 16 px)Noto Serif Display 400 · 38 px · ngoại lệ đã chốt: kg-ledger h3 (trang chủ) và tiêu đề hộp form; là tiêu đề lớn nên giữ serif dù thẻ là H3Noto Serif Display nghiêng 300 · tên dòng ở hero hai nửa và khối hai dòngkg-btn, mọi trang, kể cả trong kg-ab-actions (đã bỏ ghi đè 4 px riêng của 7 trang).kg-ab-pill, bộ lọc nhóm. Không phải nút hành động nên giữ viên thuốc; cụm công cụ header (sáng/tối, ngôn ngữ) là khung 5 px, không phải viên thuốc.kg-pd-chip.Đảm bảo chất lượng
KiGin kiểm soát chất lượng ở ba điểm trong quy trình, từ mẫu đến lúc đóng gói và bàn giao theo đơn hàng.
Đảm bảo chất lượng
KiGin kiểm soát chất lượng ở ba điểm trong quy trình, từ mẫu đến lúc đóng gói và bàn giao theo đơn hàng.
| Đã áp ở đâu | H2: bỏ main .kg-ab-qa-head h2 Be Vietnam Pro 600 (home-sua-17-10.css), body[data-page="products"] main h2 (san-pham.css), .kg-pd-info h2 (san-pham-chi-tiet.css), nên mọi H2 section dùng .kg-sec h2. Nút: .kg-btn 4 px (home-sua-17-10.css), bỏ border-radius:4px ghi đè ở kg-ab-actions của 7 CSS trang và kg-ab-intro trang Về KiGin; nút menu di động 4 px. H3 tên thẻ trang chủ chuyển sang Be Vietnam Pro 600. Đầu section canh trái: main .kg-sec .kg-ab-qa-head.is-left |
|---|---|
| Đã đo sau khi áp | Mọi H1 và H2 section là Noto Serif Display 400 trên 14 trang (trừ kg-doc h2 ở hai trang chính sách); mọi .kg-btn trên 16 trang có bo 4 px; mọi H3 thẻ ở trang con là Be Vietnam Pro 600 |
| Đầu section chung (thử 23/10/2026, bản sao xem-nhanh-v3-uiux) | kg-sechead bọc nhãn viên thuốc (tùy chọn), H2 và đoạn dẫn, thêm vào lúc dựng bởi unify_sechead() trong tao_v3.py; mọi H2 section (83 trên 83) nằm trong đó. Một khoảng cách H2 đến đoạn dẫn 18 px; đoạn dẫn clamp(1rem,.92rem + .25vw,1.125rem) (16 đến 18 px), dài tối đa 56 ký tự; hai biến thể: canh giữa (kg-ab-qa-head) và canh trái (cột chữ, hỏi đáp, kêu gọi, trang chủ). Trang chủ bỏ kiểu hai cột kg-head--split. Ngoại lệ ghi: H2 trong tài liệu (kg-doc), tiêu đề hộp form (kg-formbox), H2 ẩn cho trình đọc màn hình (kg-vh) |
| Hai nhịp khoảng đệm section (thử) | Nhịp rộng clamp(72px,9vw,136px) (129,6 px ở 1440) chỉ cho trang chủ; nhịp chuẩn clamp(64px,7.5vw,104px) (104 px ở 1440) cho mọi trang con, kể cả trang chi tiết sản phẩm (trước 80 px, mobile 56 px) và hai trang pháp lý (trước dùng nhịp rộng). Nền xen kẽ: trang chi tiết sản phẩm đổi mục thu gọn sang Ivory để không còn hai khối Paper liền nhau |
| Cặp hai nút liền nhau (Giám Sát tự thiết kế 23/10/2026, thử ở bản sao) | Chuẩn: nút chính kg-btn--solid (xanh logo #136F9A, chữ trắng) + nút phụ nền Champagne (--kg-champagne #5CC0EA) có biểu tượng, nút phụ đứng sau, cùng chiều cao, khe 16 px; cặp theo thang cỡ nút S, M, L (hàng "Thang cỡ nút" ở trên; cặp thường là M 52 px, cặp ở khối kêu gọi lớn là L 58 px). Trước đó nút phụ là nút viền kg-btn--line nền trong. Chữ nút phụ là trắng #FFFFFF (Giám Sát chọn 23/10/2026, đúng mẫu anh vẽ): tương phản 2,06 : 1 trên Champagne, KHÔNG đạt AA (cần 4,5 : 1 cho chữ 16 đến 17 px đậm), đã báo Giám Sát, chờ quyết lại khi cần. Rê chuột và focus làm nền đậm hơn (lớp ::before Ink #0A2230 độ mờ .14 trượt từ trái, nền vẫn Champagne), vì chữ trắng nên nền không được sáng lên. Phương án giảm thiểu chưa áp: nền Champagne đậm hơn (nội suy khoảng 55% về #136F9A) để chữ trắng đạt 3 : 1, cần Giám Sát duyệt màu mới. Thử bằng luật liền kề .kg-btn--solid + .kg-btn--line; khi dựng thật nên đặt class riêng (đề xuất kg-btn--sky). Ngoại lệ có tên (giữ nguyên): kg-btn--ink + kg-link (trang chủ), kg-btn--line + kg-btn--zalo (Gọi và Zalo, trang chủ), kg-btn--line + kg-btn--line (hai dòng Luxury, Indochine ở trang đích). Cặp "Gửi yêu cầu cho KiGin" + "Xem năng lực" ở Về KiGin dùng chung kiểu này |
| Bo góc theo vai trò (23/10/2026, bản sao): phương án A đã thử, Giám Sát chưa duyệt, đã hoàn tác | Giữ đúng hiện trạng và gọi tên từng vai trò. Nút hành động trong trang: 4 px (kg-btn). Nút nổi Zalo, Gọi kg-float: viên thuốc (ngoại lệ có tên: nút nổi). Thanh đáy mobile kg-mbar: ba ô vuông sát mép, 0 px, cao 58 px (ngoại lệ có tên: thanh dính mép màn hình). Chip lọc, nhãn, công tắc ngôn ngữ, chip radio: viên thuốc. Chip chọn kích thước kg-pd-chip và ô nhập: 8 px (bộ chọn giá trị, không phải chip lọc). Nút biểu tượng: lên đầu trang, mạng xã hội tròn; menu kg-burger 4 px; cụm công cụ header (sáng/tối + ngôn ngữ): khung 5 px, nút trong 4 px (thử 23/10/2026, chờ duyệt). Ngoại lệ ghép: nút tìm kiếm 0 8 8 0 theo ô nhập. Phương án A (nút nổi và ô thanh đáy 4 px, chip kích thước viên thuốc, menu tròn) không được duyệt |
| Còn mở | Số lớn kg-ab-num giữ nguyên kiểu; dòng "mọi heading Noto Serif Display" trong CLAUDE.md chưa sửa, chờ anh đồng ý |
Khung 1240 px, lưới 12 cột, section cách nhau bằng khoảng trắng chứ không bằng đường kẻ.
| Khung nội dung | Tối đa 1240 px, lề ngang clamp(16px, 4vw, 40px) |
|---|---|
| Khoảng cách section | clamp(72px, 9vw, 136px) trên và dưới; hai khối kiểu "ảnh và chữ" cách 100 px |
| Lưới thẻ | 3 cột desktop, 2 cột dưới 981 px, 1 cột dưới 640 px; khe 20 đến 36 px |
| Điểm ngắt | 981 px (bố cục 2 cột về 1), 720 px, 640 px, 560 px (quy trình về 1 cột) |
| Cột đôi | Hai cột cao bằng nhau, nội dung cột ngắn căn giữa dọc (khối Làm tại công ty, khối báo giá) |
| Cột đôi trang báo giá trên mobile | Từ 901 px hai cột (Gửi gì bên trái, form bên phải); từ 900 px trở xuống khối form đứng trước khối "Gửi gì" để người dùng thấy form ngay (script dời khối theo matchMedia, không dời khi con trỏ đang ở trong form); cột trái bỏ đệm |
| Header từ 980 px trở xuống | Lưới grid-template-columns: 1fr auto 1fr: nút menu bên trái, logo ở giữa, cụm công tắc bên phải (CSS chung site.css (phần sửa chung ở cuối file), áp mọi trang có menu). Trong mã nút menu đứng ngay sau liên kết "Bỏ qua menu", trước logo, để thứ tự Tab (menu, logo, công tắc nền, ngôn ngữ) khớp thứ tự nhìn từ trái sang phải (WCAG 2.4.3). Nút menu và cụm công tắc nền trong suốt, chỉ có viền rgba(246,249,251,.85) (người dùng chốt 20/10/2026, thay bản nền rgba(10,34,48,.72) viền rgba(199,230,243,.7) đã đo thấp nhất 3,35 : 1). Tương phản viền trên ảnh hero của bản mới chưa có số đo (task đo lại header-vien-v3 đang chạy); viền phụ thuộc điểm ảnh phía sau nên không đưa vào bảng cặp màu cố định |
| Header | Cố định, cao 76 px; menu di động và thanh Gọi, Zalo, Báo giá ở đáy: khi dựng trên Flatsome thì dùng phần có sẵn của Flatsome (bản demo hiện viết tay, chưa dựng trong Flatsome). Từ 400 px trở xuống: công tắc bỏ margin-right. Đo 20/10 ở 320, 360 và 390 px: nút menu x 16 đến 60 (bên trái, cao 44 px); logo x 107 đến 187 ở 320, x 140 đến 220 ở 360, x 155 đến 235 ở 390; cụm công tắc và EN | VI x 195 đến 304 ở 320, x 235 đến 344 ở 360, x 265 đến 374 ở 390. Khoảng nhìn thấy từ logo đến cụm công tắc: 8 px ở 320 (đúng khe 8 px), 15 px ở 360, 30 px ở 390; công tắc sáng/tối và cụm EN | VI cách nhau 1 px. Cả ba nằm trong màn hình ở 320 px, không tràn ngang; 320 px là khổ tối thiểu |
| Neo cuộn | scroll-padding-top = chiều cao header + 16 px (76 + 16 = 92 px, đã đo): bấm liên kết neo hoặc lỗi form cuộn tới ô đầu tiên thì ô không bị header che. scroll-padding-bottom là 140 px (chừa thanh Gọi, Zalo, Báo giá ở đáy) và về 0 ở màn thấp từ 520 px trở xuống (max-height:520px, điện thoại xoay ngang có bàn phím ảo), để ô đang nhập không bị đẩy lên quá cao |
| Chân trang | Nền tối hơn một bậc, viền trên sáng mảnh để tách khỏi section phía trên |
Nút kêu gọi hành động, dùng thẻ <a> khi chuyển trang và <button> khi thao tác trong biểu mẫu. Ba kiểu chính (chính, phụ, viền) cùng chung chiều cao tối thiểu 44 px. Một nút chính mỗi màn hình. Hover chung: nền trượt từ trái sang phải trong 0,45 giây.
Tên mỗi nút là tên class của nó, dùng thống nhất khi giao việc. Hai khối dưới: nền sáng và nền tối.
| Kích thước | Ba cỡ S, M, L (Giám Sát chọn 23/10/2026), xem hàng "Thang cỡ nút S, M, L" ngay dưới; bo 4 px, chữ đậm 600. Nút đơn, nút trong cặp và nút trong hàng nút đều theo thang, không còn chiều cao riêng từng khối |
|---|---|
| Thang cỡ nút S, M, L (Giám Sát chọn 23/10/2026, thử ở bản sao) | S = 44 px: chữ 15 px, đệm ngang 22 px; chỉ kg-btn--sm (nút "Yêu cầu báo giá" ở header, trong ngăn kéo mobile nút lớn hơn). M = 52 px: chữ 16 px, đệm ngang 32 px; mặc định mọi kg-btn (nút đơn, cặp nút, nút gửi form kg-btn--block, Google Maps, Xem thêm sản phẩm, các hàng kg-btns, kg-ct-btns, kg-pd-actions, kg-lp-btns). L = 58 px: chữ 17 px, đệm ngang 44 px; khối kêu gọi lớn kg-ab-actions; ở mobile 390 px còn 54 px. Mobile: mọi nút chính từ 48 px (M 52 px, L 54 px). Nút nổi Zalo/Gọi, thanh đáy kg-mbar, chip, nút biểu tượng không thuộc thang này.S 44 pxM 52 pxL 58 px |
| Ngoại lệ đã chốt (20/10/2026) | (1) Câu dẫn hero 22 px, lớn hơn mốc phụ đề 16 đến 18 px; (2) liên kết trong dòng chữ (Hỏi đáp, đoạn văn, tài liệu pháp lý) không gạch chân, chỉ dựa màu: từ 23/10/2026 là quy tắc chung (hàng Liên kết mặc định), tương phản với chữ thường khoảng 1,6 : 1 nên thiếu dấu hiệu ngoài màu theo WCAG 1.4.1, chờ Giám Sát quyết cách giảm thiểu; (3) nút CTA ở header (kg-btn--sm, "Yêu cầu báo giá") cao 44 px, dưới mốc 48 px của nút chính nhưng đạt vùng bấm 44 px; (4) icon mạng xã hội chân trang tròn 42 px, dưới vùng bấm 44 px của dự án nhưng trên tối thiểu 24 px của WCAG 2.2, khe 12 px |
| Tên nút | Tên nút chính là tên class: kg-btn--solid, kg-btn--line (nền sáng và nền tối), kg-btn--zalo, kg-btn--ink, kg-btn--blue (kèm kg-btn--solid), kg-btn--accent (nút phụ viền 1 px nền trong; nền sáng viền và chữ Ink #0A2230, nền tối viền và chữ trắng; dùng cạnh kg-btn--solid hoặc một mình; Giám Sát chọn 24/10/2026 theo ảnh nút "Xem sản phẩm" ở hero, thay kiểu viền accent cũ), kg-link, kg-link--arrow (liên kết có mũi tên, kèm kg-link). Giao việc dùng đúng tên class này |
| Nền tối (trang Liên hệ) | Cặp nút trên nền tối: Nút xanh đặc (6) cho hành động chính (nền #136F9A, chữ trắng) và Nút phụ viền (2) cho hành động phụ (viền 1 px accent #5CC0EA, nền trong, chữ #F6F9FB). Hover Nút xanh đặc: nền trượt #0F587B, chữ giữ trắng; hover Nút phụ viền: hiệu ứng viền chung, chữ giữ trắng |
| Chính | Nền xanh logo #136F9A, chữ trắng (kg-btn--solid, tương phản 5,5 : 1; đổi từ nền Champagne chữ Ink ngày 21/10/2026) cho hành động quan trọng nhất; hover nền #0F587B |
| Phụ | Viền mảnh, nền trong (kg-btn--line); Zalo dùng Teak (kg-btn--zalo); kg-btn--ink không còn dùng cho nút gửi form (đổi 23/10/2026); còn lại hai nút đơn "Xem dòng Luxury", "Xem dòng Indochine" ở trang chủ, chưa đổi, chờ Giám Sát quyết |
| Nút đi một mình dùng kg-btn--solid (Giám Sát chốt 23/10/2026, thử ở bản sao, chờ duyệt) | Nút không có nút liền kề luôn là kg-btn--solid (xanh logo #136F9A, chữ trắng 5,57 : 1, bo 4 px, hover nền #0F587B). Đã đổi: "Mở Google Maps" (Liên hệ, Yêu cầu báo giá; trước kg-btn--line), "Xem chi tiết sản xuất theo yêu cầu" (trang chủ; trước kg-btn--ink), nút gửi form "Gửi yêu cầu báo giá" và "Gửi liên hệ" (trước kg-btn--ink, giữ kg-btn--block), "Xem thêm sản phẩm" (trước kg-btn--line; nút này cao 52 px). Trạng thái đang tải của "Xem thêm sản phẩm": giữ nền đặc, không giảm độ mờ, vòng xoay kg-sp-more__ring màu chữ trắng, con trỏ progress; không còn luật hover, màu viền hoặc nền tối riêng cho nút này. Cặp hai nút liền nhau vẫn theo hàng "Cặp hai nút liền nhau" ở trên. Cỡ (Giám Sát chọn 23/10/2026, thử ở bản sao): mọi nút đi một mình cao 52 px, chữ 16 px, đệm ngang 32 px, bo 4 px: "Mở Google Maps", nút gửi form, nút đơn trong đoạn ("Xem chi tiết sản xuất theo yêu cầu", "Xem tất cả sản phẩm", "Xem năng lực công ty", "Gửi yêu cầu báo giá" ở Về KiGin), "Yêu cầu báo giá →" trong kg-sp-quote, "Xem thêm sản phẩm", "Xem dòng Luxury", "Xem dòng Indochine" (còn kg-btn--ink, chỉ đổi cỡ). Ở 390 px, "Gửi yêu cầu báo giá" Về KiGin cao 54 px theo luật mobile của trang. Nút trong cặp, nút CTA header (44 px), nút nổi, thanh đáy giữ cỡ riêng |
| Hover | Lớp nền trượt trái sang phải, chữ đổi màu; hover cả khối thẻ thì chỉ tiêu đề trượt, không chạy hiệu ứng của nút |
| Liên kết | Liên kết kiểu nút chữ có mũi tên (kg-link): hover nền trượt; vùng bấm cao 44 px; trong hàng nút cao 48 px |
| Liên kết mặc định trong dòng chữ (Giám Sát chốt 23/10/2026, thử ở bản sao, chờ duyệt) | Mọi liên kết a mặc định (câu trả lời Hỏi đáp kg-faq__a, đoạn văn trong khối nền sáng, tài liệu pháp lý kg-doc, liên kết điện thoại và email ở khối nền tối trang chủ, liên kết trống danh mục) không gạch chân. Nền sáng: màu #136F9A (5,57 : 1 trên trắng), hover #0A2230; nền tối: #7FD0F0 (9,3 : 1), hover #FFFFFF; đổi màu 0,25 giây; vòng focus 2 px cùng màu liên kết, cách 3 px. Không áp cho nút kg-btn, menu, chân trang, kg-link, thẻ (đã có kiểu riêng). Cảnh báo trợ năng: liên kết trong dòng chữ chỉ phân biệt với chữ thường bằng màu (#136F9A so với #3A4D5A chỉ 1,58 : 1, dưới 3 : 1 của WCAG 1.4.1); chờ Giám Sát chọn cách giảm thiểu. |
| Nút phụ viền: kg-btn--accent (Giám Sát chốt 24/10/2026, thử ở bản sao, chờ duyệt) | Viền 1 px, nền trong, chữ 600 cao 52 px bo 4 px. Nền sáng: viền và chữ Ink #0A2230 (tương phản 15 : 1); nền tối (hero, khối Ink, Wood, Marble, chế độ tối): viền và chữ trắng; hover nền Ink 8% (sáng) hoặc trắng 14% (tối). Dùng cho "Xem sản phẩm" ở hero, "Báo giá Luxury", "Báo giá Indochine" và nút Nhắn Zalo cạnh nút Gọi ở trang Liên hệ. Thay chữ trắng trên nền Champagne 2,06 : 1. Là kiểu duy nhất của kg-btn--accent; kiểu nền Champagne chữ Ink thử trước đó đã bỏ |
| Nút nổi chỉ biểu tượng (Giám Sát chốt 24/10/2026, chờ duyệt) | Nút nổi Gọi, Zalo (kg-float) từ 901 px là hai vòng tròn 48 px chỉ có biểu tượng; rê chuột hoặc Tab vào thì mở chữ (0,28 giây, aria-label giữ tên đầy đủ). Màn cảm ứng (hover:none) hiện luôn chữ. Dưới 901 px dùng thanh dưới (kg-mbar) thay cho nút nổi |
| Nút nổi Gọi, Zalo | Hai nút cố định ở mép trái màn hình (kg-float, kg-float__zalo), chữ 14 px (đã nâng từ 12 px 20/10/2026), focus viền trắng 2 px kèm vòng Ink; số điện thoại không còn ở header, chỉ ở nút nổi và thanh Gọi, Zalo dưới màn hình điện thoại |
| Khoảng cách | Hai nút cạnh nhau cách 12 đến 16 px; vùng bấm liền kề cách tối thiểu 8 px |
Form ngắn, một cột trên mobile, hai cột trên desktop. Chỉ hỏi điều cần để báo giá.
| Trường | Họ và tên *, Số điện thoại / Zalo *, Tên công ty, Email, Sản phẩm quan tâm, Dòng sản phẩm, Nội dung |
|---|---|
| Ô nhập | Cao 48 px (height và min-height, đệm trên dưới 0), bo 8 px, viền 1 px #C1CFDB (đo 1,59 : 1, ngoại lệ Giám Sát đã chấp nhận; nền tối #8FA9B8, đo 5,9 : 1); chữ trong ô 15 px, khi chạm 16 px (xem dòng Chữ ô nhập trên thiết bị chạm bên dưới); nhãn luôn hiện phía trên, không dùng placeholder thay nhãn |
| Vòng focus ô nhập | Nền sáng: outline 2 px solid #136F9A, cách 2 px. Nền tối: outline #5CC0EA kèm bóng 0 0 0 3 px rgba(92,192,234,.35). Ô báo lỗi (aria-invalid) nền tối viền #FF9E96. Mọi phần tử bấm được trong main ở nền tối dùng vòng focus #5CC0EA. Các cặp màu đã đo ở bảng Tương phản |
| Đã đồng bộ (20/10/2026) | Bộ quy tắc ô nhập này (cao 48 px, bo 8 px, vòng focus, lỗi, neo cuộn) nằm trong CSS chung site.css (phần sửa chung ở cuối file), nên mọi form dùng cùng một bộ: trang Liên hệ, landing, trang chủ đo ô cao 48 px, bo 8 px; trang Yêu cầu báo giá và form demo trên trang này cũng cùng bộ |
| Chữ ô nhập trên thiết bị chạm | Từ @media (pointer:coarse) chữ trong ô nhập 16 px để iPhone không tự phóng to khi lấy tiêu điểm; desktop (chuột) giữ 15 px. Quy tắc nằm trong CSS chung site.css (phần sửa chung ở cuối file), áp cho ô nhập, ô chọn và vùng nhập nhiều dòng của mọi form |
| Ô chọn dòng sản phẩm | Viên thuốc cao 44 px; hover giống nút: nền trượt từ trái sang phải 0,45 giây (độ đậm 16% màu chữ); ô đang chọn đổi nền đặc (ink, nền tối là xanh nhấn) |
| Lỗi | Một dòng ngắn dưới ô, nêu việc cần làm, giọng "bạn" (không "Anh/chị", không "Vui lòng"); chữ lỗi 14 px ở desktop, 16 px từ 760 px trở xuống; lỗi nền sáng #A8261D, nền tối #FF9E96 |
| Vùng báo lỗi | .kg-err (aria-live="polite") luôn nằm trong cây truy cập, kể cả khi rỗng: display:block; height:0; margin:0; overflow:hidden (không dùng display:none, để trình đọc màn hình nhận được khi nội dung vừa đổi). Mỗi ô có aria-describedby tới vùng lỗi của nó, gồm Email |
| Số điện thoại | Chuẩn hoá trước khi kiểm (chuẩn Unicode NFKC, bỏ ký tự ẩn, bỏ "(0)"): +84, 0084, 84 (đủ 11 hoặc 12 số) và (0) đều về dạng 0xxxxxxxxx. Nhận: 10 số đầu 03, 05, 07, 08, 09; 11 số đầu 02x (điện thoại bàn); số quốc tế bắt đầu bằng + (không phải +84) rồi 8 đến 15 số, giữ nguyên dấu +. Tối đa 24 ký tự. Lỗi: "Số điện thoại chưa đúng. Nhập 10 hoặc 11 số, ví dụ 09xx xxx xxx." Không có số thay thế khi trống |
Không bắt buộc; có nhập thì kiểm cú pháp tên@miền.đuôi (không khoảng trắng, đuôi từ 2 ký tự). Lỗi: "Email chưa đúng. Ví dụ: ten@congty.com." Báo lỗi ngay khi rời ô (sự kiện blur, ô đặt aria-invalid), không đợi bấm gửi; trang Yêu cầu báo giá đang chạy, form demo trên trang này chưa | |
| Nút gửi khi đang gửi | Dùng aria-disabled="true" và chữ "Đang gửi…", không dùng disabled: nút bị disabled làm focus rơi về body, người dùng bàn phím và trình đọc màn hình mất vị trí; cờ sending trong mã vẫn chặn gửi đôi. Xong thì gỡ aria-disabled, trả nhãn cũ. Áp ở trang Yêu cầu báo giá |
| Form tự về đúng vị trí khi xoay màn hình | Trang Yêu cầu báo giá: qua mốc 900 px (xoay ngang hoặc dọc, đổi cỡ cửa sổ) khối form tự dời về đúng chỗ (từ 900 px trở xuống đứng trước "Gửi gì", từ 901 px đứng bên phải). Không dời khi con trỏ đang ở trong form (đang gõ thì giữ giá trị và focus); rời form xong mới dời (focusout, trì hoãn 0 ms) |
| Giọng thông báo | Xưng "bạn", nêu việc cần làm: "Bạn nhập họ tên để KiGin tiện xưng hô.", "Bạn cần đồng ý để KiGin liên hệ lại về yêu cầu này.", lỗi mạng "Bạn thử lại, hoặc gọi hay nhắn Zalo cho KiGin.", gửi xong "Cảm ơn bạn. KiGin đã nhận yêu cầu, Duyên sẽ liên hệ lại sớm nhất có thể trong giờ làm việc." (không ghi số phút) |
| Bố cục form trên mobile | Trang Yêu cầu báo giá: từ 900 px trở xuống khối form đứng trước khối "Gửi gì", từ 901 px hai cột; một cột trong form; tiêu đề thẻ form 32 px từ 760 px trở xuống |
| Đồng ý liên hệ | Ô tick bắt buộc, chữ 14 px, hàng cao từ 44 px (trang báo giá 46 px); ô tick tự vẽ 24 px (appearance:none), viền 2 px #3A4D5A, bo 4 px; đã chọn nền Ink với dấu tích trắng; nền tối viền #B9CCD6, đã chọn nền Champagne với dấu tích Ink |
| Bản demo | Form chưa gửi dữ liệu đi đâu; ghi chú dưới nút nêu rõ |
Ảnh bo 12 px, thẻ sản phẩm chỉ có nhóm, tên và ảnh. Hover ảnh phóng nhẹ, bấm mở bộ ảnh.
| Tỉ lệ ảnh | 4 : 3 cho thẻ, 16 : 10 cho ảnh lớn; object-fit: cover |
|---|---|
| Hover | Lớp ảnh phóng 1,09 trong 0,9 giây, bóng đổ nhẹ; con trỏ bàn tay |
| Bộ ảnh | Bấm mở hộp xem ảnh: chuyển ảnh trượt mờ 0,5 giây, vuốt hoặc kéo, mũi tên, phím trái phải, Esc để đóng |
| Chú thích | Chú thích nằm trong alt, hộp xem ảnh lấy chữ từ alt; không chữ đè lên ảnh |
Các khối đã chốt, dùng lại nguyên vẹn khi dựng trang mới.
Ảnh, mẫu, bản vẽ, số lượng và vật liệu mong muốn.
KiGin xem vật liệu, kết cấu và khả năng sản xuất.
KiGin gửi báo giá theo mẫu, vật liệu và số lượng bạn cung cấp.
Làm mẫu thử để hai bên xem và chỉnh.
Bạn kiểm tra mẫu và duyệt trước khi sản xuất hàng loạt.
Sản xuất theo mẫu đã duyệt.
Kiểm tra sản phẩm trước khi đóng gói.
Đóng gói và bàn giao theo đơn hàng.
Không. KiGin sản xuất và gia công đồ gỗ nội thất, không nhận thi công công trình.
Có. KiGin đã xuất khẩu sang Châu Âu và Mỹ. Xem khối thông tin bên dưới.
Gửi mẫu hoặc bản vẽ. KiGin xem yêu cầu và phản hồi sớm nhất có thể.
KiGin sản xuất theo mẫu và bản vẽ có sẵn của đối tác.
KiGin cùng đối tác phát triển mẫu mã, sản xuất, đóng gói và giao hàng.
KiGin đã giao hàng sang Châu Âu và Mỹ.
KiGin làm mẫu theo yêu cầu; bạn duyệt mẫu trước khi sản xuất hàng loạt.
Sản xuất hàng loạt tại xưởng thuộc KiGin, kiểm tra chất lượng trước khi đóng gói.
KiGin đóng gói và bàn giao đơn hàng theo thỏa thuận với đối tác.
Từ 981 px lên: một khung chữ nhật bo 5 px (không còn viên thuốc) chứa nút trăng hoặc mặt trời và nút ngôn ngữ, đứng cạnh nút Yêu cầu báo giá bo 4 px. Từ 600 px trở xuống: EN | VI gộp thành một nút dropdown hiện ngôn ngữ đang xem; thu hẹp cửa sổ rồi bấm nút để thử. Khung bên dưới dùng đúng mã và CSS của header (.sg-hdr thay cho .kg-header).
Gửi mẫu, ảnh hoặc bản vẽ của bạn.
Form hoặc ảnh đặt trên thẻ trắng để nổi trên nền tối.
| Bộ lọc | Bấm nhóm thì thẻ không khớp mờ dần, thẻ còn lại trượt về vị trí mới, thẻ mới trồi lên so le |
|---|---|
| Công tắc nền và ngôn ngữ | Một khung chữ nhật bo 5 px (đổi 23/10/2026, Giám Sát tự sửa trong DevTools, thử ở bản sao, chờ duyệt; trước đó là viên thuốc 999 px) cao 44 px trên header tối (cùng kiểu ở nền sáng và nền tối): gap:0; padding:0 2px; border-radius:5px, nền rgba(246,249,251,.1), viền bóng 0 0 0 1px rgba(199,230,243,.2) (từ 981 px lên); các nút bên trong (sáng/tối, ngôn ngữ) bo 4 px, không còn tròn; danh sách ngôn ngữ kg-lang__menu bo 5 px, từng mục 4 px; biểu tượng trăng (nền sáng) hoặc mặt trời (nền tối) trước, vạch ngăn, rồi EN và VI đậm; ngôn ngữ đang xem màu nhấn #7FD0F0, ngôn ngữ kia và biểu tượng #C7E6F3; hover chỉ đổi chữ sang trắng, không nền; mỗi vùng bấm từ 44 px, vòng focus trắng 3 px; thứ tự Tab theo thứ tự nhìn (công tắc nền, EN, VI). Từ 980 px trở xuống nền trong suốt, viền rgba(246,249,251,.85), trùng viền nút menu (xem mục Bố cục, Header) |
| Ngôn ngữ dạng dropdown (≤600 px) | Từ 600 px trở xuống chỉ còn một nút (.kg-lang__btn) hiện ngôn ngữ đang xem (EN hoặc VI) kèm mũi tên xuống, chữ 16 px đậm 700, cao 44 px, rộng tối thiểu 60 px; bấm mở danh sách (.kg-lang__menu, nền Ink, viền rgba(199,230,243,.38), bo 12 px, rộng tối thiểu 132 px) gồm EN và VI, mỗi mục cao 44 px, chữ 15 px, mục đang xem #7FD0F0 đậm, rê chuột hoặc focus nền rgba(199,230,243,.12) chữ trắng. Escape đóng và trả focus về nút; bấm ra ngoài hoặc rời focus cũng đóng; nút có aria-expanded (true khi mở), nhãn "Ngôn ngữ: VI" (bản EN: "Language: EN"), không dùng aria-haspopup vì danh sách là hai liên kết thường, không phải role=menu; mũi tên xoay 180° khi mở. Từ 601 px lên giữ EN | VI như cũ (script LANG_DD_JS dựng nút, CSS chỉ hiện nút ở ≤600 px; kéo rộng cửa sổ thì danh sách tự đóng). Header trang landing (Luxury, Indochine) không có nút menu (chỉ logo, nút Báo giá, công tắc nền sáng/tối) nhưng vẫn có cụm EN | VI nên cũng có dropdown ở ≤600 px (đã kiểm trong mã sinh ra 20/10: noi-that-cao-cap.html có .kg-lang); header của trang style guide này không có cụm EN | VI, nên khối demo ở trên là nơi xem |
| Khối thông tin nền tối | Section kg-sec--wood với lưới kg-workshop__grid: cột trái tiêu đề hai dòng, câu dẫn, danh sách dấu tích, dải thông tin một cột, nút chính; cột phải là thẻ trắng (form hoặc ảnh); dùng cho khối Làm tại công ty và đầu trang Yêu cầu báo giá. Trang báo giá: từ 900 px trở xuống khối form đứng trước khối "Gửi gì" (xem mục Bố cục). Cột trái trang báo giá thêm kg-qleft: dải thông tin 2 cột (Hotline, Email cạnh nhau; Giờ làm việc, Pháp nhân, Địa chỉ chiếm cả hàng), dưới 900 px bỏ đệm, dưới 560 px một cột; liên kết trong dải này không hover |
| Dải thông tin | Nhãn dt 14 px (mobile 16 px) đậm 500 phía trên, giá trị dd đậm phía dưới, đường kẻ trên cùng; không có hiệu ứng hover ở mọi trang (người dùng bỏ 19/10/2026) |
| Dải số liệu | Cùng thành phần kg-facts, xếp 3 hàng liền nhau (hàng sau margin-top:0; border-top:0), mỗi hàng 4 ô: hàng 1 thông tin chung, hàng 2 diện tích xưởng, số công nhân, sản lượng, chứng chỉ, hàng 3 container đã xuất, kỹ sư, máy CNC, khách hàng. Ô số chưa được KiGin xác nhận mang thuộc tính data-pending="số tạm, chờ KiGin xác nhận": bản demo hiện số như thật (chưa có CSS riêng, đang ghi trong lỗi chờ xử lý); trước production phải thay bằng số KiGin xác nhận hoặc bỏ ô, check.py nên báo mọi ô còn data-pending |
| Chân trang | Cột thương hiệu: logo, mô tả (không lặp địa chỉ, địa chỉ nằm ở cột Liên hệ), 4 icon mạng xã hội tròn 42 px (icon 28 px; người dùng chốt 42 px, thấp hơn vùng bấm 44 px của dự án nhưng đạt tối thiểu 24 px của WCAG 2.2, khoảng cách giữa các icon 12 px) (Facebook, TikTok, YouTube, LinkedIn): Facebook là fanpage thật theo xlsx P2-17; chưa có liên kết của KiGin thì dẫn về trang chủ của mạng đó, chờ KiGin gửi liên kết riêng; hover chỉ đổi màu và viền sang trắng. Cột Liên hệ: icon 20 px (địa chỉ, điện thoại, email, giờ làm việc) + chữ, nhãn ẩn cho trình đọc màn hình. Liên kết hover: đổi màu và vạch trượt, không gạch chân chữ |
| Quy trình | Tám bước dạng rắn bò: hàng 1 đi phải, mũi tên xuống, hàng 2 đi trái; dưới 981 px còn 2 cột, dưới 560 px một cột; mũi tên căn tâm với đường nối, đầu mũi tên chạm cuối đường; mô tả mỗi bước 16 px (độ rộng tối đa 26 ký tự); hover từng bước: không đổi nền, viền dày 3 px đổi sang màu nhấn, icon chạy animation nảy xoay 0,6 giây; tắt khi bật giảm chuyển động |
| Hỏi đáp | Trang yêu cầu báo giá có 5 câu (khớp từng chữ với JSON-LD FAQPage); không vạch trên cùng; câu hỏi chữ đậm vừa 18 px (mobile) đến 22 px (desktop), câu trả lời 17 px; bấm thì nội dung xổ và thu mượt, dấu cộng xoay; chỉ mở một mục: mở mục mới thì mục đang mở tự đóng (sự kiện toggle của details; hiện chạy ở trang Yêu cầu báo giá, bàn phím Enter và Space cũng đúng như vậy). Liên kết trong câu trả lời: không gạch chân, chữ thường 400, màu nhấn #136F9A (nền tối #7FD0F0), hover đổi màu (#0A2230; nền tối #FFFFFF). Lệch có chủ ý với mục Liên kết (gạch chân mảnh) theo yêu cầu người dùng; chỉ dựa màu nên tương phản giữa liên kết và chữ thường khoảng 1,6 : 1 (WCAG 1.4.1 cần từ 3 : 1), ghi chờ người dùng quyết |
| CTA cuối trang (chốt 20/10/2026) | Hai nút thẳng hàng, thứ tự: kg-btn--solid "Gửi yêu cầu báo giá" (trong kg-btns--duo đổi sang nền Teak #136F9A, chữ trắng, giống Nút xanh đặc ở nền tối) rồi kg-btn--line "Gọi". Không nút Zalo trong khối này (Zalo đã có ở nút nổi và thanh dưới điện thoại). Dựng bằng cta_band(..., duo=True), mặc định cho trang mới. Nút trong thân bài trên nền sáng vẫn là Champagne chữ Ink |
| Liên kết trong thân bài (nền sáng) | Màu Teak #136F9A, gạch chân mảnh 1 px, hover Ink; nền tối dùng #7FD0F0; liên kết văn bản kiểu kg-link giữ gạch chân Champagne. Liên kết trong câu trả lời Hỏi đáp không gạch chân (ngoại lệ đã chốt) |
| Màu chữ thân bài | Đoạn thường trên nền sáng dùng Stone #3A4D5A; đoạn dẫn kg-lead và đoạn có class riêng giữ kiểu của class |
| H3 trong thẻ | Be Vietnam Pro 600 (đổi từ Noto Serif Display 400 ngày 23/10/2026); cỡ 18 đến 22 px ở thẻ trang chủ (.kg-card[data-tags] h3) |
| Mô hình, quy trình trong thân bài | Khối ba thẻ kg-traits (tiêu đề H3 và đoạn ngắn) dùng cho mô hình sản xuất, thị trường; kg-steps cho quy trình ngắn có số đếm. Quy trình tám bước dạng rắn bò chỉ dùng ở trang Yêu cầu báo giá |
| Hỏi đáp mọi trang | Luôn đúng 5 câu, từ khoá "Giữ" tự nhiên, trả lời thẳng ý, FAQPage khớp từng chữ (chốt 20/10/2026) |
| Section dùng chung lấy từ trang Yêu cầu báo giá (chốt 20/10/2026) | Quy trình tám bước: tiêu đề "Các bước từ báo giá đến giao hàng", đoạn dẫn "Tám bước dưới đây cho bạn biết việc gì diễn ra và khi nào cần duyệt mẫu.", khối kg-head kg-head--split rồi kg-steps8, giống nhau ở báo giá, sản xuất theo yêu cầu, trang chủ, 2 landing; nền xen kẽ sáng tối theo trang. Hỏi đáp: kg-split kg-split--5-7 kg-split--top, cột trái tiêu đề "Hỏi đáp về ..." kèm đoạn dẫn "Chưa thấy câu trả lời bạn cần? Gọi, nhắn Zalo hoặc gửi email cho KiGin trong giờ làm việc.", cột phải 5 câu |
| Đầu section | Tiêu đề 32 đến 44 px, phụ đề 16 đến 18 px, căn giữa dọc |
Chuyển động để dẫn mắt, không để trang trí. Tôn trọng chế độ giảm chuyển động.
| Đường cong chuẩn | cubic-bezier(.22, .61, .36, 1) |
|---|---|
| Hover nút, liên kết, mục | 0,45 giây, nền trượt trái sang phải |
| Hiện khi cuộn | Chữ trượt lên 28 px kèm mờ dần, 0,8 đến 0,9 giây, so le 0,09 giây; ảnh không có hiệu ứng cuộn. Từ 21/10/2026 gồm cả các khối trang Về KiGin (kg-ab-qa-head, kg-ab-cards, kg-ab-wide, kg-ab-stat3, kg-ab-logos, kg-ab-links); sau 1,7 giây bỏ lớp hiệu ứng để hover của thẻ không bị đè |
| Ảnh tự chạy | Đổi mỗi 7 giây, hai khung cùng lúc; nút bật tắt và vòng tiến độ; dừng khi rê chuột hoặc focus |
| Hộp xem ảnh | Trượt mờ 0,5 giây; thả kéo dưới 50 px thì nảy về |
| Hover hero | Hai nửa Luxury và Indochine đổi tỉ lệ 0,9 giây, lớp phủ trắng đổi độ trong |
| Giảm chuyển động | Bật prefers-reduced-motion thì mọi chuyển động tắt, nội dung hiện ngay |
Thanh đầu trang dùng chung mọi trang (kg-header). Phần bên dưới là bản thật lấy từ trang chủ; rê chuột vào mục có mũi tên để xem menu con.
| Cấu trúc | Khung kg-wrap kg-header__in cao 76 px (--kg-header-h): nút burger (chỉ mobile), logo kg-logo, menu chính kg-nav, nút kêu gọi, công cụ kg-tools |
|---|---|
| Menu chính | 5 mục: Sản phẩm (menu lớn kg-sub--mega), Sản xuất theo yêu cầu, Năng lực, Về KiGin, Liên hệ. Mục có menu con có nút mở kg-subtoggle và aria-expanded; mục trang đang xem có aria-current="page" |
| Nút kêu gọi | kg-btn kg-btn--solid kg-btn--sm "Yêu cầu báo giá" (nền xanh logo, chữ trắng), data-cta-loc="header"; trên mobile nằm cuối ngăn kéo menu |
| Công cụ | kg-theme: công tắc sáng / tối (aria-pressed, lưu lựa chọn); kg-lang: chuyển VI | EN, thêm ở bước build bản EN, không nằm trong hàm dựng header |
| Hai trạng thái | Trong suốt trên ảnh hero (không có is-solid); đặc nền Ink khi đã cuộn, và luôn đặc ở trang con (is-solid). Chuyển nền 0,35 giây |
| Mobile | Dưới 981 px: ẩn menu ngang, hiện burger 44 px; menu mở thành ngăn kéo bên trái, mục con mở bằng nút mũi tên; thanh Gọi, Zalo, Báo giá dính đáy màn hình (kg-mbar) thay cho nút nổi (nút nổi chỉ hiện từ 601 px) |
| Truy cập | Liên kết bỏ qua tới nội dung kg-skip đứng trước header; focus hiện vòng rõ; khi ngăn kéo mở thì phần còn lại được đặt inert |
| Dựng trên Flatsome | Dùng Header Builder có sẵn của Flatsome (logo, menu, nút, công tắc); phần giao diện ở child theme, không viết header riêng |
Các trạng thái của header và chân trang không thấy được ở bản tĩnh: menu lớn đang mở, ngăn kéo menu mobile, thanh Gọi, Zalo, Báo giá ở đáy và biểu tượng mạng xã hội. Ba khung đầu là chính trang chủ đang chạy, chỉ bật trạng thái mở.
| Menu lớn | kg-sub kg-sub--mega trong kg-has-sub: mở khi rê chuột, khi focus nằm trong mục, hoặc khi nút kg-subtoggle đặt aria-expanded="true" (thêm is-open cho mục); Esc đóng và trả focus về nút; mũi tên lên xuống đi trong danh sách; mục trang đang xem có aria-current="page" |
|---|---|
| Ngăn kéo menu mobile | Dưới 981 px: bấm kg-burger (44 px) thì kg-header thêm is-open, kg-nav hiện thành ngăn kéo bên trái nền Ink, aria-expanded của nút đổi sang true, cuộn trang bị khoá (overflow:hidden trên html); phần còn lại (main, chân trang, nút nổi, kg-mbar) được đặt inert; focus nhảy tới mục đầu tiên; Esc đóng và trả focus về nút. Cuối ngăn kéo là nút "Yêu cầu báo giá" (kg-nav__mobile-cta) |
| Mục con trong ngăn kéo | Mục có menu con có nút mũi tên kg-subtoggle riêng (vùng bấm 56 x 56 px, đo 23/10/2026 ở khổ 390 px) cạnh liên kết; bấm mũi tên mở danh sách con, bấm liên kết thì đi thẳng tới trang |
| Thanh dưới kg-mbar | Dính đáy màn hình từ 980 px trở xuống (ẩn ở desktop): lưới 3 ô 1fr 1fr 1,4fr (Gọi, Zalo, Báo giá), cao 58 px cộng viền trên 1 px (đo 59 px ở khổ 390 px), nền Ink, chữ Ivory, ô Báo giá (kg-mbar__quote) nền Champagne chữ Ink; vòng focus trắng 2 px (ô Báo giá: Ink). Mẫu tĩnh ở trên đặt position:static chỉ để xem; trên trang thật thanh này cố định |
| Mạng xã hội | kg-social: 4 vòng tròn 42 px, viền 1,5 px, biểu tượng đơn sắc currentColor, hover chuyển biểu tượng và viền sang trắng (nền vẫn trong); chỉ Facebook có liên kết thật; TikTok, YouTube, LinkedIn dẫn về trang chủ của mạng (tiktok.com, youtube.com, linkedin.com; Giám Sát chọn 24/10/2026, chưa phải tài khoản của KiGin, thay bằng liên kết riêng khi KiGin gửi); không có Instagram (KiGin chưa có tài khoản). Mỗi liên kết có aria-label là tên mạng; Facebook mở tab mới kèm rel="noopener" |
| Cách mẫu được sinh | Ba khung ở trên là iframe tới trang-chu.html nên luôn khớp trang thật, không lệ thuộc thứ tự build; script đặt is-open vào khung sau khi tải. Nếu mở style guide bằng file:// trình duyệt chặn đọc khung và khung hiện ở trạng thái đóng |
Các khối của trang chủ, từ trên xuống. Bản thật lấy từ trang chủ; hero hai nửa là khối riêng của trang này.
KiGin gia công và sản xuất bàn, ghế, tủ, giường từ gỗ tự nhiên hoặc gỗ công nghiệp theo mẫu, bản vẽ và đơn đặt hàng. Mô hình OEM/ODM, đã xuất khẩu sang Mỹ, Canada, Hàn Quốc, Úc, EU và Nhật Bản.
KiGin sản xuất đồ gỗ nội thất: bàn, ghế, tủ, giường bằng gỗ tự nhiên hoặc gỗ công nghiệp, cho đơn vị dự án và khách xuất khẩu.
Mỗi dòng có trang riêng giới thiệu cách KiGin sản xuất theo mẫu và bản vẽ của dòng đó.
Nội thất gỗ đường nét gọn, ít chi tiết nhưng chi tiết nào cũng được hoàn thiện kỹ. KiGin sản xuất theo mẫu và bản vẽ của bạn, cho đơn vị dự án và khách xuất khẩu.
Nội thất gỗ tông ấm, họa tiết hình học, mang tinh thần Đông Dương trong từng chi tiết. KiGin đóng theo mẫu hoặc bản vẽ của bạn, cho đơn vị dự án và khách xuất khẩu.
OEM: sản xuất theo mẫu hoặc bản vẽ của bạn. ODM: KiGin tham gia từ ý tưởng đến thành phẩm.
Bạn gửi mẫu hoặc ảnh sản phẩm. KiGin làm lại đúng kích thước và vật liệu hai bên thỏa thuận.
Bạn có bản vẽ kỹ thuật. KiGin sản xuất đúng bản vẽ (OEM), làm mẫu thử rồi mới sản xuất hàng loạt.
KiGin cùng bạn làm mẫu sản phẩm, rồi sản xuất và đóng gói xuất khẩu.
Bàn, ghế và đôn, tủ, giường KiGin nhận sản xuất theo mẫu và bản vẽ của bạn. Tên mẫu, kích thước, vật liệu từng sản phẩm: chờ KiGin xác nhận.
Công ty KiGin sản xuất bàn, ghế, tủ, giường từ gỗ tự nhiên và gỗ công nghiệp theo mẫu, bản vẽ hoặc đơn đặt hàng, cho dự án và xuất khẩu.
Tám bước dưới đây cho bạn biết việc gì diễn ra và khi nào cần duyệt mẫu.
Ảnh, mẫu, bản vẽ, số lượng và vật liệu mong muốn.
KiGin xem vật liệu, kết cấu và khả năng sản xuất.
KiGin gửi báo giá theo mẫu, vật liệu và số lượng bạn cung cấp.
Làm mẫu thử để hai bên xem và chỉnh.
Bạn kiểm tra mẫu và duyệt trước khi sản xuất hàng loạt.
Sản xuất theo mẫu đã duyệt.
Kiểm tra sản phẩm trước khi đóng gói.
Đóng gói và bàn giao theo đơn hàng.
Chưa thấy câu trả lời bạn cần? Gọi, nhắn Zalo hoặc gửi email cho KiGin trong giờ làm việc.
Bạn xem đồ gỗ nội thất KiGin sản xuất theo bốn nhóm: bàn, ghế và đôn, tủ, giường, rồi mở từng nhóm để xem mẫu minh họa. Khi chọn được mẫu hoặc có mẫu riêng, bạn gửi yêu cầu báo giá hoặc gọi, nhắn Zalo. Mọi nhóm nằm ở trang Sản phẩm.
KiGin đang làm hai dòng là Luxury và Indochine. Luxury có đường nét gọn, làm bằng gỗ. Indochine có tông gỗ ấm và họa tiết hình học. Mỗi dòng có trang riêng giới thiệu sản phẩm và cách đặt gia công: xem dòng Luxury hoặc dòng Indochine.
Gồm tám bước: gửi mẫu hoặc bản vẽ, đánh giá kỹ thuật, báo giá, làm mẫu, duyệt mẫu, sản xuất hàng loạt, kiểm tra chất lượng, đóng gói và giao hàng. Bạn duyệt mẫu trước khi sản xuất hàng loạt. Giải thích từng bước nằm ở trang Sản xuất theo yêu cầu.
KiGin làm cả hai: nội thất gỗ tự nhiên và nội thất gỗ công nghiệp. Loại gỗ, màu và bề mặt hoàn thiện cụ thể được trao đổi theo từng đơn hàng, dựa trên mẫu hoặc bản vẽ bạn gửi. Bạn có thể bắt đầu bằng việc gửi yêu cầu tại trang Yêu cầu báo giá.
KiGin là công ty sản xuất đồ gỗ nội thất, chuyên gia công và xuất khẩu bàn, ghế, tủ, giường. Xưởng thuộc KiGin. Giới thiệu đầy đủ về công ty, khách hàng và phạm vi hoạt động có tại trang Về KiGin.
Cho biết nhóm sản phẩm, số lượng và vật liệu mong muốn. Duyên nhận yêu cầu và phản hồi sớm nhất có thể.
Mục có dấu * là bắt buộc. Mất khoảng 1 phút.
| Thứ tự khối | Hero hai nửa (kg-seam), giới thiệu (ảnh nhà máy bấm mở bộ 9 ảnh, chữ, hộp 4 ô thông tin), hai dòng Luxury và Indochine, ba cách đặt hàng, sản phẩm nổi bật (8 thẻ, hàng lọc), làm tại công ty KiGin, quy trình, hỏi đáp, kêu gọi cuối trang kèm form nhanh (cập nhật 24/10/2026) |
|---|---|
| Hero hai nửa | kg-seam: hai nửa Luxury và Indochine, mỗi nửa một ảnh nền phủ Ink, tiêu đề chung ở giữa, hai nút; rê chuột vào một nửa thì nửa đó nở ra (0,9 giây), dưới 981 px xếp dọc |
| Nền xen kẽ (cập nhật 24/10/2026) | Paper (giới thiệu), Rattan #E3F4FA (hai dòng), Paper (ba cách đặt hàng), Rattan (sản phẩm nổi bật), Wood #0F3248 (làm tại công ty, t-indochine), Ivory (quy trình), Rattan (hỏi đáp), Teak #136F9A (kêu gọi, chữ trắng, nút Gọi nền Ink), chân trang Ink; không để hai khối liền nhau cùng nền. Chỉ chế độ sáng, chế độ tối giữ nền cũ |
Hộp 4 ô thông tin (kgx-facts, thử 24/10/2026, chờ duyệt) | Dưới khối giới thiệu: nền Paper, bo 12 px, viền Line, đệm 28 px, cách ảnh 30 px; 4 ô (Công ty, Nhóm sản phẩm, Vật liệu, Mã số thuế), mỗi ô có biểu tượng tròn 48 px nền Rattan #E3F4FA chữ Teak, nhãn 15 px, giá trị đậm; 4 cột từ 901 px, 2 cột dưới 901 px, 1 cột dưới 521 px |
Danh sách tick (kgx-points, chờ duyệt) | Dấu tick tròn 24 px nền Teak chữ trắng (nền tối: Champagne chữ Ink), mỗi dòng một ý ngắn, nhãn đậm 600 (OEM, ODM, Xuất khẩu, Một đầu mối) |
Bảng thông số (kx-spec, chờ duyệt) | Ở khối Luxury và Indochine: nhãn 15 px đậm xám, giá trị đậm Ink, mỗi hàng cách nhau bằng đường kẻ Line, hai cột 120 px và phần còn lại (một cột dưới 521 px); câu mô tả trên bảng 16 px |
| Hàng lọc sản phẩm | Chip bo 999 px cao 44 px, nhãn rút gọn (Bộ sưu tập, Bàn ăn, bàn làm việc, Ghế và đôn phòng ăn, Tủ quần áo, tủ giày, Giường và phòng ngủ), luôn một hàng, dưới 1024 px cuộn ngang; hover và focus: nền Mist #C7E6F3, chữ Ink; đang chọn: nền Teak chữ trắng |
| Thẻ sản phẩm trang chủ | Bốn cột (hai cột dưới 901 px), khoảng cách 24 px, ảnh bo 12 px tỉ lệ 4 : 3, nhóm 12 px (13 px dưới 701 px), tên 15 px 600, hover bóng nhẹ 0 6px 16px |
| Form nhanh | Khối cuối trang có form rút gọn 5 ô (họ tên, SĐT hoặc Zalo, nhóm sản phẩm, nội dung, đồng ý); công ty, email và dòng sản phẩm để ở trang Yêu cầu báo giá |
| Hiệu ứng cuộn | Chữ và thẻ trượt lên 28 px kèm mờ dần khi vào màn hình; ảnh không có hiệu ứng cuộn |
| Ảnh | Ảnh sản phẩm và xưởng trong demo là ảnh tạm của bên thứ ba, đã ghi ở danh sách chặn go-live |
Các thành phần thêm 21/10/2026 khi dựng lại trang Về KiGin. Số, logo và ảnh trong demo là dữ liệu tạm đã ghi ở danh sách chặn trước production.
Lợi thế cạnh tranh
Xưởng thuộc KiGin. Bạn trao đổi trực tiếp với nơi sản xuất về mẫu, vật liệu, số lượng và tiến độ.
Sản xuất theo mẫu và bản vẽ có sẵn của đối tác, hoặc cùng đối tác phát triển sản phẩm từ ý tưởng đến thành phẩm.
Khách hàng gồm đơn vị dự án và đơn vị xuất khẩu. Sản phẩm là bàn, ghế và đôn, tủ, giường từ gỗ tự nhiên và gỗ công nghiệp.
Số 18A, Ngõ 95 Đường Thân Khuê, Tổ 6 Khu 34, Phường Đa Mai, tỉnh Bắc Ninh
Thành tựu của chúng tôi
Khách hàng của KiGin
Chất lượng
Tìm hiểu thêm về chúng tôi
Gửi yêu cầu để KiGin gửi thông tin công ty, nhóm sản phẩm và năng lực sản xuất qua Zalo hoặc email trong giờ làm việc.
KiGin là công ty sản xuất đồ gỗ nội thất, nhận gia công bàn, ghế và đôn, tủ, giường từ gỗ tự nhiên và gỗ công nghiệp.
Khách hàng của KiGin là đơn vị dự án và đơn vị xuất khẩu.
Chưa thấy câu trả lời bạn cần? Gọi, nhắn Zalo hoặc gửi email cho KiGin trong giờ làm việc.
Cả hai. OEM là sản xuất theo mẫu và bản vẽ có sẵn của đối tác; ODM là cùng đối tác phát triển sản phẩm.
Không. KiGin sản xuất và gia công đồ gỗ nội thất, không nhận thi công công trình.
Sẵn sàng bắt đầu?
KiGin xem yêu cầu và phản hồi sớm nhất có thể.
| Nhãn viên thuốc | kg-ab-pill: biểu tượng + chữ hoa 13 px đậm, viền mảnh, nền xanh nhạt, bo viên; đứng trên tiêu đề khối |
|---|---|
| Chữ gradient | kg-ab-grad trong tiêu đề h2: gradient ngang #3792BA sang #1a729b (cùng gradient chữ số lớn, tên dòng; đầu gradient đổi từ #4ba8cf ngày 23/10/2026 theo Giám Sát cho đạt chữ lớn từ 3 : 1: 3,5 : 1 trên Paper, 3,3 : 1 trên Ivory, 3,1 : 1 trên Cream; cuối #1a729b 5,1 đến 5,4 : 1); dùng cho cụm nhấn, không dùng cả câu |
| Thẻ có biểu tượng | kg-ab-cards: 3 thẻ trắng bo 12 px, biểu tượng nền xanh nhạt, tiêu đề Be Vietnam Pro 16 px đậm, hover nhấc 5 px |
| Số lớn | kg-ab-num trong kg-facts--num: Be Vietnam Pro 600, 52 px, gradient #3792BA sang #1a729b trải hết bề rộng cột; đầu gradient 3,5 : 1 trên nền trắng, đạt mốc 3 : 1 của chữ lớn (đổi từ #4ba8cf ngày 23/10/2026) |
| Hộp logo khách | kg-ab-clogos: 4 logo trong hộp trắng bo 16 px, cao tối đa 68 px, hover phóng 1,08; 2 cột ở dưới 980 px |
| Thẻ số có biểu tượng tròn | kg-ab-stat3 + kg-ab-circ: 3 thẻ cùng chiều cao, vòng 60 px gradient ngang, số 52 px; thẻ chữ (thị trường) 20 px hai dòng; hover nhấc 6 px, viền xanh, bóng đậm hơn; một cột ở dưới 700 px |
| Hàng logo chứng nhận | kg-ab-logos: ô trắng 152 px, ảnh object-fit: contain, hover nhấc 5 px viền xanh |
| Ô liên kết | kg-ab-links: 4 ô liên kết có chấm màu và mũi tên, 2 cột trên tablet, 1 cột trên mobile |
| Tiêu đề nhà máy | kg-ab-plant-head: biểu tượng nhà máy trước tiêu đề, dòng địa chỉ có biểu tượng ghim nhỏ (kg-ab-ico--sm), đứng trên hàng số lớn |
| Khối giới thiệu | kg-ab-intro: nền xanh nhạt, tiêu đề trái, đoạn dẫn (kg-lead), nội dung và một nút kg-btn--solid; ảnh có chú thích bấm mở bộ ảnh nằm bên phải |
| Khối hỏi đáp | kg-ab-faq + kg-split--5-7 + kg-split--top: tiêu đề và đoạn dẫn bên trái (5/12), danh sách gập mở bên phải (7/12), đúng 5 câu, FAQPage khớp chữ hiển thị |
| Khối kêu gọi cuối trang | kg-ab-ready: nhãn viên thuốc, tiêu đề có chữ gradient, câu dẫn ngắn, hai nút (báo giá và gọi), không có nút Zalo |
| Biểu tượng mạng xã hội | kg-social trong chân trang: Facebook (link thật) và TikTok, YouTube, LinkedIn (liên kết về trang chủ của mạng, chưa phải tài khoản của KiGin; Giám Sát chọn 24/10/2026); vòng 42 px, viền 1,5 px, hover chuyển trắng |
| Nút nổi và lên đầu trang (mẫu) | Ở trang thật hai nút này cố định theo mép màn hình; ở đây đặt tĩnh để xem mẫu. Cụm kg-float ở trái, kg-totop ở phải; mẫu kg-totop--demo không chạy cuộn. |
| Nút kêu gọi lớn | Trong kg-ab-actions: cao 58 px, chữ 17 px, đệm ngang 44 px, bo 4 px; mobile 54 px, rộng tối đa 340 px; dùng kg-btn--solid mặc định, không ghi đè màu theo section |
| Nền và nhịp | Các khối xen kẽ nền trắng (kg-sec--paper) và xanh nhạt (kg-sec--ivory), khối cuối trang nền trắng, hỏi đáp nền xanh nhạt |
| Nút nổi | Cụm Gọi, Zalo (kg-float) nằm bên trái; nút lên đầu trang (kg-totop, tròn 54 px, 48 px trên mobile) nằm bên phải, chỉ hiện khi cuộn quá 400 px, cuộn mượt |
Các thành phần thêm 21/10/2026 khi dựng lại trang Năng lực. Ảnh nhà máy trong demo là ảnh tạm đã ghi ở danh sách chặn trước production; ảnh công đoạn cũng là ảnh tạm.
Khu máy, dây chuyền và kho trong nhà máy.
Công đoạn
Các công đoạn chính từ chi tiết gỗ đến sản phẩm hoàn chỉnh. Tên và thứ tự công đoạn do KiGin xác nhận.
Cắt và tạo hình chi tiết gỗ theo mẫu hoặc bản vẽ.
Ghép các chi tiết thành tấm và khối trước khi lắp ráp.
Lắp ráp, hoàn thiện sản phẩm trước khi kiểm tra.
Mô hình hợp tác
KiGin nhận cả hai mô hình, tùy bạn đã có sẵn mẫu hay mới có ý tưởng.
Bạn đã có mẫu hoặc bản vẽ, KiGin gia công đúng kích thước, vật liệu và số lượng của đơn hàng.
Bạn mới có ý tưởng, KiGin cùng bạn làm mẫu, rồi sản xuất và đóng gói xuất khẩu.
Sau khi kiểm tra, KiGin đóng gói và bàn giao theo đơn đặt hàng, gồm đơn xuất khẩu.
Đã giao hàng sang
Quy cách đóng gói, điều kiện giao hàng, thị trường chính: chờ KiGin xác nhận.
| Thẻ ảnh công đoạn | kg-nl-shots: 3 thẻ trắng bo 16 px, ảnh 4:3 phía trên, nhãn chữ hoa 13 px, tiêu đề Be Vietnam Pro 18 px đậm, hover nhấc 4 px; một cột ở dưới 980 px |
|---|---|
| Thẻ OEM / ODM | kg-nl-duo: 2 thẻ trắng bo 16 px, chữ "OEM" hoặc "ODM" 56 px gradient, danh sách kg-nl-list ngăn bằng vạch mảnh; một cột ở dưới 980 px |
| Danh sách dấu tích | kg-nl-list: dấu tích tròn 22 px vẽ bằng mask, màu xanh logo (nền tối: champagne), mỗi dòng cách nhau vạch mảnh |
| Viên thị trường | kg-nl-chips: viên trắng viền xanh nhạt, cao 44 px, chữ đậm; nhãn kg-nl-chips-l chữ hoa 14 px đặt trên |
| Khối đóng gói | kg-nl-pack: kg-split chữ trái, ảnh phải 4:3 bo 16 px bóng nhẹ, canh giữa dọc; ô liên kết kg-ab-links đứng dưới, cách 64 px |
| Dòng chú thích số | kg-ab-sub trong khối số nhà máy: dòng dưới nhãn, Be Vietnam Pro 16 px màu Stone |
| Hiện khi cuộn | Đã thêm kg-nl-shots, kg-nl-duo, kg-nl-chips vào danh sách của cuon-fx.js |
Các thành phần thêm 21/10/2026 khi dựng lại trang Sản phẩm. Ảnh sản phẩm và ảnh nhà máy trong demo là ảnh tạm đã ghi ở danh sách chặn trước production. Bộ lọc trong demo bấm được.
Danh mục sản phẩm
Bàn ghế gỗ, tủ quần áo, giường từ gỗ tự nhiên và gỗ công nghiệp, gia công theo mẫu hoặc bản vẽ của bạn. Bấm vào sản phẩm để xem thông tin và gửi yêu cầu báo giá cho mẫu đó.
Không tìm thấy sản phẩm phù hợp. Gửi mẫu hoặc bản vẽ qua yêu cầu báo giá, KiGin sản xuất theo mẫu của bạn.
Đang hiển thị 8 trên 12 sản phẩm
Ảnh phối cảnh 3D là minh họa, ảnh công ty là ảnh KiGin chụp; quyền đăng ảnh chờ KiGin xác nhận. Tên mẫu, kích thước, vật liệu, hoàn thiện từng sản phẩm và ảnh giường, đôn: chờ KiGin gửi.
Hai dòng sản phẩm
Hai dòng KiGin đang làm, bằng gỗ tự nhiên hoặc gỗ công nghiệp, sản xuất theo mẫu, bản vẽ hoặc đơn đặt hàng.
Dòng Luxury của KiGin dùng gỗ, đường nét gọn và hoàn thiện kỹ.
Dòng Indochine của KiGin dùng tông gỗ ấm và họa tiết hình học.
Đang hiển thị 8 trên 12 sản phẩm
Đang hiển thị 8 trên 12 sản phẩm
Đã hiển thị hết 12 sản phẩm
Duyên nhận yêu cầu báo giá và phản hồi sớm nhất có thể.
Số lượng đặt tối thiểu: chờ KiGin xác nhận.
| Thẻ sản phẩm | kg-sp-grid + kg-sp-card: lưới 4 cột (3 cột dưới 1100 px, 2 cột dưới 820 px), thẻ trắng bo 16 px bóng nhẹ, ảnh 4:3 phía trên, cả thẻ là liên kết; data-tags giữ cho bộ lọc loc-sp.js |
|---|---|
| Nhãn nhóm và tên | kg-sp-tag: chữ hoa 12 px đậm, xanh, không nền viên, đặt trên tên; tên h3 Be Vietnam Pro 16 px đậm (Giám Sát chọn cỡ chữ 21/10/2026) |
| Hover thẻ sản phẩm | Nhấc 4 px, bóng đậm hơn, viền chuyển sắc dọc từ #e1e6e9 (trên) đến --kg-accent (dưới): viền trong suốt, nền hai lớp padding-box (trắng) và border-box (gradient); nền tối dùng champagne-lt tới --kg-accent |
| Xem thêm sản phẩm và tự tải (22/10/2026) | kg-sp-grid hiện 8 mẫu đầu, các mẫu còn lại có data-extra hidden. Dưới lưới là hộp kg-sp-more (cột, canh giữa, cách lưới 40 px): dòng đếm kg-sp-more__n (Stone) và nút kg-btn--solid kg-sp-more__btn cao 52 px (nút đi một mình dùng solid, đổi 23/10/2026). Hộp vào gần màn hình (IntersectionObserver, lề 120 px, ngưỡng 0,2) thì nút hiện vòng xoay kg-sp-more__ring + "Đang tải sản phẩm…" khoảng 0,7 giây, rồi các mẫu còn lại trượt lên so le; xong, nút ẩn, hộp thêm is-done và dòng đếm đổi thành "Đã hiển thị hết N sản phẩm" kèm dấu tích. Bấm nút vẫn tải được (bàn phím; focus chuyển tới mẫu mới đầu tiên). Đang lọc theo nhóm thì ẩn hộp. Giảm chuyển động: hiện ngay, vòng xoay đứng yên. Trang nhóm ít hơn 8 mẫu chỉ có dòng "Đã hiển thị hết N sản phẩm". Logic nằm ở loc-sp.js; trên WordPress: infinite scroll của Flatsome/WooCommerce hoặc JS nhỏ ở child theme |
| Hai thẻ dòng | kg-sp-lines + kg-sp-k: 2 thẻ trắng bo 16 px, tên dòng 56 px chữ gradient #3792BA sang #1a729b, đoạn mô tả, danh sách dấu tích, liên kết kg-ab-more-link; một cột dưới 980 px |
| Danh sách dấu tích | kg-sp-list (cùng kiểu kg-nl-list): dấu tích tròn 22 px vẽ bằng mask, mỗi dòng cách nhau vạch mảnh |
| Hiện khi cuộn | Đã thêm kg-sp-grid, kg-sp-lines, kg-sp-list, kg-nl-duo, kg-nl-list vào danh sách của cuon-fx.js; thẻ sản phẩm vẫn lọc mượt (FLIP) vì thẻ hiện qua fx-in |
| Trang Sản xuất theo yêu cầu (dựng lại 21/10/2026) | Không thêm thành phần mới: dùng lại kg-ab-pill, kg-ab-grad, kg-ab-cards, kg-ab-links, kg-ab-ready (Về KiGin), kg-nl-duo, kg-nl-list, kg-nl-chips, khối chữ trái ảnh phải kg-nl-pack (Năng lực) và quy trình 8 bước kg-steps8 |
Các thành phần thêm 21/10/2026 khi dựng lại trang Yêu cầu báo giá. Số trong ô số là số tạm đã ghi ở danh sách chặn trước production. Hộp form dùng lại kg-formbox và form_html của trang, chỉ đổi dáng.
Vì sao KiGin
KiGin báo giá gia công đồ gỗ nội thất theo mẫu, bản vẽ của bạn (OEM) hoặc từ ý tưởng (ODM), và sản xuất tại xưởng thuộc KiGin.
Xưởng thuộc KiGin. Bạn trao đổi trực tiếp với nơi sản xuất về mẫu, vật liệu, số lượng và tiến độ.
Sản xuất theo mẫu và bản vẽ có sẵn, hoặc cùng bạn phát triển sản phẩm từ ý tưởng.
Bàn, ghế và đôn, tủ, giường, bằng gỗ tự nhiên hoặc gỗ công nghiệp.
Mỹ, Canada, Hàn Quốc, Úc, EU và Nhật Bản. Khách hàng gồm đơn vị dự án và đơn vị xuất khẩu.
| Khối form | Nền xanh nhạt (kg-sec--ivory + kg-qb-top); cột trái kg-qleft có nhãn viên thuốc, tiêu đề gradient, danh sách dấu tích, danh sách liên hệ; cột phải hộp form kg-formbox trắng bo 16 px, viền mảnh, bóng 0 20px 50px. Móc giữ nguyên cho script đổi chỗ trên mobile: kg-workshop__grid, kg-qleft, #bao-gia |
|---|---|
| Danh sách liên hệ | kg-qb-contact: mỗi dòng một ô trắng bo 12 px, vòng biểu tượng 44 px nền --kg-rattan, nhãn chữ hoa 13 px màu Stone, giá trị đậm màu Ink, liên kết hover đổi màu (không gạch chân); một cột |
| Hàng ô số | kg-qb-nums: lưới 4 cột (2 cột dưới 1100 px), ô trắng bo 12 px, nhãn chữ hoa 13 px, giá trị 22 px đậm; số thuần (kg-qb-n) dùng gradient #3792BA sang #1a729b. Ô số tạm giữ thuộc tính data-pending |
| Thẻ lý do bốn cột | kg-ab-cards thêm kg-qb-why: 4 cột, 2 cột dưới 1100 px, một cột dưới 700 px |
| Hiện khi cuộn | Đã thêm kg-qb-contact, kg-qb-nums và kg-qleft vào danh sách của cuon-fx.js |
Các thành phần thêm 21/10/2026 khi dựng lại trang Liên hệ. Trang còn dùng lại nhãn viên thuốc, thẻ biểu tượng, danh sách liên hệ, hộp form và danh sách dấu tích đã có ở các mục trước.
Địa chỉ ghi trên trang này là địa chỉ đăng ký theo mã số thuế của công ty, nên cần trao đổi trước khi đến.
| Cặp nút liên hệ | kg-ct-btns: nút chính kg-btn--solid (Gọi, có biểu tượng điện thoại) và nút viền kg-btn--line (Nhắn Zalo, chữ Ink, viền xanh logo), cao 52 px; dưới 600 px xếp dọc, mỗi nút rộng hết khung |
|---|---|
| Khối gặp trực tiếp | kg-ct-meet: kg-split canh giữa dọc, trái là tiêu đề, đoạn dẫn và kg-nl-list, phải là kg-ct-addr gồm hai ô kg-qb-contact (Công ty, Địa chỉ đăng ký) và nút Mở Google Maps (kg-btn--line); ô địa chỉ giữ data-pending |
| Hiện khi cuộn | Đã thêm kg-ct-btns và phần tử con của kg-ct-addr vào danh sách của cuon-fx.js |
Các thành phần thêm 21/10/2026 khi dựng lại 4 trang nhóm (ban-go, ghe-don-go, tu-go, giuong-go) và 8 trang chi tiết mẫu. Ảnh sản phẩm trong demo là ảnh tạm đã ghi ở danh sách chặn trước production. Các trang này còn dùng lại thẻ sản phẩm, hai thẻ dòng, ô liên kết, nhãn viên thuốc và CTA hai nút đã có ở các mục trước.
| Lưới thẻ canh giữa | kg-sp-grid--c (cùng kg-sp-grid): flex-wrap canh giữa, mỗi thẻ rộng một phần tư hàng (240 px tối thiểu), hai thẻ mỗi hàng dưới 820 px; dùng khi nhóm có 1 đến 3 mẫu để thẻ không lệch trái |
|---|---|
| Bảng thông số mẫu | kg-pd-rows: danh sách dl, mỗi dòng hai cột (nhãn chữ hoa 13 px màu Stone, giá trị Ink), ngăn bằng vạch mảnh; một cột dưới 600 px. Dòng chờ KiGin có kg-pending, ẩn cả dòng khi demo (hide-todo) |
| Cặp nút mẫu | kg-pd-btns: nút chính kg-btn--solid "Gửi yêu cầu báo giá cho mẫu này" và nút viền Gọi, cao 52 px; xếp dọc rộng hết khung dưới 600 px |
| Trang chi tiết | Nền xen kẽ: thông tin (trắng), Sản xuất theo mẫu của bạn (xanh nhạt), Sản phẩm cùng nhóm (trắng, chỉ khi có mẫu khác), CTA hai nút (xanh nhạt hoặc trắng tùy khối trước) |
| Hiện khi cuộn | Đã thêm kg-pd-rows > div và kg-pd-btns vào danh sách của cuon-fx.js |
Các thành phần của trang chi tiết mẫu: bộ ảnh với ảnh nhỏ, chọn kích thước, bảng thông số, các mục thu gọn, mẫu cùng nhóm. Bản thật lấy từ trang chi tiết; ảnh và số liệu mẫu là tạm, ghi ở danh sách chặn go-live.
Kích thước:
Kệ Nổi Treo Tường Gỗ Keo Chevron (Mã SKU: GM-FS-CHEV-AC) là dòng sản phẩm nội thất kiến trúc cao cấp do KiGin trực tiếp thiết kế, chế tác và sản xuất xuất khẩu từ cụm nhà máy chế biến gỗ hiện đại tại Bắc Ninh, Việt Nam. Kết hợp hài hòa giữa chất liệu 100% Gỗ keo tự nhiên đạt chứng chỉ rừng bền vững FSC® và ngôn ngữ thiết kế họa tiết xương cá Chevron ghép thủ công tinh xảo, sản phẩm là lựa chọn tối ưu cho các dự án căn hộ cao cấp, khu nghỉ dưỡng sinh thái, khách sạn boutique và chuỗi bán lẻ trang trí nội thất quốc tế tại Bắc Mỹ, Châu Âu, Nhật Bản và Úc.
Trong kiến trúc nội thất đương đại, các giải pháp lưu trữ gắn tường không chỉ đơn thuần giải quyết bài toán tiết kiệm diện tích sàn mà còn đóng vai trò như những tác phẩm điêu khắc định hình phong cách sống. Sản phẩm Kệ Nổi Treo Tường Gỗ Keo Chevron được phát triển nhằm đáp ứng trọn vẹn tiêu chuẩn thẩm mỹ khắt khe của phong cách sống tối giản (Minimalism) kết hợp cùng vẻ đẹp mộc mạc ấm áp của phong cách Bắc Âu (Scandinavian) và phong cách đương đại (Contemporary Living).
Sở hữu đường nét thanh thoát với quy cách kích thước tiêu chuẩn 800 × 200 × 40 mm, sản phẩm giải phóng tối đa không gian lưu thông bên dưới, tạo cảm giác phòng ốc rộng rãi, thoáng đãng hơn đáng kể. Từng chi tiết cạnh viền, góc bo và mối nối đều được các kỹ sư KiGin lập trình phay CNC chính xác cao với kỹ thuật xử lý góc mềm (Soft-Edge Profiling), loại bỏ hoàn toàn các gờ sắc nhọn nguy hiểm, đảm bảo an toàn tuyệt đối cho người sử dụng trong gia đình có trẻ nhỏ, đồng thời phô diễn trình độ gia công mộc tinh xảo của thương hiệu xuất khẩu Việt Nam.
Điểm làm nên uy tín vượt trội của thương hiệu KiGin trên thị trường quốc tế chính là độ bền cơ học và tính ổn định kết cấu dài hạn. Đối với dòng sản phẩm Kệ Nổi Treo Tường Gỗ Keo Chevron, mọi chi tiết chịu lực đều được tính toán và kiểm định thực nghiệm nghiêm ngặt:
KiGin cam kết 100% nguyên liệu chế tác là Gỗ keo tự nhiên nguyên khối khai thác từ các vùng rừng trồng được cấp chứng chỉ quản lý rừng bền vững FSC® (Forest Stewardship Council), tuân thủ tuyệt đối Đạo luật Lacey Act (Hoa Kỳ) và Quy định chống mất rừng EUDR (Liên minh Châu Âu). Quy trình kiểm soát chất lượng từ khâu phôi gỗ thô đến thành phẩm bao gồm:
Nhờ tỷ lệ hình khối chuẩn mực và nét đẹp thanh lịch vượt thời gian, Kệ Nổi Treo Tường Gỗ Keo Chevron dễ dàng phối hợp hài hòa trong nhiều không gian kiến trúc khác nhau:
Mỗi bộ sản phẩm xuất xưởng của KiGin đều được trang bị trọn gói bộ phụ kiện kim khí lắp đặt (ốc vít chịu lực, tắc kê nở nhựa công nghiệp, khóa lục giác) và bản vẽ hướng dẫn lắp ráp trực quan bằng sơ đồ minh họa, giúp người dùng hoàn tất lắp đặt chỉ trong vòng 15 – 20 phút mà không cần thợ cơ khí chuyên nghiệp.
Bí quyết bảo dưỡng định kỳ để sản phẩm luôn như mới:
KiGin tự hào là đối tác sản xuất gia công OEM/ODM tin cậy của các thương hiệu bán lẻ quốc tế, các công ty phân phối đồ gỗ nội thất và các nhà bán hàng thương mại điện tử đa kênh (Amazon FBA, Wayfair, Home Depot, Costco):
Số lượng đặt hàng tối thiểu (MOQ) cho đơn hàng xuất khẩu là bao nhiêu?
MOQ thông thường cho các đơn hàng xuất khẩu FCL là từ 100 – 300 sản phẩm tùy theo quy cách. Chúng tôi hỗ trợ khách hàng kết hợp nhiều mã sản phẩm khác nhau trong cùng một đơn hàng container 20ft hoặc 40HC để tối ưu hóa danh mục phân phối và giảm thiểu tồn kho.
Thời gian sản xuất mẫu thử và tiến độ giao hàng đơn hàng container là bao lâu?
Thời gian phát triển mẫu thử (Sample Lead Time) hoàn thiện gửi chuyển phát nhanh là 7 – 10 ngày làm việc. Thời gian sản xuất hàng loạt cho container tiêu chuẩn là 30 – 45 ngày kể từ ngày phê duyệt mẫu và xác nhận đặt cọc.
KiGin cung cấp các chứng từ xuất nhập khẩu và chứng nhận pháp lý nào?
Chúng tôi cung cấp trọn bộ hồ sơ chứng từ quốc tế gồm: Commercial Invoice, Packing List, Bill of Lading (B/L), Chứng nhận xuất xứ hàng hóa (C/O Form B, Form EUR.1, Form AK, Form CPTPP), Chứng chỉ rừng bền vững FSC®-CoC, Chứng thư kiểm dịch thực vật và hun trùng (Phytosanitary & Fumigation Certificate) và Báo cáo kiểm định chất lượng xuất xưởng (Factory Test Report).
Chính sách bảo hành và xử lý chất lượng sản phẩm như thế nào?
KiGin bảo hành kết cấu 12 tháng kể từ ngày giao hàng tại cảng đích đối với tất cả lỗi kỹ thuật do quá trình chế biến và sản xuất tại nhà máy. Đội ngũ kiểm soát chất lượng hỗ trợ giải quyết thỏa đáng mọi phản hồi của đối tác trong vòng 48 giờ làm việc.
Quý đối tác thu mua quốc tế, đơn vị dự án, chuỗi siêu thị bán lẻ và nhà nhập khẩu B2B có nhu cầu nhận Catalog kỹ thuật, bảng giá FOB Hải Phòng / CIF cảng đích và hồ sơ năng lực nhà máy, vui lòng liên hệ trực tiếp với Phòng Kinh Doanh & Xuất Khẩu:
Xem thêm
| Bộ ảnh | kg-pd-gal gồm khung ảnh kg-pd-frame (ảnh lớn kg-pd-main, bấm mở hộp xem ảnh, có role="button", tabindex="0") và hàng ảnh nhỏ kg-pd-thumbs (nút kg-pd-th, ảnh đang xem có is-on và aria-pressed="true") |
|---|---|
| Chọn kích thước | kg-pd-opt: nhãn kg-pd-opt__l và nhóm nút kg-pd-opt__chips (role="group"), mỗi nút kg-pd-chip có aria-pressed; nút đang chọn có is-on |
| Bảng thông số | kg-pd-spec: danh sách dl, nhãn và giá trị mỗi dòng; dòng số liệu tạm có data-tam (chờ KiGin xác nhận, ẩn khi hide-todo) |
| Các mục thu gọn | kg-pd-accsec chứa kg-pd-acc (data-acc); mỗi mục kg-pd-acc__i gồm h3 bọc nút (aria-expanded, aria-controls) có tiêu đề kg-pd-acc__t và mũi tên, rồi vùng nội dung kg-pd-acc__p (role="region", hidden khi đóng) bọc kg-pd-acc__in; mục đang mở có is-open; mở một mục thì các mục khác đóng |
| Cặp nút và câu hỏi | kg-pd-actions bọc nút chính kg-btn--solid kg-pd-cta "Yêu cầu báo giá" (liên kết tới trang báo giá kèm tên mẫu và nhóm trong địa chỉ) và nút viền Gọi; kg-pd-faq là danh sách dl hỏi đáp ngắn đặt trong mục thu gọn |
| Dải sản phẩm liên quan | kg-pd-rel (đầu mục viên thuốc kg-ab-pill + tiêu đề gradient) chứa kg-pd-slider (data-pdslider, data-total): dải thẻ kg-sp-card trong kg-pd-track (role="group", aria-roledescription="carousel", tabindex="0") và hai nút tròn kg-pd-sl__b (kg-pd-sl__prev, kg-pd-sl__next, 48 px) ở hai mép; nút trước disabled ở đầu dải; nút hover hoặc focus đổi nền xanh logo chữ trắng |
Bộ lọc kèm liên kết "Tất cả sản phẩm", danh sách mẫu trong nhóm và khối chuyển sang nhóm khác. Bản thật lấy từ trang Bàn; ảnh sản phẩm là ảnh tạm.
Bàn Ăn, Bàn Làm Việc & Bàn Trà Gỗ
Mẫu của danh mục này xếp trước, sau đó là mẫu các danh mục khác. Mẫu minh họa; kích thước, vật liệu và hoàn thiện KiGin trao đổi theo từng đơn hàng.
Không tìm thấy sản phẩm phù hợp. Gửi mẫu hoặc bản vẽ qua yêu cầu báo giá, KiGin sản xuất theo mẫu của bạn.
Đang hiển thị 8 trên 12 sản phẩm
Mẫu nào thuộc dòng Luxury hay Indochine: chờ KiGin xác nhận. Mỗi mẫu có một trang duy nhất, dòng chỉ là nhãn lọc.
Xem thêm
| Liên kết tất cả | kg-filter__link kg-filter__all: liên kết có biểu tượng lưới 16 px, dáng như nút lọc nhưng là <a> tới trang Sản phẩm |
|---|---|
| Danh sách mẫu | kg-pg-list (kg-sec--paper kg-ab-qa): đầu mục viên thuốc, tiêu đề có chữ gradient, lưới kg-sp-grid |
| Khối nhóm khác | kg-pg-more: lưới kg-sp-grid kg-sp-grid--cat, mỗi thẻ kg-sp-card có data-cat, nhãn kg-sp-tag ghi số mẫu, ảnh ghép kg-sp-mos (aria-hidden) gồm các ảnh nhỏ |
Hai trang đích (noi-that-cao-cap, noi-that-indochine) dựng lại 23/10/2026 cùng UI/UX Về KiGin, Năng lực và Yêu cầu báo giá: dùng header, hero ảnh, breadcrumb và chân trang của cả site, các khối kg-ab-* và kg-qb-*. Bản thật lấy từ trang Luxury; ảnh mẫu là ảnh phối cảnh 3D của KiGin, quyền đăng chờ KiGin xác nhận.
Nhận báo giá
Để lại số điện thoại, Duyên nhận yêu cầu và phản hồi sớm nhất có thể trong giờ làm việc.
Để lại số điện thoại, Duyên gọi lại sớm nhất có thể.
Dòng Luxury
Bốn điều làm nên dòng Luxury của KiGin, sản xuất tại xưởng thuộc KiGin.
Bỏ chi tiết trang trí rườm rà, giữ mặt phẳng rõ, đường thẳng và tỉ lệ cân đối, theo hướng quiet luxury đang được ưa chuộng.
Gỗ tự nhiên cho vân liền mạch từ mặt ngoài vào trong; gỗ công nghiệp khi đơn hàng cần bề mặt đồng đều. KiGin làm cả hai, không dùng đá.
Màu gỗ, độ bóng và lớp phủ chốt theo từng đơn, bạn gửi ảnh hoặc mẫu màu. Mối ghép và bề mặt được kiểm tra trước khi đóng gói.
OEM: sản xuất đúng mẫu, bản vẽ, kích thước bạn đưa. ODM: KiGin cùng bạn phát triển mẫu từ ý tưởng đến thành phẩm.
Vật liệu và hoàn thiện
KiGin làm cả hai. Chọn theo cảm giác gỗ thật bạn muốn, số lượng đơn hàng và ngân sách; đường nét gọn của Luxury để lộ vật liệu nên bề mặt gỗ càng quan trọng.
Vân gỗ liền mạch từ mặt ngoài vào trong, mỗi tấm một vân riêng. Hợp đơn hàng Luxury cần cảm giác gỗ thật; thường có giá cao hơn gỗ công nghiệp.
Bề mặt và màu đồng đều giữa các sản phẩm, hợp đơn hàng số lượng lớn của dự án hoặc xuất khẩu cần nhiều bộ giống nhau.
Bốn điều nên kiểm khi nhận mẫu
| Khung trang | Dùng sub_page như Về KiGin: header và chân trang của cả site, hero ảnh kg-phero, breadcrumb "Trang chủ / Sản phẩm / Dòng X". Không còn header và chân trang rút gọn (kg-lp__header, kg-lp__footer), hero kg-lphero và dải kg-lpfacts của bản cũ |
|---|---|
| Khối form hai cột | kg-qb-top với lưới kg-workshop__grid: cột trái kg-qleft (nhãn viên thuốc kg-ab-pill, tiêu đề có chữ gradient, đoạn dẫn kg-lead, kg-nl-list, kg-qb-contact, hai nút viền trong kg-lp-btns), cột phải hộp kg-formbox (#bao-gia) với form báo giá nguồn lp_luxury hoặc lp_indochine |
| Bốn thẻ | kg-qb-whysec: kg-ab-cards kg-qb-why, 4 cột; dưới 1100 px 2 cột, dưới 700 px một cột |
| Vật liệu căn giữa | kg-lp-mat: cột rộng tối đa 640 px canh giữa chứa kg-nl-list; dòng chưa có số liệu giữ kg-todo (ẩn khi hide-todo) |
| Ảnh mẫu tham khảo | kg-lp-gal: lưới 3 cột (một cột dưới 901 px); mỗi ảnh là kg-gal (role="button", mở bộ ảnh đủ 3 ảnh, mở đúng ảnh đã bấm), tỉ lệ 4:3, bo 16 px; ghi chú quyền ảnh kg-lp-note |
| Nút điền form ở hero (mobile) | kg-hero-formbtn dưới hero, chỉ hiện dưới 901 px, cao 52 px, trỏ xuống #bao-gia; trên desktop form đã nằm ngay dưới hero nên ẩn |
| Hiện khi cuộn | Các khối dùng lại danh sách có sẵn của cuon-fx.js (kg-qleft, kg-ab-cards, kg-qb-contact, ảnh kg-slot), không thêm mục mới |
Tài liệu dài của hai trang Chính sách bảo mật và Điều khoản sử dụng: ghi chú bản nháp, ngày cập nhật, mục lục neo, các mục có tiêu đề. Bản thật lấy từ trang Chính sách bảo mật.
Bản nháp để KiGin xem và duyệt, chưa phải tư vấn pháp lý. Các mục ghi "chờ KiGin duyệt" là điều KiGin chưa xác nhận.
Thông tin trên website này do Công ty TNHH Thiết kế và Xây dựng Nội thất KiGin (MST 2400922475) thu thập, địa chỉ Số 18A, Ngõ 95 Đường Thân Khuê, Tổ 6 Khu 34, Phường Đa Mai, tỉnh Bắc Ninh. Chúng tôi gọi tắt là KiGin.
Khi bạn gửi yêu cầu báo giá, chúng tôi nhận: họ tên, số điện thoại, email (nếu bạn nhập), tên công ty (nếu có), nhóm và dòng sản phẩm bạn quan tâm, và nội dung bạn viết. Trang cũng ghi kèm dữ liệu kỹ thuật: đường dẫn trang bạn gửi từ đó, các tham số quảng cáo trên liên kết (UTM, mã click quảng cáo gclid). Chúng tôi chỉ thu thập những gì bạn nhập hoặc trình duyệt gửi kèm khi bạn dùng form.
Chúng tôi dùng thông tin để liên hệ lại, tư vấn và gửi báo giá cho yêu cầu của bạn. Dữ liệu kỹ thuật giúp chúng tôi biết yêu cầu đến từ kênh nào và đo hiệu quả quảng cáo. Chúng tôi không dùng thông tin này vào mục đích khác khi chưa hỏi bạn.
Chúng tôi xử lý thông tin của form dựa trên việc bạn tích ô đồng ý trước khi gửi. Bạn có thể rút lại sự đồng ý bất cứ lúc nào bằng cách liên hệ theo mục "Liên hệ về dữ liệu" bên dưới. Rút đồng ý không ảnh hưởng đến việc xử lý đã thực hiện trước đó.
Thông tin form được gửi tới chờ KiGin duyệt: nơi lưu, ví dụ bảng tính hoặc hộp thư nào, do ai quản lý qua dịch vụ Google Apps Script. Chúng tôi có thể dùng dịch vụ bên thứ ba như Google Ads và Google Analytics 4 để đo lường; các dịch vụ này có thể nhận dữ liệu kỹ thuật và, khi KiGin bật tính năng chuyển đổi nâng cao, số điện thoại ở dạng đã mã hoá (băm) chờ KiGin duyệt: có bật hay không. Máy chủ của các dịch vụ này có thể đặt ngoài Việt Nam chờ KiGin duyệt: đồng ý nêu hay không. Danh sách bên nhận khác (nếu có): chờ KiGin duyệt: danh sách bên nhận khác.
Chúng tôi lưu thông tin trong chờ KiGin duyệt: thời hạn lưu hoặc đến khi bạn yêu cầu xoá, tuỳ điều nào đến trước, trừ khi pháp luật yêu cầu giữ lâu hơn.
Bạn có quyền hỏi chúng tôi đang giữ thông tin gì về bạn, yêu cầu sửa, yêu cầu xoá, và rút lại sự đồng ý. Gửi yêu cầu theo mục "Liên hệ về dữ liệu". Chúng tôi sẽ phản hồi trong chờ KiGin duyệt: thời gian phản hồi.
Website có thể dùng cookie hoặc thẻ đo lường để biết số lượt xem và nguồn truy cập. Công cụ đang dùng: chờ KiGin duyệt: ví dụ Google Tag Manager, GA4, Google Ads. Bạn có thể xoá hoặc chặn cookie trong cài đặt trình duyệt; một số phần của trang có thể hoạt động kém hơn.
Email: noithatkigin@gmail.com. Điện thoại và Zalo: 097 779 43 33 (7h30 – 17h30, Thứ 2 – Thứ 7 (nghỉ Chủ nhật)). Địa chỉ: Số 18A, Ngõ 95 Đường Thân Khuê, Tổ 6 Khu 34, Phường Đa Mai, tỉnh Bắc Ninh.
Khi có thay đổi, chúng tôi cập nhật trang này và ghi lại ngày cập nhật ở đầu trang. Nên xem lại trang định kỳ.
| Khung tài liệu | kg-doc: cột chữ cho tài liệu dài, tiêu đề h2 cho từng mục (có id để neo) |
|---|---|
| Ghi chú bản nháp | kg-legal-note: đoạn ghi chú phía trên, nói tài liệu chưa phải tư vấn pháp lý |
| Ngày cập nhật | kg-legal-meta; phần chờ KiGin duyệt (kg-legal-pend) đánh dấu riêng để không lọt lên production |
| Mục lục neo | kg-legal-toc: danh sách liên kết tới từng h2 của tài liệu |
Khối lẻ mỗi trang mà các mục trên chưa có. Bản thật lấy từ trang Liên hệ, Năng lực, Yêu cầu báo giá, Sản xuất theo yêu cầu và Sản phẩm.
Kênh liên hệ
Hotline và Zalo cùng một số. Email dùng khi cần gửi tệp. KiGin làm việc Thứ 2 đến Thứ 7.
Trao đổi nhanh trong giờ làm việc, từ 7h30 đến 17h30. Ngoài giờ, bạn vẫn nhắn Zalo được; Duyên phản hồi trong giờ làm việc, sớm nhất có thể.
Dùng khi cần gửi nhiều ảnh hoặc tệp bản vẽ kèm mô tả đầy đủ về sản phẩm.
Gửi nhóm sản phẩm, vật liệu và số lượng dự kiến qua trang Yêu cầu báo giá để KiGin báo giá sát hơn.
Năng lực sản xuất
KiGin sản xuất tại xưởng của mình, theo mẫu, bản vẽ hoặc đơn đặt hàng của đơn vị dự án và đơn vị xuất khẩu.
Bạn trao đổi trực tiếp với nơi sản xuất về mẫu, vật liệu, số lượng và tiến độ.
Bàn, ghế và đôn, tủ, giường, làm từ gỗ tự nhiên hoặc gỗ công nghiệp.
Theo kích thước, vật liệu và số lượng của từng đơn hàng, kể cả đơn xuất khẩu.
Quy trình
Tám bước dưới đây cho bạn biết việc gì diễn ra và khi nào cần duyệt mẫu.
Ảnh, mẫu, bản vẽ, số lượng và vật liệu mong muốn.
KiGin xem vật liệu, kết cấu và khả năng sản xuất.
KiGin gửi báo giá theo mẫu, vật liệu và số lượng bạn cung cấp.
Làm mẫu thử để hai bên xem và chỉnh.
Bạn kiểm tra mẫu và duyệt trước khi sản xuất hàng loạt.
Sản xuất theo mẫu đã duyệt.
Kiểm tra sản phẩm trước khi đóng gói.
Đóng gói và bàn giao theo đơn hàng.
Xuất khẩu
KiGin phục vụ đơn vị dự án và đơn vị xuất khẩu. Đã xuất khẩu sang Mỹ, Canada, Hàn Quốc, Úc, EU và Nhật Bản.
2nhóm khách chính
6thị trường đã giao hàng
3bước trước khi bàn giao
Thị trường chính, quy cách đóng gói, điều kiện giao hàng: chờ KiGin xác nhận.
Vật liệu
Chọn vật liệu theo mẫu, bản vẽ và ngân sách của đơn hàng.
Dùng cho sản phẩm làm từ gỗ tự nhiên. Loại gỗ, màu và bề mặt hoàn thiện KiGin trao đổi theo từng đơn hàng.
Dùng cho sản phẩm làm từ gỗ công nghiệp, chọn theo mẫu và ngân sách của đơn hàng.
Kích thước, vật liệu và hoàn thiện theo mẫu, bản vẽ hoặc đơn đặt hàng của bạn.
Loại gỗ, màu, bề mặt hoàn thiện và mẫu vật liệu: chờ KiGin xác nhận.
| Kênh liên hệ | kg-ct-channels thêm vào kg-sec kg-ab-qa: đầu mục viên thuốc, tiêu đề gradient, rồi các thẻ kênh liên hệ |
|---|---|
| Móc đặt tên section | kg-nl-intro, kg-nl-steps-sec, kg-ox-export không có CSS riêng: giao diện lấy từ kg-ab-qa, kg-split, kg-steps8 và các thành phần đã ghi ở mục Về KiGin, Năng lực |
| Vật liệu | kg-sp-mat (trang Sản phẩm): section vật liệu kiểu kg-ab-qa |
| Nút bọc trong thẻ p | kg-hero-formbtn (nút chính "Điền form báo giá", trang Yêu cầu báo giá) và kg-qb-map (nút viền Mở Google Maps) bọc nút kg-btn trong thẻ p |
| Dòng chờ xác nhận | kg-pending: mục danh sách có phần kg-todo "chờ KiGin xác nhận" |
Tiếng Việt ngắn, rõ, nói đúng việc KiGin làm. Không hứa điều chưa có.
[….] hoặc bỏ ô, không đoán.| Thông tin công ty | Công ty TNHH Thiết kế và Xây dựng Nội thất KiGin · MST 2400922475 · Số 18A, Ngõ 95 Đường Thân Khuê, Tổ 6 Khu 34, Phường Đa Mai, tỉnh Bắc Ninh |
|---|---|
| Liên hệ | Hotline và Zalo cùng số 097 779 43 33; email noithatkigin@gmail.com; giờ làm việc 7h30 đến 17h30, Thứ 2 đến Thứ 7 |
| Người nhận báo giá | Duyên |
| Hai ngôn ngữ | Tiếng Việt là bản gốc, tiếng Anh (EN) viết lại cho khách quốc tế, không dịch máy. Công tắc EN | VI ở header, tệp *-en.html, hreflang vi, en, x-default; trên WordPress dùng Polylang hoặc WPML |
| Thuật ngữ EN | Bàn = Tables, Ghế và đôn = Chairs and stools, Tủ = Cabinets, Giường = Beds; OEM, ODM, Luxury, Indochine, Zalo giữ nguyên; MST = Tax code; "công ty" = company; chờ KiGin xác nhận = pending KiGin confirmation |
Đạt mức AA. Kiểm trên desktop 1440 và mobile 390, 360, 414; header kiểm tới 320 px, khổ tối thiểu.
| Tương phản | Chữ thường từ 4,5 : 1; chữ lớn và biểu tượng từ 3 : 1; viền ô nhập từ 3 : 1. Áp cho cả trạng thái hover và focus, nền sáng và nền tối, bản VI và EN. Chữ trên ảnh nền đo theo điểm ảnh sáng nhất quanh vị trí chữ cộng lớp phủ gradient |
|---|---|
| Kiểm toàn trang | 19/10/2026: bộ đo tự viết chạy cả 37 trang x 2 nền ở 1440 và 390 px (mọi chữ, gợi ý, viền ô nhập, hover); còn 3 báo hover ở ô Indochine trang chủ là dải kem 34 px trang trí, không đè chữ, và 1 báo chữ ẩn "Mở menu"; bản đo của Lighthouse/PageSpeed chưa chạy |
| Bộ đo | Chạy máy chủ demo (python -m http.server 8791 --bind 127.0.0.1 trong xem-nhanh-v3), rồi python tools/danh_gia_trang.py URL [URL ...]: mỗi trang ở 1440x900 và 390x844 gom qa_page (tràn ngang, lỗi JS, ảnh hỏng), tools/do_chung.js (chữ dưới 16 px, vùng bấm dưới 44 px, thẻ đầu trang, JSON-LD, số tạm) và tools/audit_tuong_phan.js (tương phản chữ, hover, focus, gợi ý và viền ô nhập, nền sáng và tối; chữ ẩn kg-vh được bỏ), kèm ảnh chụp; ghi so-do.json vào work/T2/8/danh-gia-ben-thu-3/<ngày>/. Chỉ đọc, không sửa trang, không gửi form |
| Cỡ chữ mobile | Chữ thân từ 16 px; nhãn phụ nhỏ nhất 14 px |
| Vùng bấm | Nút chính từ 48 px, liên kết và vùng bấm từ 44 px, hai vùng liền kề cách từ 8 px |
| Thứ tự Tab ở header | Mọi trang có menu: Bỏ qua menu, nút menu, logo, công tắc nền sáng/tối, EN và VI, khớp thứ tự nhìn từ trái sang phải ở 980 px trở xuống (WCAG 2.4.3 Thứ tự tiêu điểm). Lý do: nút menu nằm bên trái màn hình nên phải đứng ngay sau "Bỏ qua menu" trong mã, không đứng cuối header như trước 20/10/2026 |
| Bàn phím | Thứ tự tab theo bố cục; viền focus 2 đến 3 px rõ trên mọi nền (ô nhập: 2 px #136F9A nền sáng, #5CC0EA nền tối); hộp xem ảnh giữ focus bên trong và trả về ảnh đã bấm |
| Đọc màn hình | Ảnh có alt mô tả; vùng thay đổi có aria-live; vùng báo lỗi form luôn có trong cây truy cập (cao 0 khi rỗng); lỗi cuộn tới ô đầu tiên, có chừa chỗ cho header; nút bật tắt có aria-pressed |
| Không tràn ngang | Mọi trang không cuộn ngang ở 360 đến 414 px; header và nút menu nằm trong màn hình từ 320 px (đo 20/10 trên trang chủ, Liên hệ, Yêu cầu báo giá; chưa đo toàn trang ở 320 px) |
Mỗi thành phần ánh xạ sang element chuẩn của Flatsome; hiệu ứng nằm ở CSS và JS của child theme.
| Thành phần | Element Flatsome | Phần ở child theme |
|---|---|---|
| Đầu section (tiêu đề + phụ đề) | [section] [row] [col] [ux_text] | CSS cỡ chữ, căn giữa dọc |
| Nút | [button] | CSS nền trượt, bo 4 px, cao 48 px |
| Thẻ sản phẩm + bộ lọc | [ux_portfolio] hoặc [ux_products] + bộ lọc có sẵn | CSS hover ảnh; JS lọc nếu cần giống bản demo |
| Hộp xem ảnh | [ux_gallery lightbox="true"] hoặc [ux_image lightbox] | CSS chuyển ảnh trượt mờ |
| Ảnh tự chạy | [ux_slider auto_slide="7000"] | CSS nút bật tắt, vòng tiến độ |
| Quy trình 8 bước | [row] + [col] + [ux_text] (icon SVG trong ux_text) | CSS lưới rắn bò, mũi tên |
| Hỏi đáp | [accordion] [accordion-item] | CSS vạch, dấu cộng |
| Form | Contact Form 7 hoặc Flatsome form | CSS ô nhập, lỗi, đồng ý liên hệ |
| Header, menu, thanh đáy mobile | Header Builder của Flatsome | CSS màu, nút báo giá |
Chưa dựng thử trong Flatsome thật vì chưa có host. Bảng này là kế hoạch ánh xạ, cần kiểm khi có staging.