-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
931 lines (854 loc) · 55.5 KB
/
Copy pathindex.html
File metadata and controls
931 lines (854 loc) · 55.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TECOTEC Group Brand Personality & Voice Tone Playbook 2.0 - Hướng dẫn nhận diện thương hiệu và giọng điệu nội dung cho đối tác">
<title>TECOTEC GROUP | BRAND PERSONALITY & VOICE TONE PLAYBOOK 2.0</title>
<link rel="icon" type="image/svg+xml" href="assets/logos/Logo-TECOTEC-Group.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Mobile Menu Toggle -->
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation menu">
<span></span>
<span></span>
<span></span>
</button>
<!-- Sticky Table of Contents -->
<nav class="toc" id="toc">
<!-- Reading Progress Bar -->
<div class="reading-progress-container">
<div class="reading-progress" id="readingProgress"></div>
</div>
<div class="toc-header">
<img src="assets/logos/Logo-TECOTEC-Group.svg" alt="TECOTEC Group Logo" class="toc-logo">
<h2>Mục lục</h2>
</div>
<ul class="toc-list">
<li><a href="#section-01" class="toc-link"><span class="toc-number">01</span> Giới thiệu & Mục đích</a></li>
<li><a href="#section-02" class="toc-link"><span class="toc-number">02</span> Brand Foundation</a></li>
<li><a href="#section-03" class="toc-link"><span class="toc-number">03</span> Visual Identity</a></li>
<li><a href="#section-04" class="toc-link"><span class="toc-number">04</span> Brand Personality</a></li>
<li><a href="#section-05" class="toc-link"><span class="toc-number">05</span> Voice Tone Guidelines</a></li>
<li><a href="#section-06" class="toc-link"><span class="toc-number">06</span> Content Decision Filter</a></li>
<li><a href="#section-07" class="toc-link"><span class="toc-number">07</span> Writing Rules</a></li>
<li><a href="#section-08" class="toc-link"><span class="toc-number">08</span> AI Content Guardrails</a></li>
<li><a href="#section-09" class="toc-link"><span class="toc-number">09</span> Channel Guidelines</a></li>
<li><a href="#section-10" class="toc-link"><span class="toc-number">10</span> Crisis Voice Matrix</a></li>
<li><a href="#section-11" class="toc-link"><span class="toc-number">11</span> Do's & Don'ts</a></li>
<li><a href="#section-12" class="toc-link"><span class="toc-number">12</span> Content Examples</a></li>
<li><a href="#section-13" class="toc-link"><span class="toc-number">13</span> Quick Reference</a></li>
</ul>
</nav>
<!-- Mobile Menu Overlay -->
<div class="mobile-overlay" id="mobileOverlay"></div>
<!-- Main Content -->
<main class="main-content">
<!-- Hero Section -->
<header class="hero">
<div class="hero-content">
<img src="assets/logos/Logo-TECOTEC-Group.svg" alt="TECOTEC Group Logo" class="hero-logo">
<h1 class="hero-title">TECOTEC GROUP<br><span class="subtitle">BRAND PERSONALITY & VOICE TONE PLAYBOOK 2.0</span></h1>
<p class="hero-subtitle">Phiên bản 2.0 | Tháng 03/2026</p>
<p class="hero-tagline">"Measuring Everything"</p>
</div>
</header>
<!-- Section 01 -->
<section id="section-01" class="content-section">
<h2 class="section-title">01. GIỚI THIỆU & MỤC ĐÍCH</h2>
<div class="subsection">
<h3>Tại sao cần Playbook này?</h3>
<p>TECOTEC Group hoạt động trong lĩnh vực B2B/B2G với đa dạng khách hàng từ Quốc phòng, Giáo dục đến Công nghiệp. Mỗi điểm chạm với khách hàng là cơ hội xây dựng niềm tin hoặc rủi ro đánh mất uy tín. Playbook này đảm bảo mọi nội dung từ TECOTEC đều nhất quán, chuyên nghiệp và phản ánh đúng giá trị cốt lõi của tổ chức – dù được viết bởi bất kỳ ai trong team.</p>
</div>
<div class="subsection">
<h3>Đối tượng sử dụng:</h3>
<ul>
<li><strong>Team MarCom:</strong> xây dựng content hàng ngày.</li>
<li><strong>Sales/BD:</strong> viết proposal, email khách hàng.</li>
<li><strong>Agency/Freelancer:</strong> brief và đối chiếu output.</li>
<li><strong>Nhân sự mới:</strong> onboarding về brand guidelines.</li>
</ul>
</div>
</section>
<!-- Section 02 -->
<section id="section-02" class="content-section">
<h2 class="section-title">02. BRAND FOUNDATION</h2>
<div class="callout">
<h3>Nền tảng thương hiệu</h3>
</div>
<div class="subsection">
<h3>Slogan</h3>
<p class="highlight">"Measuring Everything"</p>
</div>
<div class="subsection">
<h3>Tầm nhìn (Vision)</h3>
<p>Duy trì và củng cố vị thế dẫn đầu tại thị trường Việt Nam trong lĩnh vực Công nghệ – Đo lường – Kiểm định – Hiệu chuẩn, đồng thời mở rộng tầm ảnh hưởng trong khu vực. Trở thành thương hiệu được tin cậy hàng đầu, cung cấp các giải pháp tích hợp AI, số hoá và công nghệ thông minh.</p>
</div>
<div class="subsection">
<h3>Sứ mệnh (Mission)</h3>
<p>Cung cấp các giải pháp công nghệ tiên tiến và thiết bị đo lường – kiểm định – hiệu chuẩn tối ưu, hiện đại, đáp ứng tiêu chuẩn quốc tế cho các đối tác trong nhiều lĩnh vực: An ninh – Quốc phòng, Giáo dục – Đào tạo, Công nghiệp và Thương mại.</p>
</div>
<div class="subsection">
<h3>Giá trị cốt lõi (Core Values)</h3>
<div class="values-grid">
<div class="value-card">
<h4>HIỂU NGHỀ</h4>
<p>Hoạt động bền bỉ trong lĩnh vực đo lường 25+ năm, am tường sâu sắc ngành nghề.</p>
</div>
<div class="value-card">
<h4>ĐOÀN KẾT</h4>
<p>Con người là yếu tố quyết định – tập thể đoàn kết, thống nhất, chuyên nghiệp.</p>
</div>
<div class="value-card">
<h4>UY TÍN</h4>
<p>Trung thực và tin cậy xuyên suốt – uy tín là chìa khóa phát triển bền vững.</p>
</div>
<div class="value-card">
<h4>TÔN TRỌNG</h4>
<p>Cởi mở, tận tâm, làm đúng cam kết và nhận trách nhiệm.</p>
</div>
<div class="value-card">
<h4>SÁNG TẠO</h4>
<p>Đầu tư 5% lợi nhuận vào R&D – làm chủ công nghệ, phát huy sức sáng tạo.</p>
</div>
</div>
</div>
<div class="subsection">
<h3>Niềm tin thương hiệu (Brand Belief)</h3>
<p>TECOTEC tin rằng thành công bền vững của khách hàng và ngành công nghiệp dựa trên nền tảng đo lường chính xác và công nghệ tiên tiến. Chúng tôi tập trung vào việc tạo ra giá trị thực thông qua sự kết hợp giữa chuyên môn sâu và sáng tạo.</p>
<ul>
<li>Sự chính xác trong đo lường và kiểm định quyết định hiệu quả sản xuất và ra quyết định cho đối tác.</li>
<li>Công nghệ hiện đại, tích hợp AI và số hóa là chìa khóa tạo dựng tương lai sáng tạo cho ngành.</li>
<li>Tư duy cộng tác và đồng hành lâu dài với khách hàng tạo nên giá trị đôi bên cùng phát triển.</li>
</ul>
</div>
<div class="subsection">
<h3>Kẻ thù thương hiệu (Brand Enemy)</h3>
<p>TECOTEC chống lại mọi yếu tố gây cản trở tính chính xác và chuyên nghiệp trong đo lường và kiểm định. Chúng tôi phản đối những quan điểm và thực hành lạc hậu, chủ quan hoặc thiếu hợp tác:</p>
<ul>
<li>Sự tùy tiện, sai số không được kiểm soát trong đo lường – từ chối các phương pháp không đảm bảo chuẩn mực.</li>
<li>Tư duy cô lập, không đối tác – đối thủ nhau; chúng tôi đồng hành và chia sẻ hơn là chỉ "bán hàng".</li>
<li>Công nghệ lỗi thời, trì trệ – chúng tôi phê phán sự bảo thủ và ngăn chặn việc thụt lùi.</li>
<li>Sự tự mãn và thiếu minh bạch – mọi thông tin phải được công khai rõ ràng và giải trình có trách nhiệm.</li>
</ul>
</div>
</section>
<!-- Section 03 -->
<section id="section-03" class="content-section">
<h2 class="section-title">03. VISUAL IDENTITY</h2>
<div class="callout">
<h3>Nhận diện hình ảnh</h3>
</div>
<div class="subsection">
<h3>Logo</h3>
<p>Logo TECOTEC Group gồm biểu tượng hình tròn xoáy ốc với các chấm tròn màu cam gradient, và wordmark chữ "TECOTEC" cùng tagline "since 1996".</p>
<div class="logo-container">
<img src="assets/logos/Logo-TECOTEC-Group.svg" alt="TECOTEC Group Logo" class="brand-logo">
</div>
</div>
<!-- Logo Download Section (NEW) -->
<div class="subsection">
<h3>Tải xuống Logo</h3>
<p>Tải logo TECOTEC Group ở định dạng phù hợp với mục đích sử dụng của bạn:</p>
<div class="download-grid">
<a href="assets/logos/Logo-TECOTEC-Group.svg" download class="download-card">
<div class="download-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="40" height="40" rx="6" fill="#FF9900" opacity="0.1" stroke="#FF9900" stroke-width="2"/>
<text x="24" y="30" text-anchor="middle" font-size="14" font-weight="700" fill="#FF9900">SVG</text>
</svg>
</div>
<div class="download-info">
<h4>SVG</h4>
<p class="download-desc">Vector — Web, UI</p>
<p class="download-size">38 KB</p>
</div>
<span class="download-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Tải xuống
</span>
</a>
<a href="assets/logos/Logo-TECOTEC-Group.png" download class="download-card">
<div class="download-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="40" height="40" rx="6" fill="#146EB4" opacity="0.1" stroke="#146EB4" stroke-width="2"/>
<text x="24" y="30" text-anchor="middle" font-size="14" font-weight="700" fill="#146EB4">PNG</text>
</svg>
</div>
<div class="download-info">
<h4>PNG</h4>
<p class="download-desc">High-res — Presentations, Docs</p>
<p class="download-size">60 KB</p>
</div>
<span class="download-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Tải xuống
</span>
</a>
<a href="assets/logos/Logo-TECOTEC-Group.webp" download class="download-card">
<div class="download-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="40" height="40" rx="6" fill="#28a745" opacity="0.1" stroke="#28a745" stroke-width="2"/>
<text x="24" y="30" text-anchor="middle" font-size="12" font-weight="700" fill="#28a745">WebP</text>
</svg>
</div>
<div class="download-info">
<h4>WebP</h4>
<p class="download-desc">Web optimized — Social, Digital</p>
<p class="download-size">99 KB</p>
</div>
<span class="download-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Tải xuống
</span>
</a>
<a href="assets/logos/Logo-TECOTEC-Group.pdf" download class="download-card">
<div class="download-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="40" height="40" rx="6" fill="#dc3545" opacity="0.1" stroke="#dc3545" stroke-width="2"/>
<text x="24" y="30" text-anchor="middle" font-size="14" font-weight="700" fill="#dc3545">PDF</text>
</svg>
</div>
<div class="download-info">
<h4>PDF</h4>
<p class="download-desc">Print-ready — In ấn chuyên nghiệp</p>
<p class="download-size">892 KB</p>
</div>
<span class="download-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Tải xuống
</span>
</a>
<a href="assets/logos/Logo-TECOTEC-Group.eps" download class="download-card">
<div class="download-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="40" height="40" rx="6" fill="#6f42c1" opacity="0.1" stroke="#6f42c1" stroke-width="2"/>
<text x="24" y="30" text-anchor="middle" font-size="14" font-weight="700" fill="#6f42c1">EPS</text>
</svg>
</div>
<div class="download-info">
<h4>EPS</h4>
<p class="download-desc">Design — Thiết kế, in offset</p>
<p class="download-size">507 KB</p>
</div>
<span class="download-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Tải xuống
</span>
</a>
<a href="assets/logos/Logo-TECOTEC-Group.ai" download class="download-card">
<div class="download-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="40" height="40" rx="6" fill="#330000" opacity="0.1" stroke="#330000" stroke-width="2"/>
<text x="24" y="30" text-anchor="middle" font-size="14" font-weight="700" fill="#330000">AI</text>
</svg>
</div>
<div class="download-info">
<h4>AI</h4>
<p class="download-desc">Source — Adobe Illustrator</p>
<p class="download-size">102 KB</p>
</div>
<span class="download-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Tải xuống
</span>
</a>
</div>
</div>
<div class="subsection">
<h3>Bảng màu thương hiệu</h3>
<div class="color-palette">
<div class="color-swatch">
<div class="color-box" style="background-color: #FF9900;"></div>
<h4>Màu chủ đạo - Orange</h4>
<p class="color-hex" data-hex="#FF9900" title="Click để copy"><strong>HEX:</strong> #FF9900</p>
<p><strong>RGB:</strong> 255, 153, 0</p>
<p><strong>CMYK:</strong> 0, 40, 100, 0</p>
<p><strong>Sử dụng:</strong> Headlines, CTA</p>
</div>
<div class="color-swatch">
<div class="color-box" style="background-color: #146EB4;"></div>
<h4>Màu bổ trợ - Blue</h4>
<p class="color-hex" data-hex="#146EB4" title="Click để copy"><strong>HEX:</strong> #146EB4</p>
<p><strong>RGB:</strong> 20, 110, 180</p>
<p><strong>CMYK:</strong> 89, 39, 0, 29</p>
<p><strong>Sử dụng:</strong> Body, Headers</p>
</div>
<div class="color-swatch">
<div class="color-box" style="background-color: #F4F6F8; border: 1px solid #ddd;"></div>
<h4>Màu nền - Off-White</h4>
<p class="color-hex" data-hex="#F4F6F8" title="Click để copy"><strong>HEX:</strong> #F4F6F8</p>
<p><strong>RGB:</strong> 244, 246, 248</p>
<p><strong>CMYK:</strong> 0, 0, 0, 3</p>
<p><strong>Sử dụng:</strong> Background, Cards</p>
</div>
</div>
</div>
<div class="subsection">
<h3>Quy tắc sử dụng màu</h3>
<ul>
<li><strong>Orange (#FF9900):</strong> Điểm nhấn – nút CTA, tiêu đề quan trọng.</li>
<li><strong>Blue (#146EB4):</strong> Text chính, header, link, biểu tượng trust.</li>
<li><strong>Off-White (#F4F6F8):</strong> Nền, tạo không gian thở.</li>
<li><strong>Tỷ lệ đề xuất:</strong> Blue 60% | Orange 30% | Accents 10%.</li>
</ul>
</div>
</section>
<!-- Section 04 -->
<section id="section-04" class="content-section">
<h2 class="section-title">04. BRAND PERSONALITY</h2>
<div class="callout">
<h3>Tính cách thương hiệu</h3>
<p>TECOTEC Group là một thương hiệu B2B với tính cách đặc trưng: <strong>Chuyên gia kỹ thuật đáng tin cậy – đồng hành giải quyết các bài toán đo lường phức tạp với sự am hiểu sâu sắc và cam kết lâu dài.</strong></p>
</div>
<div class="subsection">
<h3>5 đặc điểm tính cách chủ đạo</h3>
<div class="personality-trait">
<h4>1. AUTHORITATIVE (Chuyên gia uy tín)</h4>
<p>Nói từ vị thế của người am hiểu sâu sắc, có kinh nghiệm thực tiễn.</p>
<p class="example"><strong>Ví dụ:</strong> Dẫn chứng số liệu cụ thể (như "25 năm kinh nghiệm", "100+ đối tác quốc tế") để tăng tính thuyết phục.</p>
</div>
<div class="personality-trait">
<h4>2. RELIABLE (Đáng tin cậy)</h4>
<p>Cam kết đúng lời hứa, đồng hành lâu dài, có trách nhiệm với kết quả.</p>
<p class="example"><strong>Ví dụ:</strong> Dùng từ ngữ như "đồng hành", "hỗ trợ trọn đời", "đối tác tin cậy" để thể hiện sự cam kết bền lâu.</p>
</div>
<div class="personality-trait">
<h4>3. PRECISE (Chính xác)</h4>
<p>Chuẩn xác trong từng chi tiết, không mơ hồ – đúng như bản chất ngành đo lường.</p>
<p class="example"><strong>Ví dụ:</strong> Sử dụng chính xác thuật ngữ chuyên ngành (chẳng hạn phân biệt "hiệu chuẩn" và "kiểm định" đúng ngữ cảnh).</p>
</div>
<div class="personality-trait">
<h4>4. PROGRESSIVE (Tiến bộ)</h4>
<p>Không ngừng cập nhật công nghệ mới, đầu tư R&D, hướng tới tương lai.</p>
<p class="example"><strong>Ví dụ:</strong> Nhắc đến các xu hướng công nghệ tiên tiến như AI, IoT, Industry 4.0, số hóa...</p>
</div>
<div class="personality-trait">
<h4>5. PARTNER-ORIENTED (Tư duy đối tác)</h4>
<p>Không đơn thuần bán hàng mà là đồng hành giải quyết vấn đề.</p>
<p class="example"><strong>Ví dụ:</strong> Ưu tiên gọi "đối tác" thay "khách hàng", dùng "giải pháp" thay "sản phẩm" để khẳng định tư duy hợp tác.</p>
</div>
</div>
</section>
<!-- Section 05 -->
<section id="section-05" class="content-section">
<h2 class="section-title">05. VOICE TONE GUIDELINES</h2>
<div class="callout">
<h3>Giọng điệu thương hiệu</h3>
</div>
<div class="subsection">
<h3>Nguyên tắc giọng điệu tổng quát</h3>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>TECOTEC là...</th>
<th>KHÔNG phải...</th>
<th>Ví dụ đúng</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chuyên nghiệp, trang trọng</td>
<td>Cứng nhắc, xa cách</td>
<td>"Chúng tôi hiểu rõ thách thức..."</td>
</tr>
<tr>
<td>Tự tin, khẳng định</td>
<td>Kiêu ngạo, phô trương</td>
<td>"Với 25 năm kinh nghiệm..."</td>
</tr>
<tr>
<td>Kỹ thuật, evidence-based</td>
<td>Khô khan, khó hiểu</td>
<td>"Hệ thống đạt chuẩn ISO/IEC 17025..."</td>
</tr>
<tr>
<td>Hữu ích, giải pháp-oriented</td>
<td>Chỉ nói về mình</td>
<td>"Giải pháp này giúp Quý vị..."</td>
</tr>
<tr>
<td>Ấm áp, tôn trọng</td>
<td>Suồng sã, thiếu chuyên nghiệp</td>
<td>"Cảm ơn Quý Công ty đã tin tưởng..."</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="subsection">
<h3>Điều chỉnh tone theo ngữ cảnh</h3>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Ngữ cảnh</th>
<th>Tone Level</th>
<th>Đặc điểm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quốc phòng / B2G</td>
<td>Rất trang trọng</td>
<td>Formal, không exaggerate, dùng generic terms</td>
</tr>
<tr>
<td>B2B Công nghiệp</td>
<td>Trang trọng</td>
<td>Technical accuracy, evidence-based, tập trung vào ROI</td>
</tr>
<tr>
<td>Giáo dục / Đại học</td>
<td>Chuyên nghiệp - Thân thiện</td>
<td>Cân bằng giữa học thuật và ứng dụng thực tiễn</td>
</tr>
<tr>
<td>LinkedIn</td>
<td>Chuyên nghiệp - Engaging</td>
<td>Thought leadership, storytelling có data</td>
</tr>
<tr>
<td>Facebook</td>
<td>Ấm áp - Gần gũi</td>
<td>Hướng tới cộng đồng, hậu trường công ty (behind-the-scenes)</td>
</tr>
<tr>
<td>Internal (Nội bộ)</td>
<td>Thân thiện - Truyền cảm hứng</td>
<td>Sử dụng "chúng ta", chúc mừng thành tích, khuyến khích (celebrate wins)</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Section 06 -->
<section id="section-06" class="content-section">
<h2 class="section-title">06. CONTENT DECISION FILTER</h2>
<div class="callout">
<p>Trước khi xuất bản bất kỳ nội dung nào, hãy tự hỏi:</p>
</div>
<div class="subsection">
<ul class="checklist">
<li><strong>Mục tiêu và đối tượng:</strong> Nội dung này nhằm giải quyết vấn đề hoặc thắc mắc cụ thể nào cho đối tượng khách hàng nào?</li>
<li><strong>Giai đoạn hành trình khách hàng:</strong> Nội dung này phù hợp cho giai đoạn Nhận thức, Cân nhắc hay Quyết định trong hành trình mua hàng của họ?</li>
<li><strong>Hành động mong đợi:</strong> Sau khi đọc, chúng ta muốn người đọc làm gì (ví dụ: tìm hiểu thêm, đăng ký, liên hệ)? Nội dung này đã dẫn dắt họ đến bước tiếp theo rõ ràng chưa?</li>
<li><strong>Liên kết chiến lược:</strong> Nội dung có phản ánh đúng thông điệp chủ đạo của thương hiệu và phù hợp với sứ mệnh, tầm nhìn của TECOTEC không?</li>
<li><strong>Giá trị độc đáo:</strong> Nội dung có cung cấp thông tin mới, dẫn chứng số liệu, hoặc giải pháp thiết thực mà các nguồn hiện có khác chưa đề cập đến không?</li>
</ul>
<div class="callout warning">
<p><strong>Lưu ý:</strong> Nếu câu trả lời cho những câu hỏi trên không rõ ràng, nội dung đó có thể chưa đủ quan trọng hoặc chưa sẵn sàng để xuất bản.</p>
</div>
</div>
</section>
<!-- Section 07 -->
<section id="section-07" class="content-section">
<h2 class="section-title">07. WRITING RULES</h2>
<div class="callout">
<h3>Quy tắc viết nội dung</h3>
</div>
<div class="subsection">
<h3>Thuật ngữ bắt buộc</h3>
<p>Trong ngành đo lường, việc dùng đúng thuật ngữ là bắt buộc – một sai sót nhỏ có thể làm mất uy tín. Luôn dùng các thuật ngữ sau và tránh nhầm lẫn:</p>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Thuật ngữ đúng</th>
<th>Không dùng</th>
<th>Giải thích</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hiệu chuẩn (Calibration)</td>
<td>Hiệu chỉnh, Căn chỉnh</td>
<td>So sánh với chuẩn, KHÔNG điều chỉnh thiết bị.</td>
</tr>
<tr>
<td>Kiểm định (Verification)</td>
<td>Hiệu chuẩn (khi sai)</td>
<td>Xác nhận đạt yêu cầu kỹ thuật theo quy định.</td>
</tr>
<tr>
<td>Độ chính xác (Accuracy)</td>
<td>(nhầm với "Độ chuẩn xác")</td>
<td>Mức độ gần đúng với giá trị thực.</td>
</tr>
<tr>
<td>Độ chuẩn xác (Precision)</td>
<td>(nhầm với "Độ chính xác")</td>
<td>Mức độ lặp lại được của các phép đo.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="subsection">
<h3>Điểm tựa uy tín</h3>
<p>Luôn chứng minh tính xác thực của thông tin bằng bằng chứng cụ thể. Ví dụ:</p>
<ul>
<li>"Gần 30 năm kinh nghiệm (từ 1996)" – thay vì "nhiều năm kinh nghiệm"</li>
<li>"200+ nhân sự, 90% trình độ kỹ sư" – thay vì "đội ngũ chuyên nghiệp"</li>
<li>"Đạt chuẩn ISO 9001 & ISO/IEC 17025" – thay vì "chất lượng cao"</li>
<li>"100+ đối tác từ Mỹ, Nhật, Đức, Pháp" – thay vì "đối tác toàn cầu"</li>
<li>"Phục vụ Toyota, Honda, Viettel, BQP" – thay vì "khách hàng lớn"</li>
</ul>
</div>
<div class="subsection">
<h3>Từ ngữ cần tránh</h3>
<p>Sử dụng các từ khoá thiếu bằng chứng hoặc mang tính quảng cáo lạc quan quá mức. Ví dụ:</p>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Không dùng</th>
<th>Thay bằng</th>
</tr>
</thead>
<tbody>
<tr>
<td>"Hàng đầu", "Số 1", "Tốt nhất"</td>
<td>"25 năm kinh nghiệm", "Đạt chuẩn ISO/IEC 17025"</td>
</tr>
<tr>
<td>"Chất lượng cao", "Uy tín"</td>
<td>"Được Toyota, Honda tin tưởng từ 2001"</td>
</tr>
<tr>
<td>"Giá rẻ", "Giá tốt"</td>
<td>"Tối ưu chi phí đầu tư", "Hiệu quả TCO"</td>
</tr>
<tr>
<td>"Khách hàng" (context dài hạn)</td>
<td>"Đối tác", "Quý Công ty"</td>
</tr>
<tr>
<td>"Sản phẩm"</td>
<td>"Giải pháp", "Hệ thống", "Thiết bị"</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Section 08 -->
<section id="section-08" class="content-section">
<h2 class="section-title">08. AI CONTENT GUARDRAILS</h2>
<div class="callout">
<h3>Hướng dẫn sử dụng AI tạo nội dung</h3>
<p>Để khai thác AI mà không đánh mất tính chính xác kỹ thuật và tiếng nói thương hiệu, cần tuân thủ các nguyên tắc sau:</p>
</div>
<div class="subsection">
<ul class="checklist">
<li><strong>Xác minh thông tin:</strong> Mọi dữ liệu kỹ thuật, số liệu, hoặc tiêu chuẩn nêu ra bởi AI phải được kiểm tra và duyệt lại bởi chuyên gia nội bộ. AI chỉ nên cung cấp ý tưởng tổng hợp; thông tin quan trọng không được để AI "sáng tác" mà không có nguồn xác thực.</li>
<li><strong>Định hướng giọng điệu:</strong> Khi sử dụng AI (như ChatGPT), luôn cung cấp prompt rõ ràng về giọng văn (tone), ví dụ: "Viết theo giọng trang trọng, kỹ thuật của TECOTEC". Có thể huấn luyện AI với bộ brand guideline hoặc style guide của TECOTEC để đảm bảo nhất quán.</li>
<li><strong>Đóng vai trò công cụ hỗ trợ:</strong> AI nên được dùng để phác thảo nội dung hoặc gợi ý ý tưởng, không phải để xuất bản trực tiếp. Người soạn cần chỉnh sửa, thêm ví dụ thực tế và đảm bảo nội dung phù hợp văn phong nhãn hàng.</li>
<li><strong>Bảo mật nội dung:</strong> Không đưa thông tin nhạy cảm, dữ liệu riêng nội bộ hoặc thông tin chưa công bố vào prompt AI. Đồng thời, kiểm tra cẩn thận để AI không vô tình trích dẫn hoặc sáng tạo ra thông tin sai lệch.</li>
<li><strong>Kiểm soát từ ngữ:</strong> AI có thể đưa ra ngôn từ không phù hợp; người soạn cần đảm bảo tránh các từ cấm (xem phần Writing Rules) và luôn ưu tiên sử dụng thuật ngữ kỹ thuật đúng.</li>
<li><strong>Đánh giá chất lượng:</strong> Đặt ra bước rà soát cuối cùng bởi biên tập viên hoặc chuyên gia kỹ thuật trước khi xuất bản nội dung do AI tạo ra.</li>
</ul>
<div class="callout warning">
<p><strong>Lưu ý:</strong> AI là công cụ tăng tốc sáng tạo nội dung, nhưng <strong>con người phải giữ vai trò quyết định</strong> để bảo toàn độ chính xác và bản sắc thương hiệu.</p>
</div>
</div>
</section>
<!-- Section 09 -->
<section id="section-09" class="content-section">
<h2 class="section-title">09. CHANNEL GUIDELINES</h2>
<div class="callout">
<h3>Hướng dẫn theo kênh truyền thông</h3>
</div>
<div class="subsection">
<h3>Website (tecotec.com.vn)</h3>
<p><strong>Vai trò:</strong> Hub chính cho SEO, lead generation.</p>
<ul>
<li><strong>Ngôn ngữ:</strong> Formal, technical, SEO-optimized.</li>
<li><strong>Structure:</strong> Cấu trúc H1 > H2 > H3 rõ ràng, có internal linking.</li>
<li><strong>Meta:</strong> 150-160 ký tự, bao gồm keyword + value proposition.</li>
<li><strong>Case studies:</strong> Trình bày bài toán > giải pháp > kết quả.</li>
</ul>
</div>
<div class="subsection">
<h3>LinkedIn</h3>
<p><strong>Vai trò:</strong> Thought leadership, B2B networking.</p>
<ul>
<li><strong>Ngôn ngữ:</strong> Chuyên nghiệp nhưng engaging.</li>
<li><strong>Format:</strong> Hook hấp dẫn > 2-3 insights chính > CTA rõ > 3-5 hashtags.</li>
<li><strong>Nội dung:</strong> Bài viết chuyên sâu, chia sẻ thành tựu, quan điểm công nghiệp, hợp tác mới.</li>
<li><strong>Tránh:</strong> Quảng cáo trực tiếp, hard-selling quá mức.</li>
</ul>
</div>
<div class="subsection">
<h3>Facebook</h3>
<p><strong>Vai trò:</strong> Community building, employer branding.</p>
<ul>
<li><strong>Ngôn ngữ:</strong> Ấm áp nhưng vẫn chuyên nghiệp.</li>
<li><strong>Nội dung:</strong> Hình ảnh đội nhóm, sự kiện, hậu trường công ty.</li>
<li><strong>Visual:</strong> Ảnh thực tế, chất lượng cao, có người tham gia.</li>
<li><strong>Emoji:</strong> Dùng tiết chế, tối đa 2-3 emoji mỗi bài để tăng sự thân thiện.</li>
</ul>
</div>
<div class="subsection">
<h3>Email Communication</h3>
<p><strong>Vai trò:</strong> Sales outreach, chăm sóc khách hàng.</p>
<ul>
<li><strong>Tiêu đề:</strong> Rõ ràng, tập trung lợi ích, tránh clickbait.</li>
<li><strong>Lời chào (Salutation):</strong> "Kính gửi [Chức danh] [Tên]".</li>
<li><strong>Lời kết (Closing):</strong> "Trân trọng,".</li>
<li><strong>Chữ ký (Signature):</strong> Tên, chức danh, TECOTEC Group.</li>
</ul>
</div>
<div class="subsection">
<h3>Bid Proposals (Hồ sơ dự thầu)</h3>
<p><strong>Vai trò:</strong> Giành dự án, trình diễn năng lực.</p>
<ul>
<li><strong>Ngôn ngữ:</strong> Rất trang trọng, dựa trên chứng cứ.</li>
<li><strong>Executive Summary:</strong> Trình bày độc lập, lợi ích chủ chốt trước tiên.</li>
<li><strong>Chứng minh năng lực (Credibility):</strong> Trình bày logo đối tác lớn, chứng chỉ, dẫn chứng công trình.</li>
<li><strong>Phòng ngừa:</strong> KHÔNG phóng đại năng lực, đặc biệt trong lĩnh vực Quốc phòng; KHÔNG nêu tên khách hàng khác trừ khi có phép.</li>
</ul>
</div>
</section>
<!-- Section 10 -->
<section id="section-10" class="content-section">
<h2 class="section-title">10. CRISIS VOICE MATRIX</h2>
<div class="callout">
<h3>Ma trận giọng điệu trong khủng hoảng</h3>
</div>
<div class="subsection">
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Cấp độ</th>
<th>Đặc điểm tình huống</th>
<th>Người phát ngôn</th>
<th>Từ ngữ nên dùng</th>
<th>Từ ngữ nên tránh</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Cấp 0 (Bình thường)</strong></td>
<td>Hoạt động kinh doanh bình thường, không có sự cố nổi cộm.</td>
<td>Nhân viên MarCom hoặc đại diện thường xuyên.</td>
<td>Ngôn từ theo tiêu chuẩn thương hiệu (chính xác, chuyên nghiệp, thân thiện).</td>
<td>Không có quy định đặc biệt; tiếp tục giọng điệu chuẩn.</td>
</tr>
<tr>
<td><strong>Cấp 1 (Cảnh báo nhẹ)</strong></td>
<td>Xuất hiện tin đồn hoặc sự cố nhỏ chưa rõ ràng (ví dụ: lỗi kỹ thuật nội bộ, góp ý trên mạng xã hội chưa xác minh).</td>
<td>Quản lý MarCom hoặc bộ phận liên quan.</td>
<td>Giọng điệu cẩn trọng, đưa thông tin thực tế, khẳng định sẽ kiểm tra.</td>
<td>Tránh suy diễn, đưa tin chưa kiểm chứng, phủ nhận vội vàng.</td>
</tr>
<tr>
<td><strong>Cấp 2 (Khủng hoảng trung bình)</strong></td>
<td>Sự cố được xác nhận và ảnh hưởng đến một số đối tác, khách hàng; có sự quan tâm hạn chế của truyền thông.</td>
<td>Lãnh đạo cấp cao (Giám đốc, Trưởng ban MarCom).</td>
<td>Xin lỗi có trách nhiệm, thừa nhận vấn đề rõ ràng, cam kết giải pháp.</td>
<td>Tránh đổ lỗi cho bên khác, biện hộ chung chung, im lặng hoặc chối bỏ.</td>
</tr>
<tr>
<td><strong>Cấp 3 (Khủng hoảng nghiêm trọng)</strong></td>
<td>Vấn đề nghiêm trọng, được công chúng và media chú ý lớn (ví dụ: sự cố chất lượng lớn, bê bối truyền thông).</td>
<td>Tổng Giám đốc/CEO hoặc Ban điều hành cao nhất.</td>
<td>Minh bạch, nghiêm túc, nhấn mạnh cam kết khắc phục ngay và chịu trách nhiệm.</td>
<td>Tránh ngôn từ giảm nhẹ, biện hộ miễn cưỡng, từ chối trả lời hoặc nói vòng vo.</td>
</tr>
</tbody>
</table>
</div>
<div class="callout warning">
<p><strong>Lưu ý:</strong> Trong khủng hoảng, tốc độ và minh bạch là quan trọng. Mỗi cấp độ trên cho thấy mức độ nghiêm trọng và cách phản ứng phù hợp, từ bình tĩnh theo dõi đến đối thoại công khai chính thức. Người phát ngôn cấp càng cao thì ngôn ngữ càng cần nghiêm túc và chính xác.</p>
</div>
</div>
</section>
<!-- Section 11 -->
<section id="section-11" class="content-section">
<h2 class="section-title">11. DO'S & DON'TS</h2>
<div class="callout">
<h3>Những điều nên và không nên</h3>
</div>
<div class="dos-donts-grid">
<div class="dos-section">
<h3 class="dos-title">Do's – Nên làm</h3>
<ul class="checklist">
<li>Luôn xác thực thông tin và dẫn chứng bằng bằng chứng cụ thể (số liệu, chứng nhận, tên khách hàng uy tín).</li>
<li>Sử dụng đúng thuật ngữ kỹ thuật trong ngành đo lường.</li>
<li>Tập trung vào giải pháp và giá trị mang lại cho đối tác, không chỉ bán sản phẩm.</li>
<li>Dùng từ "đối tác", "Quý Công ty" thay "khách hàng" trong bối cảnh dài hạn.</li>
<li>Nhấn mạnh dịch vụ hậu mãi và cam kết đồng hành lâu dài.</li>
<li>Điều chỉnh giọng điệu phù hợp với từng đối tượng (ví dụ: trang trọng với khách hàng B2B, thân thiện với cộng đồng).</li>
<li>Trích dẫn rõ nguồn khi sử dụng dữ liệu hoặc trích dẫn từ bên thứ ba.</li>
<li>Đọc kỹ và hiệu đính nội dung trước khi xuất bản.</li>
</ul>
</div>
<div class="donts-section">
<h3 class="donts-title">Don'ts – Không nên làm</h3>
<ul class="checklist error">
<li>KHÔNG dùng các từ phóng đại mà không có chứng cứ (như "hàng đầu", "số 1", "tốt nhất").</li>
<li>KHÔNG phóng đại năng lực (đặc biệt trong lĩnh vực Quốc phòng – tránh tuyên bố quá mức).</li>
<li>KHÔNG nhầm lẫn thuật ngữ cơ bản (ví dụ: "hiệu chuẩn" và "kiểm định" phải dùng đúng).</li>
<li>KHÔNG sử dụng từ ngữ marketing quá cường điệu (ví dụ: "revolutionary") khi chưa có bằng chứng.</li>
<li>KHÔNG tiết lộ tên dự án hoặc thông tin nhạy cảm của khách hàng (nhất là lĩnh vực Quốc phòng) trừ khi được cho phép.</li>
<li>KHÔNG sao chép nội dung từ nguồn khác mà không điều chỉnh giọng điệu và kiểm tra tính chính xác kỹ thuật.</li>
<li>KHÔNG dùng quá nhiều emoji, đặc biệt trong nội dung chính thức hoặc trên LinkedIn.</li>
<li>KHÔNG sử dụng phương pháp bán hàng rắn (hard-sell); tập trung giáo dục, xây dựng niềm tin và quan hệ lâu dài.</li>
</ul>
</div>
</div>
</section>
<!-- Section 12 -->
<section id="section-12" class="content-section">
<h2 class="section-title">12. CONTENT EXAMPLES</h2>
<div class="callout">
<h3>Ví dụ mẫu nội dung</h3>
</div>
<div class="subsection">
<h3>Ví dụ ĐÚNG (LinkedIn Post):</h3>
<div class="example-box correct">
<p>"Gần 30 năm đồng hành cùng ngành công nghiệp Việt Nam. TECOTEC Group vừa chính thức ký kết hợp tác chiến lược với [Partner] – đánh dấu bước tiến mới trong việc mang công nghệ đo lường tiên tiến từ [Country] đến các doanh nghiệp sản xuất trong nước.</p>
<p>TECOTEC #MeasuringEverything #StrategicPartnership"</p>
</div>
</div>
<div class="subsection">
<h3>Ví dụ SAI (Cần tránh):</h3>
<div class="example-box incorrect">
<p>"TECOTEC là đơn vị hàng đầu Việt Nam!!! Máy móc hiện đại nhất, giá rẻ nhất. Liên hệ ngay để được giảm giá 50%!!!"</p>
</div>
<div class="callout error">
<h4>Lỗi:</h4>
<ul>
<li>"Hàng đầu" – superlative thiếu chứng cứ.</li>
<li>"Hiện đại nhất", "Giá rẻ nhất" – không thể chứng minh được.</li>
<li>Dùng quá nhiều dấu "!!!" và nêu "Giảm giá 50%" – phương pháp quảng cáo cứng nhắc, thiếu chuyên nghiệp, không tập trung vào giá trị cho khách hàng.</li>
</ul>
</div>
</div>
</section>
<!-- Section 13 -->
<section id="section-13" class="content-section">
<h2 class="section-title">13. QUICK REFERENCE</h2>
<div class="callout">
<h3>Tra cứu nhanh</h3>
</div>
<div class="subsection">
<h3>Brand Essence (tinh túy thương hiệu)</h3>
<div class="highlight-box">
<p>"Chuyên gia kỹ thuật đáng tin cậy – đồng hành giải quyết bài toán đo lường phức tạp với sự am hiểu sâu sắc và cam kết lâu dài."</p>
</div>
</div>
<div class="subsection">
<h3>5 Từ khóa tính cách</h3>
<div class="personality-tags">
<span class="tag">AUTHORITATIVE</span>
<span class="tag">RELIABLE</span>
<span class="tag">PRECISE</span>
<span class="tag">PROGRESSIVE</span>
<span class="tag">PARTNER-ORIENTED</span>
</div>
</div>
<div class="subsection">
<h3>Màu sắc nhanh</h3>
<div class="quick-colors">
<div class="quick-color">
<div class="color-badge" style="background-color: #FF9900;"></div>
<span>Orange #FF9900</span>
</div>
<div class="quick-color">
<div class="color-badge" style="background-color: #146EB4;"></div>
<span>Blue #146EB4</span>
</div>
<div class="quick-color">
<div class="color-badge" style="background-color: #F4F6F8; border: 1px solid #ddd;"></div>
<span>Off-White #F4F6F8</span>
</div>
</div>
</div>
<div class="subsection">
<h3>Voice Tone Cheat Sheet</h3>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Luôn là...</th>
<th>Không bao giờ...</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chuyên nghiệp, trang trọng</td>
<td>Cứng nhắc, xa cách</td>
</tr>
<tr>
<td>Tự tin, evidence-based</td>
<td>Kiêu ngạo, phô trương</td>
</tr>
<tr>
<td>Kỹ thuật, chính xác</td>
<td>Khô khan, khó hiểu</td>
</tr>
<tr>
<td>Hữu ích, solution-oriented</td>
<td>Chỉ nói về mình</td>
</tr>
<tr>
<td>Ấm áp, tôn trọng</td>
<td>Suồng sã, thiếu chuyên nghiệp</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<p>Câu hỏi về Brand Guidelines? Liên hệ Phòng Marketing & Communications – TECOTEC Group</p>
<p><a href="https://tecotec.com.vn" target="_blank" rel="noopener noreferrer">tecotec.com.vn</a></p>
</div>
</footer>
</main>
<!-- Back to Top Button -->
<button class="back-to-top" id="backToTop" aria-label="Back to top">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
</button>
<!-- Copy Tooltip -->
<div class="copy-tooltip" id="copyTooltip">Copied!</div>
<script src="main.js"></script>
</body>
</html>