kokjan/frontend/views/site/index.php

918 lines
31 KiB
PHP

<?php
ini_set("allow_url_fopen", 1);
/* @var $this yii\web\View */
use common\models\CmsEgp;
use common\models\CmsFile;
use common\models\CmsFileCategory;
use common\models\CmsPage;
use common\models\CmsSlide;
use common\models\Ebook;
use common\models\EbookCategory;
use yii\data\ActiveDataProvider;
use yii\helpers\Html;
use yii\bootstrap4\ActiveForm;
use yii\helpers\Url;
use yii\widgets\ListView;
use yii\widgets\Pjax;
use yii2fullcalendar\yii2fullcalendar;
$assets = Yii::$app->assetManager->getPublishedUrl('@frontend/themes/mali/assets');
$this->title = 'องค์การบริหารส่วนตำบลโคกจาน';
?>
<?php // $this->render('_popup')
?>
<!-- Start Search Section -->
<style>
.sh8 {
--or: #f97316;
--or2: #ea6c00;
--orl: #fff7ed;
--tx1: #1c1917;
--tx2: #78716c;
--tx3: #b8b0a8;
--bd: #ede9e6;
--wh: #ffffff;
}
.sh8 {
width: 100%;
background: #fafaf9;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px 45px; /* Compact padding */
position: relative;
isolation: isolate;
overflow: hidden;
}
.sh8-blob {
position: absolute;
width: 600px; height: 300px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse, #fff0e2 0%, #fafaf9 65%);
pointer-events: none;
z-index: 0;
}
.sh8-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 680px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.sh8-icon {
width: 42px; height: 42px; /* Compact icon */
border-radius: 12px;
background: var(--or);
display: flex; align-items: center; justify-content: center;
margin-bottom: 12px;
box-shadow: 0 6px 18px rgba(249,115,22,0.25);
}
.sh8-icon i { color: #fff; font-size: 1.1rem; }
.sh8-title {
font-family: 'Kanit', sans-serif;
font-size: 1.8rem; /* Scaled down */
font-weight: 800;
color: var(--tx1);
margin-bottom: 4px;
letter-spacing: -0.5px;
}
.sh8-title span { color: var(--or); }
.sh8-sub {
font-size: 0.85rem;
color: var(--tx2);
margin-bottom: 25px;
}
.sh8-bar {
width: 100%;
display: flex;
align-items: center;
background: var(--wh);
border: 2px solid var(--bd);
border-radius: 50px; /* Rounded pill */
padding: 6px 6px 6px 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.sh8-bar:focus-within {
border-color: var(--or);
box-shadow: 0 8px 25px rgba(249,115,22,0.12);
}
.sh8-ico { color: var(--tx3); margin-right: 10px; }
.sh8-bar .form-group { flex: 1; margin: 0 !important; }
.sh8-bar input[type="text"] {
width: 100%;
border: none !important;
font-size: 0.95rem;
padding: 8px 0 !important;
}
.sh8-btn {
background: var(--or);
color: #fff;
border: none;
border-radius: 50px;
padding: 10px 25px;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: 0.2s;
}
.sh8-btn:hover { background: var(--or2); transform: scale(1.02); }
.sh8-divider {
display: flex; align-items: center; gap: 10px;
margin-top: 20px; width: 100%;
}
.sh8-divider-line { flex: 1; height: 1px; background: var(--bd); }
.sh8-divider-txt { font-size: 0.7rem; color: var(--tx3); text-transform: uppercase; letter-spacing: 1px; }
.sh8-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.sh8-tag {
font-size: 0.75rem;
color: var(--tx2);
background: #fff;
border: 1px solid var(--bd);
border-radius: 50px;
padding: 4px 12px;
cursor: pointer;
transition: 0.2s;
}
.sh8-tag:hover { border-color: var(--or); color: var(--or); background: var(--orl); }
</style>
<section class="sh8 d-none d-lg-block" id="sh8">
<div class="sh8-blob"></div>
<div class="sh8-wrap">
<div class="sh8-icon">
<i class="fa fa-search"></i>
</div>
<h2 class="sh8-title">ค้นหาข้อมูล<span>ข่าวสาร</span></h2>
<p class="sh8-sub">เข้าถึงข้อมูลราชการได้ง่ายและรวดเร็ว</p>
<?php $form = ActiveForm::begin([
'method' => 'get',
'action' => ['/site/search'],
'options' => ['id' => 'sh8-form', 'class' => 'sh8-bar']
]); ?>
<i class="fa fa-search sh8-ico"></i>
<?= $form->field($model, 'q')->label(false)->textInput(['id' => 'sh8-input', 'placeholder' => 'พิมพ์คำค้นหาที่คุณต้องการ...']) ?>
<?= Html::submitButton('ค้นหา', ['class' => 'sh8-btn']) ?>
<?php ActiveForm::end(); ?>
<div class="sh8-divider">
<div class="sh8-divider-line"></div>
<span class="sh8-divider-txt">คำที่ค้นหาบ่อย</span>
<div class="sh8-divider-line"></div>
</div>
<div class="sh8-tags">
<?php foreach(['ข้อบัญญัติ', 'รายงานการประชุม', 'ประกาศ', 'งบประมาณ', 'คำสั่ง', 'ITA'] as $tag): ?>
<span class="sh8-tag" data-q="<?= $tag ?>"><?= $tag ?></span>
<?php endforeach; ?>
</div>
</div>
</section>
<script>
(function() {
var input = document.getElementById('sh8-input');
var form = document.getElementById('sh8-form');
/* Typing placeholder */
var phrases = [
'พิมพ์คำค้นหา เช่น ข้อบัญญัติ...',
'ค้นหา รายงานการประชุม...',
'ค้นหา ประกาศ หรือ คำสั่ง...',
'ค้นหา งบประมาณประจำปี...',
'ค้นหา เอกสารสำคัญ...',
];
if (input) {
var pi = 0,
ci = 0,
fwd = true,
wait = 0;
(function tick() {
if (document.activeElement === input) return setTimeout(tick, 150);
if (wait-- > 0) return setTimeout(tick, 75);
var t = phrases[pi];
if (fwd) {
input.setAttribute('placeholder', t.slice(0, ++ci));
if (ci >= t.length) {
fwd = false;
wait = 26;
}
setTimeout(tick, 65 + Math.random() * 40);
} else {
input.setAttribute('placeholder', t.slice(0, --ci));
if (ci <= 0) {
fwd = true;
pi = (pi + 1) % phrases.length;
}
setTimeout(tick, 36);
}
})();
}
/* Tag click */
document.querySelectorAll('.sh8-tag').forEach(function(tag) {
tag.addEventListener('click', function() {
if (!input) return;
input.value = this.dataset.q || this.textContent.trim();
input.focus();
setTimeout(function() {
form && form.submit();
}, 160);
});
});
})();
</script>
<!-- End Search Section -->
<!-- Stat Slide
<div class="slide-sec d-none d-lg-block section-bg2">
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php /*
$i = 0;
foreach (CmsSlide::find()->where(['status' => 1])->orderBy(['created_at' => SORT_DESC])->all() as $slide) { ?>
<div class="carousel-item <?= $i == 0 ? 'active' : '' ?>">
<?= Html::img(
Yii::$app->params['backendUrl'] . '/uploads/slides/' . $slide->slide,
['class' => 'd-block w-100']
) ?>
</div>
<?php $i++;
} */ ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
End Slide -->
<!-- Contact Section -->
<style>
.kj {
padding: 80px 0;
background-color: #fffaf5;
position: relative;
overflow: hidden;
}
/* Subtle Thai Pattern Overlay */
.kj::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50 Z' fill='%23FFDBBB' fill-opacity='0.1'/%3E%3C/svg%3E");
background-size: 60px 60px;
opacity: 0.5;
pointer-events: none;
}
.kj-head {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.kj-eyebrow {
color: #c62828; /* Traditional Thai Red */
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 14px;
margin-bottom: 10px;
display: block;
}
.kj-title {
font-size: clamp(28px, 4vw, 36px);
font-weight: 800;
color: #333;
}
.kj-title span {
background: linear-gradient(120deg, #FFC068 0%, #ff8f00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.kj-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 25px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.kj-card {
background: #fff;
border-radius: 20px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
border: 1px solid #FFDBBB;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.kj-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(255, 192, 104, 0.2);
border-color: #FFC068;
}
.kj-card-top {
width: 100%;
}
.kj-ico {
width: 60px;
height: 60px;
background: #FFDBBB;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
transition: all 0.3s ease;
}
.kj-card:hover .kj-ico {
background: #FFC068;
transform: rotate(10deg);
}
.kj-meta .kj-plat {
font-size: 12px;
font-weight: 600;
color: #888;
text-transform: uppercase;
margin-bottom: 5px;
}
.kj-meta .kj-name {
font-size: 18px;
font-weight: 700;
color: #333;
}
.kj-img {
width: 160px;
height: 160px;
background: #f9f9f9;
border: 2px dashed #FFDBBB;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
transition: all 0.3s ease;
}
.kj-card:hover .kj-img {
border-color: #FFC068;
background: #fffef9;
}
.kj-img img {
width: 100%;
height: auto;
}
.kj-ph p {
font-size: 12px;
color: #bbb;
margin: 0;
}
.kj-card-foot {
width: 100%;
margin-top: auto;
}
.kj-action {
display: block;
padding: 10px 20px;
background: #fff8f0;
color: #ff8f00;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
transition: all 0.3s ease;
border: 1px solid #FFDBBB;
}
.kj-card:hover .kj-action {
background: #FFC068;
color: #fff;
border-color: #FFC068;
}
/* Traditional red accent line */
.kj-card::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 40px;
height: 4px;
background: #c62828;
border-radius: 4px 4px 0 0;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.kj-card:hover::after {
width: 80%;
}
</style>
<section class="kj">
<div class="kj-head">
<p class="kj-eyebrow">ช่องทางการติดต่อ</p>
<h2 class="kj-title">ติดต่อ <span>อบต.โคกจาน</span></h2>
</div>
<div class="kj-grid">
<!-- LINE ข่าวสาร -->
<div class="kj-card">
<div class="kj-card-top">
<div class="kj-ico">
<svg width="30" height="30" viewBox="0 0 24 24">
<path fill="#00B900" d="M12 2C6.48 2 2 6.115 2 11.143c0 2.986 1.58 5.638 4.05 7.367V22l3.617-1.99C10.388 20.33 11.178 20.5 12 20.5c5.52 0 10-4.115 10-9.357C22 6.115 17.52 2 12 2z" />
</svg>
</div>
<div class="kj-meta">
<div class="kj-plat">LINE Official</div>
<div class="kj-name">ข่าวสาร อบต.โคกจาน</div>
</div>
</div>
<div class="kj-img">
<div class="kj-ph">
<div class="kj-ph-grid" id="pg1"></div>
<p>สแกนติดตามข่าวสาร</p>
</div>
</div>
<div class="kj-card-foot">
<span class="kj-action">เพิ่มเพื่อน LINE →</span>
</div>
</div>
<!-- LINE ร้องเรียน -->
<div class="kj-card">
<div class="kj-card-top">
<div class="kj-ico">
<svg width="30" height="30" viewBox="0 0 24 24">
<path fill="#00B900" d="M12 2C6.48 2 2 6.115 2 11.143c0 2.986 1.58 5.638 4.05 7.367V22l3.617-1.99C10.388 20.33 11.178 20.5 12 20.5c5.52 0 10-4.115 10-9.357C22 6.115 17.52 2 12 2z" />
</svg>
</div>
<div class="kj-meta">
<div class="kj-plat">LINE Official</div>
<div class="kj-name">ร้องเรียนร้องทุกข์</div>
</div>
</div>
<div class="kj-img">
<div class="kj-ph">
<div class="kj-ph-grid" id="pg2"></div>
<p>สแกนแจ้งปัญหา</p>
</div>
</div>
<div class="kj-card-foot">
<span class="kj-action">แจ้งปัญหาออนไลน์ →</span>
</div>
</div>
<!-- Facebook -->
<div class="kj-card">
<div class="kj-card-top">
<div class="kj-ico">
<svg width="30" height="30" viewBox="0 0 24 24">
<path fill="#1877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
</div>
<div class="kj-meta">
<div class="kj-plat">Facebook Page</div>
<div class="kj-name">อบต.โคกจาน</div>
</div>
</div>
<div class="kj-img">
<div class="kj-fb">
<div class="kj-fb-orb">
<svg width="26" height="26" viewBox="0 0 24 24">
<path fill="#fff" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
</div>
<p style="font-size: 12px; color: #1877F2; margin-top: 10px;">กดถูกใจติดตาม</p>
</div>
</div>
<div class="kj-card-foot">
<span class="kj-action">ไปที่เพจ Facebook →</span>
</div>
</div>
<!-- OSS -->
<div class="kj-card">
<div class="kj-card-top">
<div class="kj-ico" style="font-size:1.5rem;">🏅</div>
<div class="kj-meta">
<div class="kj-plat">กรมส่งเสริมการปกครอง</div>
<div class="kj-name">One Stop Service</div>
</div>
</div>
<div class="kj-img">
<div class="kj-ph">
<div class="kj-ph-grid" id="pg3"></div>
<p>บริการประชาชนออนไลน์</p>
</div>
</div>
<div class="kj-card-foot">
<span class="kj-action">เข้าสู่ระบบบริการ →</span>
</div>
</div>
</div>
</section>
<script>
(function() {
[
['pg1', '#3a8a28'],
['pg2', '#e86000'],
['pg3', '#c99400']
].forEach(([id, c]) => {
const g = document.getElementById(id);
if (!g) return;
for (let i = 0; i < 49; i++) {
const s = document.createElement('s');
s.style.cssText = `background:${c};opacity:${Math.random()>.4?.75:.06}`;
g.appendChild(s);
}
});
})();
</script>
<!-- ข่าวสารอื่นๆ -->
<style>
.news-sec {
padding: 80px 0 !important;
position: relative;
background-color: #fdfaf5; /* Soft background */
}
.news-sec .main-title {
margin-bottom: 50px;
text-align: center;
}
.news-sec .nav-tabs {
border-bottom: none;
justify-content: center;
gap: 12px;
margin-bottom: 40px;
}
.news-sec .nav-item .nav-link {
border: 2px solid #FFDBBB !important;
border-radius: 50px !important;
color: #8a6d3b !important;
background: #fff !important;
padding: 10px 25px !important;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.news-sec .nav-item .nav-link.active {
background: #FFC068 !important;
border-color: #FFC068 !important;
color: #fff !important;
box-shadow: 0 4px 15px rgba(255, 192, 104, 0.4);
transform: translateY(-2px);
}
.news-sec .nav-item .nav-link:hover:not(.active) {
background: #fff8f0 !important;
border-color: #FFC068 !important;
color: #FFC068 !important;
}
.news-sec .tab-content {
background: #fff;
border-radius: 24px;
padding: 40px;
box-shadow: 0 15px 45px rgba(0,0,0,0.04);
border: 1px solid #FFDBBB;
}
.news-sec .submit-property-button {
margin-top: 30px;
}
.news-sec .btn-3, .tourism-section .btn-3 {
background: linear-gradient(135deg, #FFC068 0%, #ff8f00 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 50px !important;
padding: 14px 40px !important;
font-weight: 700 !important;
font-size: 16px !important;
box-shadow: 0 8px 25px rgba(255, 143, 0, 0.25) !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
text-transform: none !important;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Kanit', sans-serif !important;
}
.news-sec .btn-3:hover, .tourism-section .btn-3:hover {
background: #FFDBBB !important; /* Soft Peach on Hover */
color: #8e1d1d !important; /* Thai Red text */
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 35px rgba(255, 192, 104, 0.4) !important;
text-decoration: none !important;
}
</style>
<div class="content-area featured-properties news-sec section-bg5">
<div class="container">
<!-- Main title -->
<div class="main-title">
<?= Html::img(Yii::getAlias('@web') . '/img/title/news.png', ['class' => 'h1 img-fluid rounded', 'width' => 360]) ?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="anouce-tab" data-toggle="tab"
href="#anouce" role="tab" aria-controls="anouce" aria-selected="true">ประชาสัมพันธ์</a>
</li>
<li class="nav-item">
<a class="nav-link" id="activity-tab" data-toggle="tab"
href="#activity" role="tab" aria-controls="activity" aria-selected="false">กิจกรรม
<?= Yii::$app->params['org_short'] ?></a>
</li>
<li class="nav-item">
<a class="nav-link" id="buyding-tab" data-toggle="tab"
href="#buyding" role="tab" aria-controls="buyding"
aria-selected="false">ประกาศจัดซื้อจัดจ้าง</a>
</li>
<li class="nav-item">
<a class="nav-link" id="jobs-tab" data-toggle="tab" href="#jobs"
role="tab" aria-controls="jobs" aria-selected="false">รับสมัครงาน/โอน/ย้าย</a>
</li>
</ul>
<div class="tab-content wow fadeInUp delay-04s" id="myTabContent">
<div class="tab-pane fade show active" id="anouce" role="tabpanel" aria-labelledby="anouce-tab">
<div class="container">
<div class="row wow fadeInUp delay-04s">
<?php Pjax::begin(['id' => 'pjax-news']) ?>
<?= ListView::widget([
'dataProvider' => $dataProviderNews,
'layout' => "{summary}\n{items}\n<div class='mx-auto'>{pager}</div>",
'pager' => ['class' => 'yii\bootstrap4\LinkPager'],
'summary' => false,
'itemView' => '_news',
'options' => [
'class' => 'list-view row'
],
'itemOptions' => [
'tag' => false,
]
]) ?>
<?php Pjax::end() ?>
</div>
<div class="submit-property-button">
<?= Html::a('<i class="fa fa-list-ul"></i> ข่าวประชาสัมพันธ์ทั้งหมด', ['/post/index', 'slug' => Yii::$app->abt->simpleSlug('ข่าวประชาสัมพันธ์'), 'id' => 1], ['class' => 'button btn-3']) ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="activity" role="tabpanel" aria-labelledby="activity-tab">
<div class="container">
<div class="row wow fadeInUp delay-04s">
<?php Pjax::begin(['id' => 'pjax-activity']) ?>
<?= ListView::widget([
'dataProvider' => $dataProviderActivity,
'layout' => "{summary}\n{items}\n<div class='mx-auto'>{pager}</div>",
'pager' => ['class' => 'yii\bootstrap4\LinkPager'],
'summary' => false,
'itemView' => '_activity',
'options' => [
'class' => 'list-view row'
],
'itemOptions' => [
'tag' => false,
]
]) ?>
<?php Pjax::end() ?>
</div>
<div class="submit-property-button">
<?= Html::a('<i class="fa fa-camera"></i> ดูกิจกรรมทั้งหมด', ['/post/index', 'slug' => Yii::$app->abt->simpleSlug('ดูกิจกรรมทั้งหมด'), 'id' => 2], ['class' => 'button btn-3']) ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="buyding" role="tabpanel" aria-labelledby="buyding-tab">
<?php Pjax::begin(['id' => 'pjax-procurement']) ?>
<div class="container">
<?= ListView::widget([
'dataProvider' => $dataProviderProcurement,
'layout' => "{summary}\n{items}\n<div class='mx-auto'>{pager}</div>",
'pager' => ['class' => 'yii\bootstrap4\LinkPager'],
'summary' => false,
'itemView' => '_procurement',
'options' => [
'class' => '',
'tag' => 'ul',
],
'itemOptions' => [
'tag' => 'li',
]
]) ?>
<?php Pjax::end() ?>
<div class="submit-property-button">
<?= Html::a('<i class="fa fa-shopping-cart"></i> ประกาศจัดซื้อจัดจ้างทั้งหมด', ['/post/index', 'slug' => Yii::$app->abt->simpleSlug('ประกาศจัดซื้อจัดจ้างทั้งหมด'), 'id' => 3], ['class' => 'button btn-3']) ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="jobs" role="tabpanel" aria-labelledby="jobs-tab">
<?php Pjax::begin(['id' => 'pjax-jobs']) ?>
<div class="container">
<?= ListView::widget([
'dataProvider' => $dataProviderJob,
'layout' => "{summary}\n{items}\n<div class='mx-auto'>{pager}</div>",
'pager' => ['class' => 'yii\bootstrap4\LinkPager'],
'summary' => false,
'itemView' => '_job',
'options' => [
'class' => '',
'tag' => 'ul',
],
'itemOptions' => [
'tag' => 'li',
]
]) ?>
<?php Pjax::end() ?>
<div class="submit-property-button">
<?= Html::a('<i class="fa fa-user-plus"></i> รับสมัครงาน/โอน/ย้ายทั้งหมด', ['/post/index', 'slug' => Yii::$app->abt->simpleSlug('รับสมัครงาน/โอน/ย้ายทั้งหมด'), 'id' => 6], ['class' => 'button btn-3']) ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ข่าวสารอื่นๆ -->
<!-- ITA PAGE -->
<style>
.ita-section {
padding: 100px 0;
background: linear-gradient(180deg, #fff 0%, #fff8f0 100%);
position: relative;
}
.ita-header {
text-align: center;
margin-bottom: 50px;
}
.ita-badge {
display: inline-block;
padding: 8px 25px;
background: #FFC068;
color: #fff;
border-radius: 50px;
font-weight: 700;
font-size: 14px;
margin-bottom: 15px;
box-shadow: 0 4px 10px rgba(255, 192, 104, 0.3);
}
.ita-title {
font-size: 32px;
font-weight: 800;
color: #333;
margin-bottom: 15px;
}
.ita-title span {
color: #c62828; /* Thai Red Accent */
}
.ita-container {
background: #fff;
border: 2px solid #FFDBBB;
border-radius: 30px;
padding: 50px;
box-shadow: 0 20px 60px rgba(0,0,0,0.03);
position: relative;
z-index: 1;
}
/* Thai Decorative corners */
.ita-container::before, .ita-container::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.2;
pointer-events: none;
}
.ita-container::before {
top: 20px; left: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 L100 0 L100 20 L20 20 L20 100 L0 100 Z' fill='%23FFC068'/%3E%3C/svg%3E");
}
.ita-container::after {
bottom: 20px; right: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100 100 L0 100 L0 80 L80 80 L80 0 L100 0 Z' fill='%23FFC068'/%3E%3C/svg%3E");
}
/* Content styling inside ITA */
.ita-content-wrap {
position: relative;
z-index: 2;
}
</style>
<section class="ita-section">
<div class="container">
<div class="ita-header wow fadeInUp">
<span class="ita-badge">Integrity & Transparency Assessment</span>
<h2 class="ita-title">การประเมินคุณธรรมและความโปร่งใส <span>(ITA)</span></h2>
<div style="width: 60px; height: 4px; background: #FFC068; margin: 0 auto; border-radius: 2px;"></div>
</div>
<div class="wow fadeIn" data-wow-delay="0.2s">
<div class="ita-content-wrap">
<?= CmsPage::findOne(35)->description ?>
</div>
</div>
</div>
</section>
<!-- END ITA PAGE -->