/* ═══════════════════════════════════════════════════════════════════════ TLA Archives Network — ชั้นเชื่อมระหว่างเทมเพลตหน้าเว็บกับ Kendo UI หน้านี้เป็น standalone ไม่ได้ extend layout ของธีมเว็บหลัก จึงไม่โหลด style-3.1.min.css และไม่มีอะไรชนกับสไตล์ของหน้าอื่น เหลือแค่สองชั้นที่ ต้องจูนให้เข้ากัน คือ main.css ของเทมเพลต กับ default-main.css ของ Kendo ลำดับโหลด (ดู network/_head.php): bootstrap → kendo → main.css → ไฟล์นี้ ไฟล์นี้ต้องอยู่ท้ายสุดเสมอ เพราะทำหน้าที่ทับทั้งสองชั้นด้านบน ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── 1) รีแบรนด์เทมเพลต — ส้มท่องเที่ยว → ม่วง TLA main.css เรียกใช้ var(--tp-theme-1) 224 จุด และไม่มีสีฝังตายที่ไหนเลย การประกาศทับที่ :root จึงเปลี่ยนสีทั้งหน้าได้โดยไม่ต้องแตะไฟล์เทมเพลต (ค่าสีอ้างจาก tla-brand.css ซึ่งเป็นชุดสีกลางของเว็บ) ─────────────────────────────────────────────────────────────────────── */ :root { --tp-theme-1: #4C1D95; /* ม่วงหลัก — ปุ่ม ลิงก์ ไฮไลต์ */ --tp-common-black: #2E1065; /* หัวเรื่องและตัวหนา */ --tp-common-white-2: #FBF7EF; /* กระดาษสาครีม — พื้นหลังสลับ */ --tp-common-yellow: #C2A14A; /* ทองเก่า — ป้ายเน้น */ --tp-grey-1: #5B5168; --tp-grey-3: #F6F4FB; --tp-border-1: rgba(46, 16, 101, .10); /* Onest ไม่มีสระ/วรรณยุกต์ไทย เบราว์เซอร์จะหยิบตัวถัดไปในสแต็กมาเติม ให้เอง เรียงแบบนี้จึงได้ตัวเลขและอังกฤษเป็น Onest ส่วนไทยเป็น Sarabun */ --tp-ff-body: 'Onest', 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', sans-serif; --tp-ff-heading: 'Onest', 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', sans-serif; --tp-ff-p: 'Onest', 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', sans-serif; --tp-ff-inter: 'Inter', 'Sarabun', 'Noto Sans Thai', sans-serif; /* ── Kendo ตามสีเดียวกัน ────────────────────────────────────────── Kendo เรนเดอร์ popup (ดรอปดาวน์ หน้าต่าง คำแนะนำ) ไว้ที่ ไม่ใช่ในกล่องที่เรียกใช้ ตัวแปรจึงต้องประกาศที่ :root ไม่ใช่ที่ wrapper ไม่งั้นเมนูที่เด้งออกมาจะกลับไปเป็นสีส้มมาตรฐานของ Kendo */ --kendo-color-primary: #4C1D95; --kendo-color-primary-hover: #5B21B6; --kendo-color-primary-active: #3B1478; --kendo-color-primary-emphasis: #6D28D9; --kendo-color-primary-subtle: #EDE9FE; --kendo-color-primary-subtle-hover: #DDD6FE; --kendo-color-primary-subtle-active: #C4B5FD; --kendo-color-primary-on-subtle: #2E1065; --kendo-color-border: rgba(46, 16, 101, .14); --kendo-font-family: var(--tp-ff-body); --kendo-font-size: 15px; --kendo-border-radius-md: 10px; } /* ตัวอักษรไทยมีสระบนล่างและตัวอักษรเล็กกว่าละตินที่ขนาด px เท่ากัน ค่าตั้งต้นของเทมเพลต (14px / 26px) จึงอ่านยากเมื่อเป็นภาษาไทย */ .tla-net-body { font-family: var(--tp-ff-body); font-size: 15.5px; line-height: 1.75; } /* หน้านี้ซ่อน/แสดงมุมมองด้วยแอตทริบิวต์ hidden แต่กล่องบางอันถูกกำหนด display เป็น grid/flex ไว้ ซึ่งชนะ display:none ที่มากับ hidden จึงต้องประกาศทับให้ hidden ชนะเสมอ */ .tla-net-body [hidden] { display: none !important; } /* แถบเมนูติดขอบบนแบบ fixed จึงบังเนื้อหาที่อยู่ใต้มันพอดี ลิงก์ข้ามส่วนใน หน้าเดียวกันต้องเผื่อระยะไว้ ไม่งั้นหัวข้อที่กระโดดไปจะหายอยู่หลังแถบเมนู */ #net-search, #net-types, #net-results, #net-stats, #net-news, #net-repos { scroll-margin-top: 100px; } /* .tp-btn ของเทมเพลตมีขนาดเดียว หน้านี้ต้องการปุ่มเล็กในแถบเครื่องมือด้วย */ .tp-btn.btn-sm, .tp-btn-border.btn-sm { padding: 6px 18px; font-size: 14px; line-height: 1.9; } .tla-net-body h1, .tla-net-body h2, .tla-net-body h3, .tla-net-body h4, .tla-net-body h5, .tla-net-body h6 { line-height: 1.45; } /* ตัวเลข พ.ศ. และจำนวนระเบียนต้องกว้างเท่ากันทุกตัวเพื่อให้คอลัมน์ตรง */ .tla-net-num { font-variant-numeric: tabular-nums; } /* ─────────────────────────────────────────────────────────────────────── 1.1) แทนไอคอน Font Awesome Pro เทมเพลตวาดลูกศรบางจุดด้วยฟอนต์ Font Awesome Pro ซึ่งเป็นฟอนต์มีลิขสิทธิ์ หน้านี้จึงไม่ได้โหลดมาด้วย — ไอคอนอื่นในเทมเพลตเป็น inline SVG อยู่แล้ว เหลือแค่จุดนี้จุดเดียวที่ต้องวาดเอง ไม่งั้นจะขึ้นเป็นสี่เหลี่ยมว่าง ─────────────────────────────────────────────────────────────────────── */ .tla-net-body .tp-header-top-menu-item > span::after { content: ""; top: 50%; right: 4px; width: 7px; height: 7px; margin: -5px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } /* ─────────────────────────────────────────────────────────────────────── 1.2) โลโก้และหัวเรื่อง เทมเพลตออกแบบมาสำหรับโลโก้แนวนอน แต่ตราสมาคมเป็นวงกลม ถ้ากำหนดแค่ความกว้าง ตราจะสูงจนล้นออกนอกแถบเมนู ต้องคุมด้วยความสูงแทน ─────────────────────────────────────────────────────────────────────── */ .tla-net-body .tp-header-logo img, .tla-net-body .tp-offcanvas-logo img, .tla-net-body .tp-footer-logo img { width: auto; max-height: 62px; } @media (max-width: 767.98px) { .tla-net-body .tp-header-logo img { max-height: 46px; } } /* ชื่อภาษาอังกฤษเป็นบรรทัดรอง ไม่ใช่คำเน้นกลางประโยคแบบที่เทมเพลตตั้งไว้ ถ้าปล่อยเป็น inline สองภาษาจะไหลต่อกันเป็นประโยคเดียวบนจอแคบ */ .tla-net-body .tp-hero-3-content h1 span { display: block; margin-top: .25em; font-size: .62em; letter-spacing: .01em; } /* ─────────────────────────────────────────────────────────────────────── 2) พรีโหลด — เทมเพลตเดิมใช้ภาพเครื่องบินบินรอบโลก ไม่เข้ากับงานจดหมายเหตุ ─────────────────────────────────────────────────────────────────────── */ #loading { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--tp-common-white-2); } #loading .tla-net-loader { width: 46px; height: 46px; border: 3px solid var(--tp-border-1); border-top-color: var(--tp-theme-1); border-radius: 50%; animation: tla-net-spin .8s linear infinite; } @keyframes tla-net-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #loading .tla-net-loader { animation-duration: 3s; } } /* ─────────────────────────────────────────────────────────────────────── 3) แถบค้นหาใน hero ใช้โครง .tp-booking-* ของเทมเพลตเดิม แต่ช่องที่สองกับสามเป็นวิดเจ็ต Kendo (ดรอปดาวน์ประเภท และแถบเลื่อนช่วงปี) ซึ่งมีกรอบและพื้นหลังของ ตัวเอง ต้องถอดออกให้กลืนไปกับช่องกรอกอื่นในแถบเดียวกัน ─────────────────────────────────────────────────────────────────────── */ .tla-net-search .k-input, .tla-net-search .k-picker { border: 0; background: none; box-shadow: none; padding: 0; font-size: 16px; color: var(--tp-common-black); } .tla-net-search .k-input:focus-within, .tla-net-search .k-picker:focus-within { box-shadow: none; outline: none; } .tla-net-search .k-input-inner { padding: 0; } .tla-net-search .k-input-button, .tla-net-search .k-input-suffix { background: none; border: 0; color: var(--tp-grey-1); } /* แถบเลื่อนช่วงปีอยู่ในดรอปดาวน์ ต้องกว้างพอถึงจะลากถนัด */ .tla-net-yearbox { min-width: 300px; padding: 20px 24px 6px; } .tla-net-yearbox .k-slider { width: 100%; } .tla-net-yearbox-val { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 14px; color: var(--tp-grey-1); } .tla-net-yearbox-val b { color: var(--tp-theme-1); font-variant-numeric: tabular-nums; } /* คำค้นแนะนำใต้ช่องค้นหา */ .tla-net-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* ─────────────────────────────────────────────────────────────────────── 4) การ์ดผลการค้นหา — ต่อยอดจาก .tp-tour-item ของเทมเพลต การ์ดทัวร์มีดาวรีวิวกับราคาซึ่งไม่มีในระเบียนจดหมายเหตุ จึงเหลือแค่ ภาพ ป้ายกำกับ ชื่อเรื่อง คำอธิบายย่อ และลิงก์ไปต้นฉบับ ─────────────────────────────────────────────────────────────────────── */ .tla-net-card { height: 100%; display: flex; flex-direction: column; background: var(--tp-common-white); border: 1px solid var(--tp-border-1); border-radius: 16px; overflow: hidden; transition: transform .3s, box-shadow .3s; cursor: pointer; } .tla-net-card:hover { transform: translateY(-6px); box-shadow: 0 16px 38px rgba(46, 16, 101, .12); } .tla-net-card-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--tp-grey-3) center/cover no-repeat; display: grid; place-items: center; font-size: 42px; } .tla-net-card-badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 999px; background: var(--tp-theme-1); color: #fff; font-size: 12px; line-height: 1.8; } .tla-net-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 16px; } .tla-net-card-body h3 { font-size: 18px; line-height: 1.5; margin: 0 0 8px; } .tla-net-card-body h3 mark, .tla-net-card-desc mark { padding: 0; background: #FDF3D0; color: inherit; } .tla-net-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; font-size: 14.5px; color: var(--tp-grey-1); } .tla-net-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .tla-net-tag { padding: 3px 10px; border: 1px solid var(--tp-border-1); border-radius: 999px; background: var(--tp-grey-3); font-size: 12.5px; line-height: 1.9; color: var(--tp-grey-1); } .tla-net-tag.is-type { border-color: #DDD6FE; background: #EDE9FE; color: #4C1D95; } .tla-net-tag.is-year { border-color: #E8DCBC; background: #FBF3DE; color: #7A6224; } .tla-net-tag.is-dv { border-color: #BFDBFE; background: #E4EEFC; color: #1D4E89; } .tla-net-card-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tp-border-1); } /* ลิงก์นี้พาออกนอกระบบ จึงต้องดูต่างจากตัวการ์ดที่กดแล้วเปิดรายละเอียด */ .tla-net-src { font-size: 13.5px; color: var(--tp-theme-1); } .tla-net-src:hover { text-decoration: underline; } /* มุมมองรายการ — ภาพไปอยู่ซ้าย เนื้อหาอยู่ขวา */ .tla-net-results.is-list .tla-net-card { flex-direction: row; } .tla-net-results.is-list .tla-net-card-thumb { flex: 0 0 210px; aspect-ratio: auto; } @media (max-width: 575.98px) { .tla-net-results.is-list .tla-net-card { flex-direction: column; } .tla-net-results.is-list .tla-net-card-thumb { flex: none; aspect-ratio: 16 / 9; } } /* โครงร่างระหว่างรอผล — เขียนเองเพราะต้องได้สัดส่วนเดียวกับการ์ดจริง */ .tla-net-skel { height: 150px; margin-bottom: 20px; border-radius: 16px; background: linear-gradient(90deg, var(--tp-grey-3) 25%, #EEEAF7 37%, var(--tp-grey-3) 63%); background-size: 400% 100%; animation: tla-net-shimmer 1.3s ease infinite; } @keyframes tla-net-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .tla-net-skel { animation: none; } } .tla-net-empty { padding: 60px 24px; border: 1px dashed var(--tp-border-1); border-radius: 16px; background: var(--tp-common-white); text-align: center; color: var(--tp-grey-1); } .tla-net-empty b { display: block; margin-bottom: 6px; font-size: 18px; color: var(--tp-common-black); } .tla-net-empty.is-error { border-color: #F3C6C0; background: #FCF0EE; } /* ─────────────────────────────────────────────────────────────────────── 5) แถบตัวกรองด้านข้าง — kendoExpansionPanel หนึ่งอันต่อหนึ่งกลุ่ม facet ─────────────────────────────────────────────────────────────────────── */ .tla-net-facets { position: sticky; top: 110px; } .tla-net-facets .k-expander { margin-bottom: 10px; border: 1px solid var(--tp-border-1); border-radius: 12px; background: var(--tp-common-white); overflow: hidden; } .tla-net-facets .k-expander-title { font-family: var(--tp-ff-heading); font-size: 15px; font-weight: 600; text-transform: none; color: var(--tp-common-black); } .tla-net-facet-list { max-height: 268px; overflow-y: auto; } .tla-net-facet-list label { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 14.5px; color: var(--tp-grey-1); cursor: pointer; } .tla-net-facet-list label:hover { color: var(--tp-theme-1); } .tla-net-facet-list .t { flex: 1; } .tla-net-facet-list .c { font-size: 12.5px; color: var(--tp-grey-2); font-variant-numeric: tabular-nums; } /* ─────────────────────────────────────────────────────────────────────── 6) แถบเครื่องมือเหนือผลลัพธ์ + ตัวกรองที่เลือกอยู่ (kendoChipList) ─────────────────────────────────────────────────────────────────────── */ .tla-net-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; } .tla-net-found { flex: 1; min-width: 200px; color: var(--tp-grey-1); } .tla-net-found b { color: var(--tp-common-black); font-variant-numeric: tabular-nums; } .tla-net-didyou { flex-basis: 100%; color: var(--tp-grey-1); } .tla-net-didyou button { border: 0; background: none; padding: 0; color: var(--tp-theme-1); text-decoration: underline; } .tla-net-active:not(:empty) { margin-bottom: 16px; } /* ─────────────────────────────────────────────────────────────────────── 7) มุมมองเส้นเวลา (kendoTimeline) และแผนที่ (kendoMap) ─────────────────────────────────────────────────────────────────────── */ .tla-net-timeline .k-timeline-date, .tla-net-timeline .k-timeline-flag { font-family: var(--tp-ff-heading); font-weight: 600; font-variant-numeric: tabular-nums; } .tla-net-timeline .k-timeline-flag { background: var(--tp-theme-1); } .tla-net-timeline .k-card { border-radius: 12px; border-color: var(--tp-border-1); } .tla-net-timeline .k-card-title { font-size: 16px; line-height: 1.5; } /* ทั้งการ์ดกดได้เพื่อกรองเฉพาะช่วงปีนั้น ต้องบอกด้วยสายตาว่ากดได้ */ .tla-net-timeline .k-timeline-card { cursor: pointer; } .tla-net-timeline .k-timeline-card:hover .k-card { border-color: var(--tp-theme-1); } .tla-net-timeline .k-card-body > .k-card-description { color: var(--tp-theme-1); } .tla-net-mapwrap { display: grid; grid-template-columns: 1fr 320px; gap: 16px; } @media (max-width: 991.98px) { .tla-net-mapwrap { grid-template-columns: 1fr; } } #net-map { height: 560px; border: 1px solid var(--tp-border-1); border-radius: 16px; overflow: hidden; } .tla-net-mapside { max-height: 560px; overflow-y: auto; padding-right: 4px; } .tla-net-mapside article { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--tp-border-1); border-radius: 12px; background: var(--tp-common-white); cursor: pointer; } .tla-net-mapside article:hover { border-color: var(--tp-theme-1); } .tla-net-mapside h4 { margin: 0 0 4px; font-size: 15px; line-height: 1.5; } /* ─────────────────────────────────────────────────────────────────────── 8) หน้าต่างรายละเอียดระเบียน (kendoWindow) ─────────────────────────────────────────────────────────────────────── */ .k-window-titlebar { background: var(--tp-theme-1); color: #fff; border-bottom: 0; } .k-window-titlebar .k-window-title { font-family: var(--tp-ff-heading); font-weight: 600; } .k-window-titlebar .k-window-actions .k-button { color: #fff; } .tla-net-detail { padding: 4px 2px 8px; } .tla-net-detail h3 { font-size: 20px; line-height: 1.5; margin-bottom: 12px; } .tla-net-detail-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--tp-border-1); font-size: 14.5px; } .tla-net-detail-row dt { color: var(--tp-grey-1); font-weight: 400; } .tla-net-detail-row dd { margin: 0; color: var(--tp-common-black); } @media (max-width: 575.98px) { .tla-net-detail-row { grid-template-columns: 1fr; gap: 2px; } } /* ─────────────────────────────────────────────────────────────────────── 9) แบ่งหน้า (kendoPager) — ธีมเริ่มต้นเป็นกล่องเทาเต็มความกว้าง หน้านี้ต้องการให้ลอยอยู่กลางหน้าแบบไม่มีพื้นหลัง ─────────────────────────────────────────────────────────────────────── */ .tla-net-pager.k-pager { justify-content: center; margin-top: 26px; border: 0; background: none; font-size: 14.5px; } .tla-net-pager .k-pager-info { color: var(--tp-grey-1); } /* ─────────────────────────────────────────────────────────────────────── 10) ส่วนอื่นที่ยืมโครงเทมเพลตมาแต่ใส่เนื้อหาจดหมายเหตุ ─────────────────────────────────────────────────────────────────────── */ /* ── การ์ดคอลเลกชัน (ยืมโครง .tp-destination-4-item) ───────────────────── ภาพปกมาจาก Omeka ตามที่ผู้ดูแลคลังใส่ไว้ สัดส่วนจึงไม่เท่ากันเลย ถ้าปล่อยตามภาพจริง การ์ดในแถวเดียวกันจะสูงไม่เท่ากันจนกริดเบี้ยว ─────────────────────────────────────────────────────────────────────── */ .tla-net-body .tp-destination-4-item .tp-destination-one-thumb { aspect-ratio: 3 / 4; border-radius: 16px; background: var(--tp-grey-3); } .tla-net-body .tp-destination-4-item .tp-destination-one-thumb > img, .tla-net-body .tp-destination-4-item .tla-net-card-thumb { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; } /* เอกสารจดหมายเหตุส่วนใหญ่เป็นกระดาษสีอ่อน ชื่อคอลเลกชันเป็นตัวอักษรสีขาว จึงอ่านไม่ออกถ้าไม่มีฉากหลังไล่เฉดรองไว้ */ .tla-net-body .tp-destination-4-item .tp-destination-one-thumb::after { content: ""; position: absolute; inset: auto 0 0; height: 58%; border-radius: 0 0 16px 16px; background: linear-gradient(to top, rgba(46, 16, 101, .9), rgba(46, 16, 101, 0)); pointer-events: none; } .tla-net-body .tp-destination-4-item .tp-destination-title { font-size: 20px; } .tla-net-body .tp-destination-4-item .tp-destination-one-left span { color: rgba(255, 255, 255, .8); } /* ป้ายประเภททรัพยากรในสไลด์ (kendoScrollView) */ .tla-net-typeitem { display: block; padding: 20px 10px 16px; border: 1px solid var(--tp-border-1); border-radius: 16px; background: var(--tp-common-white); text-align: center; transition: transform .25s, border-color .25s; } .tla-net-typeitem:hover, .tla-net-typeitem.is-on { transform: translateY(-5px); border-color: var(--tp-theme-1); } .tla-net-typeitem .ico { font-size: 30px; } .tla-net-typeitem .t { display: block; margin-top: 6px; font-size: 14.5px; color: var(--tp-common-black); } .tla-net-typeitem .c { font-size: 12.5px; color: var(--tp-grey-2); font-variant-numeric: tabular-nums; } /* สไลด์ของ Kendo วางไอเท็มด้วย absolute จึงต้องกำหนดความสูงเอง */ .tla-net-scroll.k-scrollview { height: 156px; border: 0; background: none; } .tla-net-scroll .k-scrollview-wrap { border-radius: 0; } .tla-net-scroll-page { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 4px; } @media (max-width: 1199.98px) { .tla-net-scroll-page { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767.98px) { .tla-net-scroll-page { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 479.98px) { .tla-net-scroll-page { grid-template-columns: repeat(2, 1fr); } } /* แถบข่าวด่วน — วิ่งจากขวาไปซ้าย หยุดเมื่อชี้เมาส์ */ .tla-net-breaking { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 999px; background: var(--tp-common-black); color: #fff; overflow: hidden; } .tla-net-breaking-tag { flex: none; padding: 2px 12px; border-radius: 999px; background: var(--tp-common-yellow); color: #2E1065; font-size: 13px; line-height: 1.9; } .tla-net-breaking-track { flex: 1; overflow: hidden; white-space: nowrap; } .tla-net-breaking-track > span { display: inline-block; padding-left: 100%; animation: tla-net-marquee 26s linear infinite; } .tla-net-breaking:hover .tla-net-breaking-track > span { animation-play-state: paused; } .tla-net-breaking-track a { color: #fff; margin-right: 44px; } .tla-net-breaking-track a:hover { color: var(--tp-common-yellow); } @keyframes tla-net-marquee { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .tla-net-breaking-track > span { animation: none; padding-left: 0; } } /* การ์ดสถาบันในเครือข่าย */ .tla-net-repo { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px 18px; border: 1px solid var(--tp-border-1); border-radius: 14px; background: var(--tp-common-white); } .tla-net-repo .ini { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #EDE9FE; color: var(--tp-theme-1); font-size: 18px; font-weight: 600; } .tla-net-repo .t { display: block; color: var(--tp-common-black); line-height: 1.5; } .tla-net-repo .c { font-size: 13px; color: var(--tp-grey-2); font-variant-numeric: tabular-nums; } /* ป้ายบอกว่าโหลดข้อมูลจากต้นทางไม่ได้ */ .tla-net-notice { padding: 16px 20px; border: 1px solid #F0DFA8; border-radius: 12px; background: #FDF8E9; color: #7A6224; } /* WOW.js ตั้ง visibility:hidden ไว้ก่อนแอนิเมชันเริ่ม วิดเจ็ต Kendo ที่ถูก สร้างตอนกล่องยังซ่อนอยู่จะวัดความกว้างได้ 0 แล้วเรนเดอร์ผิดขนาด จึงห้ามครอบ .wow ทับกล่องของวิดเจ็ต และกันไว้อีกชั้นตรงนี้ */ .tla-net-kendo-host { visibility: visible !important; animation: none !important; }