Khác biệt giữa các bản “Bản mẫu:Trang Chính/styles.css”
(Tạo trang mới với nội dung “→‎{{pp|small=yes}}: #mp-topbanner { clear: both; position: relative; box-sizing: border-box; width: 100%; margin-top: 1.2em; min-width: 47em; bo…”)
 
 
(Không hiển thị 177 phiên bản của 3 người dùng ở giữa)
Dòng 1: Dòng 1:
/* {{pp|small=yes}} */
+
#content {
#mp-topbanner {
+
  padding: 0;
clear: both;
+
  border: none;
position: relative;
+
  box-shadow: none;
box-sizing: border-box;
+
  background: transparent;
width: 100%;
+
  margin:14px 13px 0 13px;
margin-top: 1.2em;
+
}
min-width: 47em;
+
.main-page-summary {
border-color: #ddd;
+
  min-height: 125px;
background-color: #f9f9f9;
+
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
white-space: nowrap;
+
  border: 1px solid #E0E0E0;
 +
  border-radius: 3px;
 +
  display: flex;
 +
  align-items: center;
 +
  flex-wrap: wrap;
 +
  padding: 0 20px;
 +
  background-color: white;
 +
}
 +
.main-page-summary ul {
 +
  display: flex;
 +
  flex: 0 0 50%;
 +
  flex-wrap: wrap;
 +
  list-style: none;
 +
  padding: 0;
 +
}
 +
.main-page-summary ul li {
 +
  flex: 0 0 33%;
 +
  font-size: 14px;
 +
  padding: 5px 0;
 
}
 
}
  
.mp-bordered,
+
.main-page-summary ul li img {
.mp-h2,
+
  margin-right: 6px;
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
 
border-width: 1px;
 
border-style: solid;
 
 
}
 
}
  
#mp-topbanner,
+
.main-page .section-title {
.mp-h2,
+
  font-size: 24px;
#mp-left {
+
  font-weight: bold;
color: #000;
+
  padding: 20px 0;
 
}
 
}
  
#mp-welcomecount {
+
.article-1 {
margin: 0.4em;
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/IceAgeEarth.jpg/480px-IceAgeEarth.jpg);
width: 22em;
+
  background-size: cover;
text-align: center;
+
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
  
#mp-welcome {
+
.article-2 {
font-size: 162%;
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Mô_hình_đờn_ca_tài_tử.jpg/320px-Mô_hình_đờn_ca_tài_tử.jpg);
padding: 0.1em;
+
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
  
#mp-free {
+
.article-3 {
font-size: 95%;
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Kesselstein_k.jpg/466px-Kesselstein_k.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
  
#articlecount {
+
.article-4 {
font-size: 85%;
+
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/66/HBV-vi.png');
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
  
#mp-portals {
+
.article-5 {
position: absolute;
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Congress_of_Verona.jpg/320px-Congress_of_Verona.jpg);
right: -1em;
+
  background-size: cover;
top: 50%;
+
  width: 100%;
margin-top: -2.4em;
+
  padding-top: 100%;  
width: 38%;
+
  position: relative;  
min-width: 25em;
 
font-size: 95%;
 
 
}
 
}
  
#mp-portals li {
+
.article-6 {
position: absolute;
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Subvocal_speech_recognition.jpg/320px-Subvocal_speech_recognition.jpg);
left: 0;
+
  background-size: cover;
top: 0;
+
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
  
#mp-portals .portal-hmid {
+
.article-7 {
left: 33%;
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Apollo_AS11-40-5868.jpg/475px-Apollo_AS11-40-5868.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
  
#mp-portals .portal-hright {
+
.article-text {
left: 66%;
+
  padding-bottom: 6px;
 +
  padding-left: 6px;
 +
  position: absolute;
 +
  bottom: 0;
 +
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
 +
  width: calc(100% - 5px);
 
}
 
}
 
+
@media only screen and (max-width: 1100px) {
#mp-portals .portal-vmid {
+
  .welcome-container {
top: 1.6em;
+
    text-align: center;
 +
    flex: 0 0 100%;
 +
  }
 +
  .main-page-summary ul {
 +
    flex: 0 0 100%;
 +
  }
 +
  .main-page-summary ul li {
 +
    text-align: center;
 +
  }
 +
}
 +
/* To make images responsive */
 +
img {
 +
  max-width:100%;
 +
  height:auto;
 +
  vertical-align: 0%;
 +
}
 +
.mobile {
 +
  visibility: hidden;
 +
  display:none;
 +
}
 +
.mobile center a {
 +
  color:#555;
 +
  font-size:large;
 +
  font-weight:bold;
 +
  letter-spacing:4px;
 +
}
 +
/* mobile version */
 +
@media only screen and (max-width: 850px) {
 +
  .desktop {
 +
    visibility: hidden;
 +
    display:none;
 +
  }
 +
  .mobile {
 +
    visibility: visible;
 +
    display:initial;
 +
  }
 +
}
 +
.group-layout {
 +
  display: flex;
 +
  flex-wrap: wrap;
 +
}
 +
.group-layout .group {
 +
  flex: 0 0 calc(50% - 10px);
 +
  margin-bottom: 20px;
 +
}
 +
.group-layout .group:nth-child(2n+1) {
 +
  margin-right: 20px;
 +
}
 +
@media only screen and (max-width: 550px) {
 +
  .group-layout .group {
 +
    flex: 0 0 100%;
 +
  }
 +
}
 +
.q1 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Isotoxal_octagon_rhombic_dissection.jpg/480px-Isotoxal_octagon_rhombic_dissection.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q2 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/CSIRO_ScienceImage_2212_CSIRO_Parkes_Telescope_This_photo_taken_in_1969_shows_the_telescope_as_it_was_around_the_time_of_the_first_manned_Moon_landing.jpg/504px-CSIRO_ScienceImage_2212_CSIRO_Parkes_Telescope_This_photo_taken_in_1969_shows_the_telescope_as_it_was_around_the_time_of_the_first_manned_Moon_landing.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q3 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Aerogel_nasa.jpg/479px-Aerogel_nasa.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q4 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Gabelschwanz%2C_Raupe_in_Schreckstellung_im_Geo-Naturpark_Bergstraße-Odenwald.jpg/480px-Gabelschwanz%2C_Raupe_in_Schreckstellung_im_Geo-Naturpark_Bergstraße-Odenwald.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q5 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Aragonite_crystal_-_Los_Molinillos%2C_Ceunca%2C_Spain_-_4x3.6x3.5cm_100g.jpg/480px-Aragonite_crystal_-_Los_Molinillos%2C_Ceunca%2C_Spain_-_4x3.6x3.5cm_100g.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q6 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Part_of_the_world_%288483222118%29.jpg/600px-Part_of_the_world_%288483222118%29.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q7 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Vietnam%27s_Mekong_Delta_ESA219993.jpg/493px-Vietnam%27s_Mekong_Delta_ESA219993.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q8 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Amdahl_5860_Computer_Air_Cooled_Logic_processor_die.jpg/480px-Amdahl_5860_Computer_Air_Cooled_Logic_processor_die.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q9 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Hydroponic_Farming.jpg/480px-Hydroponic_Farming.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;
 +
}
 +
.q10 {
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Gordon_River%2C_Franklin-Gordon_Wild_Rivers_National_Park_--_user_aliceae.jpg/480px-Gordon_River%2C_Franklin-Gordon_Wild_Rivers_National_Park_--_user_aliceae.jpg);
 +
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q11 {
#mp-portals .portal-vbot {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Hawksbill_turtle_at_Elphinstone_Reef%2C_Red_Sea%2C_Egypt_%2836522421716%29.jpg/480px-Hawksbill_turtle_at_Elphinstone_Reef%2C_Red_Sea%2C_Egypt_%2836522421716%29.jpg);
top: 3.2em;
+
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q12 {
.portal-hright.portal-vbot {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Ritalin-SR-20mg-1000x1000.jpg/480px-Ritalin-SR-20mg-1000x1000.jpg);
font-weight: bold;
+
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q13 {
#mp-banner {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Arduino_Due_Circuit_Board.jpg/480px-Arduino_Due_Circuit_Board.jpg);
margin-top: 4px;
+
  background-size: cover;
padding: 0.5em;
+
  width: 100%;
background-color: #fffaf5;
+
  padding-top: 100%;  
border-color: #f2e0ce;
+
  position: relative;  
 
}
 
}
 
+
.q14 {
.mp-h2,
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Chartist_Bridge_%28detail%29_-_geograph.org.uk_-_871813.jpg/480px-Chartist_Bridge_%28detail%29_-_geograph.org.uk_-_871813.jpg);
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
+
  background-size: cover;
margin: 0.5em;
+
  width: 100%;
padding: 0.2em 0.4em;
+
  padding-top: 100%;  
font-size: 120%;
+
  position: relative;  
font-weight: bold;
 
font-family: inherit;
 
 
}
 
}
 
+
.q15 {
h2.mp-h2::after { /* Remove borders in Timeless */
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cyprus_airways_a330-200_5b-dbs_arp.jpg/480px-Cyprus_airways_a330-200_5b-dbs_arp.jpg);
border: none;
+
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q16 {
.mp-later {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/11-09-fotofluege-cux-allg-25a.jpg/480px-11-09-fotofluege-cux-allg-25a.jpg);
font-size: 85%;
+
  background-size: cover;
font-weight: normal;
+
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q17 {
#mp-upper {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/14/Antron_Fleece.jpg);
width: 100%;
+
  background-size: cover;
margin-top: 4px;
+
  width: 100%;
margin-bottom: 0;
+
  padding-top: 100%;  
border-spacing: 0;
+
  position: relative;  
border-collapse: separate;
 
 
}
 
}
 
+
.q18 {
#mp-upper .mid-table {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Fountain_pen_writing_%28literacy%29_%28cropped%29.jpg/480px-Fountain_pen_writing_%28literacy%29_%28cropped%29.jpg);
border-color: transparent;
+
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q19 {
#mp-left {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Caligraphy.jpg/489px-Caligraphy.jpg);
width: 55%;
+
  background-size: cover;
border-color: #cef2e0;
+
  width: 100%;
background: #f5fffa;
+
  padding-top: 100%;  
 +
  position: relative;  
 
}
 
}
 
+
.q20 {
#mp-right {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Mooncakes_in_Malaysia.jpg/481px-Mooncakes_in_Malaysia.jpg);
width: 45%;
+
  background-size: cover;
border-color: #cedff2;
+
  width: 100%;
background: #f5faff;
+
  padding-top: 100%;  
 +
  position: relative;  
 
}
 
}
 
+
.q21 {
#mp-left,
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Dragon_Makara_%28Culture_Cham%2C_Musée_Guimet%29_%285174382704%29.jpg/480px-Dragon_Makara_%28Culture_Cham%2C_Musée_Guimet%29_%285174382704%29.jpg);
#mp-right {
+
  background-size: cover;
padding: 0;
+
  width: 100%;
vertical-align: top;
+
  padding-top: 100%;  
 +
  position: relative;  
 
}
 
}
 
+
.q22 {
#mp-left .mp-h2 {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Moáis.jpg/480px-Moáis.jpg);
background: #cef2e0;
+
  background-size: cover;
border-color: #a3bfb1;
+
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q23 {
#mp-right .mp-h2 {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Krapina_3._Homo_neanderthalensis.jpg/480px-Krapina_3._Homo_neanderthalensis.jpg);
background: #cedff2;
+
  background-size: cover;
border-color: #a3b0bf;
+
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q24 {
#mp-tfa,
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Inflations_-_Hungarian_paper_money_1946.jpg/480px-Inflations_-_Hungarian_paper_money_1946.jpg);
#mp-dyk,
+
  background-size: cover;
#mp-itn,
+
  width: 100%;
#mp-otd,
+
  padding-top: 100%;
#mp-other-lower > div {
+
  position: relative;  
padding: 0.1em 0.6em;
 
 
}
 
}
 
+
.q25 {
#mp-dyk-h2,
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3c/L%E1%BB%A3n_ti%E1%BA%BFt_ki%E1%BB%87m.jpg);
#mp-otd-h2 {
+
  background-size: cover;
clear: both;
+
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q26 {
#mp-middle {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/思想者塑像.JPG/480px-思想者塑像.JPG);
margin-top: 4px;
+
  background-size: cover;
border-color: #f2cedd;
+
  width: 100%;
background: #fff5fa;
+
  padding-top: 100%;  
 +
  position: relative;  
 
}
 
}
 
+
.q27 {
#mp-middle,
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Travel-Burma-yangon-shwedagon-pagoda_cropped.jpg/480px-Travel-Burma-yangon-shwedagon-pagoda_cropped.jpg);
#mp-lower,
+
  background-size: cover;
#mp-other-lower {
+
  width: 100%;
overflow: auto;
+
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q28 {
#mp-tfl-h2 {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/2013.01.26.112649_Flags_Centennial_Olympic_Park_Atlanta_Georgia.jpg/640px-2013.01.26.112649_Flags_Centennial_Olympic_Park_Atlanta_Georgia.jpg);
background: #f2cedd;
+
  background-size: cover;
border-color: #bfa3af;
+
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q29 {
#mp-tfl {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Duyet_binh.jpg/640px-Duyet_binh.jpg);
padding: 0.3em 0.7em;
+
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q30 {
#mp-lower {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Judiciary_logo.jpg/532px-Judiciary_logo.jpg);
margin-top: 4px;
+
  background-size: cover;
border-color: #ddcef2;
+
  width: 100%;
background: #faf5ff;
+
  padding-top: 100%;  
 +
  position: relative;  
 
}
 
}
 
+
.q31 {
#mp-tfp-h2 {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Miniature_ivory_phrenological_head%2C_Europe_Wellcome_L0057706.jpg/477px-Miniature_ivory_phrenological_head%2C_Europe_Wellcome_L0057706.jpg);
background: #ddcef2;
+
  background-size: cover;
border-color: #afa3bf;
+
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q32 {
#mp-tfp {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Prunksaal_Hofbibliothek_Wien_2009_PD_20091008_047.JPG/640px-Prunksaal_Hofbibliothek_Wien_2009_PD_20091008_047.JPG);
margin: 0.1em 0.4em 0.6em;
+
  background-size: cover;
 +
  width: 100%;
 +
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q33 {
#mp-other-lower {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Mặt_nạ%2C_rạp_Hồng_Hà%2C_Hà_Nội_001.JPG/640px-Mặt_nạ%2C_rạp_Hồng_Hà%2C_Hà_Nội_001.JPG);
padding: 0;
+
  background-size: cover;
border-color: #e2e2e2;
+
  width: 100%;
margin-top: 4px;
+
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q34 {
#mp-dyk,
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/To_Ngoc_Van_thieu_nu_ben_hoa_hue.jpg/439px-To_Ngoc_Van_thieu_nu_ben_hoa_hue.jpg);
#mp-otd,
+
  background-size: cover;
#mp-other-lower {
+
  width: 100%;
padding-bottom: 0.5em;
+
  padding-top: 100%;
 +
  position: relative;  
 
}
 
}
 
+
.q35 {
#mp-other-lower .mp-h2 {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Krustenbraten_mit_Dunkelbiersoße.jpg/640px-Krustenbraten_mit_Dunkelbiersoße.jpg);
background: #eee;
+
  background-size: cover;
border-color: #ddd;
+
  width: 100%;
color: #222;
+
  padding-top: 100%;  
 +
  position: relative;  
 
}
 
}
 
+
.q36 {
@media (max-width: 875px) {
+
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/5-digit_Wordlock_locked_with_combination_Basin_and_hardened_shackle.jpg/478px-5-digit_Wordlock_locked_with_combination_Basin_and_hardened_shackle.jpg);
+
  background-size: cover;
body.skin--responsive #mp-welcomecount {
+
  width: 100%;
width: auto;
+
  padding-top: 100%;  
}
+
  position: relative;  
 
 
body.skin--responsive #mp-topbanner {
 
min-width: 0;
 
white-space: normal;
 
}
 
 
body.skin--responsive #mp-portals {
 
display: block;
 
position: static;
 
width: auto;
 
min-width: 0;
 
text-align: center;
 
border-top: 1px solid #ddd;
 
padding: 0.4em 0;
 
margin: 0 0.4em;
 
}
 
 
body.skin--responsive #mp-portals li {
 
position: static;
 
display: inline;
 
padding: 0 5px;
 
}
 
 
body.skin--responsive #mp-topbanner .portal-hright {
 
white-space: nowrap;
 
}
 
 
body.skin--responsive table,
 
body.skin--responsive tr,
 
body.skin--responsive td,
 
body.skin--responsive tbody {
 
display: block !important;
 
width: 100% !important;
 
box-sizing: border-box;
 
}
 
 
 
body.skin--responsive #mp-tfp tr:first-child td:first-child a {
 
text-align: center;
 
display: table;
 
margin: 0 auto;
 
}
 
 
}
 
}
 +
.p1 {padding: 0px 10px 0px 10px;}
 +
.p2 {padding-left: 10px;line-height:80%;}
 +
.p3 {color:white;text-align: justify;padding-left: 10px;padding-right: 16px;}

Bản hiện tại lúc 23:38, ngày 10 tháng 7 năm 2022

#content { 	
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  margin:14px 13px 0 13px;
}
.main-page-summary {
  min-height: 125px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #E0E0E0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px;
  background-color: white;
}
.main-page-summary ul {
  display: flex;
  flex: 0 0 50%;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.main-page-summary ul li {
  flex: 0 0 33%;
  font-size: 14px;
  padding: 5px 0;
}

.main-page-summary ul li img {
  margin-right: 6px;
}

.main-page .section-title {
  font-size: 24px;
  font-weight: bold;
  padding: 20px 0;
}

.article-1 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/IceAgeEarth.jpg/480px-IceAgeEarth.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}

.article-2 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Mô_hình_đờn_ca_tài_tử.jpg/320px-Mô_hình_đờn_ca_tài_tử.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}

.article-3 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Kesselstein_k.jpg/466px-Kesselstein_k.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}

.article-4 {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/66/HBV-vi.png');
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}

.article-5 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Congress_of_Verona.jpg/320px-Congress_of_Verona.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}

.article-6 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Subvocal_speech_recognition.jpg/320px-Subvocal_speech_recognition.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}

.article-7 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Apollo_AS11-40-5868.jpg/475px-Apollo_AS11-40-5868.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}

.article-text {
  padding-bottom: 6px;
  padding-left: 6px;
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  width: calc(100% - 5px);
}
@media only screen and (max-width: 1100px) {
  .welcome-container {
    text-align: center;
    flex: 0 0 100%;
  }
  .main-page-summary ul {
    flex: 0 0 100%;
  }
  .main-page-summary ul li {
    text-align: center;
  }
}
/* To make images responsive */
img {
  max-width:100%;
  height:auto;
  vertical-align: 0%;
}
.mobile {
  visibility: hidden;
  display:none;
}
.mobile center a {
  color:#555;
  font-size:large;
  font-weight:bold;
  letter-spacing:4px;
}
/* mobile version */
@media only screen and (max-width: 850px) {
  .desktop {
    visibility: hidden;
    display:none;
  }
  .mobile {
    visibility: visible;
    display:initial;
  }
}
.group-layout {
  display: flex;
  flex-wrap: wrap;
}
.group-layout .group {
  flex: 0 0 calc(50% - 10px);
  margin-bottom: 20px;
}
.group-layout .group:nth-child(2n+1) {
  margin-right: 20px;
}
@media only screen and (max-width: 550px) {
  .group-layout .group {
    flex: 0 0 100%;
  }
}
.q1 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Isotoxal_octagon_rhombic_dissection.jpg/480px-Isotoxal_octagon_rhombic_dissection.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q2 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/CSIRO_ScienceImage_2212_CSIRO_Parkes_Telescope_This_photo_taken_in_1969_shows_the_telescope_as_it_was_around_the_time_of_the_first_manned_Moon_landing.jpg/504px-CSIRO_ScienceImage_2212_CSIRO_Parkes_Telescope_This_photo_taken_in_1969_shows_the_telescope_as_it_was_around_the_time_of_the_first_manned_Moon_landing.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q3 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Aerogel_nasa.jpg/479px-Aerogel_nasa.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q4 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Gabelschwanz%2C_Raupe_in_Schreckstellung_im_Geo-Naturpark_Bergstraße-Odenwald.jpg/480px-Gabelschwanz%2C_Raupe_in_Schreckstellung_im_Geo-Naturpark_Bergstraße-Odenwald.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q5 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Aragonite_crystal_-_Los_Molinillos%2C_Ceunca%2C_Spain_-_4x3.6x3.5cm_100g.jpg/480px-Aragonite_crystal_-_Los_Molinillos%2C_Ceunca%2C_Spain_-_4x3.6x3.5cm_100g.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q6 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Part_of_the_world_%288483222118%29.jpg/600px-Part_of_the_world_%288483222118%29.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q7 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Vietnam%27s_Mekong_Delta_ESA219993.jpg/493px-Vietnam%27s_Mekong_Delta_ESA219993.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q8 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Amdahl_5860_Computer_Air_Cooled_Logic_processor_die.jpg/480px-Amdahl_5860_Computer_Air_Cooled_Logic_processor_die.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q9 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Hydroponic_Farming.jpg/480px-Hydroponic_Farming.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q10 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Gordon_River%2C_Franklin-Gordon_Wild_Rivers_National_Park_--_user_aliceae.jpg/480px-Gordon_River%2C_Franklin-Gordon_Wild_Rivers_National_Park_--_user_aliceae.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q11 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Hawksbill_turtle_at_Elphinstone_Reef%2C_Red_Sea%2C_Egypt_%2836522421716%29.jpg/480px-Hawksbill_turtle_at_Elphinstone_Reef%2C_Red_Sea%2C_Egypt_%2836522421716%29.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q12 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Ritalin-SR-20mg-1000x1000.jpg/480px-Ritalin-SR-20mg-1000x1000.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q13 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Arduino_Due_Circuit_Board.jpg/480px-Arduino_Due_Circuit_Board.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q14 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Chartist_Bridge_%28detail%29_-_geograph.org.uk_-_871813.jpg/480px-Chartist_Bridge_%28detail%29_-_geograph.org.uk_-_871813.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q15 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cyprus_airways_a330-200_5b-dbs_arp.jpg/480px-Cyprus_airways_a330-200_5b-dbs_arp.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q16 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/11-09-fotofluege-cux-allg-25a.jpg/480px-11-09-fotofluege-cux-allg-25a.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q17 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/14/Antron_Fleece.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q18 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Fountain_pen_writing_%28literacy%29_%28cropped%29.jpg/480px-Fountain_pen_writing_%28literacy%29_%28cropped%29.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q19 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Caligraphy.jpg/489px-Caligraphy.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q20 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Mooncakes_in_Malaysia.jpg/481px-Mooncakes_in_Malaysia.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q21 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Dragon_Makara_%28Culture_Cham%2C_Musée_Guimet%29_%285174382704%29.jpg/480px-Dragon_Makara_%28Culture_Cham%2C_Musée_Guimet%29_%285174382704%29.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q22 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Moáis.jpg/480px-Moáis.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q23 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Krapina_3._Homo_neanderthalensis.jpg/480px-Krapina_3._Homo_neanderthalensis.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q24 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Inflations_-_Hungarian_paper_money_1946.jpg/480px-Inflations_-_Hungarian_paper_money_1946.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q25 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3c/L%E1%BB%A3n_ti%E1%BA%BFt_ki%E1%BB%87m.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q26 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/思想者塑像.JPG/480px-思想者塑像.JPG);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q27 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Travel-Burma-yangon-shwedagon-pagoda_cropped.jpg/480px-Travel-Burma-yangon-shwedagon-pagoda_cropped.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q28 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/2013.01.26.112649_Flags_Centennial_Olympic_Park_Atlanta_Georgia.jpg/640px-2013.01.26.112649_Flags_Centennial_Olympic_Park_Atlanta_Georgia.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q29 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Duyet_binh.jpg/640px-Duyet_binh.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q30 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Judiciary_logo.jpg/532px-Judiciary_logo.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q31 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Miniature_ivory_phrenological_head%2C_Europe_Wellcome_L0057706.jpg/477px-Miniature_ivory_phrenological_head%2C_Europe_Wellcome_L0057706.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q32 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Prunksaal_Hofbibliothek_Wien_2009_PD_20091008_047.JPG/640px-Prunksaal_Hofbibliothek_Wien_2009_PD_20091008_047.JPG);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q33 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Mặt_nạ%2C_rạp_Hồng_Hà%2C_Hà_Nội_001.JPG/640px-Mặt_nạ%2C_rạp_Hồng_Hà%2C_Hà_Nội_001.JPG);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q34 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/To_Ngoc_Van_thieu_nu_ben_hoa_hue.jpg/439px-To_Ngoc_Van_thieu_nu_ben_hoa_hue.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q35 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Krustenbraten_mit_Dunkelbiersoße.jpg/640px-Krustenbraten_mit_Dunkelbiersoße.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.q36 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/5-digit_Wordlock_locked_with_combination_Basin_and_hardened_shackle.jpg/478px-5-digit_Wordlock_locked_with_combination_Basin_and_hardened_shackle.jpg);
  background-size: cover;
  width: 100%;
  padding-top: 100%; 
  position: relative; 
}
.p1 {padding: 0px 10px 0px 10px;}
.p2 {padding-left: 10px;line-height:80%;}
.p3 {color:white;text-align: justify;padding-left: 10px;padding-right: 16px;}